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 />

Prop	Explanation	Type	Default
backgroundTime	The number of minutes that the modal will be counting on the background, specifically it is the time period between startSessionTimer is called and the counting modal shows up.	number	9
modalTime	The number of minutes that the modal will be counting after the modal shows up.	number	1
title	Title of the modal.	string	''
subtitle	Subtitle of the modal.	string	''
containerStyle	The styles for the modal card.	ViewStyle	null
titleStyle	The styles for the title.	TextStyle	null
subtitleStyle	The styles for the subtitle.	TextStyle	null
countdownTextStyle	The styles for the countdown number.	TextStyle	null
buttonsContainerStyle	The styles for the the buttons row container.	ViewStyle	null
modalConfigs	Props for the react-native-modal, pass them down as an object.	ModalProps	{}
cancelButtonConfigs	The configurations for cancel button, the left one.	IButtonConfigs (see below for the definition of this)	{}
confirmButtonConfigs	The configurations for confirm button, the right one.	IButtonConfigs (see below for the definition of this)	{}
onTimerEnd	The callback function called when the modal counts to 0 seconds.	function	null

IButtonConfigs

Prop	Explanation	Type	Default
buttonStyle	The styles for the TouchableOpacity button.	ViewStyle	null
buttonViewStyle	The styles for the single View within TouchableOpacity button.	ViewStyle	null
textStyle	The styles for the button text.	TextStyle	null
text	Text of the button.	string	''
onPress	Callback when the user taps the button, best place to call your refresh token or log out function depending on how you setup your cancel and confirm button.	function	() => null