reactjs - Modal not opening when i go back from another screen

Question

Modal not opening when i go back from another screen. I'm navigate to my second screen and press "back". Now, when i try to open modal its not work.

Main

....
const nav_to_lights =() =>{
        navigation.navigate('Lights');
    }
....
return(
....
        <Modal visible={visible} onBackdropPress={() => Change_visible()} backdropStyle={styles.backdrop}>
        <Card disabled={true}>

          <Button
          style={styles.iconcl}
          appearance='ghost'
          accessoryLeft={CloseIcon}
          onPress={() => Change_visible()}
          />
          <Button style={styles.Buttonset} onPress={chtg}>
          {mtheme} 
            </Button>
        </Card>
      </Modal>
      
...

<Button onPress={nav_to_lights}  style={styles.Button}>
            Lights ??????
            </Button>
....
)

And when i press back button from react navigate header modal not opening.But state of 'visible' changing. I think it's not work because page not render when i go back.

question from:https://stackoverflow.com/questions/65904953/modal-not-opening-when-i-go-back-from-another-screen

Answer 1

Usually you can solve these issues by force rendering the element on the event you want, one way to accomplish this is to put a key on the element and change it when you need a force render, like so:

 <Modal key={myKey} visible={visible} onBackdropPress={() => Change_visible()} backdropStyle={styles.backdrop}>

onMount (or whatever you use)
myKey++