jkomyno / react-native-user-inactivity

Simple component that alerts when the user is inactive (i.e. when the App surface hasn't been touched for X ms)
MIT License
193 stars 53 forks source link

Not getting updated values from store inside onAction #54

Open nbAmit opened 2 years ago

nbAmit commented 2 years ago

I'm trying to logout user he/she us inactive for x number of minutes, I have two different different scenarios

  1. Onboarding screen before login/register
  2. Screens after login

So I am checking here if user is inactive on any of the Onboarding screens then I have to restart the Onboarding flow, If user login into the app then I have show the idle screen. For checking this status I am using the react native store but when onAction method call it always return the old store.

const performAutoLogout = async () => {
  if (!store.isUserLogin) {
    navigation.reset({
      index: 0,
      routes: [
        {
          name: 'Get Started',
        },
      ],
    })
  } else {
    navigation.reset({
      index: 0,
      routes: [
        {
          name: 'App Idle',
        },
      ],
    })
  }
}
return (
    <UserInactivity
      isActive={false}
      timeForInactivity={authTimeout}
      onAction={(isActive: boolean) => {
        // if timer exceeds x min then isActive = false and logout user
        if (!isActive) {
          performAutoLogout()
        }
      }}
    >
      <Stack.Navigator>
        {store.isUserLogin ? (
          <Stack.Group>
            <Stack.Screen name="Tabs">{() => <TabStack />}</Stack.Screen>
            <Stack.Screen name="Settings">{() => <SettingStack />}</Stack.Screen>
            <Stack.Screen name="Notifications" component={Notifications} />
            <Stack.Screen name="Idle Session" component={IdleSession} initialParams={{ setAuthenticated }} />
          </Stack.Group>
        ) : (
          <Stack.Group>
              <Stack.Screen name="Get Started" component={GetStarted} />
              <Stack.Screen name="Onboarding Screen" component={OnboardingScreen} />
              <Stack.Screen name="Terms" component={Terms} />
             <Stack.Screen name="Conditions" component={Conditions} />
          </Stack.Group>
        )}
      </Stack.Navigator>
    </UserInactivity>
  )
XxLuisFer15xX commented 2 years ago

You can try saving and getting the data with async storage. It's not the best way but it works for now.

const detectIdle = async activeState => {
  const isLogin = await stgGetIsLogin();
  if (isLogin && !activeState) {
    _logOut();
  }
};
<UserInactivity
  isActive={isActive}
  timeForInactivity={activityTime}
  onAction={detectIdle}>
  ...
</UserInactivity>
abdemirza commented 1 year ago

You can create a copy of the state into useRef and then pass it, worked for me.