Hi so I am trying to conditionally set the visibility of a modal (react-native-modal) in the useEffect function of one of my components. The issue is the modal sometimes doesn't show even though the visibility is set to true. Also when this happens it prevents me from interacting with the page below it pretty much breaking the app and causing the user to have to clear it before proceeding.
Here is how i render my modal in the return(the view is just a placeholder):
<Modal
isVisible={guidanceVisible}
style={styles.guidanceModalContainer}
onBackdropPress={() => null}
backdropOpacity={.75}
>
<View style={{
width: '100%',
height: '100%',
backgroundColor: 'green'
}}/>
</Modal>
Initialize State: const [guidanceVisible, setGuidanceVisible] = useState(false);
setGuidance in useEffect:
useEffect(() => {
if(myPosts.length > 1){
// setTimeout(() => {
setGuidanceVisible(true)
// }, 500)
}}, []);
As you can see I have already tried using a setTimeout but then I run into a different error. If a user interacts with the page while the timeout is waiting to be called then the same issue as before with the page being uninteractable happens again. Please let me know if you have any ideas or spot any mistakes. Thanks ahead of time!
useEffect? not just the snippet, but the full function.guidanceModalContainer:{width: vw(90), height: vh(58), alignSelf: 'center', backgroundColor: 'red', zIndex: 8, position:'absolute', },Let me know if you see any errors with the way i have it setup. Also i would like to say that there is no backdrop opacity on the page when it isn't intractable.