Adding custom fonts to React Native

The native way

Adding custom fonts to React Natiev can be tricky. Most guides suggest adding fonts via the react-native link command, which rarely works. If it doesn't work, you are just stuck with no fonts. Luckily, there is an alternative!

Adding the fonts to each native environment.

iOS

Start by opening XCode via the ios/<project>.xcworkspace file. Then you simply drag the .ttf font file into the project in XCode, see image. d373ed5c-a36b-46fe-9bd8-bf49700072be.png

In the right panel in XCode, make sure that the Target membership is checked for your apps target. Check all that apply.

Read more...

Image of founer

React Navigation CheatSheet

navigation.navigate('screenName')

navigation.navigate('screenName', {someParam: param})

Can be accessed by the hook:

const route = useRoute();
const someParam = route.params?.someParam

When navigating down in a stack, the merge option can be applied to only override the params that have the same name.

navigation.navigate('screenName', {
	screen: 'innerScreen',
    merge: true,
})

// or

navigation.navigate({
	screen: 'screenName',
	merge: true
})

If you want to navigate into another stack, and you want to have the navigation stack in a specifik order then you can navigate with the option initial.

navigation.navigate('screenName', {
	screen: 'innerScreen',
    initial: false,

Read more...

Image of founer

Generating Screenshots for iOS with Fastlane

Fastlane is a very useful tool for automating everything around app development for iOS and Android. It works really well with React Native as well, altough it is not very well documented. Therefor this is supposed to be a "complete" guide for generating screenshots with fastlane for iOS. Please feel free to contact me if something is missing.

The guide will assume that you have fastlane already installed and initialized in your project.

Setting up fastlane

Start by initializing snapshot in firebase. This step only creates a snapfile and Snapshothelper.swift in your fastlane folder.

fastlane snapshot init

The snapfile will look have some of the fields below. This is however the configuration I prefer.

Read more...

Image of founer

Sending Notifications in React Native

Sending notifications can be tricky. Especially now that react-native-firebase still doesn't support notifications in theirr latest version.

This guide is written to help you setup notifications with firebase using react-native-firebase and push-notification-ios

Setup app

react-native init appName

Install the dependencies

yarn add react-native-push-notification
yarn add @react-native-community/push-notification-ios
cd ios && pod install && cd ..

Open the workspace in xcode from the terminal

open ios/appNam.xcworkspace

Go to your main target 'appName' and set a bundle identifier and a Team.

Add Push Notifications and Background Modes capabilities.

Read more...

Image of founer

Generator for new React Native projects

Starting a new project is always fun, but I ooften find myself spending well over an hour setting up my project and writing the hello world for the new application.

The solution: Ignite.

Ignite CLI

Ignite CLI is a tool for generating react native boilerplates with one simple command you have a project setup with all the folders and navigators you might need.

Ignite does provide two different boilerplates that can be used when creating a project, depending on what tools you prefer.

To get started simply install the ignite CLI

yarn global add ignite-cli

And create your app with:

ignite new MyAppName

You can read more about Ignite and their stock boilerplates here.

Read more...

Image of founer

Intro

Welcome to my blog

Here I plan to write about topics which I struggle with. I could be everything from a very odd error that I have encountered and how to solve it to some function that was poorly documented.

Let's get started!

Read more...

Image of founer