Expo : I want to render a Modal every x minutes - react-native

Question

I want to render A modal every X minutes , so i tried to cache a value in AsyncStorage that gets removed every x minutes , and depends on the value i want to render the modal , but when my app is refreshed the modal appears again , here's what i have done :
import AsyncStorage from "#react-native-async-storage/async-storage";
import moment from "moment";
const prefix = "cache";
const expiryInMinutes = 5;
const store = async (key, value) => {
try {
const item = {
value,
timestamp: Date.now(),
};
await AsyncStorage.setItem(prefix + key, JSON.stringify(item));
} catch (error) {
console.log(error);
}
};
const isExpired = (item) => {
const now = moment(Date.now());
const storedTime = moment(item.timestamp);
return now.diff(storedTime, "minutes") > expiryInMinutes;
};
const get = async (key) => {
try {
const value = await AsyncStorage.getItem(prefix + key);
const item = JSON.parse(value);
if (!item) return null;
if (isExpired(item)) {
await AsyncStorage.removeItem(prefix + key);
return null;
}
return item.value;
} catch (error) {
console.log(error);
}
};
export default {
store,
get,
};
Then i have this component that i want to render every X minutes :
import React, { Component } from "react";
import { Text, TouchableOpacity, StyleSheet, View } from "react-native";
import Modal from "react-native-modal";
import AsyncStorage from "#react-native-async-storage/async-storage";
import cache from "../utility/cache";
export default class PubGlobal extends Component {
state = {
visibleModal: "false",
};
componentDidMount() {
cache.get("shown").then(
this.setState({
visibleModal: "true",
})
);
}
_renderButton = (text, onPress) => (
<TouchableOpacity onPress={onPress}>
<View style={styles.button}>
<Text>{text}</Text>
</View>
</TouchableOpacity>
);
_renderModalContent = () => (
<View style={styles.modalContent}>
<Text>Hello! </Text>
{this._renderButton("Close", () =>
cache
.store("shown", "false")
.then(this.setState({ visibleModal: "false" }))
)}
</View>
);
isShown = async () => {
try {
const stored = await cache.get("shown");
this.setState({ visibleModal: stored });
console.log(this.state.visibleModal);
} catch (error) {
console.log(error);
}
};
render() {
return (
<View style={styles.container}>
{/* {this._renderButton("Default modal", () =>
this.setState({ visibleModal: "true" })
)} */}
{this.state.visibleModal && (
<Modal isVisible={this.state.visibleModal === "true"}>
{this._renderModalContent()}
</Modal>
)}
</View>
);
}
}

Answer 1

In componentDidMount, after getting the value, visibleModal is set to "true".
You should use the value you are getting when cache.get("shown") resolves.
componentDidMount() {
cache.get("shown").then(
this.setState({
visibleModal: "true",
})
);
}