How to navigate dashboard when login successful in React native? - react-native

Question

I have implemented some code in react native, to connect with the express backend. This only works for all the users without the role == admin. I could able to print the Successfully logged! in console. But now I need to navigate to the dashboard. How can I do that. I don't know how to do that. another thing is in the touchableOpacity I saw the attribute called value. But I can't find the meaning of that. Please help me in this regard. Also I have attach the service file also.
import React, {useState} from 'react';
import {
View,
Text,
TouchableOpacity,
TextInput,
StyleSheet,
StatusBar,
Dimensions,
} from 'react-native';
import {useTheme} from '#react-navigation/native';
import * as Animatable from 'react-native-animatable';
import LinearGradient from 'react-native-linear-gradient';
import axios from 'axios';
import {hostName} from '../../constants/constants';
import {login} from '../../services/authService';
import AsyncStorage from '#react-native-community/async-storage';
const SigninPage = ({navigation}) => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const {colors} = useTheme();
const signIn = () => {
login(email, password)
.then((res) => {
// if (res.data.role == 'admin') {
// throw new Error('Cannot login');
// } else {
AsyncStorage.setItem('userData', JSON.stringify(res.data.dbResult[0]));
AsyncStorage.setItem('userRole', res.data.role);
AsyncStorage.setItem('userToken', res.data.token);
console.log('successfully logged!');
// }
})
.catch((err) => {
console.log(err);
});
};
return (
<View style={{flex: 1, backgroundColor: '#000e60'}}>
<StatusBar backgroundColor="#009387" barStyle="light-content" />
<View style={styles.header}>
<Animatable.Image
animation="bounceIn"
duraton="1500"
source={require('../../assets/img/afisolve_logo.png')}
style={styles.logo}
resizeMode="stretch"
/>
</View>
<Animatable.View
style={[
styles.footer,
{
backgroundColor: colors.background,
},
]}
animation="fadeInUpBig">
<Text style={styles.signinTop}>Sign in with your account</Text>
<View style={styles.inputView}>
<TextInput
style={styles.TextInput}
placeholder="Email"
placeholderTextColor="white"
onChangeText={(email) => setEmail(email)}
/>
</View>
<View style={styles.inputView}>
<TextInput
style={styles.TextInput}
placeholder="Password"
placeholderTextColor="white"
secureTextEntry={true}
onChangeText={(password) => setPassword(password)}
/>
</View>
<TouchableOpacity onPress={() => signIn()}>
<LinearGradient colors={['#730018', '#00085b']} style={styles.signIn}>
<Text style={styles.textSign}>SIGN IN</Text>
</LinearGradient>
</TouchableOpacity>
<Text>Fogot Your Password?</Text>
</Animatable.View>
</View>
);
};
export default SigninPage;
const {height} = Dimensions.get('screen');
const height_logo = height * 0.28;
const styles = StyleSheet.create({
header: {
flex: 2,
justifyContent: 'center',
alignItems: 'center',
},
logo: {
width: height_logo,
height: height_logo,
borderRadius: 150 / 3,
},
footer: {
flex: 1,
backgroundColor: '#fff',
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
paddingVertical: 50,
paddingHorizontal: 30,
alignItems: 'center',
justifyContent: 'center',
},
inputView: {
backgroundColor: '#2937f6',
width: '70%',
height: 45,
marginBottom: 20,
alignItems: 'center',
},
textSign: {
color: 'white',
fontWeight: 'bold',
},
signIn: {
width: 150,
height: 40,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 50,
flexDirection: 'row',
},
signinTop: {
color: '#000000',
fontSize: 20,
fontWeight: 'bold',
paddingBottom: 25,
},
});
Service file
import axios from 'axios';
import {hostName} from '../constants/constants';
export const login = (email, password) => {
return axios.post(hostName + '/authentication/login', {
email: email,
password: password,
});
};

Answer 1

this may help you
const signIn = () => {
login(email, password)
.then((res) => {
// if (res.data.role == 'admin') {
// throw new Error('Cannot login');
// } else {
AsyncStorage.setItem('userData', JSON.stringify(res.data.dbResult[0]));
AsyncStorage.setItem('userRole', res.data.role);
AsyncStorage.setItem('userToken', res.data.token);
console.log('successfully logged!');
//here
navigation.replace('Home');//if you don't wanna call login back
//else
navigation.navigate('Home');
// }
})
.catch((err) => {
console.log(err);
});
};

Answer 2

I use this tutorial to implement the Authentication flows.
Basically, you retrieve your access token, then store it in redux/context. Your Navigator detects that the user has an access token and change the screens available.

Answer 3

I have found a good answer to my question. If someone got the same stuck, will help you following the corrected issue.
const signIn = () => {
login(email, password)
.then((res) => {
// if (res.data.role == 'admin') {
// throw new Error('Cannot login');
// } else {
AsyncStorage.setItem('userData', JSON.stringify(res.data.dbResult[0]));
AsyncStorage.setItem('userRole', res.data.role);
AsyncStorage.setItem('userToken', res.data.token);
console.log('successfully logged!');
navigation.navigate('Home');
// }
})
.catch((err) => {
console.log(err);
});
};