react-native-session-timer-modal v1.0.0

React Native Session Timer Modal

A customizable session timer modal that times even when the app is on the background (not really, it uses timestamp to work around the iOS background limitation). It won't work with Expo since it makes use of react-native-background-timer which requires native library linking.

Demo

note: This demo has a backgroundTime of 0.07 minutes and a modalTime of 10 minutes.

Getting started

yarn add react-native-session-timer-modal

Automatic Linking

react-native link react-native-background-timer

note: This is linking the dependent library react-native-background-timer instead of this library.

Manual Linking

Follow this readme to manually link the react-native-background-timer library.

Usage

1. Wrap your app with <SessionTimerModal /> in App.js (or wherever the root of your project is), and configure the props, make sure you checkout the props table below to custimze the appearance!

   ...
   import SessionTimerModal, { startSessionTimer, stopSessionTimer } from 'react-native-session-timer-modal';
   
   ...
   render() {
     ...
     return (
       <SessionTimerModal
         backgroundTime={9}
         modalTime={1}
         containerStyle={styles.container}
         title="Session Timer"
         titleStyle={styles.title}
         subtitle="Your session will be ending soon! Wanna stay in the app?"
         subtitleStyle={styles.subtitle}
         confirmButtonConfigs={{
           text: 'Oh yea'
         }}
         cancelButtonConfigs={{
           text: 'Log me out',
           textStyle: styles.cancelText
         }}
         onTimerEnd={() => Alert.alert('Timer End')}
       >
         <App />
       </SessionTimerModal>
     )
   }
   ...

2. Call startSessionTimer() when your app finished logging the user in and when the refresh token call finised.

3. Call stopSessionTimer() when the user logs out.

Props Definitions

<SessionTimerModal />

IButtonConfigs