App.js

import React from 'react';
import { StyleSheet, Text, View ,  AsyncStorage} from 'react-native';
import GuestNavigation from './app/navigations/guestNavigation';
import LoggedNavigation from './app/navigations/loggedNavigation';

const USER_ACCESS = 'user_access';

export default class App extends React.Component {

  constructor(props){
    super(props)
      this.state = {
        Logged: false,
        user_access: this.props.user_access,           
    }
  }


  componentDidMount(){  
    console.log(USER_ACCESS);
    if(USER_ACCESS!==null){
      this.setState ({
        Logged: true,
      })
    } else {
      this.setState({
        Logged: false,
      })
    }
  }

  render() {
    console.log(USER_ACCESS);
    
    const {Logged} = this.state;
        if(Logged){
          return(<GuestNavigation/>)
        }else{
          return(<LoggedNavigation/>)
        }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

guestNavigation.js

import React from 'react';
import {StackNavigator} from 'react-navigation';
import LoginScreen from '../screens/Login';


export default StackNavigator({
    Login: {
        screen: LoginScreen
    }
})

Home.js

import React, { Component } from 'react';
import {
   Platform,
   StyleSheet,
   Text,
   View,
   Button,
   TextInput,
   TouchableOpacity,
   AsyncStorage,
   KeyboardAvoidingView
} from 'react-native';
//  import Expo from 'expo';
 import {StackNavigator} from 'react-navigation';

const USER_ACCESS = 'user_access';

export default class Home extends React.Component{

   constructor(props){
       super(props);
       this.state = {
           user_access: this.props.user_access,           
       }
   }
   static navigationOptions = {
        drawerLabel: 'Home',
        headerTitle: 'Bienvenido',
   }

   logout = () => {
       this.removeSesion();           
       console.log('Por que no vas al home?')       
   }

   async removeSesion(user_access){
       try{
           await AsyncStorage.removeItem(USER_ACCESS);  
           console.log(USER_ACCESS)
           this.props.navigation.navigate('Login')           
       } catch(error){
           console.log("Algo fue mal ")
       }
   }

   Bluetooth = () =>{
       this.goBle();
   } 

   goBle(){
    this.props.navigation.navigate('Bluetooth');          
   }

   render(){
       return(
               <View style={styles.container}>
                   <Text style = { styles.text } >Área de Perfil {this.state.user_access}</Text>
                   <TouchableOpacity
                   style = {styles.btn}
                   onPress = {this.logout}>
                   <Text style={styles.btnC}>Log out2</Text>
                   </TouchableOpacity>
                   <TouchableOpacity
                   style = {styles.btn}
                   onPress = {this.Bluetooth}>
                   <Text style={styles.btnC}>Bluetooth</Text>
                   </TouchableOpacity>
               </View>
       );
   }
}


const styles = StyleSheet.create({
   container: {
       flex:1,
       alignItems: 'stretch',
       justifyContent: 'center',
       backgroundColor: '#2896d3',
       paddingLeft: 40,
       paddingRight: 40,
   },
   text: {
       color: '#fff',
   },
   btn: {
       alignSelf: 'stretch',
       backgroundColor: '#01c853',
       padding: 20,
       alignItems: 'center',
   },
   btnC: {
       color: '#fff',
   },       
});

loggedNavigation.js

import React from 'react';
import {StackNavigator, DrawerNavigator} from 'react-navigation';
import HomeScreen from '../screens/Home';


const HomeInicio = StackNavigator({
    Home:{
        screen: HomeScreen
    }
}) 


export default DrawerNavigator({
    Home: {
        screen: HomeInicio
    }

})

Login.js

import React from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import LoginForm from '../components/LoginForm';


export default class Login extends React.Component {
  static navigationOptions = {
      headerTitle: 'Iniciar sesión',
  }
    
    render() {
        return (
            <LoginForm navigation={this.props.navigation}/>
        );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

LoginForm.js

import React, { Component } from 'react';
import {
 Platform,
 StyleSheet,
 Text,
 View,
 Button,
 TextInput,
 TouchableOpacity,
 AsyncStorage,
 KeyboardAvoidingView,
 ScrollView,
 AppRegistry
} from 'react-native';


const USER_ACCESS = 'user_access';

export default class LoginForm extends React.Component{
   constructor(props){
       super(props);
       this.state = {
           username: '',
           password: '',
           email: '',
           error: '',
           
       }
       this.login.bind(this)
   }

   static navigationOptions = {
       headerTitle: 'Iniciar sesión',
   }

   componentWillMount(){
       this.getSesion();
   }
 
   async storeSesion(user_access){
       try{
           await AsyncStorage.setItem(USER_ACCESS, user_access);
           this.getSesion()
       } catch(error){
           console.log("Algo fue mal ")
       }
   }

   async getSesion(){
       try{
           let sesion = await AsyncStorage.getItem(USER_ACCESS);
           console.log("User is: "+ sesion);
           if(!sesion){
               console.log("hola")
           }else{
            //  this.props.navigation.navigate('Home')}
            console.log("Bien")}
            
       } catch(error){
           console.log("Algo fue mal ")
       }
   }

   async removeSesion(){
       try{
           await AsyncStorage.removeItem(USER_ACCESS);
           this.getSesion();
           

       } catch(error){
           console.log("Algo fue mal ")
       }
   }

  

   render(){
      
       return(
               <View style={styles.container}>
                   <Text style = { styles.header } >-Login-</Text>
                   <TextInput
                       style = {styles.textInput} placeholder='Email'
                       onChangeText = { (email) => this.setState({email}) }
                       underlineColorAndroid = 'transparent'
                   />
                   <TextInput
                       style = {styles.textInput} placeholder='Password'
                       onChangeText = { (password) => this.setState({password}) }
                       underlineColorAndroid = 'transparent'
                       secureTextEntry={true}
                   />
                   <TouchableOpacity
                       style = {styles.btn}
                       onPress = {this.login.bind(this)}>
                       <Text style={ styles.btnC}>Login</Text>
                   </TouchableOpacity>
               </View>
       );
   }

   login = () =>{
       try{
       console.log("inicio");
       fetch('http://162.243.136.245/apiapp/public/index.php/api/v1/autenticando'
                       , {
                           method: 'POST',
                           headers: {
                               'Accept': 'application/json',
                               'Content-Type': 'application/json',
                           },
                           body: JSON.stringify({
                               name: this.state.username,
                               password: this.state.password,
                               email: this.state.email,
                           })
                       })

   
       .then((responseJson) => {
           console.log(responseJson);
           console.log(JSON.parse(responseJson._bodyInit));     
           var dataJson = JSON.parse(responseJson._bodyInit);
           let user_access = dataJson.data.email;


           if( responseJson.status >= 200 && responseJson.status < 300){
               if(this.state.email == dataJson.data.email){
               this.storeSesion(user_access)
               console.log(user_access)
               this.props.navigation.navigate('Home')
               } else{
                   alert("Usuario no registrado");
               }              
           }
           else{
               alert("Usuario no registrado");
           }
       })                                                                                                                                                                                                                                                                                                           
   }
       //  .done();
           catch(error){
               // this.removeSesion();
               this.setState({error: error});
               console.log("error"+error)
           }
       }
   }
  

const styles = StyleSheet.create({
   wrapper: {
       flex: 1,
   },
   container: {
        flex:1,
       alignItems: 'stretch',
       justifyContent: 'center',
       backgroundColor: '#2896d3',
       paddingLeft: 40,
       paddingRight: 40,
   },
   header: {
       fontSize: 24,
       marginBottom: 60,
       color: '#fff',
       fontWeight: 'bold',
   },
   textInput: {
       alignSelf: 'stretch',
       padding: 16,
       marginBottom: 20,
       backgroundColor: '#fff',
   },
   btn: {
       alignSelf: 'stretch',
       backgroundColor: '#01c853',
       padding: 20,
       alignItems: 'center',
   },
   btnC: {
       color: '#fff',
   }       
});