Q:

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.

A:

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;

