DEV Community

loading...

How to pass initial props from Android native.

ryohlan profile image Ryohlan ・1 min read

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>
    );
  }
}

...

Discussion (16)

pic
Editor guide
Collapse
silhouette5366 profile image
silhouette5366

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

Collapse
ryohlan profile image
Ryohlan Author

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

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

Collapse
silhouette5366 profile image
silhouette5366

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?

Thread Thread
ryohlan profile image
Ryohlan Author

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

The diff is only that from initialize.

Thread Thread
silhouette5366 profile image
silhouette5366

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?

Thread Thread
ryohlan profile image
Ryohlan Author

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

Thread Thread
silhouette5366 profile image
silhouette5366

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

Thread Thread
kps250 profile image
Kiran Shinde • Edited

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

Collapse
tnweiss profile image
Tomasz Nowak

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?

Collapse
ryohlan profile image
Ryohlan Author

Did you import javax.annotation.Nulalble?

Collapse
tnweiss profile image
Tomasz Nowak

No, I didn't, thanks. Now it looks pretty obvious, but I couldn't find any information that Nullable should be imported.

Collapse
lmichailian profile image
Lucas Michailian

Excelent post! A question: How if I want do this but onResume lifecycle ??

Collapse
ryohlan profile image
Ryohlan Author

Thank you :)

This is for initialization.

You should use NativeEventEmitter ;)
facebook.github.io/react-native/do...

Collapse
lmichailian profile image
Lucas Michailian

Thanks for your reply !

Collapse
silajitbukaisil profile image
Silajit Sil

{this.props.message} .... This is not showing anything on the screen. And even though there is no error also. Can you please help what is wrong here?

Thread Thread
ryohlan profile image
Ryohlan Author

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

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