How to get value from login and show at home - react-native

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"/>
)

Answer 2

In your Form.js, with Actions.Cases(); you can pass the values you want to pass as
Actions.Cases({"userName" :this.state.username ,"Password: : this.state.password})
In Cases.js file when you want to get the username just write
this.props.userName
whatever you want to get from one page to other page just need to add
this.props.(key which you've passed in last page)