O Stack Navigator Permite Criar Uma Pilha De Telas

Como funciona o Stack Navigator no React Navigation

O stack navigator permite criar uma pilha de telas e é a forma mais básica de navegação em apps React Native. Se você já trabalharam com iOS nativo, conhece o conceito de UINavigationController. É praticamente a mesma coisa, só que em JavaScript. Eu levei um tempo pra acostumar com algumas nuances. O primeiro problema real que eu encontrei foi com a animação de back. Quando você tem uma tela com formulário e volta pra outra tela que também tem scroll, o scroll às vezes não restaura a posição correta. A solução foi adicionar um listener de foco:

o stack navigator permite criar uma pilha de telas com gerenciamento de estado

Você instala com npm install @react-navigation/stack e depois configura no seu app assim: import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detalhes" component={DetalhesScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Na prática, empurrar uma nova tela pro stack faz a animação padrão de slide da direita pra esquerda no Android e fade-in no iOS. Você pode sobrescrever isso passando options na configuração de cada screen. Aqui vai algo que muita gente não sabe: o stack navigator não limpa a pilha automaticamente quando você navega de volta. Se você fizer push de cinco telas e depois navegar pra trás duas vezes, ainda vão sobrar três screens na memória. Isso pode causar vazamento de estado se você não tomar cuidado com useEffect de cleanup.

Outro ponto importantíssimo: a prop initialParams. Muita gente acha que ela é pra passar dados iniciais, mas na verdade ela só funciona no primeiro render. Se você tentar navegar pra uma tela com initialParams depois que ela já foi montada, os dados não atualizam. O jeito certo é usar state ou contexto pra isso. Se você precisa de navegação mais complexa com tabs, o ideal é combinar o stack com um tab navigator dentro dele. A ordem importa: o tab fica como screen dentro do stack, não o contrário. Inverter essa lógica causa bugs estranhos de animação que levam horas pra debugar.

O stack também tem uma limitação séria com performance em listas grandes. Se você colocar um FlatList com centenas de itens na tela do meio da pilha e navegar pra frente e pra trás várias vezes, o React Native começa a consumir memória desnecessariamente porque cada screen permanece mountado até ser explicitamente desmontado. A workaround é usar a prop unmountOnBlur nos screens que não precisam manter estado. Se precisar de navegação horizontal em vez de vertical, existe o createMaterialTopTabNavigator separado. O stack puramente é pra fluxo linear mesmo. Não tente forçar ele a fazer algo que não é o propósito dele.