7 Things you should know about React Native

The popularity of React Native has skyrocketed for the past 2 years. Meet the framework developed by Facebook Team that stands behind Facebook, Instagram, and Skype mobile apps.

What is React Native?

React Native is a JavaScript framework for writing real, natively rendering mobile applications for Android, iOS, and Universal Windows Platform. As its name suggests, it is based on React (Facebook’s and Instagram’s JavaScript library for building user interfaces), but it doesn’t target the browser. Instead, Mobile platforms are the main targets of React Native.

React Native applications are written using JavaScript and JSX (HTML/XML-like structures), but then it invokes the native rendering APIs in Objective-C or Java depending on the platform, meaning that your app will consist of real mobile UI components, not review. Your app will feel and look like any other native mobile application.

React Native can access platform features like a phone camera, user’s location due to the exposed JavaScript interfaces for platform APIs. According to John A. Calderaio from Medium.com, React Native manages GPU and Memory more efficiently than Swift. After a series of benchmarks and tests, he states that “I am now more convinced than ever that React-Native is the framework of the future.”

Upwork.com, as we know, has described React Native as the future of hybrid app development, and since React Native launched in 2015 the interest in this framework keeps constantly growing. React Native was used to developing apps like Facebook, Instagram, Skype, Airbnb, Walmart, Tesla, etc. But why?

    

What are the advantages of React Native? 

JavaScript – React Native uses mainly the JavaScript, one of the fastest and widely-used programming languages out there meaning that typically you can find React Native developer relatively quickly.

Updates – It is possible for developers to push updates directly to the users so that users don’t have to worry about downloading updates from for example Google Play. Unfortunately, Apple’s new guidelines ban any form of Code Push in AppStore apps.

UI and Performance Currently used methods of writing mobile applications are combinations of JavaScript, HTML, and CSS typically rendered using webviews. This approach works, but it comes with drawbacks around performance.

Some frameworks also try to mimic or copy the native UI elements, but the result feels a little bit off. Creating details like animations may take a lot of time, effort and will probably become out of date really quickly.

React Native has got you covered! It translates your markup to real, native UI elements, leveraging existing means of rendering on whatever platform you are working with.

On top of that, React works different from the UI meaning that your applications still maintain high performance without compromising capability. This means that developers coming from the Web with React can write mobile apps with the performance, look and feel of a native application, while using familiar tools.

Code Sharing and Cross-Platform Working with React Native can shrink the resources needed to build mobile applications. Any developer familiar with React can easily pick up React Native and now target both Web and mobile platforms with the same skillset.

Much of your code can be shared across other supported platforms. Keep in mind that depending on the functionality of your app, not all the code you write will be cross-platform. However, if you want to build an app for both iOS and Android choosing React Native will definitely save you a lot of time, money and lines of code.

What are the disadvantages of React Native?

Maturity – React Native is very young, it launched in March of 2015 for iOS and 5 months later it was released for Android. Because of that the documentation definitely has room for improvement, but with Facebook on its side, it continues to evolve.

Debugging – React Native introduces another layer to your application, making debugging more difficult, especially at the intersection of React and the host platform.

React Native is awesome! However, you can waste some time in the most unpredictable places. Let us see some important and relevant things about React Native:-

• Navigation

There are too many implementations of navigation to React Native, we can divide them into three categories:

1. React Native default implementations (NavigatorIOS, React Navigation)

2. JS implementations of navigation (React Navigation, react-native-router-flux)

3. Native implementations (wix/react-native-navigation, Airbnb/native-navigation)

Native implementation is a fully featured navigation, which includes all critical components like nav bars, tab bars, and side menu drawers. It provides huge user experience for Android and iOS platforms, including native animations, etc.

However, there are a few things you should know before starting to use it.

Drawer customization

You can set a custom width for the drawer, but you should know there are some differences for platforms. In iOS in percents from the full-screen width and in Android, you can set the width in React Native pts. Note it down, if you should have custom fixed drawer width by the design. One can use React Native Drawer to handle these cases.

Tab bar customization

In case you need to set custom height for the TabBar, bear in mind — there is no way to do it easily. Want to redefine click on the tab? Not so easy! Sure, you can do it, but be ready to go deep into the native code!

Documentation

Not all features of the navigator are documented, so do not be afraid to open source code of react-native-navigation and check it on your own.

1) Image scaling

In React Native, creating combined images is quite a challenging process. If you have 2 images and want to combine them, then obviously you will scale or resize them. As per the documentation about React Native Images, you have to use resize Mode props (‘cover’, ‘contain’, ‘repeat’, ‘stretch’, ‘center’). There you can find everything for scaling, but if you want the image to inherit parents size, there is no such solution.

In order to make it, you should use `width: null` as the style of your image. Weird? Yes, but this thing works :), and I have tried even.

2) Animated lists

A lot of applications use some kinds of lists. To create a list in React Native you can use SectionList or FlatList. If you are working with lists and want to add some animations, for example, scrolling to element when the list is loaded, just take a look at this line in the documentation:

In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it’s possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.

It means that rendering list action will be at the end of the asynchronous actions queue after mounting the component. So the workaround for this is to push function that performs animation to the end of the queue. It can be performed by using:

setTimeout(()=> this.animationFunction())

In this case, the animation function runs only after the list is fully loaded.

3) Redux-persist — Offline first app

One of the main purposes of our app was to create a product by using which user won’t feel if he has an internet connection or not. Hence, if there is no Internet or the connection is lost, a person will continue using the app as earlier. The thing that helped us is redux-persist. It can be constructed to automatically endures Redux state updates to disk using React Native’s `AsyncStore`. It’s quite straightforward and the GitHub readme file will help to add it successfully.

4) View rounding

One of the confusing issues is border-radius. Usually, borderRadius is applied to get rounded corners for a View. There are many views with rounded corners like buttons, speech bubbles, and card containers, etc.

All these views with rounded corners behave differently on the very two known platforms iOS and Android. Few elements do not have top corners, few don’t have bottom corners, or we have found that some view is rounded in Android and not rounded in IOS. Hence, we can say that there is no consistency.

The solution for this argument is just to apply overflow: ‘hidden’. Quite a simple solution but it takes time to figure it out due to its inconsistency.

5) Handling application orientation

Handling orientation is one of the common tasks in mobile development. Sometimes, we must have to disable landscape orientation in the app. Which can only be done without any specific features of  React Native.

Read More....