Tendo em mente a disposição dos elementos da interface gráfica citada, destacaremos adiante algumas técnicas para a definição da interface de um aplicativo mobile.

Como primeiro passo para a esquematização da interface e interatividade de nosso aplicativo mobile, devemos ter em mãos as suas funcionalidades, ou seja, precisamos conhecer tudo o que o aplicativo deverá fazer e tudo o que poderá ser feito por meio dele. Essa lista de funcionalidades pode ser:

Como exercício, confeccionaremos juntos a lista de funcionalidades de um aplicativo bancário. Por meio desse app, deve ser possível, graças ao fluxo básico, realizar as seguintes atividades:

Já no fluxo alternativo, que acontece quando o usuário não se loga, tem de ser possível:

As funcionalidades descritas, embora bastante reduzidas na comparação com um aplicativo real, nos ajudam a começar o planejamento da interface de nosso aplicativo. Graças a tais requisitos é possível, por exemplo, entender quantas telas existirão no aplicativo, assim como identificar os elementos de interação, desde botões simples até elementos visuais com função de publicidade.

Continuando nosso exercício e considerando os requisitos descritos, podemos fazer um primeiro esboço dos sete elementos que comporão a interface de nossa aplicação:

Após o preenchimento inicial do quadro contendo as telas e os elementos visuais com base nos requisitos – e tendo em mente que tal exercício está bastante simplificado se comparado a exemplos reais –, identificamos a presença de, pelo menos, sete telas em nosso aplicativo.

Além disso, é possível verificar que alguns desses elementos visuais aparecerão em mais de uma tela. Esse fator é importante!

Escolha dos componentes

Dando seguimento à esquematização da interface e dos elementos de interatividade de nosso app, agora cumpriremos dois passos:

Partiremos então do segundo passo. Como dito, é preciso tomar alguns cuidados com a organização, a fim de “conteinerizar” os elementos utilizados, e a compatibilidade ou as restrições, em que questões – como a dos elementos que não podem ser aninhados dentro de outros ou as diferenças de tamanho de tela e espaço útil disponível nos diferentes dispositivos móveis – devem ser consideradas.

Alguns fragmentos de código com diferentes organizações dos componentes na tela, assim como comentários sobre cada um deles, podem ser vistos a seguir:

O primeiro fragmento possui uma “View” como container principal, dentro da qual os demais componentes ficam aninhados. Em termos de semântica, embora o código em questão funcione sem erros, é recomendado não aninhar componentes de imagem dentro de componentes de texto como está apresentado anteriormente.

Observemos outro fragmento:

Os pontos de atenção desse novo fragmento estão na utilização dos seguintes componentes:

Você pode utilizar tal componente para a plataforma iOS e implementar, por meio de estilos condicionais, uma “área de conteúdo segura” para a plataforma Android.

Ainda na área de conteúdo seguro, cabe destacar um último componente: o KeyboardAvoidingView. Ele resolve problemas comuns existentes entre os componentes visuais e o teclado virtual, ajustando automaticamente a altura e a posição de acordo com a altura do teclado.

Componentes de interface e interação

Veremos agora alguns elementos de interface, além dos vistos anteriormente, e de interação que nos ajudarão a esquematizar as telas de nosso aplicativo.

Modal

Este componente é uma boa estratégia para apresentar mais conteúdo sem que seja necessário levar o usuário para outra página ou mesmo criar um scroll vertical muito grande. O acesso à janela Modal pode ser feito por meio do clique em um botão, por exemplo. Veja o fragmento a seguir:

Botões

O fragmento de código anterior contém um elemento de interação, o Pressable, cujo funcionamento equivale ao de um botão. O React Native possui alguns componentes com essa mesma função, como, por exemplo:

Tais componentes compartilham entre si algumas semelhanças e diferenças, sendo a diferença mais importante a menor possibilidade de estilização presente no Button.

ActivyIndicator

Outros componentes

Além dos componentes vistos até aqui, há vários outros disponíveis para a organização das telas de nosso aplicativo. Eles possuem, além de organizar visualmente os elementos ou fornecer interatividade, diferentes funções, como permitir a navegação entre telas e a apresentação otimizada de recursos específicos, como listas e cards.

Neste vídeo, falaremos sobre os pontos relevantes e de atenção ao realizarmos uma esquematização do passo a passo para definição da interface interativa de um aplicativo mobile.

Existem componentes para a construção de interfaces interativas que, além de serem utilizados com a finalidade de montagem da interface e de interação, também podem ser empregados para outras funcionalidades.

O componente View é um ótimo exemplo: por meio dele, podemos tanto organizar nossas telas em bloco quanto exibir textos. Neste módulo, abordaremos os componentes que possuem responsabilidades específicas: os de lista e multivalorados.

O React Native possui três principais componentes nativos de listas:

Estabeleceremos as definições e a utilidade desses três componentes, assim como suas implementações. Antes disso, no entanto, é importante entender o comportamento geral deles.

Como os próprios nomes sugerem, trata-se de componentes voltados para a exibição de dados no formato de lista (listas, arrays, coleções, etc.). Você verá inclusive que eles possuem algumas características semelhantes às das listas em geral, como o fato de possuir índice e a capacidade de iteração em seu conteúdo.

VirtualizedList

Das características do VirtualizedList, destacam-se:

Observaremos a seguir um exemplo de implementação de lista utilizando o componente VirtualizedList:

O código do exemplo imprime 100 retângulos na tela contendo o texto “Item”, seguido de um número de 1 a 100. Embora simples, ele nos permite observar o componente em funcionamento. Experimente rolar a tela, indo até o final e retornando ao início. Na prática, nossas listas são alimentadas por conteúdo proveniente de fontes externas, como APIs, por exemplo.

É normal, nessas situações, ocorrer uma pequena demora no primeiro carregamento dos dados. Entretanto, após isso, o VirtualizedList cuidará para que a visualização de todo o conteúdo seja feita de forma suave, sem quebras no layout ou interrupções. Ainda nos atendo ao código, precisamos fazer alguns comentários sobre os atributos desse componente:

SectionList

O código adiante mostra como a SectionList pode ser utilizada. Repare nos atributos, nos quais são definidos tanto os dados a serem listados quanto o dado a ser utilizado como “agrupador” ou definidor de cada seção.

Outro detalhe: nesse exemplo, é utilizado uma string no formato JSON como fonte de dados. Na prática, você poderá consumir os dados de fontes externas, tomando o cuidado de organizá-los para que eles tenham um elemento que identifique a seção e outro para os dados de cada seção. Vamos ao exemplo:

Analise o código anterior e repare que a SectionList possui alguns atributos semelhantes aos vistos na VirtualizedList. Sendo assim, devemos mencionar outros atributos que lhe são característicos:

Observe novamente o código do nosso exemplo onde utilizados o renderSectionHeader, e perceba que exibimos um componente Text contendo a chave “título” da constante DADOS, que é usada para alimentar a lista.

FlatList

Conceitos e funcionalidades

O último componente de lista que veremos é o FlatList. Ele é otimizado, em termos de desempenho, para renderizar listas simples e básicas. Além disso, possui suporte para vários recursos muito úteis. Conheça alguns deles a seguir:

Vejamos um exemplo de implementação do FlatList:

Recursos adicionais do FlatList

Outro recurso muito interessante presente no FlatList – e nos demais componentes de lista – é o “onEndReached” (e, consequentemente, o “onEndReachedThreshold). Com o uso dessa função, podemos informar ao nosso aplicativo que determinada ação deverá ser executada quando o usuário chegar ou visualizar o final dos elementos da lista. Normalmente, ela é usada para carregar, mediante demanda, novos conteúdos.

Até aqui, você viu como esquematizar a interface interativa de um aplicativo utilizando diversos componentes, alguns mais gerais e de múltiplos usos, como a View, e outros mais específicos e voltados para determinadas necessidades, como as listas.

Introduziremos novos componentes no próximo módulo. Por intermédio deles, será possível organizar a navegação entre as diversas telas que normalmente compõem um aplicativo.

Neste vídeo, abordaremos os principais componentes de lista e multivalorados disponíveis no React Native.

Estamos acostumados a utilizar o conceito de navegação proveniente dos sites ou sistemas web. Em tais ambientes, estão presentes termos como:

Com isso, é normal, no desenvolvimento de aplicativos mobile, se pegar emprestado alguns desses termos a fim de fazer uma assumpção e/ou uma correlação de conceitos. Pode-se afirmar que um aplicativo é normalmente composto por várias páginas.

Ao longo deste módulo, falaremos sobre os aspectos que envolvem a navegação entre as telas/páginas de um aplicativo mobile. Para isso, voltaremos a fazer as correlações mencionadas, descrevendo os três principais modelos disponíveis no React Native.

Para implementar os exemplos que serão demonstrados neste módulo, é necessário instalar algumas novas dependências em nosso projeto (se você ainda não criou um projeto, recomendo que o faça agora). Essas dependências serão listadas a seguir:

Apresentação

Podemos relacionar o Stack Navigator a dois conceitos já conhecidos:

Seguindo os dois conceitos apresentados, o Stack Navigator provê um mecanismo que possibilita:

Para se codificar a navegação utilizando esse modelo, é preciso haver um NavigationContainer e, no mínimo, um createNativeStackNavigator. Além disso, são necessárias pelo menos duas telas já codificadas em nosso aplicativo para se definir a navegação entre ambas.

Mais adiante, veremos um código que demonstra a criação do ponto de entrada de um aplicativo (App.js) e da navegação entre duas telas (Home e Sobre).

Estrutura do projeto

A imagem a seguir mostra a estrutura do projeto no qual foi utilizado o Expo (por meio do snack.expo.dev):

O script App.js é o ponto de entrada do aplicativo em que o StackNavigator foi definido. A pasta screens guarda as telas About e Home. O código da tela Home pode ser visto a seguir:

O próximo código é da tela About:

Criação do Stack Navigator

Este código mostra a criação do Stack Navigator a partir do script App.js:

Análise do código

Como de praxe, a primeira coisa a se fazer ao escrevermos nosso código em React Native é importar as dependências que utilizaremos. Em nosso caso, além dos componentes de exibição, como View e Text, importaremos:

Repare que criamos uma constante denominada Stack – ela poderia ter qualquer nome, ficando à sua escolha – e a definimos como uma instância de createNativeStackNavigator. Na função App, usaremos essa constante para definir os parâmetros de navegação.

Em primeiro lugar, criamos o container Stack.Navigator. Dentro dele, informamos as opções de navegação, ou seja, quais telas farão parte de nossa pilha de navegação e serão gerenciadas pelo Stack. Isso é feito com a propriedade Stack.Screen. Tal propriedade recebe como parâmetros um “name”, pelo qual nos referiremos a cada item, e um “componente”, em que definimos quais telas serão apresentadas. Em nosso exemplo, passamos como “component” as telas HomeScreen e AboutScreen (ambas também importadas no início do script).

Agora, falaremos novamente das características do mecanismo provido pelo Stack Navigator:

Apresentação

Estrutura do projeto

Manteremos a estrutura utilizada nos modelos de navegação abordados anteriormente, criando um projeto e reaproveitando os códigos das telas Home e About. Com isso, precisamos modificar apenas o ponto de entrada de nosso aplicativo.

Criação do Drawer Navigation

Após criar um projeto, modifique o App.js para que ele fique desta forma:

Análise do código

O código para criação do Drawer é semelhante aos códigos dos demais modelos de navegação, onde temos as operações listadas a seguir:

Navegação entre telas

O Drawer cria um menu (estilo hambúrguer ou sanduíche) no topo/header de nosso aplicativo. Tal menu contém o link para as telas incluídas como screens no Drawer.Navigator. Além disso, esses links também ficam visíveis quando se arrasta a tela do canto esquerdo para o meio. Por fim, a aplicação de determinados métodos permite:

Os modelos de navegação apresentados podem ser usados individualmente, como demonstramos nos códigos apresentados no módulo, ou de forma combinada.

Outro aspecto que precisa ser levado em consideração ao se combinar mais de um modelo de navegação é que tal comportamento tende a fazer mais sentido quando existem muitas telas em nosso aplicativo. Ou seja, para um aplicativo com apenas duas telas, como o que usamos de exemplo, não faz muito sentido combinar as navegações.

Os três principais modelos de navegação utilizados no design de interface interativa com o React Native são abordados no vídeo a seguir.

Como funciona a propriedade Style

Como já mencionamos, os estilos são definidos usando o código JavaScript. Em relação às propriedades, temos algo bastante similar à CSS, com a diferença de que, em React Native, as propriedade são declaradas no padrão camelCase. A propriedade CSS margin-top em React seria, portanto, declarada como marginTop. Outra semelhança entre a props Style e a CSS é a possibilidade de definir nossos estilos de forma:

Este fragmento demonstra a definição inline da cor do texto para o componente Text:

Podemos ver adiante o mesmo estilo sendo declarado de forma interna. Note que, para isso, usamos o método StyleSheet.create, que pertence ao core do React Native e precisa ser importado:

A utilização do Style de forma externa segue a mesma convenção que a interna. É necessário, assim, haver a importação do script (que precisa ter a extensão .js) de estilo no script em que ele será usado, como pode ser visto nos códigos a seguir, começando pelo App.js:

Agora, observe o código styles.js:

Styled Components

Apresentação

A biblioteca Styled Components constitui uma alternativa muito utilizada para a props Style quando o assunto é estilizar um componente em React Native. Com o uso dessa lib, é possível estilizar nosso aplicativo com CSS de forma bem parecida com a que fazemos na web.

Como utilizar a Styled Components

Como toda dependência em React Native, para se usar a Style, é preciso instalá-la. Seu gerenciador de dependências usual instala a seguinte lib:

No exemplo prático a seguir, é possível verificar a utilização da Styled Components:

As propriedades de estilo são declaradas no formato tradicional da CSS. Já seu estilo é definido com a notação de componente. No exemplo, é criado um componente Text, o StyledText, para o qual são definidas algumas propriedades de estilo. Em seguida, esse componente é usado para conter o texto “Texto Azul”.

Além da possibilidade de usar as propriedades CSS de forma similar à utilizada na web, a lib Style Components tem várias outras funcionalidades disponíveis. Apontaremos três exemplos a seguir:

Em React Native, estão disponíveis dois recursos nativos para a animação de objetos: a Animated API e a LayoutAnimation API. Com os recursos disponibilizados por ambas, é possível, entre outras, realizar as seguintes ações:

Conheceremos agora algumas propriedades dessas duas APIs, assim como alguns exemplos de código.

Animated API

Funcionamento

Esta API se baseia em relações declarativas entre entradas e saídas, fazendo uso de transformações configuráveis por meio de métodos, como iniciar e parar, por meio dos quais podemos controlar a sua execução. Nativamente, é possível animar os seguintes componentes React:

Além disso, também é possível criar componentes personalizados e utilizar o método Animated.createAnimatedComponent() para animá-los.

Veremos em seguida nosso primeiro exemplo de animação. No entanto, antes de vermos o código, temos de fazer algumas considerações:

Vamos ao código. Nele, a frase “Texto com fade in” será exibida com o efeito de fade in quando o aplicativo for iniciado.

Outros recursos da Animated API

O exemplo anterior demonstra uma animação simples. Entretanto, a Animated API possui vários outros recursos, como, por exemplo:

O código anterior exibe na tela dois elementos: um quadrado laranja e um botão preto contendo o texto “Pressione para diminuir o quadrado”. Cada vez que o botão é pressionado, esse quadrado diminui de tamanho. Faremos três comentários sobre o código:

Quando utilizar a LayoutAnimation API

Como o próprio nome sugere, tal recurso de animação é voltado para a animação do layout do aplicativo ao longo do seu ciclo de renderização (inicialização e atualização). Sob esse viés, vê-se que a LayoutAnimation API é bastante útil nas situações em que um conteúdo inicialmente escondido, ao ser exibido, afeta o dimensionamento de seus elementos anteriores ou posteriores. Como exemplo, temos os links de “veja mais”.

Neste vídeo, abordaremos os recursos de estilização e animação disponíveis no React Native.