Flexbox no React Native: como posicionar elementos com Flex
10 minutos de leitura
Neste artigo, você aprenderá como funciona o Flexbox no React Native e como usar as propriedades flex, flexDirection e justifyContent para posicionar elementos e criar layouts responsivos em diferentes dispositivos.
- O que é o Flex e para que serve;
- Tamanho de telas e unidades de medida;
- Números fixos e relativos;
- Algumas propriedades do Flex.
Conhecer o Flex do React Native é fundamental para qualquer pessoa desenvolvedora de aplicativos mobile.
Se você procura entender como funciona o layout com display flex no React Native, tipos de alinhamento, flex direction e as melhores práticas para utilizar flexbox, este artigo vai te ajudar logo no primeiro exemplo. Vamos lá?
O que é Flexbox no React Native e para que serve?
Um dos principais desafios ao desenvolver um aplicativo móvel é garantir a estilização adequada e a disposição correta dos elementos na tela.
Como existem diversos modelos de celulares, cada um apresentando tamanhos de tela variados, surge a necessidade de organizar, definir tamanhos e espaçamentos dos elementos de modo que eles não ultrapassem os limites do dispositivo nem deixem espaços excessivos nas laterais.
Flex é uma das ferramentas mais importantes para trabalhar com posicionamento de elementos no React Native. E, ao ler a palavra Flex, talvez lhe venha na cabeça algo como Flexbox do CSS.
Fazendo uma pequena comparação entre o Flexbox do React Native e o Flexbox do CSS, ambos são semelhantes, mas possuem algumas diferenças de comportamento padrão e nomenclatura.
Se você já trabalhou com flexbox em CSS, aprender flexbox no React Native será mais simples
Antes de começar a explicar como Flex funciona, primeiro precisamos entender como funciona nosso "canvas" (fazendo uma analogia com uma tela ou quadro) e suas dimensões.
Como funcionam resoluções e unidades de medida no layout do React Native
Cada dispositivo tem um tamanho de tela diferente e cada tela tem uma resolução diferente. Até aí, tudo bem. O problema começa quando comparamos as unidades de medida. Uma tela é medida em polegadas e a resolução de uma tela é medida em pixels.
Uma polegada não necessariamente tem um número fixo de pixels devido às diferentes densidades de tela. Por exemplo, existem celulares de 4 polegadas que tem uma tela de resolução 720p (720 pixels), e existem celulares de 5 polegadas que tem uma tela de resolução 480p (480 pixels).
Essas informações são importantes porque no React Native, quando escrevemos valores numéricos (como width: 100), estamos utilizando 'density-independent pixels' (dp), não pixels físicos. Segundo a documentação oficial do React Native, todas as dimensões são unitless (sem unidade) e representam pixels independentes de densidade.
Isso significa que um componente com largura de 100 aparecerá aproximadamente no mesmo tamanho físico em diferentes dispositivos, independentemente da densidade da tela.
Uma solução para resolver essa inconsistência é utilizar unidades de medida relativas como porcentagem.
Em React Native layout, utilizamos principalmente duas unidades de medida: pixels (px) ou porcentagem (%), mas a maneira mais eficiente de controlar posicionamento e adaptação de elementos em diferentes dispositivos é usar flexbox, especialmente as propriedades flex, flexDirection e justifyContent.
É muito importante entender que não existe uma maneira certa ou uma abordagem perfeita. Utilizamos valores fixos (números) ou relativos (porcentagens, propriedade flex) dependendo da necessidade.
Para elementos que devem ter tamanho fixo (como ícones ou botões), valores numéricos funcionam bem. Para elementos que devem se adaptar ao tamanho da tela (como containers e cards), porcentagens ou a propriedade flex são mais apropriadas.
Porém, mesmo com unidades relativas, ainda encontramos algumas limitações. Vou usar o código abaixo como exemplo:
// App.js
import { StyleSheet, StatusBar, SafeAreaView, Text, View } from 'react-native';
export default function App() {
return (
<SafeAreaView>
<StatusBar/>
<View style={styles.quadradoA}/>
<View style={styles.quadradoB}/>
<View style={styles.quadradoC}/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
quadradoA: {
backgroundColor: "green",
height: 100
},
quadradoB: {
backgroundColor: "blue",
height: 100
},
quadradoC: {
backgroundColor: "orange",
height: 100
}
});
Neste exemplo, foi definida uma altura de 100 para cada retângulo. Como podemos fazer para que cada retângulo ocupe 1/3 da tela do dispositivo?
Com valores fixos fica muito difícil de definir exatamente 1/3 da tela. Cada dispositivo tem um tamanho de tela diferente, portanto, a altura em pixels independentes de densidade pode variar.
Vamos ver como ficaria com a unidade relativa %. Para calcular a porcentagem de altura que cada retângulo deve ter, basta resolver a conta 1/3.
O resultado é 33,33333333333333333...%. Bom... acho que já deu para perceber o problema aqui também: O número 33,333... não é um valor preciso. O ideal seria utilizar frações, mas o React Native não consegue trabalhar com esse tipo de valor. Então precisamos converter para %, o que acabou gerando a dízima periódica.
Portanto, mesmo usando porcentagens, ainda é complicado definir tamanhos exatos para posicionar elementos na tela. Como podemos resolver esse desafio?
Como o flexbox resolve o posicionamento no React Native Flex veio para resolver
O flexbox no React Native permite criar layouts flexíveis e responsivos, distribuindo os elementos de acordo com o espaço da tela.
Primeiro, precisamos entender o que essa propriedade faz. Quando aplicamos flex em um componente, ele se transforma em um flex container.
Todos os componentes que são descendentes diretos do flex container podem ser remanejados com outras propriedades de Flex, por exemplo, alinhamento vertical, alinhamento horizontal, espaçamento, entre outros.
Por padrão, todos os componentes são considerados flex containers, não sendo necessário definir nenhuma propriedade adicional. A propriedade flex determina o tamanho proporcional que o componente ocupará. O valor padrão é 0, o que significa que o componente ocupará somente o espaço necessário para exibir seu conteúdo.
Vamos ver algumas propriedades do Flexbox react native e como espaçar os retângulos na página.
Para isso, vamos utilizar a propriedade justifyContent, que distribui o espaço vazio entre os elementos dentro de um flex container. O valor utilizado no exemplo será 'space-between', um dos mais usados para alinhar elementos horizontal ou verticalmente.
Para isso, vamos utilizar a propriedade justifyContent, que distribui o espaço vazio entre os elementos dentro de um flex container. O valor utilizado no exemplo será 'space-between', um dos mais usados para alinhar elementos horizontal ou verticalmente. Rodando o código acima, podemos perceber que não houve mudanças. O que será que aconteceu?
É importante lembrar que, por padrão, o valor da propriedade flex é 0. Dessa forma, o componente SafeAreaView ocupa apenas o espaço necessário para exibir os retângulos.
Como nesse cenário não há espaço vazio dentro do flex container, a propriedade justifyContent não consegue distribuir o espaçamento entre os elementos, mantendo os retângulos alinhados sem espaçamento.
ara inserir espaçamento entre os blocos coloridos, é necessário alterar o valor padrão da propriedade flex de 0 para 1. Veja o exemplo a seguir:
import { StyleSheet, StatusBar, SafeAreaView, Text, View } from 'react-native';
export default function App() {
return (
<SafeAreaView style={styles.container}>
<StatusBar/>
<View style={styles.quadradoA}/>
<View style={styles.quadradoB}/>
<View style={styles.quadradoC}/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "space-between"
},
quadradoA: {
backgroundColor: "green",
height: 100
},
quadradoB: {
backgroundColor: "blue",
height: 100
},
quadradoC: {
backgroundColor: "orange",
height: 100
}
});
Agora, os retângulos estão com um espaço entre si.
Além do espaçamento, podemos também controlar a direção dos elementos usando a propriedade flexDirection no React Native.
Por padrão, os elementos são organizados em coluna (vertical), mas ao mudar 'flexDirection' para 'row', o layout passa a distribuir os elementos em uma linha na horizontal. Isso é fundamental para quem busca por flexDirection React Native ou quer criar layouts mais complexos.
JS
import { StyleSheet, StatusBar, SafeAreaView, Text, View } from 'react-native';
export default function App() {
return (
<SafeAreaView style={styles.container}>
<StatusBar/>
<View style={styles.quadradoA}/>
<View style={styles.quadradoB}/>
<View style={styles.quadradoC}/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "space-between",
flexDirection: "row"
},
quadradoA: {
backgroundColor: "green",
height: 100
},
quadradoB: {
backgroundColor: "blue",
height: 100
},
quadradoC: {
backgroundColor: "orange",
height: 100
}
});
Após executar essa alteração, é possível que a tela fique aparentemente vazia. O motivo é que, por padrão, cada componente tem os valores de altura (height) e largura (width) definidos como auto.
Para largura, auto significa ocupar o máximo de espaço disponível. No entanto, quando mudamos algumas propriedades de Flex, por exemplo, a direção, auto significa largura mínima necessária para mostrar o componente.
Para largura, auto significa ocupar o máximo de espaço disponível. No entanto, quando mudamos algumas propriedades de Flex, por exemplo, a direção, auto significa largura mínima necessária para mostrar o componente.
Como os três componentes estão vazios, a sua largura vai ser de 0 unidades: é por isso que a tela pareceu vazia.
Observação: Em versões mais recentes do React Native, o comportamento padrão de width como 'auto' em contextos de flexDirection: 'row' pode variar. Recomenda-se sempre testar em dispositivos reais ou emuladores atualizados para confirmar o comportamento esperado.
Existem duas opções para definir a largura de cada retângulo: usar a propriedade width (largura fixa) ou a propriedade flex (distribuição proporcional do espaço disponível).
Para este exemplo, vou utilizar as duas maneiras com valores diferentes:
import { StyleSheet, StatusBar, SafeAreaView, Text, View } from 'react-native';
export default function App() {
return (
<SafeAreaView style={styles.container}>
<StatusBar/>
<View style={styles.quadradoA}/>
<View style={styles.quadradoB}/>
<View style={styles.quadradoC}/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "space-between",
flexDirection: "row"
},
quadradoA: {
backgroundColor: "green",
height: 100,
width: 150,
},
quadradoB: {
backgroundColor: "blue",
height: 100,
flex: 1,
},
quadradoC: {
backgroundColor: "orange",
height: 100,
flex: 2,
}
});Com o código acima, obtemos o resultado mostrado na imagem abaixo:
O primeiro retângulo verde tem exatos 150 unidades de largura, o retângulo azul ocupa 1/3 do espaço restante (largura da tela em density-independent pixels - 150 do primeiro retângulo) e o retângulo laranja ocupa duas vezes o espaço do retângulo azul.
Mais especificamente: quando usamos flex com valores numéricos (flex: 1, flex: 2), o espaço disponível é dividido proporcionalmente. No exemplo, o espaço restante após subtrair os 150 do primeiro retângulo é dividido em 3 partes (1+2), onde o azul recebe 1/3 e o laranja recebe 2/3.
Principais dicas para usar Flexbox e construir layouts no React Native
O Flex é uma ferramenta poderosa para posicionar elementos na tela em aplicativos React Native. Existem diversas outras propriedades e valores não abordados neste artigo. É interessante experimentar e explorar outros recursos para ampliar seu conhecimento.
O link para a documentação oficial (em inglês) do Flex no React Native com exemplos interativos: Layout with Flexbox.
Gostou deste artigo? Tem sugestões? Marque a gente nas redes sociais!
Quer conhecer mais sobre React Native? Confira alguns de nossos cursos:
