Enabling fullscreen playback

// Define a handler to take care of fullscreen transitions
class SampleFullscreenHandler implements FullscreenHandler {
  isFullscreenActive: boolean = true;
  onFullscreen: (fullscreenMode: boolean) => void;

  constructor(
    isFullscreenActive: boolean,
    onFullscreen: (fullscreenMode: boolean) => void
  ) {
    this.isFullscreenActive = isFullscreenActive;
    this.onFullscreen = onFullscreen;
  }

  enterFullscreen(): void {
    // Update UI state for fullscreen mode
    this.isFullscreenActive = true;
    this.onFullscreen(true);
    if (Platform.OS === 'android') {
      // Hides navigation and status bar on Android using 'react-native-system-navigation-bar' package
      SystemNavigationBar.stickyImmersive(true);
    } else {
      // Hides status bar on iOS
      StatusBar.setHidden(true);
    }
    // If landscape mode during fullscreen is preferred
    // this should be handled here as well 
    // by integrating integrating 'react-native-orientation-locker' package
    // and uncommenting the next line:
    // Orientation.lockToLandscape();
    console.log('enter fullscreen');
  }

  exitFullscreen(): void {
    // Update UI state for non-fullscreen mode
    this.isFullscreenActive = false;
    this.onFullscreen(false);
    if (Platform.OS === 'android') {
      // shows navigation and status bar on Android using 'react-native-system-navigation-bar' package
      SystemNavigationBar.stickyImmersive(false);
    } else {
      // shows status bar on iOS
      StatusBar.setHidden(false);
    }
    // If landscape mode during fullscreen is preferred
    // this should be handled here as well
    // by integrating integrating 'react-native-orientation-locker' package
    // and uncommenting the next line:
    // Orientation.unlockAllOrientations();
    console.log('exit fullscreen');
  }
}

export default function BasicFullscreenHandling({navigation}) {
  // Set up player and other components...

  // State to reflect current fullscreen state.
  const [fullscreenMode, setFullscreenMode] = useState(false);
  // Create SampleFullscreenHandler instance and enable it to update state
  const fullscreenHandler = useRef(
    new SampleFullscreenHandler(fullscreenMode, (isFullscreen: boolean) => {
      setFullscreenMode(isFullscreen);

      // In case of native stack navigation show/hide top bar
      navigation.setOptions({ headerShown: !isFullscreen });

      // In case of bottom tabs navigation show/hide top and bottom bars
      navigation.setOptions({
        headerShown: !isFullscreen, // show/hide top bar
        tabBarStyle: {display: isFullscreen ? 'none' : 'flex'}, // show/hide bottom bar
      });
    }),
  ).current;

  return (
    <View>
      <PlayerView
        player={player}
        // Apply style based on `fullscreenMode` state value
        style={fullscreenMode ? styles.playerFullscreen : styles.player}
        fullscreenHandler={fullscreenHandler}
        onFullscreenEnter={onFullscreenEnter}
        onFullscreenExit={onFullscreenExit}
        onFullscreenEnabled={onFullscreenEnabled}
        onFullscreenDisabled={onFullscreenDisabled}
      />
    </View>
  );
}

// Define your styles
const styles = StyleSheet.create({
  player: {
    flex: 1,
    backgroundColor: 'black',
  },
  playerFullscreen: {
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    backgroundColor: 'black',
  },
});