How to store response token & logout using that token from react native - react-native

Question

I am working on an app to log in using api and log out by using the retrieved token.
This is my App.js
import React from 'react';
import AppNavigator from './src/navigations/Navigator';
import * as Font from 'expo-font';
import { Ionicons } from '#expo/vector-icons';
export default class App extends React.Component {
state= {
isReady : false
}
async componentDidMount() {
await Font.loadAsync({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
...Ionicons.font,
});
this.setState({ isReady: true });
}
render() {
return (
<AppNavigator />
);
}
}
This is my navigator.js
import React from 'react';
import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer} from 'react-navigation';
import Login from '../screens/Login';
import QrScan from '../screens/qrscan';
const AppNavigator = createStackNavigator({
Login:{
screen:Login,
navigationOptions : {
headerShown:false
}
},
QrScan:{
screen:QrScan,
navigationOptions : {
headerTitle:''
}
}
},
);
export default createAppContainer(AppNavigator);
This is login screen login.js
import React from 'react';
import {Button,Text,View,Image,TextInput,SafeAreaView,ImageBackground,Alert} from 'react-native';
export default class Login extends React.Component{
constructor(props) {
super(props)
this.state = {
UserName: '',
UserPassword: ''
}
}
UserLoginFunction = () =>{
const { UserName } = this.state ;
const { UserPassword } = this.state ;
fetch('https://api.idepoz.com/ncl/api/login', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
username: UserName,
password: UserPassword
})
}).then((response) => response.json())
.then((responseJson) => {
//console.log(responseJson);
if(responseJson)
{
this.props.navigation.navigate({routeName:'QrScan'});
}
else{
Alert.alert(responseJson);
}
}).catch((error) => {
console.error(error);
});
}
render(){
const {navigate} = this.props.navigation
return(
<SafeAreaView style={{flex: 1,
}}>
<ImageBackground
style={{ flex: 1,width: "100%", height: "100%"}}
//We are using online image to set background
source={require('../images/rsz_care.jpg')}
>
<View style={{
flexDirection:"row",
justifyContent: 'center',
alignItems:"center",
marginHorizontal:55,
borderWidth:2,
marginTop:100,
paddingHorizontal:10,
borderColor:"#00716F",
borderRadius:23,
paddingVertical:2
}}>
<TextInput
placeholder="Enter Username"
style={{paddingHorizontal:10}}
onChangeText={UserName => this.setState({UserName})}
/>
</View>
<View style={{
flexDirection:"row",
justifyContent: 'center',
alignItems:"center",
marginHorizontal:55,
borderWidth:2,
marginTop:15,
paddingHorizontal:10,
borderColor:"#00716F",
borderRadius:23,
paddingVertical:2
}}>
<TextInput
placeholder="Enter Password"
style={{paddingHorizontal:10}}
onChangeText={UserPassword => this.setState({UserPassword})}
/>
</View>
<View style={{
justifyContent: 'center',
alignItems:"center",
marginTop:15
}}>
<Button title="Forward" onPress={this.UserLoginFunction} color= "#00716F"/>
</View>
</ImageBackground>
</SafeAreaView>
)
}
}
Th following page is loaded when successfully log in qrscan.js
import React from 'react';
import { Container, Header, Title, Drawer, Content, Footer, FooterTab, Button, Left, Right, Body, Text } from 'native-base';
import { Alert } from 'react-native';
import { MaterialIcons } from '#expo/vector-icons';
import { Ionicons } from '#expo/vector-icons';
import SideBar from './components/SideBar';
export default class QrScan extends React.Component{
closeDrawer = () => {
this.drawer._root.close();
}
openDrawer = () => {
this.drawer._root.open();
}
render()
{
return(
<Drawer
ref={(ref) => { this.drawer = ref; }}
content={<SideBar navigator={this.navigator} closeDrawer={this.closeDrawer}/>}
onClose={() => this.closeDrawer()} >
<Container>
<Header>
<Left>
<Button transparent onPress={this.openDrawer.bind(this)}>
<MaterialIcons name="list" size={40} color="#FFFFFF" />
</Button>
</Left>
<Body>
<Title></Title>
</Body>
<Right>
<Button transparent>
<Ionicons name="search" size={40} color="#FFFFFF" onPress={() => Alert.alert('Search Button pressed')} />
</Button>
</Right>
</Header>
<Content>
<Text>
</Text>
</Content>
</Container>
</Drawer>
);
}
}
The following is the sidebar i am using for drawer
import React from 'react';
import { Text, Alert } from 'react-native';
import { Drawer,Container, Content, Header, Right, Button } from 'native-base';
import { FontAwesome } from '#expo/vector-icons';
export default class SideBar extends React.Component {
render() {
return (
<Container>
<Header>
<Right>
<Button transparent>
<FontAwesome name="close" size={24} color="#FFFFFF" onPress={() => this.props.closeDrawer()} />
</Button>
</Right>
</Header>
<Content>
<Button transparent onPress={}>
<Text style={{fontSize: 24}}>Log Out</Text>
</Button>
</Content>
</Container>
);
}
}
I can log in using the api. I am retrieving token, i have console logged it. But i can't store the token and i am trying to logout from the sidebar using that token. Can anyone help?

Answer 1

Create a global state to store the user information and access it anywhere on the screen.
Global State management:
React Redux
Context API
check out the docs for more information:
https://www.toptal.com/react/react-context-api
https://react-redux.js.org/