Different Layouts in Portrait and Landscape Orientations
Tags: javascript, reactnative, react, mobile
Published: 2021-01-23 17:20:00

##Motivation
I have never worked in a project where the app should have two different layouts: one for the portrait orientation and another for the landscape position. So, just because of the curiosity, I decided to create a simple project with this functionality.

##Project
The project consists of a login screen where, when the app is in portait orientation, it is going to have this layout:

![portraitPosition](https://dev-to-uploads.s3.amazonaws.com/i/dwwf54v3ye77y3gfgplz.jpg)

When the app is in landscape orientation, it is going to have this layout:

![landscapeOrientation](https://dev-to-uploads.s3.amazonaws.com/i/3grz8sptrt4jnuwgg72d.jpg)

##Let's code

```javascript
import  React,{useState, useEffect} from 'react';
import { Text, View, StyleSheet, TextInput, Image, KeyboardAvoidingView, ScrollView, SafeAreaView, Dimensions } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample'


export default function App() {
  const [isVerticalOrientation, setIsVerticalOrientation] = useState(true)
  const [firstInputText, setFirstInputText] = useState('Orientation')
  const [secondInputText, setSecondInputText] = useState('Width')
  const [thirdInputText, setThirdInputText] = useState('Height')

  const checkIfDeviceIsInVerticalOrHorizontalOrientation = () =>{
  const screenWidth = Dimensions.get('window').width
  const screenHeight = Dimensions.get('window').height
    if(screenWidth > screenHeight){
        setIsVerticalOrientation(false)
    }else{
        setIsVerticalOrientation(true)
    }
  }
  
  return (
    <View onLayout={()=>checkIfDeviceIsInVerticalOrHorizontalOrientation()} style={!isVerticalOrientation ?  styles.containerRow : styles.container}>
       <AssetExample/>
       <View>
        <TextInput value={firstInputText} style=      {styles.inputStyle} onChangeText={(text)=> setFirstInputText(text)}/>
        <TextInput style={styles.inputStyle}  value={secondInputText}/>
        <TextInput style={styles.inputStyle}  value={thirdInputText}/>
    </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ACACAC',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 8,
  },
   containerRow: {
    flex:1,
    flexDirection: 'row',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ACACAC',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 8,
  },
  inputStyle: {
    borderWidth: 1,
    borderColor: 'white',
    width: 200,
    height:50,
    borderRadius: 50,
    paddingLeft:10,
    marginTop:10,
  },
});
```
I check in the [onLayout](https://reactnative.dev/docs/view#onlayout) of the main container, using the method "checkIfDeviceIsInVerticalOrHorizontalOrientation"
if the width of the screen is bigger than its height, if it is, the device is in landscape orientation, if it is not, the device is in the portrait position. 
In each condition, I set a state called "isVerticalOrientation", that depending of its value, the layout is changed to the style named "container" or "containerRow". These styles are the main, as they dictate whether the layout should behave like landscape or portrait.

 ------------------------------------------------
Complete code of the app: https://github.com/gabrielsideprojects/awesome-device-orientation
I'm open to pull request and suggestions. Make yourself confortable :smiley:.
I used [Snack](https://snack.expo.io/) to create the app. If you desire, you can check my [snack](https://snack.expo.io/@gabrielsideprojects/48b367) and run it, to see it working :white_square_button:.
Let's drink a cozy and warm coffee, say hi to me on [the social network you desire](https://linktr.ee/gabrielmenezess) 😃☕.