Getting design issues when the device is in PORTRAIT UPSIDEDOWN in React native - react-native

Question

I'm working on React native project, My issue is when I try to change the orientation from LANDSCAPE to PORTRAIT getting some design issues especially when the device is turned to PORTRAIT UPSIDEDOWN from LANDSCAPE.
Here Is My Code:
class Exm extends Component {
constructor() {
super();
const init = Orientation.getInitialOrientation();
this.state = {
init,
or: init,
sor: init,
emailId: '',
password:'',
Token:'',
orientation:'',
Spinner:false,
userId:null,
isDisabled:false
};
this._updateOrientation = this._updateOrientation.bind(this);
Orientation.addOrientationListener(this._updateOrientation);
this._updateSpecificOrientation = this._updateSpecificOrientation.bind(this);
Orientation.addSpecificOrientationListener(this._updateSpecificOrientation);
}
_updateOrientation(or) {
// alert("HI")
this.setState({ or });
}
_updateSpecificOrientation(sor) {
//alert("HELLO")
this.setState({ sor });
}
render() {
console.log("Type Of Orientation:"+this.state.init+','+this.state.or+','+this.state.sor);
const { init, or, sor} = this.state;
return (
<View style={styles.container}>
{this.state.sor=="PORTRAIT" ?(
<View style={{flex:1}}>
<Image style={{width:windowSize.width,height:windowSize.height,resizeMode:'cover'}} source={require('./../images/home.png')}>
<View style={{flex:1}}>
<View style={{flex:0.5,justifyContent:"flex-end"}}>
<Text style={{backgroundColor:"transparent",fontSize:17,color:"white",fontWeight:'500',textAlign:'center',marginBottom:45}}>Finest Wines Direct from Sonoma</Text>
<TouchableOpacity onPress={this.onClick.bind(this)}>
<View style={styles.button1}>
<Text style={{fontSize:18,color:"white",fontWeight:"bold",textAlign:'center'}}>BROWSE WEBSITE</Text>
</View>
</TouchableOpacity>
</View>
<View style={{flex:0.5}}>
<TouchableOpacity onPress={this.onClick1.bind(this)}>
<View style={styles.button}>
<Text style={{fontSize:18,color:"white",fontWeight:"bold",textAlign:'center'}}>DAILY DEALS</Text>
</View>
</TouchableOpacity>
</View>
</View>
</Image>
</View>
):
this.state.sor=="UNKNOWN" ? (
<View style={{flex:1}}>
<Image style={{width:windowSize.width,height:windowSize.height,resizeMode:'cover'}} source={require('./../images/home.png')}>
<View style={{flex:1}}>
<View style={{flex:0.5,justifyContent:"flex-end"}}>
<Text style={{backgroundColor:"transparent",fontSize:17,color:"white",fontWeight:'500',textAlign:'center',marginBottom:45}}>Finest Wines Direct from Sonoma</Text>
<TouchableOpacity onPress={this.onClick.bind(this)}>
<View style={styles.button1}>
<Text style={{fontSize:18,color:"white",fontWeight:"bold",textAlign:'center'}}>BROWSE WEBSITE</Text>
</View>
</TouchableOpacity>
</View>
<View style={{flex:0.5}}>
<TouchableOpacity onPress={this.onClick1.bind(this)}>
<View style={styles.button}>
<Text style={{fontSize:18,color:"white",fontWeight:"bold",textAlign:'center'}}>DAILY DEALS</Text>
</View>
</TouchableOpacity>
</View>
</View>
</Image>
</View>
):this.state.sor=="LANDSCAPEUPSIDEDOWN" ? (
<View style={{flex:1}}>
<Image style={{width:windowSize.height,height:windowSize.width}} source={require('./../images/home_landscape.png')}>
<View style={{flex:1}}>
<View style={{flex:0.5,justifyContent:"flex-end"}}>
<Text style={{backgroundColor:"transparent",fontSize:17,color:"white",fontWeight:'500',textAlign:'center',marginBottom:45}}>Finest Wines Direct from Sonoma</Text>
<TouchableOpacity onPress={this.onClick.bind(this)}>
<View style={styles.button1}>
<Text style={{fontSize:18,color:"white",fontWeight:"bold",textAlign:'center'}}>BROWSE WEBSITE</Text>
</View>
</TouchableOpacity>
</View>
<View style={{flex:0.5}}>
<TouchableOpacity onPress={this.onClick1.bind(this)}>
<View style={styles.button}>
<Text style={{fontSize:18,color:"white",fontWeight:"bold",textAlign:'center'}}>DAILY DEALS</Text>
</View>
</TouchableOpacity>
</View>
</View>
</Image>
</View>
):
<View style={{flex:1}}>
<Image style={{width:windowSize.height,height:windowSize.width}} source={require('./../images/home_landscape.png')}>
<View style={{flex:1}}>
<View style={{flex:0.5,justifyContent:"flex-end"}}>
<Text style={{backgroundColor:"transparent",fontSize:17,color:"white",fontWeight:'500',textAlign:'center',marginBottom:45}}>Finest Wines Direct from Sonoma</Text>
<TouchableOpacity onPress={this.onClick.bind(this)}>
<View style={styles.button1}>
<Text style={{fontSize:18,color:"white",fontWeight:"bold",textAlign:'center'}}>BROWSE WEBSITE</Text>
</View>
</TouchableOpacity>
</View>
<View style={{flex:0.5}}>
<TouchableOpacity onPress={this.onClick1.bind(this)}>
<View style={styles.button}>
<Text style={{fontSize:18,color:"white",fontWeight:"bold",textAlign:'center'}}>DAILY DEALS</Text>
</View>
</TouchableOpacity>
</View>
</View>
</Image>
</View>
}
</View>
);
}
}
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:'#f5f5f5'
},
button:{
height: 55,
backgroundColor: 'transparent',
borderColor: 'white',
borderWidth: 2,
marginRight:50,
marginLeft:50,
marginTop: 20,
marginBottom:5,
justifyContent:'center',
alignSelf:'stretch',
},
button1:{
height: 55,
backgroundColor: 'transparent',
borderColor: 'white',
borderWidth: 2,
marginRight:50,
marginLeft:50,
marginBottom:5,
justifyContent:'center',
alignSelf:'stretch',
},
buttonText:{
fontSize: 18,
marginTop:5,
marginBottom:5,
textAlign:'center',
color:'white',
textAlignVertical:'center',
},
});
module.exports = Exm;
ScreenShots Here.
Please give me suggestions to solve this issue, Any help much appreciated
Ef.png

Answer 1

Seems like the Module is not updated with ES6 Syntax. Here is a Sample Code you can make use of. Demo
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import OrientationModule from 'react-native-orientation'
class Example extends Component {
constructor() {
super();
this.state = {
orientationStatus: 'PORTRAIT'
};
}
componentWillMount(){
var Orientation = OrientationModule.getInitialOrientation()
this.setState({
Orientation: Orientation
})
}
_orientationDidChange = (orientationStatus) => {
this.setState({orientationStatus})
}
componentDidMount(){
// Add a Listener, every time Orientation changes this method triggers
OrientationModule.addOrientationListener(this._orientationDidChange);
}
componentWillUnmount(){
// Remove the Listener, to avoid setting a State while component was unmounted
OrientationModule.removeOrientationListener(this._orientationDidChange);
}
render() {
// You can Have your Design Logic here
return (
<View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
<Text>{this.state.orientationStatus}</Text>
</View>
)
}
}
module.exports = Example

Answer 2

Why are you doing this in first place, just write component w/o any orientation code and it should rotate automatically. Then if you need some layout adjustments do those like width/height or just check flexbox model more maybe it's already have what you need, while react native mimics flexbox. Can't tell from your description what issue you face.
Also if you want to disable some orientations, it can be done in project config
Android
Android - disable landscape mode?
iOS https://stackoverflow.com/a/24205653/1737158