export class App extends Component {
constructor() {
super();
this.state = {
  token: '',
  loading: true
}

this.newJWT = this.newJWT.bind(this);
this.deleteJWT = deviceStorage.deleteJWT.bind(this);
this.loadJWT = deviceStorage.loadJWT.bind(this);
this.loadJWT();
}

newJWT(token){
this.setState({
  token: token
});
}

render() {
if (this.state.loading) {
  return (
    <Loading size={'large'} />
   );
} else if (!this.state.token) {
  return (

      <AppTabNavigator screenProps={{newJWT: this.newJWT }} />  // I think this is the issue

  );
} else if (this.state.token) {
  return (
    <AuthLoadingScreen screenProps= {{token: this.token}} deleteJWT={this.deleteJWT} />  // Could be second issue
  );
}
}
}

const AuthStackNavigator = createStackNavigator({
LoginScreen: {
    screen: LoginScreen,
        navigationOptions: {
            header: null
        }
},

})

const AppTabNavigator = createMaterialTopTabNavigator({
Profile: {
    screen: props => <LoggedIn {...props.screenProps} />,
                navigationOptions: {
                    tabBarLabel: 'Profile',
                    tabBarIcon: ({tintColor}) => (
                        <Icon name = "ios-contact" color = {tintColor} size = {24}/>
                    )
            }

    },
Home: {
    screen: HomeScreen,
    navigationOptions: {
        tabBarLabel: 'Home',
        tabBarIcon: ({tintColor}) => (
            <Icon name = "ios-home" color = {tintColor} size = {24}/>
        )
    }
  },
  Second: {
    screen: SecondScreen,
    navigationOptions: {
        tabBarLabel: 'Second',
        tabBarIcon: ({tintColor}) => (
            <Icon name = "ios-home" color = {tintColor} size = {24}/>
        )
    }
  },

}, {
    tabBarPosition: 'bottom',
    tabBarOptions: {
        activeTintColor: 'orange',
        inactiveTintColor: 'grey',
        style: {
            backgroundColor: '#f2f2f2',
        },
        indicatorStyle: {
            height: 0
        },
        showIcon: true
    },
});



const abc = createSwitchNavigator(
{
    AuthLoading: AuthLoadingScreen,
    Auth: AuthStackNavigator,
    App: AppTabNavigator
},
{
    initialRouteName: 'AuthLoading',
})

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

export default createAppContainer(abc);

export default class LoginScreen extends React.Component {

constructor(props) {

    super(props)

    this.state = {
        username: '',
        password: '',
        error: '',
        loading: false
    };

    this.loginUser = this.loginUser.bind(this);
    this.onLoginFail = this.onLoginFail.bind(this);

}

CheckTextInputIsEmptyOrNot = () =>{

    const { username }  = this.state ;
    const { password }  = this.state ;

    if(username == '' || password == '') {

        Alert.alert("Please Enter All the Values.");
    }

    else {

        // Do something here which you want to if all the Text Input is filled.

        this.loginUser();

    }

}

loginUser() {
    const { username, password, password_confirmation } = this.state;

    this.setState({ error: '', loading: true });

    // NOTE Post to HTTPS only in production
    axios.post("http://192.168.0.196:8000/api/login",{
        username: username,
        password: password
    })
    .then((response) => {
        console.log('response',response)
    deviceStorage.saveKey("id_token", response.data.token);
    console.log(response.data.token);
    this.props.newJWT(response.data.token); // This is not working
    //this.props.navigation.navigate('App');  // This is working but it is not what i wanted
    })
    .catch((error) => {
    const status = error.response.status
    if (status === 401) {
        this.setState({ error: 'username or password not recognised.' });
    }
    this.onLoginFail();
    //console.log(error);
    //this.onLoginFail();
    });
}

onLoginFail() {
    this.setState({
        error: 'Login Failed',
        loading: false
    });
}

render() {
// other codes here
}