ScrollView e FlatList

Nós vamos começar agora a entender o ScrollView e o FlatList. Vamos começar falando do ScrollView, vamos começar criando uma tela para ele em um componente chamado ScrollViewScreen.js.
O componente ScrollView funciona de forma parecida com o View que já utilizamos, porém ele permite “rolar” a tela para baixo, não se limitando à altura da tela do dispositivo. Quando utilizamos o ScrollView é importante que ele tenha uma altura definida para evitar problemas. Além disso, uma característica do ScrollView que vale ser destacada é que ele renderiza todos os seus filhos de uma vez, o que pode levar a problemas de performance.
Para resolver isso temos o componente FlatList, que renderiza os items quando eles estão para aparecer na tela, e os remove ao saírem da tela para economizar memória e tempo de processamento. Ele também é útil para trabalharmos com múltiplas colunas, scroll infinito (pense no feed do Instagram, por exemplo), e vários outros casos.

ScrollView

Vamos ver então como criar um ScrollView. Entrando no arquivo ScrollViewScreen.js nós vamos criar primeiro vários textos, para que a gente tenha um exemplo de tela onde é necessário scroll.

import { View, Text, StyleSheet } from "react-native";

export default function ScrollViewScreen() {
  return (
    <View style={styles.container}>
			<Text style={styles.title}>ScrollView</Text>
      <Text style={styles.item}>
        1 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
        consectetur corporis debitis natus rerum? Facere magni enim non hic
        optio aliquid corporis modi repellat quod quos vero ut adipisci
        exercitationem iure sed molestiae totam, maxime voluptatum ipsam a ad
        inventore quae quis! Soluta quisquam odio magnam veniam, quae dicta
        aliquam.
      </Text>
      <Text style={styles.item}>
        2 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
        consectetur corporis debitis natus rerum? Facere magni enim non hic
        optio aliquid corporis modi repellat quod quos vero ut adipisci
        exercitationem iure sed molestiae totam, maxime voluptatum ipsam a ad
        inventore quae quis! Soluta quisquam odio magnam veniam, quae dicta
        aliquam.
      </Text>
      <Text style={styles.item}>
        3 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
        consectetur corporis debitis natus rerum? Facere magni enim non hic
        optio aliquid corporis modi repellat quod quos vero ut adipisci
        exercitationem iure sed molestiae totam, maxime voluptatum ipsam a ad
        inventore quae quis! Soluta quisquam odio magnam veniam, quae dicta
        aliquam.
      </Text>
      <Text style={styles.item}>
        4 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
        consectetur corporis debitis natus rerum? Facere magni enim non hic
        optio aliquid corporis modi repellat quod quos vero ut adipisci
        exercitationem iure sed molestiae totam, maxime voluptatum ipsam a ad
        inventore quae quis! Soluta quisquam odio magnam veniam, quae dicta
        aliquam.
      </Text>
      <Text style={styles.item}>
        5 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
        consectetur corporis debitis natus rerum? Facere magni enim non hic
        optio aliquid corporis modi repellat quod quos vero ut adipisci
        exercitationem iure sed molestiae totam, maxime voluptatum ipsam a ad
        inventore quae quis! Soluta quisquam odio magnam veniam, quae dicta
        aliquam.
      </Text>
      <Text style={styles.item}>
        6 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
        consectetur corporis debitis natus rerum? Facere magni enim non hic
        optio aliquid corporis modi repellat quod quos vero ut adipisci
        exercitationem iure sed molestiae totam, maxime voluptatum ipsam a ad
        inventore quae quis! Soluta quisquam odio magnam veniam, quae dicta
        aliquam.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
    paddingHorizontal: 16,
    marginHorizontal: 3,
    marginVertical: 32
  },
  title: {
    fontSize: 40,
    color: '#f64348'
  },
  button: {
    backgroundColor: "#1c1a1d",
    padding: 10,
    borderRadius: 10,
    marginTop: 20,
  },
  buttonText: {
    color: "#FFFFFF",
  },
  item: {
    fontSize: 16,
    marginTop: 16
  },
})

Nós agora vamos colocar isso na navegação. Iremos primeiro no componente HomeScreen.js, para criar lá um novo botão de navegação que leva para a tela ScrollViewScreen:

// ...
	const toScrollViewScreen = () => {
    navigation.navigate('ScrollView')
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Olá, mundo!</Text>
      <StatusBar style="auto" />
      <TouchableOpacity
        activeOpacity={0.8}
        style={styles.button}
        onPress={toNavigationScreen}
      >
        <Text style={styles.buttonText}>Aula de Navegação</Text>
      </TouchableOpacity>
      <TouchableOpacity
        activeOpacity={0.8}
        style={styles.button}
        onPress={toScrollViewScreen}
      >
        <Text style={styles.buttonText}>Aula de ScrollView</Text>
      </TouchableOpacity>
    </View>
  )
// ...

Agora, nós podemos ir no componente StackNavigator.js para criar essa rota de fato:

// ...
				<Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Navigation" component={NavigationScreen} />
        <Stack.Screen name="SrollView" component={ScrollViewScreen} />
// ...

Ao acessarmos a tela ScrollView, vemos o texto, mas não por completo, e não conseguimos rolar para baixo para continuar lendo. Para usarmos o ScrollView e resolvermos esse problema tudo o que precisamos fazer é colocar todos os <Text> dentro de um componente <ScrollView>:

import { View, Text, StyleSheet, ScrollView } from "react-native";

export default function ScrollViewScreen() {
  return (
		<View style={styles.container}>
      <Text style={styles.title}>ScrollView</Text>
      <ScrollView>
        <Text style={styles.item}>
          1 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
          consectetur corporis debitis natus rerum? Facere magni enim non hic
          optio aliquid corporis modi repellat quod quos vero ut adipisci
          exercitationem iure sed molestiae totam, maxime voluptatum ipsam a ad
          inventore quae quis! Soluta quisquam odio magnam veniam, quae dicta
          aliquam.
        </Text>
				// ...
        <Text style={styles.item}>
          6 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
          consectetur corporis debitis natus rerum? Facere magni enim non hic
          optio aliquid corporis modi repellat quod quos vero ut adipisci
          exercitationem iure sed molestiae totam, maxime voluptatum ipsam a ad
          inventore quae quis! Soluta quisquam odio magnam veniam, quae dicta
          aliquam.
        </Text>
      </ScrollView>
	   </View>
  );
}

// ...

Com isso, nós temos o nosso ScrollView funcionando perfeitamente, onde conseguimos ter o retorno completo de tudo que estamos vendo.