How to pass initial props from Android native.

#reactnative #android

There is a official document of passing initial props from iOS native, but not Android.

It is passed by getLaunchOptions of ReactActivityDelegate.

So, override createReactActivityDelegate of MainActivity and getLaunchOptions of ReactActivityDelegate.

public class MainActivity extends ReactActivity {
    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Nullable
            @Override
            protected Bundle getLaunchOptions() {
                Bundle bundle = new Bundle();
                bundle.putString("message", "Hello world from Android Native");
                return bundle;
            }
        };
    }
    ...
}

It is received as the props of a root component, which is a second argument of AppRegistry.registerComponent.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>{this.props.message}</Text>
      </View>
    );
  }
}

...

Top comments (16)

silhouette5366 • Feb 11 '19

On doing console.warn(props.message) in constructor it is showing warning as "undefined". Help cannot send initial props.

Ryohlan • Feb 12 '19

Hi, I tried it on v0.58. It works successfully.

This props can receive only entry point which the default is App.js.

silhouette5366 • Feb 12 '19

I think my entry point is index.js which then calls the App.js.

Here is the index.js code:

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);

Then the main working code is in App.js
what should i do?

Ryohlan • Feb 12 '19

See github.com/ryohlan/react-native-pl...

The diff is only that from initialize.

silhouette5366 • Feb 12 '19

I got the problem. Actually its not working in case when I use react-navigatin stack navigator, when I remove the stack navigator, it's working.
How to use it along with stack navigator?

Ryohlan • Feb 12 '19

Pass App.js props to react-navigation root component. it should be worked.

silhouette5366 • Feb 12 '19

Thanks for the quick response. I am trying to pass the initial props to first scene.
Great post !!

Kiran Shinde • Mar 14 '19 • Edited

How can we pass App.js props to react-navigation root component?

Tomasz Nowak • Apr 18 '19

My app crashes with "cannot find symbol @Nullable" message. When I remove this decorator it works fine, but I don't know java at all and not sure if something can go wrong without it. Is it ok to remove @Nullable?