facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
119.58k stars 24.37k forks source link

Switch between multiple bundles using Bridge from React Native. #31862

Closed MohitGoel9456 closed 8 months ago

MohitGoel9456 commented 3 years ago

Hi, I am creating this issue after reading this blog https://github.com/react-native-community/discussions-and-proposals/issues/152

Description

I have created two bundles with two different entry points. One is default index.android.bundle and other i have created sample.android.bundle with sample.js screen as entry point.

I am using following command for generating bundle npx react-native bundle --platform android --config metro.config.js --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

npx react-native bundle --platform android --config sample.config.js --dev false --entry-file sample.js --bundle-output android/app/src/main/assets/sample.android.bundle --assets-dest android/app/src/main/res

I have two buttons in MainActivity and I am navigating to different bundles on click event and it is working fine as expected. I am facing two issues.

  1. I am not able to debug the app when I navigate to Index.android.bundle or sample.android.bundle.
  2. I am unable to switch between the above mentioned two bundles.

Code for communicating between native android and React Native.

public class SplittingBundleModule extends ReactContextBaseJavaModule {
  private ReactApplicationContext reactContext;
  public SplittingBundleModule(ReactApplicationContext context) {
      super(context);
      reactContext = context;
  }

@NonNull
@Override
public String getName() {
    return "SplittingBundleModule";
}

@ReactMethod
public void startAnotherBundle(boolean bundle) {
   if(bundle){
       Intent intent = new Intent(reactContext, MultiBundleRnAppActivity.class);
       intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
       reactContext.startActivity(intent);
   }else {
       Intent intent = new Intent(reactContext, SingleBundleRnAppActivity.class);
       intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
       reactContext.startActivity(intent);
   }
}

}

Code for launching index.android.bundle

public class SingleBundleRnAppActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {

private ReactRootView mReactRootView;

// we'll not use Singleton ReactInstanceManager since we want to load
// whole JS bundle in one go
private ReactInstanceManager mReactInstanceManager;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    System.out.println("SingleBundleActivity");
    loadReactNativeApp();
}

private void loadReactNativeApp() {
    SoLoader.init(this, false);

    System.out.println("loading Single Bundle RN app");

    mReactRootView = new ReactRootView(this);
    // Remember to include them in `settings.gradle` and `app/build.gradle` too.

    mReactInstanceManager = ReactInstanceManager.builder()
            .setApplication(getApplication())
            .setCurrentActivity(this)
            .setBundleAssetName("index.android.bundle")
            .setJSMainModulePath("index")
            .setJSBundleFile("assets://index.android.bundle")
            .addPackages(Arrays.<ReactPackage>asList(
                    new MainReactPackage()
            ))
            .setUseDeveloperSupport(BuildConfig.DEBUG)
            .setInitialLifecycleState(LifecycleState.RESUMED)
            .build();
    // The string here (e.g. "SingleBundleRnApp") has to match
    // the string in AppRegistry.registerComponent() in index.js
    mReactRootView.startReactApplication(mReactInstanceManager, "CodeSplitting", null);

    setContentView(mReactRootView);
}
}

Code in SampleScreen.js to switch to index.android.bundle. App is crashing when I click on button.

const switchModule = () => {
  SplittingBundleModule.startAnotherBundle(false);
}

Error Message

    2021-07-15 13:29:28.625 7136-7197/com.codesplitting E/ReactNativeJS: TypeError: null is not an object (evaluating 
    'o.startAnotherBundle')
    2021-07-15 13:29:28.663 7136-7198/com.codesplitting E/AndroidRuntime: FATAL EXCEPTION: mqt_native_modules
        Process: com.codesplitting, PID: 7136
        com.facebook.react.common.JavascriptException: TypeError: null is not an object (evaluating 
    'o.startAnotherBundle'), stack:
        onPress@392:845
        value@192:7704
        value@192:6960
        onResponderRelease@192:5675
        o@77:150
        h@77:293
        g@77:347
        b@77:642
        xe@77:13181
        forEach@-1
        H@77:5333
        <unknown>@77:13529
        ke@77:93290
        _e@77:12979
        Re@77:13368
        receiveTouches@77:14167
        value@41:3469
        <unknown>@41:662
        value@41:2459
        value@41:634
        value@-1

    at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java:83)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
    at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:151)
    at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
    at android.os.Handler.handleCallback(Handler.java:873)
    at android.os.Handler.dispatchMessage(Handler.java:99)
    at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
    at android.os.Looper.loop(Looper.java:193)
    at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
    at java.lang.Thread.run(Thread.java:764)

Sharing link to github repository

https://github.com/MohitGoel9456/Code-Splitting/tree/main

tiechuimeimei commented 3 years ago

I also encounter some problems. When I open index.android.bundle, the app enters the background, and then returns to the app. The activity of index.android.bundle that I load will directly destroy and return to the main activity

samarderbali1234 commented 3 years ago

Noo

Le ven. 16 juil. 2021 à 11:41, 赵伟 @.***> a écrit :

I also encounter some problems. When I open index.android.bundle, the app enters the background, and then returns to the app. The activity of index.android.bundle that I load will directly destroy and return to the main activity

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/facebook/react-native/issues/31862#issuecomment-881317422, or unsubscribe https://github.com/notifications/unsubscribe-auth/AS54BT33DZOORMYS3KYAU53TX75E7ANCNFSM5ANAOYEA .

github-actions[bot] commented 9 months ago

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

github-actions[bot] commented 8 months ago

This issue was closed because it has been stalled for 7 days with no activity.