CODEWITHSUNDEEP
androidreact-native
Ritesh
Ritesh

Reputation: 1036

Call Android activity from React-Native code

I am using REACT-NATIVE to build android app. I want to call android activity from React-Native code. (say when I clicked the button in my react native code, it should call android activity)

I have 4 class files

Want to achieve following flow:

Login.java -> React-Native js -> Example.java

I already went through following links, but unable to understand

https://stackoverflow.com/a/32825290/4849554

Similar question asked here

React Native Android: Showing an Activity from Java

Upvotes: 27

Views: 38320

Answers (1)

Petter Hesselberg
Petter Hesselberg

Reputation: 5498

To start an Android activity, you need to create a custom native module. Assume one called ActivityStarter; it might be used from JavaScript as follows:

import { ..., NativeModules, ... } from 'react-native';

export default class DemoComponent extends Component {
    render() {
        return (
        <View>
            <Button
                onPress={() => NativeModules.ActivityStarter.navigateToExample()}
                title='Start example activity'
            />
        </View>
        );
    }
}

ActivityStarter 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:

class ActivityStarterModule extends ReactContextBaseJavaModule {

    ActivityStarterModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

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

    @ReactMethod
    void navigateToExample() {
        ReactApplicationContext context = getReactApplicationContext();
        Intent intent = new Intent(context, ExampleActivity.class);
        context.startActivity(intent);
    }
}

The name of this class doesn't matter; the ActivityStarter module name exposed to JavaScript comes from the getName() method.

The default app generated by react-native init contains a MainApplication class that initializes React Native. Among other things it extends ReactNativeHost to override its getPackages method:

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
            new MainReactPackage()
    );
}

If you're adding React Native to an existing app, this page has you override your Activity's onCreate as follows:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

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

    setContentView(mReactRootView);
}

Note addPackage(new MainReactPackage()). Regardless of which approach you use, you need to add a custom package that exposes our custom module. It might look like this:

class ActivityStarterReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new ActivityStarterModule(reactContext));
        return modules;
    }

    // UPDATE: This method was deprecated in 0.47
    // @Override
    // public List<Class<? extends JavaScriptModule>> createJSModules() {
    //     return Collections.emptyList();
    // }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

Finally, update MainApplication to include our new package:

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
            new ActivityStarterReactPackage(), // This is it!
            new MainReactPackage()
    );
}

Or you can do addPackage(new ActivityStartecReactPackage()) to ReactInstanceManager.builder().

You can find a complete, self-contained example here.

UPDATE

createJSModules was removed from the ReactPackage interface in version 0.47, and has been commented out of the sample. You'll still need it if you're stuck with an older version of RN for some reason.

UPDATE MARCH 2019

The sample project now supports similar functionality for iOS.

Upvotes: 54

Related Questions