How does android expose Native UI Components to React Native Screen

Question

I have an android application built already that I would like to use React Native in. It's a large application and I don't want to migrate everything at once.

For example, my bottom bar code is a bit complex and I'd like to leave it native for now. For Example: See Picture below

I want screen partition between android and react native components as

Bottom bar in Android Native and Updated page content in React Native

Note: I have built React Native Bridge and expose android native bottom bar to react environment but they do not show anywhere on screen and it only shows react content.

Answer 1

I have resolved this kind of complexity in this way:

Before:

    mReactRootView = new ReactRootView(this);
    mReactInstanceManager = ReactInstanceManager.builder()
            .setApplication(getApplication())
            .setBundleAssetName("index.android.bundle")
            .setJSMainModuleName("index.android")
            .addPackage(new MainReactPackage())
            .addPackage(new OloRNBridgeReactPackage())
            .setUseDeveloperSupport(BuildConfig.DEBUG)
            .setInitialLifecycleState(LifecycleState.RESUMED)
            .setCurrentActivity(MenuActivity.this)
            .build();

    mReactRootView.startReactApplication(mReactInstanceManager, "JSMain", null);
   setContentView(mReactRootView);

Result:

It renders JSMain content from React Native only and does not include Android Native Bottom Bar.

After:

1. Create android layout xml file activity_react_footer and add Android UI Components that you want to include with React Component.

   <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:punchh="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    <com.facebook.react.ReactRootView
        android:id="@+id/react_root"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <android.support.design.widget.TabLayout
        android:layout_weight="9"
        android:id="@+id/tabLayout"
        app:tabGravity="fill"
        app:tabMode="fixed"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
   </LinearLayout>
   

2. Inflate layout in your activity then findViewById ReactRootView with load JS Component and TabLayout also.

   setContentView(R.layout.activity_react_footer);
   mReactInstanceManager = ReactInstanceManager.builder()
           .setApplication(getApplication())
           .setBundleAssetName("index.android.bundle")
           .setJSMainModuleName("index")
           .addPackage(new MainReactPackage())
           .addPackage(new OloRNBridgeReactPackage())
           .setUseDeveloperSupport(BuildConfig.DEBUG)
           .setInitialLifecycleState(LifecycleState.RESUMED)
           .setCurrentActivity(MenuActivity.this)
           .build();
   mReactRootView = (ReactRootView) findViewById(R.id.react_root);
   mReactRootView.startReactApplication(mReactInstanceManager, "JSMain", null);
   tabLayout = (TabLayout) findViewById(R.id.tabLayout);
   

Result:

This approach will include both contents on screen from Android and React Native. It will solve your problem completely.