Trabalhando com diferentes Layouts para orientação portrait e landscape
Tags: javascript, react, reactnative, mobile
Published: 2021-01-23 17:47:12

##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:

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

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


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

##Vamos codar

```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,
  },
});
```
Eu verifico no método [onLayout](https://reactnative.dev/docs/view#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 :smiley:.
Eu usei [Snack](https://snack.expo.io/) para criar esse app. Se você desejar, você mesmo pode rodar meu [snack](https://snack.expo.io/@gabrielsideprojects/48b367) para vê tudo descrito neste artigo funcionando :white_square_button:.
Vamos beber um café, manda um "oi, dev" na [rede social que você desejar] (https://linktr.ee/gabrielmenezess) 😃☕.