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.

So, what the heck is React Native?! React Native is an open-source framework for building native mobile apps using just Javascript & reuses a lot of existing concepts from React, it was released by Facebook in 2015 and has been maintained ever since. A lot of the mobile apps you may have used such as Instagram, Facebook (Duh), Skype, Discord, & Uber Eats, to name a few, use React Native!

“Okay I guess thats pretty cool, but whats so cool about coding mobile apps in Javascript?” you may ask. Well first, a lot of us are already familiar with Javascript when we learnt about web development and HTML, secondly React Native is very similar to React that uses JSX. JSX is an additional syntax in Javascript that resembles XML, this makes it so easy and familiar to code components since its just like coding HTML! Below is an example of making a button component in React Native:

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. 😜

Now, a React Native app isn’t always purely coded in Javascript, it depends whether you’re running it on a managed workflow on Expo, or using the React Native CLI. If you’re really new to mobile development using the managed workflow on Expo is highly recommended as you won’t need to lay a single finger on native code, it even takes care of the requirement to have the native development tools such as Android Studio & Xcode, this in turn saves a whole LOT of space and also saves your computer’s resources as building an app is taken care of on your phone or on the Expo cloud.

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.

An Implementation

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

The App.tsx

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.

The Screens

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.

The Components

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

UI Rendering

React Native: With React Native, developers create a single code compatible with iOS and Android platforms. Facebook implemented the Yoga engine, which translates the JavaScript and CSS code to the native UI. Regarding Facebook, they reached code reuse in 87% for their Ad Manager Application. It shows a high result. The UI layer is responsible for user interactions. If any event happens on display (like clicking or scrolling over a screen), the native controller must pass this information to the bridge.

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.

Programming Language

React Native: JavaScript was developed for the web in the middle of the 1990s, and it is the core language for many frameworks, including React Native. It represents functional programming. JavaScript’s main advantages are event-driven functioning and scalability.

Flutter: Google founded Dart in 2011, though it was not popular until 2017. It became popular due to Flutter, of course. Dart is simple to learn. It doesn’t take much time to get familiar with it. It is an object-oriented programming language based on C and looks similar to Java. Like JavaScript, Dart is an event-driven language and supports asynchronous data processing.

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.

Community Support

Top 10 companies that built their products with React Native:

  1. Facebook
  2. Instagram
  3. Pinterest
  4. Uber Eats
  5. Bloomberg
  6. Walmart
  7. Shopify
  8. Skype
  9. Tesla
  10. Wix

Top 10 companies that created their products using Flutter:

  1. Google Ads
  2. eBay Motors
  3. Toyota
  4. BMW
  5. Alibaba
  6. Groupon
  7. Realtor.com
  8. Reflectly
  9. Square
  10. The New York Times

A Brief Comparison

  1. Flutter and React Native have much in common regarding components design and state management.
  2. Flutter is targeted at the native app developers group, whereas React Native is focused on web programmers.
  3. React Native is based on JavaScript code, which renders the native design via the mobile host API.
  4. Flutter is suited for apps requiring synchronization and animation rendering.

The Conclusion

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!

Sources:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ahmad Izzudin Alifyandra

Ahmad Izzudin Alifyandra

A CS guy dipping the different puddles of the software engineering realm. Currently interning at a Fintech company. Find me at your local coffeeshop 😜