CODEWITHSUNDEEP
reactjsreact-nativereact-navigationhybrid-mobile-app
Piyush Govil
Piyush Govil

Reputation: 468

How to set up app container in React-Navigation-3?

I want to send data as initialProps from Native android to React-Native, but the problem is with react-navigation in which I am using StackNavigator

This is the solution (got help from here) which will work in previous versions of react-navigation used to send initialProps from native to first scene of react-native: 

export default class AwesomeProject extends Component {
    constructor(props){
        super(props)
        console.warn(this.props.movie_id);
    }

    render() {
              return <RootStack screenProps={this.props.movie_id} />;
        }
}

const RootStack = createStackNavigator(
    { 
        home:  {screen: Details},
        genre: {screen: Genre},
    },
    { 
        initialRouteName: 'home',
    }
);

But from react-navigation-3 onwards you must set up app container directly.

Can anyone tell me how to achieve this using createAppContainer() ?

Upvotes: 3

Views: 3348

Answers (2)

Piyush Govil
Piyush Govil

Reputation: 468

Thanks to @David Gevorgyan I was successfully able to send initialProps from native android to react-native's first scene of StackNavigator like this:

export default class AwesomeProject extends Component {
    constructor(props){
        super(props)
    }

    render() {
    return <RootStack screenProps={this.props.movie_id} />;
  }
}

const RootStack = createAppContainer(StackNavigator)

const StackNavigator = createStackNavigator(
    { 
        home:  {screen: Details},
        genre: {screen: Genre},
    },
    { 
        initialRouteName: 'home',
    }
);

Upvotes: 1

David Gevorgyan
David Gevorgyan

Reputation: 332

As a sample, from one of my own projects:

import {
  createSwitchNavigator,
  createAppContainer
} from 'react-navigation';

const SwitchNavigator = createSwitchNavigator(
  {
    ScreenOne,
    ScreenTwo,
    ScreenThree
  }
);
const AppContainer = createAppContainer(SwitchNavigator);

class App extends Component {
  render() {
    return (<AppContainer />);
  }
}

Upvotes: 3

Related Questions