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
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.
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
React Native’s Animated library reimplemented. react-native-reanimated - npm
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
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.
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.
We use it to sort only certain employees on a list. react-native-sortable-list - npm
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
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
- How to make your React Native app respond gracefully when the keyboard pops up
- Cómo configurar una app cliente de Firebase Cloud Messaging en iOS | Firebase
- GitHub - JesperLekland/react-native-svg-charts: 📈 One library to rule all charts for React Native 📊
- Understanding React Native flexbox layout – The React Native Log – Medium
- GitHub - joltup/rn-fetch-blob: A project committed to making file access and data transfer easier, efficient for React Native developers.
- GitHub - rebeccahughes/react-native-device-info: Device Information for React Native iOS and Android
- Best Practices of Implementing Touch ID within Financial Apps
Cover Photo by Dino Reichmuth on Unsplash