React Native, when you want an app RN!
Need an app RN? just use RN!
A guy: Im coding an app RN
Another guy: Wow! RN?
A guy: Yes! RN!
Another guy: When is it gonna be finished?
A guy: RN!
Another guy: Wow! RN!
Okay maybe enough of the RN puns RN (Whoops). In all seriousness, React Native really is awesome and can help you make apps pretty fast.
If you look at the return value of the Button constant, the syntax is so similar to HTML which makes the process of coding a component so simple. If you pay attention to the styling variables at the bottom, it’s also really similar to CSS. These factors contribute a lot in making the learning curve of React Native far easier than other mobile app frameworks whether hybrid too or not.
Of course the advantages of using React features isn’t only applied in JSX components, but you can also use all the useState, useEffect, and other hooks that React provides. Additionally you can also use Redux to make your whole app’s state management robust and ready for the big tech world. 😜
You might be asking: “Wow, Expo sure does a lot to help me develop my app. Why use React Native CLI then?”. Well a lot of the fun stuff I previously mentioned about Expo clearly also comes with its own set of drawbacks, mainly that Expo isn’t really 100% compatible with React Native packages and the assisted builds by Expo actually can have a larger file size compared to when using the React Native CLI.
Here I’m going to show you snippets of code from my project that showcase the essential parts of a React Native project. I’ll explain each of the snippets quiet briefly.
The Project Structure
This is a common React Native approach of structuring the code base, the source code is kept in a src file and the screens, component and navigation files are divided into its different directories
This is the file that holds the first and foremost root component, this is the starting point of the React Native component rendering process, this file usually holds context providers and the main navigator as its children.
The Navigation Files
Here is an example of a file that contains the navigation configurations and screens to include in a navigation component. In this example it is a StackNavigator for the profile screen. It is basically a stack where the elements are screens so you get a flow where you can push a screen and pop back a screen.
This is an example of one of the screens in our app, this screen is pretty simple and straight forward as it’s just a landing screen that displays our app’s logo.
Finally this is an example of a reusable button component we made that contains some conditional rendering logic that is possible using React & JS syntax, our code also contains TypeScript type checking.
Comparison with Flutter
Flutter: While React Native invokes the OEM widgets, Flutter is shipped with its own widgets. After the installation, the Flutter engine draws the UI through the Skia. Such a rendering approach helps Flutter provide 60 frames per second (fps) performance or 120 fps on devices capable of 120Hz updates.
Though Dart is very new, it is loved by many programmers. Flutter community admires the documentation on Dart, above all, it is pleasant to read. The only issue that the community faces now is they are not enough large. However, Google’s team regularly contributes to the framework at GitHub and is keen on answering the upcoming question on StackOverflow.
UI Design Tools
React Native: React Native provides a developer with a UI library compatible with both platforms. The most popular libraries are: Native Base, React Native elements, React Native Material UI. React Native saves the developers time for design since its UI code is reusable for both platforms. Also, React Native provides a developer with better visual features to simulate the code view on different platforms.
Flutter: Flutter inherited the React methodology from the start. They have been using the same component structure. The whole application is constructed as one single widget which is breaking down into many others. Components are called widgets and have the same hierarchical principles as at React Native.
Top 10 companies that built their products with React Native:
- Uber Eats
Top 10 companies that created their products using Flutter:
- Google Ads
- eBay Motors
- The New York Times
A Brief Comparison
- Flutter and React Native have much in common regarding components design and state management.
- Flutter is targeted at the native app developers group, whereas React Native is focused on web programmers.
- Flutter is suited for apps requiring synchronization and animation rendering.
Well that’s all I can talk about React Native for now, having been coding and learning React Native for the past 6 months and more to go, I can say that React Native definitely is an awesome framework to learn from scratch. Even though I’ve talked quite a lot about React Native in this article, it offers a whole lot more useful features that you can learn than meets the eye!