Navegação no React Native: Guia Completo com React Navigation

npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context

# Stack Navigation
npm install @react-navigation/native-stack

# Tab Navigation
npm install @react-navigation/bottom-tabs

# Drawer Navigation
npm install @react-navigation/drawer
npx expo install react-native-gesture-handler react-native-reanimated

// navigation/AppNavigator.tsx
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from '../screens/HomeScreen';
import DetalhesScreen from '../screens/DetalhesScreen';

export type RootStackParams = {
  Home: undefined;
  Detalhes: { id: number; titulo: string };
};

const Stack = createNativeStackNavigator<RootStackParams>();

export function AppNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Home"
        screenOptions={{
          headerStyle: { backgroundColor: '#1a1a2e' },
          headerTintColor: '#fff',
          headerTitleStyle: { fontWeight: 'bold' },
        }}
      >
        <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Início' }} />
        <Stack.Screen
          name="Detalhes"
          component={DetalhesScreen}
          options={({ route }) => ({ title: route.params.titulo })}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// Navegando com parâmetros (tipado)
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { RootStackParams } from '../navigation/AppNavigator';

type HomeNavProp = NativeStackNavigationProp<RootStackParams, 'Home'>;

function HomeScreen() {
  const navigation = useNavigation<HomeNavProp>();

  return (
    <TouchableOpacity onPress={() => navigation.navigate('Detalhes', { id: 42, titulo: 'Artigo' })}>
      <Text>Abrir detalhes</Text>
    </TouchableOpacity>
  );
}

// Recebendo parâmetros
import { RouteProp } from '@react-navigation/native';

type DetalhesRouteProp = RouteProp<RootStackParams, 'Detalhes'>;

function DetalhesScreen() {
  const route = useRoute<DetalhesRouteProp>();
  const { id, titulo } = route.params;
  return <Text>Artigo #{id}: {titulo}</Text>;
}

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';

const Tab = createBottomTabNavigator();

function MainTabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          const icons: Record<string, string> = {
            Início: focused ? 'home' : 'home-outline',
            Buscar: focused ? 'search' : 'search-outline',
            Perfil: focused ? 'person' : 'person-outline',
          };
          return <Ionicons name={icons[route.name] as any} size={size} color={color} />;
        },
        tabBarActiveTintColor: '#3B82F6',
        tabBarInactiveTintColor: '#9CA3AF',
        tabBarStyle: { paddingBottom: 4 },
      })}
    >
      <Tab.Screen name="Início" component={HomeScreen} />
      <Tab.Screen name="Buscar" component={BuscarScreen} />
      <Tab.Screen name="Perfil" component={PerfilScreen} />
    </Tab.Navigator>
  );
}

function AppNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="MainTabs" component={MainTabs} />
        <Stack.Screen
          name="Detalhes"
          component={DetalhesScreen}
          options={{ headerShown: true, title: 'Detalhes' }}
        />
        <Stack.Screen
          name="Camera"
          component={CameraScreen}
          options={{ presentation: 'modal' }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function AppNavigator() {
  const { usuario, carregando } = useAuth();

  if (carregando) return <SplashScreen />;

  return (
    <NavigationContainer>
      {usuario ? <AutenticadoStack /> : <PublicoStack />}
    </NavigationContainer>
  );
}

function PublicoStack() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Login" component={LoginScreen} />
      <Stack.Screen name="Cadastro" component={CadastroScreen} />
      <Stack.Screen name="EsqueciSenha" component={EsqueciSenhaScreen} />
    </Stack.Navigator>
  );
}

const linking = {
  prefixes: ['meuapp://', 'https://meuapp.com'],
  config: {
    screens: {
      MainTabs: {
        screens: {
          Início: 'home',
          Perfil: 'perfil',
        },
      },
      Detalhes: 'artigo/:id',
    },
  },
};

// app.json para Expo
{
  "expo": {
    "scheme": "meuapp",
    "android": {
      "intentFilters": [{
        "action": "VIEW",
        "data": [{ "scheme": "https", "host": "meuapp.com" }],
        "category": ["BROWSABLE", "DEFAULT"]
      }]
    }
  }
}

// navigationRef.ts
import { createNavigationContainerRef } from '@react-navigation/native';
import { RootStackParams } from './AppNavigator';

export const navigationRef = createNavigationContainerRef<RootStackParams>();

export function navegar<RouteName extends keyof RootStackParams>(
  name: RouteName,
  params?: RootStackParams[RouteName]
) {
  if (navigationRef.isReady()) {
    navigationRef.navigate(name, params as any);
  }
}

// No interceptor de axios, notificação push, etc:
import { navegar } from './navigationRef';
navegar('Login'); // Sem acesso ao hook useNavigation