Como Criar Navegação entre Telas React Native: Guia Completo de Splash Screen

A navegação entre telas react native, tela de abertura (splash) e a tela inicial é uma funcionalidade essencial em aplicativos React Native profissionais. O React Navigation fornece uma solução robusta através do Stack Navigator, que gerencia a transição entre telas colocando cada nova tela no topo de uma pilha.

​➡️Link do Código Base

Estrutura Básica da Navegação

A implementação da navegação requer três componentes principais: o NavigationContainer, o Stack.Navigator e as telas individuais. O NavigationContainer é responsável por gerenciar o estado de navegação do aplicativo e conectar o navegador de nível superior ao ambiente da aplicação.​

Configuração do App.js

O arquivo principal do aplicativo deve importar as dependências necessárias e configurar a estrutura de navegação:​

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

O createNativeStackNavigator cria um navegador que utiliza as APIs nativas de navegação, proporcionando animações e gestos mais fluidos. A propriedade screenOptions={{ headerShown: false }} remove o cabeçalho padrão de todas as telas do stack, permitindo personalização completa da interface.

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import SplashScreen from './telas/SplashTela';
import HomeScreen from './telas/TelaInicio';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Splash" component={SplashScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Implementação da Tela Splash

A tela splash serve como ponto de entrada do aplicativo, geralmente exibindo a marca e preparando recursos necessários. O hook useNavigation fornece acesso ao objeto de navegação sem necessidade de passar props manualmente.

import React from 'react';
import { View, Text, StyleSheet,Image, ImageBackground, TouchableOpacity} from 'react-native';
import { useNavigation } from '@react-navigation/native';

export default function SplashScreen() {
  const navigation = useNavigation();

  const handlePress = () => {
    navigation.replace('Home'); // Remove splash da pilha
  };
  return (
    <View style={estilos.caixa}>
      
<ImageBackground source={require('../assets/fundo-app.png')} style={estilos.fundo}>
<TouchableOpacity onPress={handlePress} activeOpacity={0.8} style={estilos.iconContainer}>
      <Image source={require('../assets/logo-senai.png')} style={estilos.logo} />
      </TouchableOpacity>

      <Text style={estilos.link}> suzano.sp.senai.br </Text>
      <Text style={estilos.telefone}> 11 - 4741-3500 </Text>
 </ImageBackground>     
    </View>
  );
}

const estilos = StyleSheet.create({
  telefone: {
    fontSize:16,
    color:'gray',
  },
  link: {
    color:'lightgray',
    fontSize:20,
    textAlign:'center',
  },

  caixa: {
    flex: 1,
    justifyContent:'center',
    alignItems:'center'
  },

  logo: {
    width:300,
    height:100,
  },

  fundo: {
    flex: 1,
    width:'100%',
    justifyContent:'center',  //alinha os itens da vertical
    alignItems:'center',  //alinha os itens da horizontal
    resizeMode:'cover',  // redimencionar o tamamanho de forma ajustada
    
  },
});

Método de Navegação Replace

O método navigation.replace('Home') é crucial para a experiência do usuário na transição da splash screen. Diferente do navigate, o replace remove a tela atual da pilha de navegação, impedindo que o usuário volte para a splash screen ao pressionar o botão voltar.

➡️ImageBackground React Native: Guia Completo com Exemplo Prático

Esta abordagem segue as melhores práticas recomendadas para 2026, onde a navegação deve ser intuitiva e evitar telas desnecessárias no histórico de navegação. A implementação com TouchableOpacity e onPress oferece controle manual da transição, ideal para demonstrações e protótipos educacionais.

Componentes da Interface

O uso de ImageBackground combinado com TouchableOpacity cria uma experiência interativa onde toda a área da imagem pode acionar a navegação. O activeOpacity={0.8} fornece feedback visual ao usuário durante o toque, melhorando a usabilidade.

Estrutura de Estilos

O StyleSheet utiliza flexbox para centralização dos elementos, uma prática padrão no React Native. As propriedades justifyContent e alignItems com valor 'center' garantem que o conteúdo fique centralizado tanto vertical quanto horizontalmente.

Tela Inicial com ScrollView

A tela inicial implementa um layout scrollável para exibir múltiplos destinos turísticos. O componente ScrollView é essencial quando o conteúdo excede o tamanho da tela, permitindo rolagem vertical suave.

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

Carregamento de Imagens Remotas

A propriedade source={{uri: 'url'}} permite carregar imagens de URLs externas dinamicamente. Esta abordagem é ideal para aplicativos que consomem dados de APIs ou exibem conteúdo atualizado frequentemente.

➡️Link do Código Base

Otimizações e Boas Práticas

Para aplicativos em produção, recomenda-se implementar navegação automática após um timeout na splash screen em vez de toque manual. O padrão comum é utilizar setTimeout ou verificar o carregamento de recursos assíncronos antes de navegar.

A configuração de animações personalizadas através de screenOptions pode melhorar significativamente a experiência do usuário. Propriedades como animation: 'slide_from_right' e animationDuration: 200 garantem transições suaves e nativas.