CODEWITHSUNDEEP
react-native
Raymond Chenon
Raymond Chenon

Reputation: 12662

How detect tablet landscape on React Native

I want to border margin of of screen S on phone and tablet to be different. There are variants for tablet landscape and portrait mode.

How to create different margin dimension for the variants on phone, tablet portrait, tablet landscape ?

For those curious how to do on Android , we just create some resource files at the right folder :

Upvotes: 2

Views: 5387

Answers (3)

martinarroyo
martinarroyo

Reputation: 9701

The other answers have already addressed the screen detection task. However, there is still the issue of detecting if the code is running on a Tablet device. You can detect that using the react-native-device-info package, in particular its isTablet method. So, as an example, in your component:

constructor(){
  super();
  this.state = {orientation: 'UNKNOWN'}
  this._onOrientationChanged = this._onOrientationChanged.bind(this);
}

_onOrientationChanged(orientation){
  this._setState({orientation})
}

componentDidMount(){
  Orientation.addOrientationListener(this._onOrientationChanged);
}
componentWillUnmount(){
  Orientation.removeOrientationListener(this._orientationDidChange);
}

render(){

  let layoutStyles;
  if(DeviceInfo.isTablet()){
    layoutStyles = this.state.orientation == 'LANDSCAPE' ? landscapeTabletStyle : portraitTabletLandscape; // Basic example, this might get more complex if you account for UNKNOWN or PORTRAITUPSIDEDOWN
  }else{

    layoutStyles = this.state.orientation == 'LANDSCAPE' ? landscapeStyle : portraitLandscape;
  }

  render(){
     <View style={[styles.container, layoutStyles]} // And so on...
  }
}

Note that the state holds the UNKNOWN value on the beginning. Have a look at the getInitialOrientation() of the package function. I am intentionally leaving that bit out because it simply reads a property that is set when the JS code loads, and I am not sure if that satisfies your usecase (i.e. this is not your first screen). What I usually like to do is store the rotation value in a redux store (where I initialize the orientation value to that of getInitialOrientation() and then subscribe only once to the orientation listener).

Upvotes: 5

Ahmed Ali
Ahmed Ali

Reputation: 2668

    // Extract from the root element in our app's index.js

class App extends Component {
  _onLayout = event => this.props.appLayout(event.nativeEvent.layout);

  render() {
    return (
      <View onLayout={this._onLayout}>
        {/* Subviews... */}
      </View>
    );
  }
}



  export const SET_ORIENTATION = 'deviceStatus/SET_ORIENTATION';
  export function appLayout(event: {width:number,    height:number}):StoreAction {
  const { width, height } = event;
  const orientation = (width > height) ? 'LANDSCAPE' : 'PORTRAIT';
  return { type: SET_ORIENTATION, payload: orientation };
}

Code Copied from Here

Upvotes: 0

jmac
jmac

Reputation: 706

I think this library will be helpful for you: https://github.com/yamill/react-native-orientation

You can do something like that with it:

Orientation.getOrientation((err,orientation)=> {
    console.log("Current Device Orientation: ", orientation);

    if(orientation === 'LANDSCAPE') {
      //do stuff
    } else {
      //do other stuff
    }

});

Upvotes: 0

Related Questions