Trabalhando com diferentes Layouts para orientação portrait e landscape

Motivação

Eu nunca tinha trabalhado em um projeto em que o app deveria ter dois diferentes layouts: Um para a orientação portrait e outro para orientação landscape. Então, por curiosidade, decidir criar um projeto com essa funcionalidade.

Projeto

O app consiste em uma tela que quando está na orientação portrait, ele terá o seguinte layout:

Quando o app estiver na orientação landscape, o mesmo terá o seguinte layout:

Vamos codar

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,
  },
});

Eu verifico no método onLayout do container principal, usando o método "checkIfDeviceIsInVerticalOrHorizontalOrientation", se a largura da tela é maior que a sua altura, se for, o dispositivo está na orientação landscape, se não for, o dispositivo está na orientação portrait .
Em cada condição, eu atribuo um valor boolean ao estado chamado "isVerticalOrientation", que dependendo do seu valor, o layout é mudado para o estilo "container" ou "containerRow". Esses dois estilos são os principais, pois ditam se o layout deve se comportar como landscape ou portrait.

---

Código completo do app: https://github.com/gabrielsideprojects/awesome-device-orientation
Estou aberto a pull requests e sugestões. Sintam-se confortáveis 😃.
Eu usei Snack para criar esse app. Se você desejar, você mesmo pode rodar meu snack para vê tudo descrito neste artigo funcionando 🔳.
Vamos beber um café, manda um "oi, dev" na rede social que você desejar 😃☕.