During the last year, our team have been developing with React Native for several applications. During this time we have found ourselves stuck in bugs and bad practices several times, here’s how we fought them to successfully deliver stable and good-looking products.

We have had to try many different React Native npm third party packages for different purposes, which could be considered to be fortunate or unfortunate, in order to find the ones that were useful for us. In this post I’ll explain our packages decisions, or simply guide you in tasks like adding icons, changing fonts or saving in iOS Keychain.

Adding Custom Fonts

Let’s start with adding fonts. In this case you don’t need any special package. It’s very simple to add new fonts to our iOS and Android projects.

In order to add our awesome custom fonts, which the project designer has chosen for the project, you only need to follow several simple steps, explained in detail in this post: React Native Custom Fonts

App Icon

Like the previous section, adding icon doesn’t require any special package, but you have to follow some steps and use a couple of tools in order to generate the icon properly for every platform.

There are tools for every OS icon guidelines, which helps us to generate icons with the correct shape and size.

Follow these steps to set up the app icon properly.

Animations

For animations, we have two options: Do it with React Native Animations API, or use a third party package that makes animating easier in some cases. Although, this depends on the animation complexity which can affect your performance.

Advice: If your animations can be reached using the React Native API, don’t use any third party packages; The app will be lighter and faster.

Sometimes React Native’s Animated API doesn’t fulfil design needs, so to make it possible we use the next third party animation package.

Lottie - Airbnb Animations Library

React Native wrapper for Lottie library. lottie-react-native - npm

Reanimated

React Native’s Animated library reimplemented. react-native-reanimated - npm

Launch Screen(iOS)

To create and incorporate a customised Launch Screen we can use some of the tools used to add the icon of the application, but really, it is not necessary.

Otherwise, there’s a manual way to set up our custom Launch Screen that will work for any device: React Native iOS Splash Screen Using Xcode Launch Screen

Icons

Either for icons of known libraries, or for custom icons, the most famous and most used library is react-native-vector-icons - npm. This package allows you to use icons from well-known icon sets:

  • AntDesign by AntFinance (297 icons)
  • Entypo by Daniel Bruce (411 icons)
  • EvilIcons by Alexander Madyankin & Roman Shamin (v1.10.1, 70 icons)
  • Feather by Cole Bemis & Contributors (v4.7.0, 266 icons)
  • FontAwesome by Dave Gandy (v4.7.0, 675 icons)
  • FontAwesome 5 by Fonticons, Inc. (v5.5.0, 1409 (free) 4566 (pro) icons)
  • Foundation by ZURB, Inc. (v3.0, 283 icons)
  • Ionicons by Ben Sperry (v4.2.4, 696 icons)
  • MaterialIcons by Google, Inc. (v3.0.1, 932 icons)
  • MaterialCommunityIcons by MaterialDesignIcons.com (v2.8.94, 2894 icons)
  • Octicons by Github, Inc. (v8.0.0, 177 icons)
  • Zocial by Sam Collins (v1.0, 100 icons)
  • SimpleLineIcons by Sabbir & Contributors (v2.4.1, 189 icons

You will need an IcoMoon account to add a custom icon set.

List/Sortable List

In React Native, working with Lists is very simple and easy to implement. Although, there are some elements, effects or behaviours that are missing, such as ordering, filtering, drag and drop, etc.

For example, your app has the feature to sort a list or change order using drag and drop. For those cases there is a small package that can help you to achieve this.

Sortable List

We use it to sort only certain employees on a list. react-native-sortable-list - npm

Storage

When it comes to storage there are two different approaches. Secure storage and local storage. The main difference is that sensitive data should always be stored in Keychain/Keystore storage.

Accessing Local Storage isn’t difficult at all. You can do it using AsyncStorage from React Native.

In order to store sensitive data there are several packages able to access iOS keychain. After trying different options, we decided to stick with react-native-keychain (same author as react-native-vector-icons). This is very simple to implement. react-native-keychain - npm

Authentication Using Biometrics(iOS)

This feature was a challenge. We tried to implement TouchID and FaceID authentication for iOS devices and also to support Passcode, in case biometrics authentication failed. As with the previous case with Storage, we did some research just to find react-native-touch-id.

react-native-touch-id - npm

Even though we recommend it, you must know that the authentication flow is not like the one you probably are used to. After using the TouchID and failing a couple of times the Passcode option appears. If you press this option the application will crash. We contacted with the authors and opened an issue about it.

Interesting links that have helped us in our React Native journey

Cover Photo by Dino Reichmuth on Unsplash