React Native and Hybrid React Native

Saket Kumar
Sep 4, 2018 · 3 min read

The distinction is important when you’re 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 fully in React Native i.e It is built in React Native like the tab bar , navigation and all the stuffs which is controlled by React Native.

On the other hand, It is 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 which is the Feed is built in React Native. We will focus more on Hybrid React Native.

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

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

1) Call a native android activity from React native ?

What if we need to to call existing android activity from 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 just a Java class that implements a React Native Java interface called NativeModule. The heavy lifting of this interface is already done by BaseJavaModule, so one normally 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 looks 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 entire 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 fine here.

But the back stack navigation will perform something like this.

React to React transition will work smoothly but as soon you will make another transition, It will skip the native screen because It is maintaining the Javascript navigation stack.

One solution can be wrapping each react screen in it’s own activity or a ViewController and let 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 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 it’s beta phase.

MindOrks

Our community publishes stories worth reading on software development and design. Android | Machine Learning | #MakeEveryoneCode

Saket Kumar

Written by

MindOrks

MindOrks

Our community publishes stories worth reading on software development and design. Android | Machine Learning | #MakeEveryoneCode

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade