Stack Navigator Giving Me Undefined Error

I'm using https://facebook.github.io/react-native/docs/navigation.html by the way. I'm trying to use the StackNavigator to go from Login.js to AboutDendro.js. What's wrong in my

Solution 1:

It is because navigation is not in your props. It is a part of your App component you created. But you do nothing with this component.

You should have an App.js file, with your stackNavigator, set your Login component as your default component in your stackNavigator's parameters.

Take a look at this documentation

Solution 2:

I try to refactor your code. in component render maybe you can just write :

render() {
    const { navigate } = this.props.navigation;
    return (
        <ScrollViewstyle={{padding:20}}><Buttontitle="Go to Jane's profile"onPress={() =>
                    navigate('Profile', { name: 'AboutDendro' })
                }
            />
            <Textstyle={{fontSize:27}}>{this.state.page}</Text><TextInputplaceholder='Email Address'autoCapitalize='none'autoCorrect={false}autoFocus={true}keyboardType='email-address'value={this.state.username}onChangeText={(text) => this.setState({ username: text })} />
            <TextInputplaceholder='Password'autoCapitalize='none'autoCorrect={false}secureTextEntry={true}value={this.state.password}onChangeText={(text) => this.setState({ password: text })} />
            <Viewstyle={{margin:7}}/><ButtononPress={(e) => this.handleClick(e)} title={this.state.page}/>
            <Viewstyle={styles.firstView}><TextonPress={(e) => this.togglePage(e)} style={styles.buttons}>
                    {this.alt}
                </Text></View></ScrollView>
    );
  }
}

And you separate component StackNavigation below component render() like:

constApp=StackNavigator({Home: { screen:Login },Profile: { screen:AboutDendro },});

And then import component App in your index.ios.js like:

import './Login';

just that. Maybe my answer can help you.