Skip to content

appirio-digital/react-native-session-timer-modal

Repository files navigation

npm version Build Status Coverage Status Greenkeeper badge Codacy Badge

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.

GIF DEMO

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