React Native can't find variable: navigate

Question

I am doing stack navigation but I can't seem to be able to navigate I will get this error "Can't find variable: navigate" Here is the screenshot of my android emulator

This is my App class(main)

export default class App extends Component {
render() {
return (
  <View style={styles.container}>
    <Header/>
    <AppNavigator/>
  </View>
);
}
}

const AppNavigator = StackNavigator({
Cluster1: { 
  screen: Cluster1,
  },
Play: { 
  screen: Play,
  },
});

This is my Cluster1 class

export default class Cluster1 extends Component{
render(){
    return(
        <View>
            <SectionList          
             
             renderSectionHeader={({ section }) => {
                return (<SectionHeader section={section} />);
            }}
             sections={ClusterData}
             keyExtractor={(item, index) => item.name}
        >
        </SectionList>
        </View>
    );
  }
} 
 class SectionHeader extends Component {
    render() {
        return (
            <View style={styles.header}>  
                <Text style={styles.headertext}>
                {this.props.section.title}       
                </Text>
                <TouchableOpacity onPress={() => { navigate("Play");}}>
                <Text style ={styles.Play}>Play
                </Text>
                </TouchableOpacity>
            </View>
        );
    }
    }

Sadegh Teimouri · Accepted Answer · 2018-06-04 06:03:57Z

navigation object only exist in the screen component. (not exist in the nested components). you can pass it into the nested component using props

export default class Cluster1 extends Component{
render(){
    return(
        <View>
            <SectionList          

             renderSectionHeader={({ section }) => {
                return (<SectionHeader navigation={this.props.navigation} section={section} />);
            }}
             sections={ClusterData}
             keyExtractor={(item, index) => item.name}
        >
        </SectionList>
        </View>
    );
  }
} 
class SectionHeader extends Component {
    render() {
        return (
            <View style={styles.header}>  
                <Text style={styles.headertext}>
                {this.props.section.title}       
                </Text>
                <TouchableOpacity onPress={() => { this.props.navigation.navigate("Play");}}>
                <Text style ={styles.Play}>Play
                </Text>
                </TouchableOpacity>
            </View>
        );
    }
}

Manuel Alanis · Accepted Answer · 2019-04-03 22:09:14Z

1

Include on your SectionHeader the this.props.navigation something like this:

<SectionHeader navigation={this.props.navigation}/>

because the props.navigation are by default on your parent component

and on SectionHeader component you will access to navition like:

..
goToSignUp() {
   this.props.navigation.navigate('SignUp');
}
..

For me also was confusing before. Cheers!

answered Apr 3, 2019 at 22:09

Manuel Alanis

3561 silver badge8 bronze badges

Comments

JAINESH DOSHI · Accepted Answer · 2018-06-04 05:50:40Z

0

You can use this rather than navigate :

this.props.navigation.navigate('Play')

Hope this is helpful.

answered Jun 4, 2018 at 5:50

JAINESH DOSHI

2682 silver badges13 bronze badges

Collectives™ on Stack Overflow

React Native can't find variable: navigate

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related