React Native won't re-render my style

Question

So I have this video view component that I want to change, but I have no success in making it go fullscreen.

The code looks like this:

class VideoView extends React.Component {
  constructor(props) {
    super(props);
    this.state={fullscreen:{
      flex: 1,
      width:"100%",
    }};
    this.enterFullScreen = this.enterFullScreen.bind(this);
    this.exitFullScreen = this.exitFullScreen.bind(this);
  }

  enterFullScreen() {
    this.setState({fullscreen:{
      position: "absolute",
      width:Dimensions.get('window').width,
      height:Dimensions.get('window').height,
      top:0,
      left:0,
      right:0,
      bottom:0,
      zIndex:200
    }});
    console.log("FIRED FULL");
  }

  exitFullScreen() {
    this.setState({fullscreen:{
      flex: 1,
      width:"100%",
    }});
  }

  render() {
    console.log("STYLE: "+JSON.stringify(this.state.fullscreen));
    return (
      <VideoPlayer style={this.state.fullscreen}
        showOnStart={false}
        controlTimeout={3000}
        onEnterFullscreen={() => this.enterFullScreen()}
        onExitFullscreen={this.exitFullScreen}
        toggleResizeModeOnFullscreen={false}
        source={{uri:"https://img-9gag-fun.9cache.com/photo/ajERx4x_460sv.mp4"}}
      />

    );
  }
}

Where the initial style looks like the left and my expected style (if I put that style as the initial one) to the right:

I want to switch between the two desired styles by re-rendering the component and as you see in the code I do so by setting the state differently. This is what I am used to as I do this in React for the web but maybe there is some difference here that I am not understanding. The VideoView is of course rendered somewhere else too but I do not understand why I wouldn't change the state like this. I have also checked the logs and I am sure that the enterFullScreen method is being called.

Thanks in advance!

UPDATE LOGS:

When pressing fullscreen:

018-07-24 12:15:10.775710+0200 hojapp[13107:373093] FIRED FULL
2018-07-24 12:15:10.777 [info][tid:com.facebook.react.JavaScript] STYLE: {"position":"absolute","width":375,"height":812,"top":0,"left":0,"right":0,"bottom":0,"zIndex":200}

When exiting fullscreen:

2018-07-24 12:16:41.347147+0200 hojapp[13107:373093] STYLE: {"flex":1,"width":"100%"}

UPDATE 2

OK I still got no idea what is causing this, might be because it is bad practice that this component has a state and should in fact be stateless. I re-did the re-rendering in the parent component for a view instead and managed to get the expected results.