storage.remove did not work well

[ZMChoo]

Hi, I need some help here. The problem I faced is after pressing logout, the data in the storage has not been removed, unless I end task the app. So when I reopen the app, it will stay in my Wallet screen, it suppose will jump to my Login page.

My code is like this:

===================================================================
Wallet.js

var storage = new Storage({
size: 1000,
storageBackend: AsyncStorage,
defaultExpires: null,
enableCache: true,
sync: {

}
})

class Wallet extends Component {

...

componentDidMount(){
this.setState({Balance:""})
storage.load({
key: 'loginState',
autoSync: true,
}).then(result =>{
this._getWalletListbyToken(result.userEmail,result.userToken);
}).catch(error => {
switch(error.name){
case 'NotFoundError':
this.props.navigation.navigate("Login");
break;
case 'ExpiredError':
this.props.navigation.navigate("Login");
break;
}
})
}

_CheckUserIsLoggedBefore = (email, token) => {
if(token == null){
this.props.navigation.navigate("Login");
}
}

...

}

===================================================================
Login.js

var storage = new Storage({
size: 1000,
storageBackend: AsyncStorage,
defaultExpires: null,
enableCache: true,
sync: {

}
})

class Login extends Component {

...

loginMainPage = () => {

...

            storage.save({
              key: 'loginState',
              data: {
                userEmail: response.data.acc.Email,
                userToken: response.data.token,
                userMobile: response.data.acc.Mobile,
                userID: response.data.acc.Id,
                userPWD: response.data.acc.Password,
              },
              expires: null,
            }).then(() => {
              ToastAndroid.show(this.props.languageContent.loginSuccessMSg, ToastAndroid.SHORT);
              this.props.navigation.navigate('Wallet', {
                userEmail: response.data.acc.Email,
                userToken: response.data.token,
                userMobile: response.data.acc.Mobile,
                userID: response.data.acc.Id,
                userPWD: response.data.acc.Password,
                userBalance: "",
              });
            });

...

}
}

===================================================================
Profile.js

var storage = new Storage({
size: 1000,
storageBackend: AsyncStorage,
defaultExpires: null,
enableCache: true,
sync: {

}
})

class Profile extends Component {

...

onLogOutPressed = () => {
storage.remove({
key: 'loginState',
})
.then(()=>{
this.props.navigation.navigate("Login");
})
.catch((error)=>{

})

}

render() {
return (
<TouchableOpacity style={styles.buttonContainer} onPress={()=> this.onLogOutPressed()}>
<LogoutIcon style={{fontSize:18, color: color.gold, marginRight:5, marginLeft:-10 }} name='logout'/>
{this.props.languageContent.logout}

)
}

}

[sunnylqm]

Use only one storage instance in your app. Do not new it everywhere.

[ZMChoo]

Alright, I try 1st.

[ZMChoo]

I have fixed it in another way, what have I done is after pressing the logout button, I try to restart the application by using RNRestart.Restart(); , then the data storage will been removed.

https://github.com/avishayil/react-native-restart

[sunnylqm]

Are you using android 7+ devices and rn version < 0.57?

[sunnylqm]

And I did not get your logic flow. After you log out, the profile page will go to Login page immediately, then how can you see Wallet screen? Is there a tab or something, what is the route structure? And what do you mean by reopen the app and stay in wallet screen? If restart can solve the problem, then what is the difference between reopen and restart?

[ZMChoo]

I'm using API 26 and my rn version 0.57.7

[ZMChoo]

For my case, the 1st page that the app will load is Wallet screen, in the Wallet will check the 'loginState', if there are any data inside 'loginState', then it will stay in Wallet screen, else, it will jump to login screen.
So the problem I faced is after pressing logout button, jump to the login screen and I minimize my app, and then when I open the app again, it will stay in the Wallet screen because it detected there still have data inside 'loginState'. But if I end task the app or I restart the app after logout, when I open the app again, everything goes well.

[sunnylqm]

After minimize and then reopen, why it is wallet screen but not login screen? Sounds like you started a new instance of your app. So maybe you need to modify your launchMode first.

[ZMChoo]

Ya, that's weird. I have tried to use console.log to trace and found that because in Wallet screen, the componentDidMount still can load the data from the storage, so that It won't go to login screen.