Login

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Home from "./app/components/Home/Index"
import Dashboard from "./app/components/Dashboard/Index"




const AppNavigator = createStackNavigator({

  home: Home,
  dashboard: Dashboard
 
})


export default createAppContainer(AppNavigator);

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

export class Index extends Component {

    state = { username: "", password: ""}

    checkLogin() {
        const { username, password} = this.state
        if(username == "admin" && password == "admin") {
            console.warn("Login is OK")
        } else {
            console.warn("Something is Wrong")
        }
    }
    render() {
        const { heading, input, parent } = styles
        return (
            <View style={parent}>
                <Text style={heading}>Login into the application</Text>
                {/* use onChangeText for setState */}
                <TextInput style={input} placeholder="Username" onChangeText={text => this.setState({username: text})} />
                {/* For password secureTextEntry */}
                <TextInput style={input} secureTextEntry={true} placeholder="Password" onChangeText={text => this.setState({password: text})} />
                {/* Don't know what _ => means */}
                <Button title={"Login"} onPress={_=> this.checkLogin()} />
            </View>
        )
    }
}

export default Index

import { StyleSheet } from 'react-native';


export default StyleSheet.create({

    heading: {
        fontSize: 25,
        textAlign: 'center'
    },

    input: {
        marginLeft: 20,
        marginRight: 20
    },
    parent: {
        flex: 1,
        justifyContent: "center"
    }

})

import React, { Component } from 'react'
import { View, TextInput, Text, Button, Alert } from "react-native"
import styles from './styles'

export class Index extends Component {

    state = { username: "", password: ""}

    checkLogin() {
        const { username, password} = this.state
        if(username == "admin" && password == "admin") {
            // Move to the dashboard
            this.props.navigation.navigate('dashboard')
        } else {
            // Alert if incorrect
            Alert.alert("Error", "Username/Password mismatch", [{
                text: "Okay"
            }])
        }
    }
    render() {
        const { heading, input, parent } = styles
        return (
            <View style={parent}>
                <Text style={heading}>Login into the application</Text>
                <TextInput style={input} placeholder="Username" onChangeText={text => this.setState({username: text})} />
                <TextInput style={input} secureTextEntry={true} placeholder="Password" onChangeText={text => this.setState({password: text})} />
                <Button title={"Login"} onPress={_=> this.checkLogin()} />
            </View>
        )
    }
}

export default Index

 static navigationOptions = {
        header: null
    }

export class Index extends Component {

    state = { username: "", password: ""}

    static navigationOptions = {
        header: null
    }