Why does a pause reset after enabling full screen mode?

Question

I'm trying to add a video player, I'm using react-native-video-controls to add controls on my video but it has a problem with resetting a pause

code:

handleExitFullScreen = () => {
    this.setState({
        fullScreen : false
    });
}

handleEnterFullscreen = () => {
    this.setState({
        fullScreen : true
    });
}
<VideoPlayer
          source            = {{ uri: link }}
          disableVolume
          disableBack
          onEnterFullscreen = {this.handleEnterFullscreen}
          onExitFullscreen  = {this.handleExitFullScreen}
          toggleResizeModeOnFullscreen = {false}
/>

Answer 1

If you look at the react-native-video-controls module,

    _toggleFullscreen() {
        let state = this.state;

        state.isFullscreen = ! state.isFullscreen;

        if (this.props.toggleResizeModeOnFullscreen) {
            state.resizeMode = state.isFullscreen === true ? 'cover' : 'contain';
        }

        if (state.isFullscreen) {
            typeof this.events.onEnterFullscreen === 'function' && this.events.onEnterFullscreen();
        }
        else {
            typeof this.events.onExitFullscreen === 'function' && this.events.onExitFullscreen();
        }

        this.setState( state );
    }

you can see that it executes setSate when changing the status of the screen. That means being rendered again.

The implementations are included in such renderers as react-native-dom, react-native.

Looking at the setState implementation in React.Component, everything was delegated to act on the renderer that created the component instance.

// A bit simplified

setState(partialState, callback) {
    // Use the 'updater' field to talk back to the renderer!
    this.updater.enqueueSetState(this, partialState, callback);
};

This is how this.setState() is defined in the React package, but it is how DOM is updated. Read this.updater set by React DOM, allow ReactDOM schedule, and process updates.