ScrollView no React Native: guia prático com exemplo de destinos turísticos

Quando desenvolvemos aplicativos com conteúdo que ultrapassa o tamanho da tela, é comum precisarmos tornar a visualização rolável — e é justamente para isso que serve o componente ScrollView do React Native.

Neste artigo, você vai aprender na prática como criar uma tela que exibe vários destinos turísticos com imagens e textos, permitindo rolagem vertical suave.

O que é o ScrollView?

O ScrollView é um contêiner que permite inserir múltiplos elementos filhos (como textos, imagens ou listas) e rolar verticalmente ou horizontalmente quando o conteúdo for maior que a área visível do dispositivo.

Principais características:

• Mostra todos os elementos de uma só vez (diferente de FlatList, que renderiza sob demanda).
• Ideal para conteúdos pequenos ou moderados, como páginas de informações, formulários ou galerias.

Estrutura do código

➡️ Link do Código Base

No exemplo abaixo, criamos um aplicativo com uma lista de quatro destinos turísticos de Suzano. O código utiliza componentes básicos do React Native: View, Text, Image, ScrollView e StyleSheet.

import { Text, View, StyleSheet, ScrollView, Image } from ‘react-native’;

export default function Destinos() {
  return (
    <View style={styles.container}>
      <Text style={styles.cabecalho}>4 Destinos Turísticos de Suzano</Text>
      <ScrollView>
        {/* Blocos de destinos, cada um com imagem, título e descrição /}
        {/ Conteúdo… */}
      </ScrollView>
    </View>
  );
}

Entendendo cada parte

• <View style={styles.container}>
  É o contêiner principal, onde ficam o título e o ScrollView.
• <ScrollView>
  Envolve todo o conteúdo que deve rolar. Tudo o que estiver dentro dele será rolável.
• <Image>
  Exibe a imagem de cada destino com a propriedade source={{ uri: 'URL' }}.
• <Text>
  Mostra título, descrição e uma sugestão de rota para cada local.

Organização dos estilos

Os estilos definidos com StyleSheet.create() controlam cores, margens e aparência.
Vamos destacar alguns:

• container: define o espaçamento e centraliza o conteúdo.
• destino: cria separadores entre os blocos com bordas inferiores.
• imagem: define tamanho proporcional para ocupar toda a largura da tela.
• titulo e comentário: formatam os textos com cores e espaçamento.

Exemplo de estilo aplicado:

const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 30,
backgroundColor: '#ecf0f1',
padding: 10,
alignItems: 'center'
},
cabecalho: {
fontSize: 22,
fontWeight: '300',
marginBottom: 10
},
imagem: {
width: '100%',
height: 120
}
});


Link para o código base

Dicas práticas para usar o ScrollView

• Se o conteúdo for muito extenso (centenas de itens), prefira FlatList por desempenho.
• Você pode adicionar a propriedade horizontal para criar rolagens laterais (ex.: galerias de fotos):jsx<ScrollView horizontal> {/* conteúdo horizontal */} </ScrollView>
• Combine ScrollView com SafeAreaView para ajustar margens automaticamente nas bordas do iPhone.

Galeria de Imagens

➡️Link para o Código Base

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

export default function GaleriaHorizontal() {
  return (
    <View style={styles.container}>
      <Text style={styles.titulo}>Galeria de Fotos</Text>

      <ScrollView horizontal showsHorizontalScrollIndicator={false}
        style={styles.galeria}
      >
        <Image
          style={styles.foto}
          source={{ uri: 'https://picsum.photos/seed/suzano1/400/300' }}
        />
        <Image
          style={styles.foto}
          source={{ uri: 'https://picsum.photos/seed/suzano2/400/300' }}
        />
        <Image
          style={styles.foto}
          source={{ uri: 'https://picsum.photos/seed/suzano3/400/300' }}
        />
        <Image
          style={styles.foto}
          source={{ uri: 'https://picsum.photos/seed/suzano4/400/300' }}
        />
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginTop: 40,
    paddingVertical: 10
  },
  titulo: {
    fontSize: 20,
    fontWeight: 'bold',
    marginLeft: 10,
    marginBottom: 10
  },
  galeria: {
    paddingHorizontal: 10
  },
  foto: {
    width: 200,
    height: 130,
    borderRadius: 10,
    marginRight: 10,
    backgroundColor: '#ccc'
  }
});