Getting design issues when the device is in PORTRAIT UPSIDEDOWN in 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

What do you mean by design issues? Being more specific and providing examples, such as screenshots, will help others help you. — jevakallio, Jan 04 '17 at 13:54
Please add styles, I'm Unable to even see how your UI looks like. — Vikram Belde, Jan 04 '17 at 15:02

Vikram Belde · Answer 1 · 2017-01-04T15:39:32.330

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

Thanks for giving me ... It's Working on IOS, But it's not working on Android Vkrm — Lavaraju, Jan 05 '17 at 06:56

score 0 · Answer 2 · edited May 23 '17 at 12:01

0

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

edited May 23 '17 at 12:01

Community

1
1

answered Jan 05 '17 at 07:48

Lukas Liesis

24,652
10
111
109

Thanks Mr.Lukas ,Actually when I am run the Simulator /IOS Device, I am Set the Portrait Defaultly ,After next rotation LandScape to next Rotation the Screen Should be Displayed like Above Screen. – Lavaraju Jan 05 '17 at 10:10

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

2 Answers2