import React, { Component } from "react"
import { Text, View, TextInput, StyleSheet, Button } from "react-native"
import LoginView from "./LoginView"

export default class LoginPage extends Component {
  state = {
    userName:"",
    password: "",
    isLoggedin: false
  }

handleUserName = (userName) => {
  this.setState({ userName })
}

handlePassword = (password) => {
  this.setState({ password })
}

toggleLoggedIn = () => this.setState(prevState => ({ isLoggedin: !prevState.isLoggedin }))

handleSubmit = () => {
  this.toggleLoggedIn()
}

resetState = () => {
  this.setState({
    userName: "",
    password: ""
  })
}
  render() {
    const { userName, password, isLoggedin } = this.state
    const { container, textinput } = styles
    const disable = userName && password ? false : true
    return(
      <View style={container}>
        {isLoggedin
          ? <LoginView userName={userName} toggleLoggedIn={this.toggleLoggedIn} resetState={this.resetState}/>
          : (
            <View>
            <Text>Enter Username And Password</Text>
            <TextInput
              style={textinput}
              value={userName}
              placeholder="UserName"
              onChangeText={this.handleUserName}
             />
            <TextInput
              style={textinput}
              value={password}
              placeholder="password"
              onChangeText={this.handlePassword}
              secureTextEntry={true}
            />
            <Button
              onPress={this.handleSubmit}
              title="Log In"
              color="#ff8500"
              disabled={disable}
            />
            </View>
          )
      }
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    paddingTop: 100,
  },
  textinput: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    width: 200,
    marginBottom: 20,
    marginTop: 10,
  },
});




loginView.js

import React from "react"
import { View, Text, Button, StyleSheet } from "react-native"

const LoginView = ({ userName, toggleLoggedIn, resetState }) => (
  <View>
    <Text>You have succesfully logged in {userName}</Text>
    <Button
     onPress={() => {
      toggleLoggedIn()
      resetState()
      }}
      color="#ff8500"
      title="Logout"
      style={styles.buttonStyle}
      />
  </View>
)

export default LoginView