React Native won't re-render my style
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%"}
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
what does render console.log output?
– Bheru Lal Lohar
5 hours ago