How to get value from login and show at home

Question

I want to show username and role at home.js Im following a tutor but got error undefined is not an object (evaluating '_this.props.navigation.navigate') ..

Maybe someone can help me..

This is Form.js

import React, { Component } from 'react';
import { Text, View, StyleSheet, TextInput, TouchableOpacity, AsyncStorage} from 'react-native';
import { Actions } from 'react-native-router-flux';

const ACCESS_TOKEN = 'access_token';

export default class Form extends Component {

    constructor(props){
      super(props);

      this.state ={
        grant_type              : "password",
        scope                   : "",
        client_id               : "",
        client_secret           : "",
        username                : "",
        password                : "",
        error                   : "",
        accessTokennya          : "",
      };
    }

    async storeToken(accessToken){
      try{
        await AsyncStorage.setItem(ACCESS_TOKEN, accessToken);
        this.getToken();
      }catch (error){
        console.log("something where wrong")
      }
    }

    async getToken(){
      try{
        let token =  await AsyncStorage.getItem(ACCESS_TOKEN);
        console.log("token is : "+ token)
      }catch (error){
        console.log("something where wrong")
      }
    }

    async removeToken(){
      try {
        let token = await AsyncStorage.removeItem(ACCESS_TOKEN);
        this.getToken();
      } catch(error){
        console.log("Something went wrong")
      }
    }

    async onLoginPressed(){
      try {
        let response = await fetch('https://bpm.asihputera.or.id/asihputera/oauth2/token', {
          method: 'POST',
          headers: {
            'Content-Type'        : 'application/json',
            'Accept-Encoding'     : 'gzip, deflate',
            'Authorization'       : 'Bearer cde4e4bc600afcb604fb2ba078c60a16e29dac04',
            'User-Agent'          : 'PostmanRuntime/7.15.2',
            'Accept'              : '*/*',
            'Cache-Control'       : 'no-cache',
            'Postman-Token'       : 'ad9e715b-a2af-4f3f-86dd-11a7b6ec6037,f00ce420-e144-47ec-be83-756ec1fbc5d2',
            'Host'                : 'bpm.asihputera.or.id',
            'Cookie'              : 'PM-TabPrimary=101010010; singleSignOn=0',
            'Content-Length'      : '139',
            'Connection'          : 'keep-alive',
            'cache-control'       : 'no-cache',
          },
          body: JSON.stringify({
            'grant_type'          : "password",
            'scope'               : '*',
            'client_id'           : 'QKQYKIBJUXFRMGITBPKXVBWOVMFYPWWF',
            'client_secret'       : '2922119675d440616c9a613026663027',
            'username'            : this.state.username,
            'password'            : this.state.password,
          }),
        });

        let res = await response.text();
        if (response.status >= 200 && response.status <=300) {
          this.setState({error:""});
          let accessToken = res;
          this.storeToken(accessToken);
          console.log("res token: "+accessToken);
          username = this.state.username;
          Actions.Cases();
        } else {
          let error = res;
          throw error;
        }
      } catch(error){
        this.removeToken();
        this.setState({error: error});
        console.log("error" + error);
      }

    }

    render(){
      const {navigate} = this.props.navigation
        return(
            <View style={styles.container}>
                <TextInput style={styles.inputBox} 
                    editable={true}
                    onChangeText = {(username)=> this.setState({username})}
                    underlineColorAndroid='rgba(0,0,0,0)' 
                    placeholder="Username" 
                    ref='username'
                    returnKeyType='next'  
                    value={this.state.username}
                    placeholderTextColor="#ffffff"
                    selectionColor="#fff"/>
                <TextInput style={styles.inputBox} 
                    editable={true}
                    onChangeText={(password) => this.setState({password})}
                    underlineColorAndroid='rgba(0,0,0,0)'
                    placeholder='Password'
                    ref='password'
                    returnKeyType='next'
                    secureTextEntry={true}
                    value={this.state.password}
                    placeholderTextColor="#ffffff"
                    selectionColor="#fff"/>
                <TouchableOpacity style={styles.button} onPress={this.onLoginPressed.bind(this)}>
                    <Text style={styles.buttonText}> Log In </Text>
                </TouchableOpacity>
                <Text>
                  {this.state.error} 
                </Text>
            </View> 
            )
    }

}

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

    inputBox: {
        width: 300,
        backgroundColor:'#C0C0C0',
        borderRadius: 25,
        paddingHorizontal: 16,
        fontSize :14,
        color: '#ffffff',
        marginVertical: 13
    },

    buttonText: {
        fontSize : 16,
        fontWeight : '500',
        color: '#ffffff',
        textAlign:'center'
    },

    button: {
        width:100,
        backgroundColor: '#C0C0C0',
        borderRadius: 40,
        marginVertical: 30,
        paddingVertical: 13
    }
});

This is Cases.js

import React, { Component } from 'react';
import { Text, View, StyleSheet, TextInput, TouchableOpacity, AsyncStorage} from 'react-native';
import { Actions } from 'react-native-router-flux';

const ACCESS_TOKEN = 'access_token';

export default class Form extends Component {

    constructor(props){
      super(props);

      this.state ={
        grant_type              : "password",
        scope                   : "",
        client_id               : "",
        client_secret           : "",
        username                : "",
        password                : "",
        error                   : "",
        accessTokennya          : "",
      };
    }

    async storeToken(accessToken){
      try{
        await AsyncStorage.setItem(ACCESS_TOKEN, accessToken);
        this.getToken();
      }catch (error){
        console.log("something where wrong")
      }
    }

    async getToken(){
      try{
        let token =  await AsyncStorage.getItem(ACCESS_TOKEN);
        console.log("token is : "+ token)
      }catch (error){
        console.log("something where wrong")
      }
    }

    async removeToken(){
      try {
        let token = await AsyncStorage.removeItem(ACCESS_TOKEN);
        this.getToken();
      } catch(error){
        console.log("Something went wrong")
      }
    }

    async onLoginPressed(){
      try {
        let response = await fetch('https://bpm.asihputera.or.id/asihputera/oauth2/token', {
          method: 'POST',
          headers: {
            'Content-Type'        : 'application/json',
            'Accept-Encoding'     : 'gzip, deflate',
            'Authorization'       : 'Bearer cde4e4bc600afcb604fb2ba078c60a16e29dac04',
            'User-Agent'          : 'PostmanRuntime/7.15.2',
            'Accept'              : '*/*',
            'Cache-Control'       : 'no-cache',
            'Postman-Token'       : 'ad9e715b-a2af-4f3f-86dd-11a7b6ec6037,f00ce420-e144-47ec-be83-756ec1fbc5d2',
            'Host'                : 'bpm.asihputera.or.id',
            'Cookie'              : 'PM-TabPrimary=101010010; singleSignOn=0',
            'Content-Length'      : '139',
            'Connection'          : 'keep-alive',
            'cache-control'       : 'no-cache',
          },
          body: JSON.stringify({
            'grant_type'          : "password",
            'scope'               : '*',
            'client_id'           : 'QKQYKIBJUXFRMGITBPKXVBWOVMFYPWWF',
            'client_secret'       : '2922119675d440616c9a613026663027',
            'username'            : this.state.username,
            'password'            : this.state.password,
          }),
        });

        let res = await response.text();
        if (response.status >= 200 && response.status <=300) {
          this.setState({error:""});
          let accessToken = res;
          this.storeToken(accessToken);
          console.log("res token: "+accessToken);
          username = this.state.username;
          Actions.Cases();
        } else {
          let error = res;
          throw error;
        }
      } catch(error){
        this.removeToken();
        this.setState({error: error});
        console.log("error" + error);
      }

    }

    render(){
      const {navigate} = this.props.navigation
        return(
            <View style={styles.container}>
                <TextInput style={styles.inputBox} 
                    editable={true}
                    onChangeText = {(username)=> this.setState({username})}
                    underlineColorAndroid='rgba(0,0,0,0)' 
                    placeholder="Username" 
                    ref='username'
                    returnKeyType='next'  
                    value={this.state.username}
                    placeholderTextColor="#ffffff"
                    selectionColor="#fff"/>
                <TextInput style={styles.inputBox} 
                    editable={true}
                    onChangeText={(password) => this.setState({password})}
                    underlineColorAndroid='rgba(0,0,0,0)'
                    placeholder='Password'
                    ref='password'
                    returnKeyType='next'
                    secureTextEntry={true}
                    value={this.state.password}
                    placeholderTextColor="#ffffff"
                    selectionColor="#fff"/>
                <TouchableOpacity style={styles.button} onPress={this.onLoginPressed.bind(this)}>
                    <Text style={styles.buttonText}> Log In </Text>
                </TouchableOpacity>
                <Text>
                  {this.state.error} 
                </Text>
            </View> 
            )
    }

}

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

    inputBox: {
        width: 300,
        backgroundColor:'#C0C0C0',
        borderRadius: 25,
        paddingHorizontal: 16,
        fontSize :14,
        color: '#ffffff',
        marginVertical: 13
    },

    buttonText: {
        fontSize : 16,
        fontWeight : '500',
        color: '#ffffff',
        textAlign:'center'
    },

    button: {
        width:100,
        backgroundColor: '#C0C0C0',
        borderRadius: 40,
        marginVertical: 30,
        paddingVertical: 13
    }
});

And then, this is a Login.js

import React, { Component } from 'react';
import { Text, View, StyleSheet, StatusBar, TouchableOpacity } from 'react-native';

import Logo from '../components/Logo';
import Form from '../components/Form';

import {Actions} from 'react-native-router-flux';

export default class Login extends Component {


    render() {
        return(
            <View style={styles.container}>
                <Logo/>
                <Form type ="Login"/>
            </View>
        )
    }
}

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

    signupTextCont: {
        flexGrow: 1,
        alignItems: 'center',
        justifyContent: 'flex-end',
        paddingVertical: 16,
        flexDirection: 'row'
    },

    signupText:{
        color: 'rgba(255,255,255, 0.7)',
        fontSize: 16,
        paddingVertical: 30,
        marginVertical: 30
    },

    signupButton: {
        color: '#ffffff',
        fontSize: 16,
        fontWeight:'500'
    }
  });

I hope i get a solution at here :D thank you

Answer 1

Try using this in : Login.js

render() {
        return(
            <View style={styles.container}>
                <Logo navigation = {this.props.navigation}/>
                <Form navigation = {this.props.navigation}

type ="Login"/> )