CODEWITHSUNDEEP
react-native
daliz
daliz

Reputation: 840

Navigator not passing parameters to scene

So, I have a simple button (TouchableHighlight) calling the following function:

showMovie() {

        this.props.navigator.push({
            name: 'MovieScreen',
            index: 1,
            movie: "terminator"
        });
    }

It works as expected, pushing the MovieScreen scene defined in a different file.

In the MovieScreen constructor I have:

constructor(props) {
        super(props);
        console.log(this.props.movie);
}

All I get is "undefined".

I tried with: console.log(this.props.passProps.movie); => undefined.

I tried putting the "movie" parameter in a passProps object => undefined.

I can't seem to pass parameters to a scene. If I print this.props I can't find anywhere the "movie" variable, but this.props is there and it contains the navigator object and everything.

Judging from the examples around the web, I'm doing exactly what thousands of people do, with the difference that mine doesn't work.

What I'm doing wrong?

More details as requested

This is how my app is composed:

index.android.js

class MovieApp extends Component {
    render() {
        return (
            <Navigator
                initialRoute={{ name: 'HomepageScreen', title: 'My Initial Scene', index: 0 }}
                renderScene={ this.renderScene }
            />
        );
    }

    renderScene(route, navigator) {
        if (route.name == 'HomepageScreen') {
            return <HomepageScreen navigator={navigator} />
        }

        if (route.name == 'MovieScreen') {
            return <MovieScreen navigator={navigator} />
        }
    }
}

HomepageScreen.js

export default class HomepageScreen extends Component {
    constructor(props) {
        super(props);
        var navigator = this.props.navigator;
      
    render() {
      return(                           
        <TouchableNativeFeedback onPress={this.showMovie.bind(this)}>
                                    <View style={Style.movieButton}>
                                    <Text style={Style.textStyle1}>Asd</Text>
                                    </View>
                                    </TouchableNativeFeedback>
        );
    }

    showMovie() {

        this.props.navigator.push({
            name: 'MovieScreen',
            index: 1,
            movie: "terminator"
        });
    }

}

MovieScreen.js

export default class MovieScreen extends Component {
    constructor(props) {
        super(props);

        console.log(this.props.movie);
    }
  
  .....

Upvotes: 0

Views: 548

Answers (1)

Nader Dabit
Nader Dabit

Reputation: 53691

Try this:

renderScene(route, navigator) {
    if (route.name == 'HomepageScreen') {
        return <HomepageScreen navigator={navigator} {...route.passProps} />
    }

    if (route.name == 'MovieScreen') {
        return <MovieScreen navigator={navigator} {...route.passProps} />
    }
}

And passing the props like this:

this.props.navigator.push({
    name: 'MovieScreen',
    index: 1,
    passProps: {
      movie: "terminator"
    }
});

Upvotes: 2

Related Questions