Different Layouts in Portrait and Landscape Orientations

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:

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

Let's code

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 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 😃.
I used Snack to create the app. If you desire, you can check my snack and run it, to see it working 🔳.
Let's drink a cozy and warm coffee, say hi to me on the social network you desire 😃☕.