Displaying a modal once per day in a mobile app using session storage

user_6831412 0
Viewed 56

In my mobile app I'm attempting to show a modal once a day per user and have been informed that session storage is a good way of resolving this. The placement of the code is eluding me as with this current set up I am getting this error from expo when running the app on the ios simulator:

Below is my modal code:

 const [modalVisible, setModalVisible] = useState(true);

 if (window.sessionStorage["ModalShown"] !== 'yes') {
    setModalVisible(true);
  }

    {modalVisible && <View style={styles.centeredView}>
                <Modal
                    animationType="fade"
                    transparent={false}
                    visible={modalVisible}
                    onRequestClose={() => {
                      props.navigation.navigate(props.route.params.navTo);
                      window.sessionStorage["ModalShown"] = 'yes';
                      setModalVisible(!modalVisible);
                    }}
                >
                  <View style={styles.centeredView}>
                    <View style={styles.modalView}>
                      <Text style={styles.modalText}>Please remember to fill in the survey once a day</Text>
                      <TouchableHighlight
                          style={[styles.YesButton, styles.YesButtonClose]}
                          onPress={() => {
                                .catch(err => {
                              err.message;
                            });
                            WebBrowser.openBrowserAsync('SURVEY');
                            window.sessionStorage["ModalShown"] = 'yes';
                            setModalVisible(!modalVisible);
                          }}
                      >
                        <Text style={styles.textStyle}>Complete the survey</Text>
                      </TouchableHighlight>
                      <TouchableHighlight
                          style={[styles.NoButton, styles.NoButtonClose]}
                          onPress={() => {
                            manderleySurveyGet()
                                .catch(err => {
                              err.message;
                            });
                            window.sessionStorage["ModalShown"] = 'yes';
                            setModalVisible(!modalVisible)
                          }}
                      >
                        <Text style={styles.textStyle}>I've already completed it</Text>
                      </TouchableHighlight>
                    </View>
                  </View>
                </Modal>
reactjs modal-dialog
1 Answers

The easiest way would be to use cookies

What you'd do is check if there was a cookie and show the dialog if there isn't :-

let cookie = document.cookie.split(";");
if(cookie[0].split("=")[1] = "checkingDailyModal" && new Date().valueOf() >= new Date(cookie[1].split("=")[1]).valueOf() ){
    setModalVisible(true);
    setCookie();
}

To set a cookie, consider the following :-

function setCookie(){
    document.cookie = "for=checkingDailyModal; expires="+date.getTime() + (24 * 60 * 60 * 1000)
        }
    );
}

However be aware the user may have configured their browser to reject cookies and in many countries there are regulations about websites using cookies.

So, you can apply same approach using localStorage also.

user_151491250
Related