React Native won't re-render my style

The name of the picture


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:



enter image description hereenter image description here



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%"}





what does render console.log output?
– Bheru Lal Lohar
5 hours ago





@BheruLalLohar please check updated question
– Martin Kjellberg
5 hours ago









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.

Popular posts from this blog

Keycloak server returning user_not_found error when user is already imported with LDAP

PHP parse/syntax errors; and how to solve them?

How to scale/resize CVPixelBufferRef in objective C, iOS