My journey with React Native, so far…
How to start off on the right foot
React Native is a powerful library which, allied with the power of React, allows you to create native mobile apps from scratch. But how powerful can it get? As a front end developer who migrated from React to React Native I want to share my personal experience and personal codebase.
DISCLAIMER: Because I am going to talk about several topics I won’t go into a lot of detail regarding some of them. Probably in other stories
🤔 Where do I come from?
I have a College background in the branch of multimedia, programming, and social sciences. Having since my Major’s degree started to focus mostly on programming. With already some experience with other frameworks, such as Angular, I have, since the end of 2015, started using React to start developing web apps and services and every time I had the opportunity to develop a mobile app I always chose one of two approaches:
- The native one with Java in Android Studio
- The hybrid one with Ionic.
This was until the very beginning of this year since I joined my current job’s workforce and started to dig deep in React Native.
I am currently working at Ubiwhere, a SmartCity oriented Portuguese company based in Aveiro, Portugal. Ubiwhere’s commitment is focused on creating smart and sustainable solutions in numerous areas such as tourism, energy, mobility and more. Assuming you are interested in some of the mobile apps developed in Ubiwhere, you can check them out at Google Play Store or App Store.
😄 Getting straight to the point
So for all of you out there who are starting this same journey as I did and those who keep a keen interest in React and mobile app development, I hope this can shed some light over some manners related on how you can start building your kick-ass apps without the consequences of choosing some libraries/frameworks/API’s to start with. I am going to explore some of the technologies which have worked out for me and explain why I decided to choose some over others. Of course, I don’t mean that the technologies I decided not to use are bad, but in the context of my projects I found out others were of better help.
Let’s imagine we are going to develop an app with the following features:
- Be fast when navigating, maintaining both animations and a complex navigation schema
- Persist data using a storage system, in this case, React Native’s Async Storage
- Have a state management tool
- Fast and easily deployed, both for development and production
If you are familiar with React you already know how to start off, let’s say you follow react native’s getting started guide configure your AndroidStudio, xcode and so on and then create your app with the react-native-cli, which you can install globally using node package manager.
$ npm install -g react-native-cli$ react-native init KickAssProject
So what now? We certainly have something to start with, I mean, we can create some screens with react-native’s API and we can start playing around with some interactions and directly test in our phone or emulator, but you might wonder now, how do I deal with navigations? How can I manage my states and persist data in this application?
Well, fortunately, React Native comes packed with solutions, unfortunately, they won’t solve all our problems.
I have used many different solutions and my stack currently looks like something like this:
- react-native-navigation (Native platform navigation)
- react-redux (state management)
- redux
- redux-saga (Side effect management for our Screens’ logic)
- redux-thunk (Allows us to write async logic)
- redux-persist (Allows to persist data and rehydrate our store)
- @react-native-community/async-storage
- axios
- lodash
- react-native-animatable (Will ease the pain of dealing with animations using React Native)
❓ Why React Native Navigation and how was it integrated with redux?
There are a few choices regarding navigation. Two of them are React Navigation and React Native Navigation (I would probably risk saying they are the most commonly used). React Navigation, for those who don’t know, was born from React Native’s community and is recommended by React native’s team. It is a very cool way of starting your projects if you come from a React background, mostly because it is very easy to configure and the navigation is completely handled with your app’s javascript thread, well… almost completely, except for some touch events or animations, but more of this for another time. The problem with React Navigation comes when you want to keep your app performant. When having a somewhat complex navigation system your app’s frame rate will start dropping, and that is something we don’t want if we are worried about user experience and if we want to keep our users engaged in our super dynamic and full of cool animations app.
React Native Navigation is a 100% native solution and every screen’s thread is handled individually as if every time you open a new screen you were instantiating a new app, therefore increasing your app’s performance. This becomes more obvious when integrating it with redux.
I chose React Native Navigation over React Navigation because I prefer giving our users a good experience when using our apps and a feeling of dynamism created by the increase in performance.
This option comes with its pros but also with its cons because React Native Navigation can be a pain in the… I mean, rather complicated to get started with… But trust me! It’s definitely worth the effort!
Before speaking about Redux I would like to add that when dealing with data persistence, especially if you are going to log in users and save access tokens, or other important settings or data, Redux-Persist is very helpful! It has some details worth noticing when it comes to its inner workings. But I would like to save this topic for maybe another time.
Redux Sagas is a Redux middleware which is also very worth using because it will help you organize and manage your app’s logic, and by logic I mean state management and data fetching.
When connecting your app screens with React Native Navigation it is going to look like something like this:
Navigation.registerComponent(myScreenComponent’s name”, () => MyWrapper(myScreenComponent, “myScreenComponent’s name”))
Navigation.registerComponent(“myOtherScreenOComponent’s name”, () => MyWrapper(myOtherScreenComponent, “myOtherScreenOComponent’s name”))
So this means that for every screen we are going to register it’s own Redux store provider, that’s what that Wrapper is for. The wrapper shown above as ‘MyWrapper’ abstracts Redux, Redux-Persist, and Redux-Saga’s connection with our ScreenComponents.
Do you now understand better why every Screen is going to be dealt with individually? Every time a screen is mounted it’s Provider is instantiated and the previous one destroyed (with the exception of modals or overlays) … So you wonder, how do we persist data between Screens or when navigation between Screens? Well, there are two ways:
- We pass our data as props when using React Native Navigations’s navigation methods
- We save that data with the help of Redux-Persist
It’s up to you which one is better. In the end, it always depends on the context.
Another cool alternative for state management is Kea, I vividly recommend it if you want to speed up your apps development process. It is easy to manage and configure and it organizes your component’s logic in a very logical and accessible way. Unfortunately, because with React Native Navigation every Screen component will have its own store provider, Kea’s integrations becomes a little buggy.
✏️ Styles and animations
Because React Native doesn’t rely on CSS stylings is created using React Native Stylesheets, which does it’s best to mimic CSS stylesheets.
If you are you are familiar with Styled Components, they can also be used, although I have noticed that, especially when used alongside Formik, it has some performance drawbacks. Honestly, in comparison with React Native’s StyleSheets, it doesn’t really give you any added value. But it is still very awesome for web development! Therefore and because for animations in React native I use other libraries, I prefer to go with React Native’s Stylesheets for mobile development.
Regarding animations, if you having a lot of trouble understanding how React Native deals with animations using its own API, I recommended using react-native-animatable! It is simply awesome, helped me save a lot of time and is actively maintained. And using the native driver for animations has never been so easy to give that performance boost. So far for me, imagination has been the limit. I can’t reference any major drawbacks.
🚀 Fastlane
Building your app can be a very excruciating task, especially if you are building both for iOS and Android. Not only it is very time consuming but it is also a task very prone to human error and having the wrong configuration or the wrong dependency will slow you down a lot.
Very recently I have heard about Fastlane and it has since then changed my life. It has a lot of features and its main task is to help you automate your app deployment for different environments both for testing and production using pipelines. Take a look, you won’t regret.
🎉 Summary
Being this my first ever story in Medium I hope I did captivate your attention and interest in some aspects I have learned when using React Native. I hope I can further continue to talk about this subject in more detail and I wish everyone happy coding!!! 🤓
