class ProfileScreen extends Component {

        constructor(props) {
            super(props);
            this.state = {
                text: ''
            }
        }

        componentWillMount() {
            this.retrieveData()
        }

        saveData = async () => {
            try {
                await AsyncStorage.setItem('MY_DATA', JSON.stringify(this.state.text))
            }catch(error) {
                    console.log(error.message)
            }
        }

        retrieveData = async () => {
            try{
                const MY_DATA = await AsyncStorage.getItem('MY_DATA')
                alert(MY_DATA)
                this.setState({text: MY_DATA})
            }catch(error) {
                console.log(error.message)
            }
        }

            navigate() {

             console.log('navigating')
            const { navigate } = this.props.navigation;
           navigate('Home')

        }



        render() {
            return (
                <View>
                    <TextInput style = {{width: '100%', height: 50, borderWidth: 1, marginTop: 100, backgroundColor: 'pink'}} onChangeText = {text => this.setState({text: text})}/>
                    <View style = {{width: '100%', flexDirection: 'row', justifyContent: 'space-around', marginTop: 40}}>
                        <Button title = "Save" onPress = {() => this.saveData()} />
                        <Button title = "Retrieve data" onPress = {() => this.retrieveData()} />
                    </View>
                    <Text>TEXT: {this.state.text}</Text>
                    <View style = {{width: '100%', flexDirection: 'row', justifyContent: 'space-around', marginTop: 40}}>
                        <Text onPress = {() => this.navigate()}>Navigate</Text>
                    </View>
                </View>

            )
        }
    }


    class HomeScreen extends Component {
        static navigationOptions = {
            header: null
        }
        constructor(props) {
          super(props);
          this.toggle = this.toggle.bind(this);
          this.state = {
              isOpen: false,
              text: ''
          };
        }

        componentWillMount() {
            this.retrieveData()
        }


        toggle() {
            this.setState({
              isOpen: !this.state.isOpen,
            });
        }

        updateMenuState(isOpen) {
            this.setState({ isOpen });
        }

        navigate() {

             console.log('navigating')
            const { navigate } = this.props.navigation;
           navigate('Profile')

        }


        saveData = async () => {
            try {
                await AsyncStorage.setItem('MY_DATA', JSON.stringify(this.state.text))
            }catch(error) {
                    console.log(error.message)
            }
        }

        retrieveData = async () => {
            try{
                const MY_DATA = await AsyncStorage.getItem('MY_DATA')
                alert(MY_DATA)
                this.setState({text: MY_DATA})
            }catch(error) {
                console.log(error.message)
            }
        }

      render() {

        return (

            <View style={styles.containerMenu}>
                <StatusBar barStyle = 'light-content' />
                    <View style = {styles.container}>
                        <ScrollView style = {[{width: '100%', height: '100%'}]}>
                            <View>
                                <TextInput style = {{width: '100%', height: 50, borderWidth: 1, marginTop: 100}} onChangeText = {text => this.setState({text: text})}/>
                                <View style = {{width: '100%', flexDirection: 'row', justifyContent: 'space-around', marginTop: 40}}>
                                    <Button title = "Save" onPress = {() => this.saveData()} />
                                    <Button title = "Retrieve data" onPress = {() => this.retrieveData()} />
                                </View>
                                <Text>TEXT: {this.state.text}</Text>
                                <View style = {{width: '100%', flexDirection: 'row', justifyContent: 'space-around', marginTop: 40}}>
                                <Text onPress = {() => this.navigate()}>Navigate</Text>
                                </View>
                            </View>
                        </ScrollView>
                    </View>
            </View>

        );
      }
    }

    export default class App extends Component {
        render() {
            return (
                <RootStack/>
            )
        }
    }

    const RootStack = createStackNavigator(
      {
        Home: {screen: HomeScreen},
        Profile: {screen: ProfileScreen},



      },
      {
        initialRouteName: 'Home',
        navigationOptions: {
          headerStyle: {
            backgroundColor: 'rgb(167,167,167)',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
          header: null
        },
      }
    );


    const styles = StyleSheet.create({
        container: {
            flex: 1,
            width: 320,
            alignItems: 'center',
            justifyContent: 'flex-start',
        },


        button: {
            position: 'absolute',
            top: 20,
            padding: 10,
        },
        caption: {
            fontSize: 20,
            fontWeight: 'bold',
            alignItems: 'center',
        },
        containerMenu: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#F5FCFF',
        },
    })