Wrap e Align Contents

Dando sequência ao conteúdo do flex, vamos ver uma propriedade útil para quando os elementos excederem o tamanho do container principal.

Wrap

Por padrão, os elementos são forçados a ficar em uma única linha (ou coluna). Caso os elementos excedam o tamanho do container principal, por padrão, não há quebra de linha (ou coluna) e o usuário não poderá visualizar o conteúdo.

Para resolver essa problemática, temos a propriedade Wrap, que pode assumir dois valores. São eles:

• nowrap (valor padrão): não há quebra de linha (ou coluna) e os elementos excedentes não poderão ser visualizados.
• wrap: há quebra de linha (ou coluna) e os elementos que excederem o container principal serão postos na linha (ou coluna) seguinte.

Align Contents

Dado que houve uma quebra de linha (ou coluna), a propriedade Align Contents especifíca como isso será disposto na tela. Os valores possíveis são:

• flex-start (valor padrão): Alinha as linhas (ou colunas) quebradas no início do eixo principal do container.
• flex-end: alinha as linhas (ou colunas) quebradas no final do eixo principal do container.
• center: alinha as linhas (ou colunas) quebradas no centro do eixo principal do container.
• space-between : distribui as linhas (ou colunas) quebradas de maneira uniforme no eixo principal, sem deixar margem entre a borda e as linhas/colunas iniciais e finais.
• space-around: distribui as linhas (ou colunas) quebradas de maneira uniforme no eixo principal, deixando uma margem entre a borda, a primeira e última linha/coluna.

Acompanhe a aula e ao final seu código deve ficar como se vê abaixo:

import React from 'react';
import { SafeAreaView, Text, StyleSheet, View } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <View style={[styles.box, styles.cor1]}><Text style={{ color: 'white', fontSize: 30 }}>1</Text></View>
      <View style={[styles.box, styles.cor2]}><Text style={{ color: 'white', fontSize: 30 }}>2</Text></View>
      <View style={[styles.box, styles.cor3]}><Text style={{ color: 'white', fontSize: 30 }}>3</Text></View>
      <View style={[styles.box, styles.cor1]}><Text style={{ color: 'white', fontSize: 30 }}>1</Text></View>
      <View style={[styles.box, styles.cor2]}><Text style={{ color: 'white', fontSize: 30 }}>2</Text></View>
      <View style={[styles.box, styles.cor3]}><Text style={{ color: 'white', fontSize: 30 }}>3</Text></View>
      <View style={[styles.box, styles.cor1]}><Text style={{ color: 'white', fontSize: 30 }}>1</Text></View>
      <View style={[styles.box, styles.cor2]}><Text style={{ color: 'white', fontSize: 30 }}>2</Text></View>
      <View style={[styles.box, styles.cor3]}><Text style={{ color: 'white', fontSize: 30 }}>3</Text></View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({

  container: {
    flex: 1,
    flexDirection: 'row',
    direction: 'ltr',
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    flexWrap: 'wrap',
    alignContent: 'space-around'

  },
  box: {
    width: 60,
    height: 60
  },
  cor1: {
    backgroundColor: '#00F'
  },
  cor2: {
    backgroundColor: '#05F'
  },
  cor3: {
    backgroundColor: '#0AF'
  },

})