Introduction:

React Navigation is a popular library used for navigating between different screens in a React Native application. It provides a set of tools and components to implement navigation patterns such as stack navigation, tab navigation, drawer navigation, and more. Here are some key features and concepts associated with React Navigation:

Key Features:

Easy to Use: React Navigation offers a simple API to define routes and navigation behavior.
Customizable: It provides options to customize the appearance and behavior of navigators.
Integrates Well with React Native: Designed specifically for React Native, it works seamlessly with the platform.
Supports Various Navigation Patterns: Includes stack, tab, and drawer navigation, among others.
Declarative: Uses a declarative approach, making it easier to understand and maintain navigation logic.

Core Concepts:

Navigators: Components that manage navigation logic and provide UI elements. Common types include:
- Stack Navigator: Manages a stack of screens, allowing for push/pop navigation (like in a web browser).
- Tab Navigator: Displays tabs for switching between different screens.
- Drawer Navigator: Provides a drawer that can be pulled out from the side for navigation.
Screens: Components representing the different views or pages in your app. These are registered with navigators.
Routes: Define the mapping between a route name and the screen component.
Navigation Props: Props passed to screen components, providing methods and properties to handle navigation actions (e.g., navigation.navigate).
Params: Data passed between screens using the navigation object.

Pre-requisites:

If you have knowledge about javascript , React, React-Native then it is easy for you to understand this React Navigation. But if not then please go through these links:

Javascript
React (components, props, state, hooks)
React-Native (views, text, styles, basic components)

Setup Steps:

Install React Navigation:
- Open your terminal and navigate to your React Native project directory.
- Install the core React Navigation library and its dependencies. Run the following command:
```
  npm install @react-navigation/native
```
Install Dependencies:
- For React Navigation to work correctly, you need to install additional dependencies:
```
  npm install react-native-screens react-native-safe-area-context
```
Install Navigators:
- Depending on the type of navigation you want to implement (stack, tab, drawer), you need to install specific navigator libraries:
  - Stack Navigator:
```
  npm install @react-navigation/stack
```
  - Tab Navigator:
```
  npm install @react-navigation/bottom-tabs
```
  - Drawer Navigator:
```
  npm install @react-navigation/drawer
```
Link Native Dependencies (for bare React Native projects):
- If you are not using Expo, you need to link native dependencies. Run the following commands:
```
  npx react-native link react-native-screens
  npx react-native link react-native-safe-area-context
```

Wrap Your App with NavigationContainer:

In your main entry file (usually App.js or index.js), wrap your app with NavigationContainer to manage navigation state:

  import * as React from 'react';
  import { NavigationContainer } from '@react-navigation/native';

  export default function App() {
    return (
      <NavigationContainer>
        {/* Your navigators go here */}
      </NavigationContainer>
    );
  }

Create and Configure Navigators:
- Define and configure your navigators (stack, tab, drawer) within the NavigationContainer.

Example with Stack Navigator:

Here is an example setup using a stack navigator:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { View, Text, Button } from 'react-native';

const Stack = createStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Running Your App:

Run your app using the React Native CLI or Expo CLI:
- For React Native CLI:
```
  npx react-native run-android
  npx react-native run-ios
```
- For Expo CLI:
```
  expo start
```

Following these steps and prerequisites will ensure you have React Navigation properly set up and ready to use in your React Native project.

React Navigation