Instalación y configuración de React Navigation
Instale React Navigation y sus dependencias, envuelva la aplicación en un NavigationContainer y configure su primer navegador de tipo stack con dos pantallas.
Instalación y configuración de React Navigation es una lección gratuita de React Native Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Native Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Native Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
What is React Navigation?
React Navigation is the most popular library for handling navigation in React Native apps. It provides a set of navigators — Stack, Tab, Drawer — that let you move between screens, pass data, and manage navigation history. React Navigation is JavaScript-based and works seamlessly with Expo and bare React Native projects.
Installing Core Dependencies
React Navigation requires its core package plus a set of native dependencies. Run the install command and then install the native stack and required gesture/animation libraries.
npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-contextInstalling the Native Stack Navigator
The native stack navigator from @react-navigation/native-stack uses native platform navigation components for iOS and Android, giving you better performance and a more native feel than the JS-only stack. Install it alongside the core package.
npm install @react-navigation/native-stackWrapping App in NavigationContainer
Every React Navigation setup requires NavigationContainer to be the root wrapper of your app. It manages the navigation tree, handles the back button on Android, and provides navigation context to all child components. Wrap your entire app in it inside App.js.
import { NavigationContainer } from '@react-navigation/native';
export default function App() {
return (
<NavigationContainer>
{/* navigator goes here */}
</NavigationContainer>
);
}Creating a Stack Navigator
Use createNativeStackNavigator() to create a stack navigator. The function returns a Navigator and a Screen component. Nest Stack.Screen components inside Stack.Navigator to register your screens.
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name='Home' component={HomeScreen} />
<Stack.Screen name='Details' component={DetailsScreen} />
</Stack.Navigator>
);
}The initialRouteName Prop
By default the first screen listed in Stack.Navigator is the initial screen. You can explicitly set which screen appears first using the initialRouteName prop on Stack.Navigator. The value must match the name of one of the Stack.Screen children.
<Stack.Navigator initialRouteName='Details'>
<Stack.Screen name='Home' component={HomeScreen} />
<Stack.Screen name='Details' component={DetailsScreen} />
</Stack.Navigator>Creating Simple Screen Components
Each screen registered in the navigator is a normal React component. React Navigation automatically injects navigation and route props into every registered screen component. You can use these props to navigate or read route parameters.
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
function DetailsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}Putting It All Together
Combining NavigationContainer, the stack navigator, and your screen components gives you a working two-screen app. The first screen registered becomes the visible screen on startup. React Navigation handles the back button and navigation header automatically.
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name='Home' component={HomeScreen} />
<Stack.Screen name='Details' component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}Customizing the Header Title
Each Stack.Screen accepts an options prop where you can customize the header. Set title to override the default screen name displayed in the navigation bar. You can also set headerShown: false to hide the header entirely.
<Stack.Screen
name='Home'
component={HomeScreen}
options={{ title: 'My Home Page' }}
/>Screen Options on the Navigator
Set screenOptions on the Stack.Navigator to apply default options to all screens. Individual screen options override the navigator defaults. This avoids repeating common settings like headerStyle or headerTintColor on every screen.
<Stack.Navigator
screenOptions={{
headerStyle: { backgroundColor: '#6200ee' },
headerTintColor: '#fff',
headerTitleStyle: { fontWeight: 'bold' },
}}
>
<Stack.Screen name='Home' component={HomeScreen} />
<Stack.Screen name='Details' component={DetailsScreen} />
</Stack.Navigator>Verifying Your Setup
Run npx expo start and open the app. You should see the Home screen with a navigation header. On iOS, the back button appears automatically when you navigate to Details. On Android, the hardware back button is handled by React Navigation. If the app crashes, double-check that react-native-screens and react-native-safe-area-context are installed.
Quick Check
Test your understanding of React Navigation setup concepts from this lesson.
Lesson Recap
In this lesson you learned: install the React Navigation core and native-stack packages, wrap your app in NavigationContainer, and define screens inside Stack.Navigator with Stack.Screen. Next up we explore navigating between screens and passing parameters.
Preguntas frecuentes
¿La lección «Instalación y configuración de React Navigation» es gratis?
Sí — el texto completo de «Instalación y configuración de React Navigation» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Native Academy, actualiza a CoddyKit PRO. El curso de React Native Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Instalación y configuración de React Navigation»?
Instale React Navigation y sus dependencias, envuelva la aplicación en un NavigationContainer y configure su primer navegador de tipo stack con dos pantallas. Practicas React Native Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Native Academy?
No se requiere experiencia previa. React Native Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Instalación y configuración de React Navigation»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Native Academy?
Sí. Cada lección de React Native Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Instalación y configuración de React Navigation
- Navegación entre pantallas y transmisión de parámetros
- Navegador de pestañas inferiores
- Navegador de cajón y navegadores anidados