React Native and Hybrid React Native

The distinction is essential when considering integrating with Existing Apps to React Native. So below are the examples for Fully React Native Application and Hybrid React Native Applications.

The first one is Facebook’s ad Manager app which is entirely in React Native, i.e., and It is built in React Native like the tab bar, navigation, and all the stuff controlled by React Native.

On the other hand, It is the Facebook app, which is Hybrid React Native, i.e., the tab bar or search bar is not built in React Native, but the main content is the Feed is built in React Native. We will focus more on Hybrid React Native.

Hybrid React Native applications are mostly ported from Native applications. Learn more about Integration with Existing Apps.

There are lots of problems many faces after the Integration with native applications. I will list somewhere I got the problem and how I solved it.

1) Call a native android activity from React native?

What if we call existing android activity from the new React Screen? To achieve this, we need to create a custom native module. So assume one called StartActivityModule, which is as follows:

StartActivityModule is a Java class that implements a React Native Java interface called NativeModule. BaseJavaModule already does the heavy lifting of this interface, so one usually extends either that one or ReactContextBaseJavaModule. Both are fine.

Also, the name of this class doesn’t matter the StartActivity module name exposed to JavaScript comes from the getName() method.

Now you need to add a custom package that exposes our custom module. It might look something like this :

And now finally update MainApplication to include our new package:

You can find a complete application on my GitHub.

2) The Navigation Challenge

Internally, React Native assumes that the entire app is built in React. All the existing solutions are also based on the assumption that the whole app is built in React Native. For example, ex-navigation, react-router, etc. All are JavaScript-based.

So what’s the problem with Javascript-based open source solutions?

The front navigation stack would be exemplary here.

But the back stack navigation will perform something like this.

React to React transition will work smoothly, but as soon you make another transition, It will skip the native screen because it maintains the JavaScript navigation stack.

One solution can be wrapping each react screen in its activity or a ViewController and letting NativeModule handle the navigation.

This works fine but Is this the best approach?

No! Here the problem is For two React Screens. We’re wrapping each of them in their own React Activities or ViewControllers. So here is the unnecessary initialization of two ReactActivities.

The best solution for this is using react-native-navigation by Wix. They are handling all of these in a very optimized manner. There is also native navigation by Airbnb, but It is currently in its beta phase.