React Native

Componentes Essenciais da Interface

View • Text • Image

ScrollView • FlatList • SectionList

TextInput • Button • TouchableOpacity • Modal

Objetivos da Aula

Ao final da aula o aluno deverá ser capaz de:

  • Entender os principais componentes básicos do React Native
  • Criar interfaces simples
  • Manipular listas de dados
  • Capturar entrada de usuário
  • Criar interações com botões
  • Exibir modais

O que são Componentes?

Em React Native, toda interface é composta por componentes.

Um componente é um bloco reutilizável de interface.

Exemplo:

  • Caixa
  • Texto
  • Botão
  • Lista
  • Campo de entrada

📌 Pense em componentes como peças de LEGO que formam a interface.

Estrutura básica de um App

import { View, Text } from 'react-native'

export default function App() {
  return (
    <View>
      <Text>Olá React Native</Text>
    </View>
  )
}
  • View → container
  • Text → exibe texto

View

O container básico do React Native

A View funciona como uma div do HTML.

Ela serve para:

  • Agrupar componentes
  • Organizar layout
  • Aplicar estilos

Exemplo View

import { View, Text } from 'react-native'

export default function App() {
  return (
    <View style={{ padding: 20 }}>
      <Text>Primeiro Texto</Text>
      <Text>Segundo Texto</Text>
    </View>
  )
}

📌 A View organiza os elementos dentro dela.

Text

Exibição de texto

Diferente do HTML, todo texto deve estar dentro de Text.

Exemplo Text

import { Text } from 'react-native'

export default function App() {
  return (
    <Text>
      Bem vindo ao React Native
    </Text>
  )
}

📌 Não é possível escrever texto diretamente fora de Text.

Image

Exibir imagens no aplicativo

Pode carregar imagens:

  • locais
  • da internet

Exemplo Image

import { Image } from 'react-native'

export default function App() {
  return (
    <Image
      source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
      style={{ width: 100, height: 100 }}
    />
  )
}

📌 Sempre definir width e height.

ScrollView

Área com rolagem

Usado quando o conteúdo é maior que a tela.

Exemplo ScrollView

import { ScrollView, Text } from 'react-native'

export default function App() {
  return (
    <ScrollView>
      <Text>Item 1</Text>
      <Text>Item 2</Text>
      <Text>Item 3</Text>
      <Text>Item 4</Text>
      <Text>Item 5</Text>
    </ScrollView>
  )
}

📌 Ideal para conteúdo pequeno ou médio.

FlatList

Lista otimizada

Usada para listas grandes de dados.

Ela renderiza apenas os itens visíveis na tela.

Isso melhora muito a performance.

Exemplo FlatList

import { FlatList, Text } from 'react-native'

export default function App() {

  const dados = [
    { id: '1', nome: 'João' },
    { id: '2', nome: 'Maria' },
    { id: '3', nome: 'Pedro' }
  ]

  return (
    <FlatList
      data={dados}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <Text>{item.nome}</Text>
      )}
    />
  )
}

SectionList

Lista agrupada por seções

Permite organizar dados em categorias.

Exemplo:

  • Frutas
  • Bebidas
  • Doces

Exemplo SectionList

import { SectionList, Text } from 'react-native'

export default function App() {

  const dados = [
    {
      title: 'Frutas',
      data: ['Maçã', 'Banana', 'Laranja']
    },
    {
      title: 'Bebidas',
      data: ['Água', 'Suco', 'Refrigerante']
    }
  ]

  return (
    <SectionList
      sections={dados}
      keyExtractor={(item, index) => index}
      renderItem={({ item }) => <Text>{item}</Text>}
      renderSectionHeader={({ section }) => (
        <Text>{section.title}</Text>
      )}
    />
  )
}

TextInput

Campo de entrada de texto

Permite que o usuário digite informações.

Exemplos:

  • login
  • senha
  • busca

Exemplo TextInput

import { TextInput } from 'react-native'

export default function App() {
  return (
    <TextInput
      placeholder="Digite seu nome"
      style={{
        borderWidth: 1,
        padding: 10
      }}
    />
  )
}

Button

Botão simples

Executa uma ação quando pressionado.

Exemplo Button

import { Button } from 'react-native'

export default function App() {
  return (
    <Button
      title="Clique aqui"
      onPress={() => alert("Botão pressionado")}
    />
  )
}

📌 O onPress define o que acontece ao clicar.

TouchableOpacity

Botão customizável

Muito usado para criar botões personalizados.

Quando pressionado, ele reduz a opacidade.

Exemplo TouchableOpacity

import { TouchableOpacity, Text } from 'react-native'

export default function App() {
  return (
    <TouchableOpacity
      onPress={() => alert("Clicou")}
      style={{
        backgroundColor: 'blue',
        padding: 15
      }}
    >
      <Text style={{ color: 'white' }}>
        Botão personalizado
      </Text>
    </TouchableOpacity>
  )
}

Modal

Janela sobreposta

Modal é uma janela que aparece sobre o conteúdo da tela.

Exemplos:

  • confirmação
  • login
  • aviso

Exemplo Modal

import { Modal, View, Text, Button } from 'react-native'
import { useState } from 'react'

export default function App() {

  const [visivel, setVisivel] = useState(false)

  return (
    <View>

      <Button
        title="Abrir Modal"
        onPress={() => setVisivel(true)}
      />

      <Modal visible={visivel}>
        <View>
          <Text>Olá, este é um modal!</Text>
          <Button
            title="Fechar"
            onPress={() => setVisivel(false)}
          />
        </View>
      </Modal>

    </View>
  )
}

Comparação dos Componentes

Componente Função
View Container
Text Exibir texto
Image Mostrar imagens
ScrollView Rolagem simples
FlatList Lista performática
SectionList Lista por grupos
TextInput Entrada de texto
Button Botão simples
TouchableOpacity Botão customizável
Modal Janela sobreposta

Exercício Prático

Criar uma tela contendo:

  • Um título
  • Uma imagem
  • Um campo de texto
  • Um botão
  • Uma lista de nomes
  • Um modal ao clicar no botão

Objetivo:

Construir uma pequena interface de cadastro simples.

Conclusão

Hoje aprendemos os principais componentes de interface do React Native.

Eles são a base para qualquer aplicativo:

  • organização de layout
  • interação com usuário
  • exibição de dados

📌 Dominar esses componentes é essencial para evoluir no desenvolvimento mobile.