CODEWITHSUNDEEP
react-nativenavigation
handsome
handsome

Reputation: 2422

change view in react native (0.5)

I have 2 views and I want to move from the first one to the second one without using createStackNavigator

There´s no need to use navigation because the first view is just a welcome screen

import React from 'react';
import { View, Text, Button } from 'react-native';

class HomeScreen extends React.Component {

    render() {

        const { navigate } = this.props.navigation;

        return (
            <View>
                <Text>Welcome!</Text>
                <Button
                    title="sign In"
                    onPress={() => navigate('SignInScreen')}
                />

            </View>
        );
    }
}

class SignInScreen extends React.Component {

    render() {
        return (
            <View>
                <Text>Sign In screen</Text>
            </View>
        );
    }
}

export default HomeScreen

the error I´m getting is 

TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')

thank you.

Upvotes: 0

Views: 295

Answers (1)

AJ Genung
AJ Genung

Reputation: 341

Use a flag on state. When you click the button on HomeScreen, it will change the flag to true, which will allow the conditional statement to call the SignInScreen to be rendered.

import React from 'react';
import { View, Text, Button } from 'react-native';

class HomeScreen extends React.Component {
  state = {
    loggedIn: false,
  };

  render() {
    const { navigate } = this.props.navigation;

    return this.loggedIn ? (
      <SignInScreen />
    ) : (
      <View>
        <Text>Welcome!</Text>
        <Button
          title="sign In"
          onPress={() => this.setState({ loggedIn: true })}
        />
      </View>
    );
  }
}

class SignInScreen extends React.Component {
  render() {
    return (
      <View>
        <Text>Sign In screen</Text>
      </View>
    );
  }
}

export default HomeScreen;

Upvotes: 1

Related Questions