React Native modal dissapear on orientation change

Question

I am currently working on a Expo managed app and encountering a problem with it.
I have a modal in which I have a video displayed with expo-av. The app is locked in portrait orientation on all the screens exept when he have a video in fullscreen where the orientation automatically switch in landscape orientation.

Everything works great until I want to exit fullscreen and the app has to lock again in portrait. At this point, the video exits fullscreen, the app switch back in portrait, but the modal is not showing on the screen anymore although the video continues playing so it means the modal is still 'on'

I have already tried to display the modal with a position: 'absolute' style but it does not change anything...

Here is the function handling the change of orientation (called when we go in fullscreen video) :

const onFullscreenUpdate = useCallback(async (status) => {
    switch (status.fullscreenUpdate) {
        case Video.FULLSCREEN_UPDATE_PLAYER_DID_PRESENT:
            await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
            break;

        case Video.FULLSCREEN_UPDATE_PLAYER_WILL_DISMISS:
            await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
            break
    }
}, []);

Here is the modal (I am sorry for the french comments ahah)

<Modal
          animationType="slide"
          transparent={true}
          visible={modalVisible}
          // onOrientationChange={(orientation) => {console.log('orientation')}}
        >
          <View style={styles.centeredView}>
            <View style={styles.modalView}>
              <Text style={styles.poiName}>{poi.plt_translation}</Text>
              <TouchableNativeFeedback
                onPress={() => {
                  setModalVisible(false);     //Cacher la popup 
                  setTrackView(!trackView);           //Remise à faux pour question de performance
                  setListUrl([]);                     //Remise à zéro de la liste des urls
                  setVideosCharged(!videosCharged);   //Remise à faux
                }}
              >
                <AntDesign  //Petite croix pour fermer la fenêtre de la librairie AntDesign (https://icons.expo.fyi/)
                  name="closecircleo"
                  size={28}
                  color="black"
                  style={styles.close}
                />
              </TouchableNativeFeedback>
              {
                videosCharged ?
                  <ScrollView                              //Permet de scroller plusieurs vidéos par POI
                    horizontal
                    centerContent={true}
                  >
                    {displayVideos}
                  </ScrollView>
                  :
                  <ActivityIndicator size="large" color="black" />
              }
              {
                isTicketValid ?
                  null
                  :
                  <View style={styles.deniedButton}>
                    <TouchableNativeFeedback
                      onPress={() => {
                        setModalVisible(!modalVisible);     //Cacher la popup 
                        setTrackView(!trackView);           //Remise à faux pour question de performance
                        setListUrl([]);                     //Remise à zéro de la liste des urls
                        setVideosCharged(!videosCharged);   //Remise à faux
                        navigation.navigate('Formules');     //Affiche les formules
                      }}
                    >
                      <Text style={styles.deniedButtonText}>Acceder aux forfaits</Text>
                    </TouchableNativeFeedback>
                  </View>
              }
            </View>
          </View>

        </Modal>

Expected Behavior :
The video exits fullscreen and the app goes back to portrait orientation, the modal is still showing with the video on it still playing.

Actual Behavior :
The video exits fullscreen and the app goes back to portrait orientation, but the modal dissapear from the screen, although the video keeps playing and modalVisible is still set to true. There is no error messages.

Do you have any idea why this is happening ?

Answer 1

There is an option that supports both orientations:

<Modal
   visible={true}
   supportedOrientations={['portrait', 'landscape']}
>
</Modal>

(cf. https://github.com/facebook/react-native/issues/11036)