DEV Community

Ryohlan
Ryohlan

Posted on

How to pass initial props from Android native.

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;
            }
        };
    }
    ...
}
Enter fullscreen mode Exit fullscreen mode

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

...
Enter fullscreen mode Exit fullscreen mode

Top comments (16)

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

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

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

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

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

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

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

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