Things you should do as React-Native Developer

React Native(RN) community has evolved a lot since 2015 from version 0.1.0 to 0.62.2. They do a lot of breaking changes in their major releases and on top of that Google, does the rest. With so much change going on, it’s crucial to catch up with the community’s pace. This blog contains resources and techniques which will keep you in parallel with the RN community and never let you feel the pain of your codebase not being able to build for days.

In this blog, I will try to answer the questions that RN developers face very often and a lot of people have asked me numerous times.

How to keep your libraries updated?

RN underline uses React, so every component you write is actually imported from React underline library. React also keep evolving with new functions coming in, better ways of writing components, and deprecating lifecycle methods that cause problems. Very soon they are going to switch to React version 17.0 from 16.13 which is a significant change and your often used lifecycle methods like componentWillMount, componentWillReceiveProps, etc. will be deprecated. This gives you a head start from where you should start updating your libraries.

(i) Android libraries Upgrade: RN project uses lots of google support libraries for android which you can check in android/build.gradle. They are the first set of libraries you should upgrade in the RN upgrade process.

(ii) React version Upgrade: This will give you a lot of warnings if you are doing a major version upgrade. With the addition of async rendering since 2018, a simple version change in package.json will do that job for you.

(iii) React Native Version Upgrade: Version 0.59 and 0.60 was a major upgrade in the RN community with 64-bit support and androidX support, respectively. Also, version 0.60.4 included Hermes, a javascript engine optimized for running RN apps on android. This improved startup time, memory usage, and reduced app size by a significant amount. RN upgrade helper has become a useful tool in upgrading RN apps to new versions, follow the suggestion for migration and most likely it will build for the first time. Sometimes you may need to read Github’s comments to make it work. For this step just follow the RN upgrade helper and make the mentioned changes.

(iv) Third-party libraries Upgrade: Generally, the RN application contains several third-party libraries for various functions in the application. Making changes to your package.json with the new version you want to use for that library does the job most of the time. But always check the respective library documentation for specific details if something else also needs to be done otherwise you may end up with lots of crashes.

Which people, projects, and conferences to follow?

Dan Abramov: One of the most renowned icons of the RN community, creator of Redux, and working at React team at Facebook. He loves giving talks using code and the future of React. He has his own blog and his Github profile says the rest. He has created a very useful course on Redux which is a must-watch if you want to introduce Redux in your RN codebase. Checkout his talks on youtube at various React conferences and it will blow your mind with the information you get in an hour video.

Mike Hardy: He is actively contributing to RN and you will find a lot of comments made by him on Github issues. He created jetifier a third-party library that helps RN projects with 0.60+ RN versions. If you are moving to 0.60+ RN version and using third-party libraries that still haven’t moved to androidX then you are definitely going to use this. Otherwise, you won’t be able to build the code unless you yourself do configuration in those libraries. Also, a lot of important details about RN can be learned from his responses to the developer’s queries on Github.

William Candillon: Animations in your app plays a very important role in User Experience. Introducing animations in RN can be very challenging as there are very few resources on this topic. But if you have decided to put animations in your application which eventually you will, he is your guy. He has a great youtube channel where you will find all the resources to put animations. Animations are still evolving in RN recently they have introduction react-native-reanimated v2(May 2020) which is going to be a major breakthrough while working with RN animations.

Facebook react-native and react blog: Developers don’t need to go anywhere if they read React blog and React Native blog. They contain all the core concepts and functionality of this beautiful framework. These blogs are a bit difficult to follow as they contain a lot of technical information and require prior knowledge and difficulties you have faced while developing RN application. These blogs will also give you a dive into React’s future and magical things you will be able to do in the upcoming versions.

Awesome Projects: Great initiative started by Sindre Sorhus contains an awesome GitHub Repos list which has very useful resources about a lot of technologies out there. Awesome React-Native and Awesome React projects are what you need to follow more and develop better skills with RN.

Boilerplates: Boilerplates are the templates or blueprints which are generally used while starting a project such as this project. But they help best while integrating with important libraries like Realm, React-Native-Firebase. Always try to find boilerplates provided by open source contributors when integrating with new libraries like Redux, Realm, etc. They provide the best way to use them with better code quality, modularity, and industry standards. Few boilerplate examples can be seen here React, React-Native-Redux, Realm.

Which third-party library to use?

RN community is still in the process of standardizing third-party libraries, whereas Flutter( Google Hybrid application development technology ) which provides a lot of in-house functionality does a good job. React-native-community is a great start but there is a long way to go. Making a decision about which library to choose is crucial as it should not break the whole functionality of the application and should have smooth integration with other libraries.

I would like to introduce a small story about my own example, my app crashed when it was deployed in production but did not have any problems in development. The problem was my third-party libraries which still haven’t moved to use androidX libraries. Mike Hardy library jetifier helped in this scenario, a better explanation is provided in the repository link. In another scenario, I could not use Hermes even in version 0.62.0, which was the main reason for me to upgrade from 0.59.0 because Realm doesn’t support Hermes. And the team’s reaction was oooohhhh damn… and nothing else we could do as of now but just wait for them to support Hermes or switch the whole codebase to another mobile app database.

The best way to choose a third-party library is to follow the steps below in sequence:

(i) Check RN core components: Always check if RN library core components provide that feature in itself, for example, ActivityIndicator, and they keep adding new functionalities. So keep yourself updated with that.

(ii) React-Native Community: In the standardizing process some of the RN core components have also been removed and moved to the @react-native-community library. Functions like AsyncStorage, CheckBox, NetInfo is now being imported from this library. So, check this if any of your requirement is met by repositories in this community.

(iii) Repository stars: Always check for repository stars when choosing which library to select if you are confused between multiple libraries. More stars attract more contributors and more developers hence you will have a better response for your queries in case you are stuck.

(iv) Active Development: Check if active development is happening on the repository as it is more likely to fail due to the rapid movement of RN code with new versions if that third-party is not updated. There is a huge possibility that this third-party has a lot of stars but hasn’t been updated in a year’s time. If you choose to use this repo, you may regret integration in your codebase. Later if may get really difficult for you to remove it from the codebase.

Generally, Github repo stars serve the purpose 90% times in selecting a third-party but still be cautious while using a third-party library. And if you have a very solid team they will get the job done for you.

Libraries generally required to make RN application?

Below are the set of libraries that are generally required to make a complete application. These libraries have built great communities around themselves and a lot of apps use them in production. I myself have used them in my applications with huge success.

1. Router: Though there are multiple routers out there that support RN and generally react-native-router-flux and react-native-navigation compete at the top. React-Native-Navigation is what I generally prefer after using both of them. Very soon, I will write another blog on comparing both and why I recommend React-Native-Navigation.
2. Mobile app Database: RN app by default supports AsyncStorage which is an asynchronous, unencrypted, persistent, key-value storage system for React Native. Realm which is a mobile database run inside devices and supports relationships, generics, and vectorization on top of AsyncStorage features. SQLite which provides ACID properties of a database is also a good choice. I find Realm being the best in all the three options with active development, great community, and multiple other tools(Realm Platform & Realm Studio) around this database helping faster development. Just be careful with the Hermes issue with Realm and it’s going to be there for a little bit longer.
3. State Container: Redux is what you should use as a predictable start container in your application to manage your app store. I don’t think there is something better than this and which requires a comparison.
4. Notification: React-native-firebase provides great documentation and all the necessary features to support notification in RN application. I have also written a blog on how to create any type of notification in your app using this library.
5. Styling Components: A lot of third-party libraries like native-base, react-native-elements, etc. provide you with existing styled-components and they are very easy to use. But once your application grows you will realize that using your own components is always the best choice. Finally, styled-components will make you think, it is exactly what you need to write styling for your components.
6. Network info: To show the user whether the app is online or offline to your user is a very important aspect of your application. React-native-community provides the exact NetInfo library for this purpose. They provide almost every option required to get information about the end-user network state.
7. Camera: Clicking their pictures and uploading them to their various platforms profile has become a trend now. Apps today have become more personalized and help you create an identity of yourself within their network. React Native Camera provides the functionality to use the camera within your app. The good news with this library is it is maintained by react-native-community itself and growing ever since.
8. Handling Images: If your app allows users to view lots of images or render them without increasing a lot of memory usage and eventually crashing the app, FastImage is what you need. They provide everything you can do with rendering multiple images. They even support GIFs, I would highly recommend you to check out their Github repository even if your app requirements are different.
9. Animations: If you want to implement great user experience, animations become very useful. Animated is the core library provided by RN code modules and if you do a lot of Google Search this will suffice your purpose. Whereas William Candillon youtube tutorials are based on his own library Redash, if you are following his tutorials it will work best for you. Otherwise, react-native-reanimated is the way to go. They provide good documentation to create animations with RN and do not forget to use useNativeDriver = true for faster and smoother animations.
10. App bugs/crashes tracking: There are a lot of highly paid tools like Instabug, Bugsnag, etc. which allows you to integrate with RN application. They will work best for you if you want to spend a good chunk of money. If not, Sentry is what we must be looking at, its completely free tool if you want to host it on your servers. But if you are using their cloud they provide 5000 free events and I hope bug+crashes count for the application will be lesser than this.
11. App Gestures: Gestures are being used everywhere in a lot of applications, swipe up, left, right is what’s making a lot of application cool and easy to use. There is a cool react-native-gesture-handler third party library that will help in implementing all these very useful gestures in your app without any tweak. App Gestures works best with adding animations in your app.
12. Graphs/Charts: Providing good visualization in your application as per your requirement can be crucial for your RN app. React-Native-Svg-Charts is a great library for your purpose to render all types of charts. It requires react-native-svg which is in itself used for multiple other purposes.
13. Remote Code Push: Pushing bugs to production and users facing it is a blunder for the development team. Also, if your single code base covers millions of devices and 12000+ different types of android and iPhone devices. If the bug is related to javascript changes there is no need to deploy to the play store or the app store version and wait for days to get it approved. Microsoft Code Push helps you deploy your app changes without going through the play store or app store process. Point to note here is if your app needs native changes code push won’t work for you. As native changes rarely happen in an RN application unless there is a big requirement, saving you with negative feedback from your users.
14. App analytics: Everyone goes with the same one and only Firebase. React-Native-Firebase by default integrates this with you and gives you a hundred ways to analyze your data on the Firebase dashboard.

That’s all of it. If you think there are more queries or questions you want to know and if you struggle with React Native, please comment below. I would love to answer them and help you with your problems. HAVE FUN!!!