Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on.You've got this!
React Navigation Setup & Providers
React Navigation is the de facto navigation library for React Native. It handles all platform-specific gestures (swipe back on iOS, back button on Android), history management, and deep linking. Correct provider setup is the foundation everything else builds on.
Installation
# Core
npm install @react-navigation/native
# Required dependencies (Expo)
npx expo install react-native-screens react-native-safe-area-context
# Required dependencies (React Native CLI)
npm install react-native-screens react-native-safe-area-context
cd ios && pod installRoot Provider Setup
// App.tsx - root of your app
import { NavigationContainer } from '@react-navigation/native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
// react-native-screens - enables native screen components for better performance
import { enableScreens } from 'react-native-screens';
enableScreens(); // call before any navigation code
export default function App() {
return (
// GestureHandlerRootView - required for gesture-based navigation
<GestureHandlerRootView style={{ flex: 1 }}>
<SafeAreaProvider>
<NavigationContainer
// Deep linking config (covered in Topic 7)
linking={linkingConfig}
// Fallback while linking resolves
fallback={<SplashScreen />}
// Theme - light/dark
theme={isDark ? DarkTheme : DefaultTheme}
// Log navigation state changes in dev
onStateChange={(state) => {
if (__DEV__) console.log('Nav state:', state);
}}
>
<RootNavigator />
</NavigationContainer>
</SafeAreaProvider>
</GestureHandlerRootView>
);
}Tip
Tip
Practice React Navigation Setup Providers in small, isolated examples before integrating into larger projects. Breaking concepts into small experiments builds genuine understanding faster than reading alone.
NavigationContainer root setup with linking and theme integration
Practice Task
Note
Practice Task - (1) Write a working example of React Navigation Setup Providers from scratch without looking at notes. (2) Modify it to handle an edge case (empty input, null value, or error state). (3) Share your solution in the Priygop community for feedback.
Quick Quiz
Common Mistake
Warning
A common mistake with React Navigation Setup Providers is skipping edge case testing - empty inputs, null values, and unexpected data types. Always validate boundary conditions to write robust, production-ready react native code.