10 things to consider while developing mobile apps with React Native
If you are just starting out with developing your app on React Native, Nirav Shastri has some pretty handy advice for you. Here is a list of 10 fundamental things you should keep in mind before getting started with React Native project.
React Native is a wonderful framework for cross-platform mobile app development.
If you are looking to create your presence on both Android and iOS platform but don’t want to spend too much time and resources, React Native is what you need. This framework has been used by several popular apps like Instagram, Airbnb, Walmart, UberEats, Skype, etc.
But wait just a second!
If you are just starting out with developing your app on React Native, I have some advice for you.
There are some things that you should keep in mind before you start developing mobile apps with React Native.
Let’s take a look.
1. The purpose of developing React Native apps
React Native is among the leading frameworks for cross-platform mobile app development, but it doesn’t mean every app must be developed in this framework.
If your motive is to just create a multi-platform mobile application, you could do that by just using WebView and publish your app on both the platforms. And, people with fewer expectations are already doing it. But we cannot expect great performance and stunning visuals from them. They are often not able to handle heavy tasks and provide user experience comparable to a native app.
Taking about React Native itself, though, it’s not only fast but also allows us to use underlying components that are barely accessible from a WebView application.
2. Choose the right navigation library
Even after years of existence, React Native is yet to provide an efficient solution or a replacement for the old navigator component. Most of the developers still rely on community solutions. It’s very important to choose the right navigation library according to your requirements from the beginning of the project.
3. Use Expo-Kit only when needed
Expo-Kit is free and no doubt one of the best open source toolchains for React Native, but it also comes with some limitations. React Native doesn’t support third-party packages with custom native modules, and so you’ll have to eject the Expo-Kit later.
You should use Expo-Kit when you want a quick playground to create a new app with the help of create-react-native-app package, or you know that all the requirements of the app can be covered from Expo’s offered solutions.
4. React Native styling
The React Native Style works almost like CSS but still, there may be times when you’ll feel disappointed. React Native doesn’t have cascade, offers limited inheritance and many properties are not supported as well.
But as we know, almost every system has some flaws. The important thing is whether you are able to find workarounds or alternatives to achieve what you want. Every element in React Native is flex by default. If you keep your components small, both user interface and styles fixed on a single page, you probably won’t face any issues.
5. Scaling your app across different devices and screen sizes
If you are developing an application, you definitely want to target different devices and screen sizes. Here, you usually have two options: you can either have different UI/UX depending on the screen size or choose to have the same for all screen sizes.
The former one is probably the best option for most of the applications while the developer usually proceeds with the later one when they are working on a game. You can identify the screen sizes through the Dimensions API or use a third party package like React Native Responsive UI.
React Native enables us to work in short development cycles and finish the project on time. There’s no heavy component which will keep you waiting until it loads. It comes with features like hot reloading which speed up the bundling process and so you can see each change on the emulator or your device in no time.
Planning to build a React Native app with animations? You may have to re-think on your decision. Animations are very important these days but the React Native is still improving on its animation counterpart.
I am not telling you not to use animations but always test the animations on the device. Emulators do not provide proper feedback and leave you in uncertainty. You should also use useNativeDriver = true wherever possible to achieve better performance.
8. Use CSS-in-JS wrapper library
9. Convert any web project into mobile easily
One of the major advantages of React Native is intensive code reusability. You can release an update for two platforms simultaneously. It makes detecting bugs simpler and easier. Developers who aren’t engaged in a project can understand it without any issues.
React Native boosts productivity and helps to increase the team’s flexibility. This also leads to less time spend in Quality Assurance and makes converting your web project into a mobile decision seamlessly.
10. Some extra things to consider
There are also many minor things you should know or consider while developing a cross-platform app on React Native. Let’s have a look at some of them:
- React Native doesn’t support all properties such as Image Style Props, View Style Props, Text Style Props, Shorthand properties. You should always prefer the popular ones in your project. For example, instead of margin, go for specific ones like margin-bottom, margin-top, margin-left, margin-right.
- React Native doesn’t have DOM elements. Instead, we are working with native elements.
- React Native doesn’t support percentage values for all properties. If you try to give a percentage value, the framework will either ignore it or your application will crash.
- React Native supports flex by default. So, learn it and use whenever you can. It’s really make work easy sometimes.