[Q] How to add the full screen function?

[anniewey]

I've tried the below approach. On iOS, a modal is expanded when press on full screen button. But after exiting the full screen with running video, the video got paused but the button is showing pause button (the play/pause btn isn't in sync). And I couldn't find a way to play/resume the video programatically (unless i manually tap on the play/pause btn twice).

As for Android, not a major concern just that the full screen button remain in expand icon in both fullscreen and non fullscreen state.

const renderPlayer = () => {
    return (
      <VideoPlayer
        fullscreen={isFullScreen}
        allowsExternalPlayback={false}
        disableBack={true}
        paused={isPause}
        source={{ uri: dummyVideoUrl }}
        onEnterFullscreen={() => setFullScreen(true)}
        onExitFullscreen={() => {
          setFullScreen(false);
          setTimeout(()=>setPause(false), 1000); //tried using paused props but no avail
        }}
        onPause={() => setPause(true)}
        onPlay={() => setPause(false)}
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          bottom: 0,
          right: 0,
          borderWidth: 1,
          borderColor: 'red',
        }}
      />
    );
  };