DEV Community: Gabriel Menezes da Silva

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

Gabriel Menezes da Silva — Sat, 23 Jan 2021 17:47:12 +0000

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 😃☕.

Different Layouts in Portrait and Landscape Orientations

Gabriel Menezes da Silva — Sat, 23 Jan 2021 17:20:00 +0000

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 😃☕.

Creating a ViewPager using FlatList

Gabriel Menezes da Silva — Wed, 30 Dec 2020 16:38:58 +0000

Motivation

At my job, a demand appeared where I needed to create a modal that should have a ViewPager to demonstrate a three step tutorial for a functionality within the app.
I checked that there is a react-native's library that provides the ViewPager component ready. But as the project has a lot of libs already, I always try to not put unnecessary libs, in order to maintain the size of the bundle as small as possible. Therefore, as I know that I would not need all functionalities of the ViewPager, which are a lot, I searched how I would create one, in which I had three pages where I would swipe to right or left and the page was changed, all of this just with components that exists in react-native already.

ViewPager

To better understand what is a ViewPager, I decided to put the gif below. I got this .gif from this repository (https://github.com/afollestad/viewpagerdots) :

I believe that a lot of people saw this component already, since this component is very common in the tutorial session of the applications.

Let's Code

First, I'm going to create a button where when pressed, a modal with the ViewPager will show up:




<Pressable
        style={styles.openViewPagerModalButton}
      >
        <Text>Open the most awesome view pager modal!</Text>
</Pressable>

For this example, I created an array with the objects that represents the text which will appear in each page:



const texts = [
    {
      id: "1",
      text: "Teste 1",
    },
    {
      id: "2",
      text: "Teste 2",
    },
    {
      id: "3",
      text: "Teste 3",
    },
  ];

I created a state that is going to control the visibility of the modal:



 const [viewPagerModalIsVisible, setViewPagerModalIsVisible] = useState(true);

Right below is the frosting on the cake 🍰:



<Modal visible={viewPagerModalIsVisible}>
        <View style={styles.modalMainContainer}>
          <View style={styles.modalSubContainer}>
            <FlatList
              contentContainerStyle={styles.alignItemsCenter}
              data={texts}
              horizontal
              keyExtractor={(item) => item.id}
              pagingEnabled
              showsHorizontalScrollIndicator={false}
              renderItem={({ item }) => (
                <Text style={styles.viewPagerTextStyle}>{item.text}</Text>
              )}
            />
          </View>
       </View>
</Modal>

Basically, I created a FlatList where its scroll is horizontal, using the prop horizontal, and with pagination, using the prop pagingEnabled. Each item of the list, which has the style viewPagerTextStyle, has the size of the View with style modalSubContainer, making the list behave not as a continuous scroll but as a ViewPager. That is, you just have to swipe to the right or to the the left that the page will change accordingly.
This behavior is shown in the gif below:

Stylization code of modalSubContainer and viewPagerTextStyle:



 modalSubContainer: {
    backgroundColor: "#FFF",
    alignSelf: "center",
    alignItems: "center",
    justifyContent: "center",
    height: 190,
    width: 320,
    borderTopRightRadius: 20,
    borderTopLeftRadius: 20,
    paddingTop: 10,
  },
viewPagerTextStyle: {
    width: 320,
    textAlign: "center",
  },

Indication of pages

To be exactly equal to a ViewPager we have to add that "small dots" which indicates the page that the user is. To do this, we're going to add a lib called react-native-dots-pagination. To install it, just use the command below if you use yarn:



yarn add react-native-dots-pagination

If you use npm:



npm install react-native-dots-pagination

It must be created a state that is going to control which pagination dot is active:



 const [activeDot, setActiveDot] = useState(0);

Before adding the "small dots" in my screen, I need to know which page of my list the user is, in order to do this, I need to add the props onViewableItemsChanged and viewabilityConfig in the FlatList:



<FlatList
  contentContainerStyle={styles.alignItemsCenter}
  data={texts}
  horizontal
  keyExtractor={(item) => item.id}
  pagingEnabled
  onViewableItemsChanged={handleVieweableItemsChanged}
  viewabilityConfig={viewabilityConfig}
  showsHorizontalScrollIndicator={false}
  renderItem={({ item }) => (
  <Text style={styles.viewPagerTextStyle}>{item.text}</Text>
)}
  />

The prop onViewableItemsChanged is to execute a function each time the visibility of a list's item changes. In our case, each time we change the page, the function handleVieweableItemsChanged is called:



const handleVieweableItemsChanged = useCallback(({ viewableItems }) => {
    setActiveDot(viewableItems[0].index);
  }, []);

When this function gets executed the active pagination dot changes, that is, when the user is in the first page, the first dot is shown as active and the same happens with the other pages.

The prop viewabilityConfig is used to inform a lot of parameters which are going to influence the prop onViewableItemsChanged. For this case, I'm sending the prop viewabilityConfig an object with an attribute which informs how much of the item must be shown for it to be considered as visible. The name of this attribute is itemVisiblePercentThreshold:



  const viewabilityConfig = {
    itemVisiblePercentThreshold: 50,
  };

Just 50% of the item must be visible to the function handleVieweableItemsChanged be called.

The pagination dots component code is below:



    <Dots
     activeDotWidth={6}
     activeDotHeight={6}
     passiveDotHeight={6}
     passiveDotWidth={6}
     length={3}
     activeColor={"#000"}
     active={activeDot}
     />

Complete code of the app: https://github.com/gabrielsideprojects/awesome-view-pager-flat-list
I'm open to pull request and suggestions to the code and article. Make yourself confortable 😃.
I used Expo to create the app.
Let's drink a cozy and warm coffee, say hi to me on Linkedin😃 ☕.

Criando um ViewPager utilizando FlatList

Gabriel Menezes da Silva — Tue, 29 Dec 2020 14:11:17 +0000

Motivação

No meu trabalho apareceu uma demanda em que eu tinha que criar um pequeno modal, onde houvesse um "ViewPager" para demonstrar um pequeno tutorial de uma funcionalidade em 3 passos.
Verifiquei que já existe uma lib para react-native que fornece o componente de ViewPager já pronto. Mas como o projeto já tem muitas libs, tento sempre procurar não adicionar libs desnecessárias, com o intuito de manter o tamanho do bundle do app o menor possível. Assim, como eu sabia que não precisaria de todas as funcionalidade de uma ViewPager, que são muitas, pesquisei como eu poderia criar uma, em que tivesse três páginas onde eu desse um "swipe" para direita ou para esquerda e a página fosse mudada, isso tudo apenas com componentes já existentes do react-native.
Uma das maiores motivações para a criação deste artigo também é que não achei muito conteúdo em português abordando este assunto.

ViewPager

Para um melhor entendimento do que seria um ViewPager decidi colocar o gif abaixo. Consegui esse .gif a partir deste repositório (https://github.com/afollestad/viewpagerdots) :

Acredito que muitos já viram, esse componente é muito comum na parte de tutorial das aplicações.

Vamos codar

Primeiramente, irei criar apenas um botão onde será possível clicar para aparecer o modal onde haverá a tão citada "ViewPager":


<Pressable
        style={styles.openViewPagerModalButton}
      >
        <Text>Open the most awesome view pager modal!</Text>
</Pressable>

Para exemplificar, criei um array de objetos que contém o texto que aparecerá em cada "página":

const texts = [
    {
      id: "1",
      text: "Teste 1",
    },
    {
      id: "2",
      text: "Teste 2",
    },
    {
      id: "3",
      text: "Teste 3",
    },
  ];

Criei um estado que vai controlar a visibilidade do modal:

 const [viewPagerModalIsVisible, setViewPagerModalIsVisible] = useState(true);

E logo abaixo segue o código da cereja do bolo 🍒:

<Modal visible={viewPagerModalIsVisible}>
        <View style={styles.modalMainContainer}>
          <View style={styles.modalSubContainer}>
            <FlatList
              contentContainerStyle={styles.alignItemsCenter}
              data={texts}
              horizontal
              keyExtractor={(item) => item.id}
              pagingEnabled
              showsHorizontalScrollIndicator={false}
              renderItem={({ item }) => (
                <Text style={styles.viewPagerTextStyle}>{item.text}</Text>
              )}
            />
          </View>
       </View>
</Modal>

Basicamente, criei uma FlatList em que seu scroll é horizontal, usando a prop horizontal, e com paginação, usando a prop pagingEnabled. Cada item da lista, com o estilo viewPagerTextStyle, tem a largura da View de estilo modalSubContainer, fazendo com que a lista se comporte não como um scroll contínuo mas como um ViewPager, ou seja, basta dar um swipe para direita ou esquerda que a página será passada para o lado correspondente. Esse comportamento está demonstrado no gif abaixo:

Código de estilização do modalSubContainer e do viewPagerTextStyle:

 modalSubContainer: {
    backgroundColor: "#FFF",
    alignSelf: "center",
    alignItems: "center",
    justifyContent: "center",
    height: 190,
    width: 320,
    borderTopRightRadius: 20,
    borderTopLeftRadius: 20,
    paddingTop: 10,
  },
viewPagerTextStyle: {
    width: 320,
    textAlign: "center",
  },

Indicação das páginas

Para ficar exatamente igual a um ViewPager temos que adicionar aqueles "pontinhos" que indicam qual página o usuário está. Para isso, vamos adicionar uma lib chamada react-native-dots-pagination (https://github.com/tsepeti/react-native-dots-pagination). Para instalá-la, basta usar o comando abaixo caso você use o yarn:

yarn add react-native-dots-pagination

Case você utilize o npm:

npm install react-native-dots-pagination

Deve ser criado um state que controlará o "pontinho" que está ativo:

 const [activeDot, setActiveDot] = useState(0);

Antes de adicionar os "pontinhos" na tela, eu preciso saber em qual "página" minha lista está, para isso, preciso adicionar as props onViewableItemsChanged e viewabilityConfig na FlatList:

<FlatList
  contentContainerStyle={styles.alignItemsCenter}
  data={texts}
  horizontal
  keyExtractor={(item) => item.id}
  pagingEnabled
  onViewableItemsChanged={handleVieweableItemsChanged}
  viewabilityConfig={viewabilityConfig}
  showsHorizontalScrollIndicator={false}
  renderItem={({ item }) => (
  <Text style={styles.viewPagerTextStyle}>{item.text}</Text>
)}
  />

A prop onViewableItemsChanged serve para executar uma função toda vez que a visibilidade de cada item da lista mudar. Para o nosso caso, toda vez que mudarmos de página, a função handleVieweableItemsChanged será chamada:

const handleVieweableItemsChanged = useCallback(({ viewableItems }) => {
    setActiveDot(viewableItems[0].index);
  }, []);

Quando essa função for executada será alterado o "pontinho" que está ativo, ou seja, quando estiver na primeira página, o primeiro "pontinho" será ativado e assim respectivamente.

A prop viewabilityConfig é usada para informar diversos parâmetros que irão influenciar na prop onViewableItemsChanged. Para o nosso caso irei criar um objeto, para passar na prop, com um o atributo que informa o quanto do item é necessário está disposto no layout para informar que o mesmo está visível. O nome desse atributo é itemVisiblePercentThreshold:

  const viewabilityConfig = {
    itemVisiblePercentThreshold: 50,
  };

Basta 50% do item já está visível que a função handleVieweableItemsChanged será chamada.

O componente para os "pontinhos" segue logo abaixo:

    <Dots
     activeDotWidth={6}
     activeDotHeight={6}
     passiveDotHeight={6}
     passiveDotWidth={6}
     length={3}
     activeColor={"#000"}
     active={activeDot}
     />

Link para o código completo: https://github.com/gabrielsideprojects/awesome-view-pager-flat-list
Estou aberto a pull requests e sugestões para o código e o artigo. Sintam-se à vontade 😃.
Utilizei o Expo para a criação do aplicativo.
Para tomarmos um café bem quentinho, só mandar um "oi" lá no meu Linkedin 😃 ☕.