isFullscreen Not working

[waheedakhtar694]

I am trying to switch to full screen and for this I am handling the state for isFullscreen but even the state changes, it doesn't switch between the full screen and the smaller screen.

[LunatiqueCoder]

Hello @waheedakhtar694 . It would be very helpful if you provide a reproduction code, perhaps along with a small video. This will help us look into your issue faster.

Nevertheless, you have to implement the fullscreen by yourself, depending on how your app looks like, you might need to hide other components as well. Here are some snippets that helped us:

import { useEffect, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import * as ScreenOrientation from 'expo-screen-orientation';
import VideoPlayer from 'react-native-media-console';


export const CustomVideo = () => {
      const navigation = useNavigation();
      const [isFullscreen, setIsFullscreen] = useState(false);
      const onEnterFullscreen = () => setIsFullscreen(true);
      const onExitFullscreen = () => setIsFullscreen(false);

      useEffect(() => {
        if (isFullscreen) {
          ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
          navigation.setOptions({ headerShown: false });
        } else {
          ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
          navigation.setOptions({ headerShown: true });
        }
        return () => {
          ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
          navigation.setOptions({ headerShown: true });
        };
      }, [isFullscreen, navigation]);

      return  <View style={styles(isFullscreen).container}>
                      <VideoPlayer
                        disableBack
                        source={source}
                        isFullscreen={isFullscreen}
                        onFullscreenPlayerDidDismiss={onExitFullscreen}
                        onEnterFullscreen={onEnterFullscreen}
                        onExitFullscreen={onExitFullscreen}
                      />
                </View>
}


const styles = (isFullscreen: boolean) =>
  StyleSheet.create({
    container: {
      height: isFullscreen ? '100%' : '40%',
    },
  });

[waheedakhtar694]

@LunatiqueCoder I can switch between the full screen and the normal screen now but the issue I am facing onEnterFullscreen triggers while mounting.

[LunatiqueCoder]

@waheedakhtar694 Are you sure you tried v2.2.4? I tried to reproduce it and I didn't manage to.