### Install and Run Playground Example (Bash)

Source: https://github.com/wix/react-native-navigation/blob/master/website/docs/docs/docs-showcases.mdx

Instructions to clone the React Native Navigation repository, install dependencies, and run the playground example on iOS and Android.

```bash
git clone https://github.com/wix/react-native-navigation
cd react-native-navigation
yarn install

# for iOS:
yarn pod-install # Install iOS pods
yarn xcode # Opens XCode
yarn start # Starts the packager

# for Android:
# 1. open Android Studio inside "./playground/android"
# 2. start an emulator
yarn start # Start the packager

# Run the app in Simulator or on Device from within XCode/Android Studio
```

--------------------------------

### Full React Native Navigation App Setup with Theming

Source: https://github.com/wix/react-native-navigation/blob/master/website/docs/docs/docs-basic-navigation.mdx

This comprehensive example shows a typical setup for a React Native Navigation application, including screen declarations, component registration, setting default options for the app's theme, and defining the root layout. It integrates the `Navigation.setDefaultOptions` call before registering the app's launch listener to ensure the theme is applied correctly from the start. The example includes a basic Home screen with navigation to a Settings screen.

```jsx
// In index.js of a new project
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { Navigation } from 'react-native-navigation';

// Home screen declaration
const HomeScreen = (props) => {
  return (
    <View style={styles.root}>
      <Text>Hello React Native Navigation 👋</Text>
      <Button
        title='Push Settings Screen'
        color='#710ce3'
        onPress={() => Navigation.push(props.componentId, {
          component: {
            name: 'Settings',
            options: {
              topBar: {
                title: {
                  text: 'Settings'
                }
              }
            }
          }
        })}/>
    </View>
  );
};
Homescreen.options = {
  topBar: {
    title: {
      text: 'Home',
    }
  }
};

// Settings screen declaration - this is the screen we'll be pushing into the stack
const SettingsScreen = () => {
  return (
    <View style={styles.root}>
      <Text>Settings Screen</Text>
    </View>
  )
}

Navigation.registerComponent('Home', () => HomeScreen);
Navigation.registerComponent('Settings', () => SettingsScreen);


Navigation.setDefaultOptions({
  statusBar: {
    backgroundColor: '#4d089a'
  },
  topBar: {
    title: {
      color: 'white'
    },
    backButton: {
      color: 'white'
    },
    background: {
      color: '#4d089a'
    }
  }
});
Navigation.events().registerAppLaunchedListener(async () => {
  Navigation.setRoot({
    root: {
      stack: {
        children: [
          {
            component: {
              name: 'Home'
            }
          }
        ]
      }
    }
  });
});

const styles = StyleSheet.create({
  root: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'whitesmoke'
  }
});
```

--------------------------------

### Run Android application

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-7.11.2/docs/docs-Installing.mdx

Builds and runs the Android application on an emulator or device. This command is used after all installation and configuration steps are completed.

```sh
react-native run-android
```

--------------------------------

### Configure npm script for Android build

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-7.11.2/docs/docs-Installing.mdx

Add a script to your package.json to streamline the Android build and installation process using Gradle. This command specifically targets the app module for assembly and installation, simplifying the workflow for debugging.

```json
{
  "scripts": {
    ...
    "android": "cd ./android && ./gradlew app:assembleDebug && ./gradlew installDebug"
  }
}
```

--------------------------------

### Full App Example: Stack Navigation - React Native

Source: https://github.com/wix/react-native-navigation/blob/master/website/docs/docs/docs-basic-navigation.mdx

This example sets up a basic React Native application using `react-native-navigation`. It registers 'Home' and 'Settings' components and configures the app to start with a stack containing the 'Home' screen. The 'Home' screen includes a button to push the 'Settings' screen onto the stack.

```jsx
// In index.js of a new project
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { Navigation } from 'react-native-navigation';

// Home screen declaration
const HomeScreen = (props) => {
  return (
    <View style={styles.root}>
      <Text>Hello React Native Navigation 👋</Text>
      <Button
        title='Push Settings Screen'
        color='#710ce3'
        onPress={() => Navigation.push(props.componentId, {
          component: {
            name: 'Settings',
            options: {
              topBar: {
                title: {
                  text: 'Settings'
                }
              }
            }
          }
        })}/>
    </View>
  );
};
Homescreen.options = {
  topBar: {
    title: {
      text: 'Home',
      color: 'white'
    },
    background: {
      color: '#4d089a'
    }
  }
};

// Settings screen declaration - this is the screen we'll be pushing into the stack
const SettingsScreen = () => {
  return (
    <View style={styles.root}>
      <Text>Settings Screen</Text>
    </View>
  );
}

Navigation.registerComponent('Home', () => HomeScreen);
Navigation.registerComponent('Settings', () => SettingsScreen);

Navigation.events().registerAppLaunchedListener(async () => {
  Navigation.setRoot({
    root: {
      stack: {
        children: [
          {
            component: {
              name: 'Home'
            }
          }
        ]
      }
    }
  });
});

const styles = StyleSheet.create({
  root: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'whitesmoke'
  }
});
```

--------------------------------

### Full App Setup with Default Theme and Navigation

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-7.11.2/docs/docs-basic-navigation.mdx

This comprehensive example illustrates a complete React Native application setup using `react-native-navigation`. It includes screen declarations for 'Home' and 'Settings', registration of these components, setting default navigation options for theme consistency, and configuring the root view with a stack navigator. The code ensures the default theme is applied before the app launches.

```jsx
// In index.js of a new project
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { Navigation } from 'react-native-navigation';

// Home screen declaration
const HomeScreen = (props) => {
  return (
    <View style={styles.root}>
      <Text>Hello React Native Navigation 👋</Text>
      <Button
        title='Push Settings Screen'
        color='#710ce3'
        onPress={() => Navigation.push(props.componentId, {
          component: {
            name: 'Settings',
            options: {
              topBar: {
                title: {
                  text: 'Settings'
                }
              }
            }
          }
        })}/>
    </View>
  );
};
Homescreen.options = {
  topBar: {
    title: {
      text: 'Home',
    }
  }
};

// Settings screen declaration - this is the screen we'll be pushing into the stack
const SettingsScreen = () => {
  return (
    <View style={styles.root}>
      <Text>Settings Screen</Text>
    </View>
  );
}

Navigation.registerComponent('Home', () => HomeScreen);
Navigation.registerComponent('Settings', () => SettingsScreen);


Navigation.setDefaultOptions({
  statusBar: {
    backgroundColor: '#4d089a'
  },
  topBar: {
    title: {
      color: 'white'
    },
    backButton: {
      color: 'white'
    },
    background: {
      color: '#4d089a'
    }
  }
});
Navigation.events().registerAppLaunchedListener(async () => {
  Navigation.setRoot({
    root: {
      stack: {
        children: [
          {
            component: {
              name: 'Home'
            }
          }
        ]
      }
    }
  });
});

const styles = StyleSheet.create({
  root: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'whitesmoke'
  }
});
```

--------------------------------

### Build Android Debug APK with npm script

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-7.37.0/docs/docs-Installing.mdx

This npm script command compiles and installs the Android debug APK. It navigates to the `android` directory, then executes Gradle tasks to build and install the app. This is a convenient way to test your React Native Navigation setup.

```json
{
  "scripts": {
    ...
    "android": "cd ./android && ./gradlew app:assembleDebug && ./gradlew installDebug"
  }
}

```

--------------------------------

### Run React Native Application

Source: https://github.com/wix/react-native-navigation/blob/master/website/docs/docs/docs-Installing.mdx

Builds and runs the React Native application on iOS and Android simulators or devices. This step is performed after all installation and configuration steps are completed to verify the setup.

```sh
react-native run-ios
```

```sh
react-native run-android
```

--------------------------------

### iOS: Configure AppDelegate.m for React Native Navigation

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-7.11.2/docs/docs-Installing.mdx

This snippet shows how to modify the `AppDelegate.m` file in your Xcode project to initialize React Native Navigation. It includes the necessary imports and the `didFinishLaunchingWithOptions` method configuration. Ensure you have the correct imports for React Native and the navigation library.

```objective-c
#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <ReactNativeNavigation/ReactNativeNavigation.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [ReactNativeNavigation bootstrapWithDelegate:self launchOptions:launchOptions];

  return YES;
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  #if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  #else
    return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
  #endif
}

- (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge {
  return [ReactNativeNavigation extraModulesForBridge:bridge];
}

@end
```

--------------------------------

### Objective-C AppDelegate Setup for React Native Navigation

Source: https://github.com/wix/react-native-navigation/blob/master/website/docs/docs/docs-Installing.mdx

This snippet demonstrates the necessary changes for Objective-C projects in AppDelegate.h and AppDelegate.m to integrate React Native Navigation. It updates the class inheritance and initialization logic.

```objectivec
// AppDelegate.h
@interface AppDelegate : RNNAppDelegate
@end

// AppDelegate.m
#import "AppDelegate.h"
#import "ReactNativeNavigation.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  self.reactNativeDelegate = [ReactNativeDelegate new];
  [super application:application didFinishLaunchingWithOptions:launchOptions];
  return YES;
}

@end
```

--------------------------------

### Update MainApplication.kt for React Native Navigation (Kotlin)

Source: https://github.com/wix/react-native-navigation/blob/master/website/docs/docs/docs-Installing.mdx

Modifies the `MainApplication.kt` file to integrate React Native Navigation by extending `NavigationApplication` and updating the `ReactNativeHost`. This ensures proper initialization of navigation components. No external dependencies are explicitly required beyond the standard React Native setup.

```kotlin
import com.facebook.react.PackageList
import com.facebook.react.ReactHost
import com.facebook.react.ReactNativeHost
import com.facebook.react.ReactPackage
import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
import com.reactnativenavigation.NavigationApplication
import com.reactnativenavigation.react.NavigationPackage
import com.reactnativenavigation.react.NavigationReactNativeHost

class MainApplication : NavigationApplication() {
    override val reactNativeHost: ReactNativeHost = 
        object : NavigationReactNativeHost(this) {

           override fun getPackages(): List<ReactPackage> =
               PackageList(this).packages.apply {
                 // Packages that cannot be autolinked yet can be added manually here, for example:
                 // add(MyReactNativePackage())
               }

        override fun getJSMainModuleName(): String = "index"

        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG

        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED

        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
    }

    override val reactHost: ReactHost
        get() = getDefaultReactHost(this, reactNativeHost)

    override fun onCreate() {
        super.onCreate()
    }
}
```

--------------------------------

### Install react-native-navigation with npm

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-6.12.2/docs/docs-Installing.mdx

Installs the react-native-navigation library using npm. This is a standard package installation command.

```bash
npm install --save react-native-navigation
```

--------------------------------

### Install react-native-navigation with yarn

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-6.12.2/docs/docs-Installing.mdx

Installs the react-native-navigation library using yarn. This command is equivalent to the npm install command but uses the yarn package manager.

```bash
yarn add react-native-navigation
```

--------------------------------

### Swift AppDelegate Setup for React Native Navigation

Source: https://github.com/wix/react-native-navigation/blob/master/website/docs/docs/docs-Installing.mdx

This snippet shows how to modify the AppDelegate.swift file for Swift projects to integrate React Native Navigation. It involves changing the base class and initializing the ReactNativeDelegate and ReactNativeFactory.

```swift
import ReactNativeNavigation

class AppDelegate: RNNAppDelegate {

override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil) -> Bool {
self.reactNativeDelegate = ReactNativeDelegate()
super.application(application, didFinishLaunchingWithOptions: launchOptions)

return true
}
}
```

--------------------------------

### JavaScript: Initialize Layout Options

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-6.12.2/api/options-layout.mdx

Demonstrates the basic initialization of layout options in JavaScript. This serves as a starting point for configuring screen layouts.

```javascript
const options = {
  layout: {}
};
```

--------------------------------

### Run Automatic Installation with npx rnn-link

Source: https://github.com/wix/react-native-navigation/blob/master/website/docs/docs/docs-Installing.mdx

Executes the `rnn-link` script to automatically perform necessary installation steps for react-native-navigation. This script simplifies the process but may require manual verification for older projects or specific React Native versions.

```sh
npx rnn-link
```

--------------------------------

### Add npm script to build and install Android APK

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-8.1.0/docs/docs-Installing.mdx

Adds a script to `package.json` to streamline the Android build and installation process using Gradle. This command compiles the app and installs the debug APK, simplifying development workflows.

```json
"scripts": {
  // ...
  "android": "cd ./android && ./gradlew app:assembleDebug && ./gradlew installDebug"
}
```

--------------------------------

### Install react-native-navigation with CocoaPods

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-7.25.4/docs/docs-Installing.mdx

This snippet shows how to update your Podfile to include react-native-navigation when using CocoaPods. It assumes a React Native project structure and requires the 'ReactNativeNavigation' pod to be added. Ensure manual linking of RNN is removed if upgrading from a previous version.

```diff
platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'YourApp' do
  # Pods for YourApp
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/React'
  pod 'React-DevSupport', :path => '../node_modules/react-native/React'
  pod 'React-fishhook', :path => '../node_modules/react-native/Libraries/fishhook'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'

  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

- pod 'ReactNativeNavigation', :podspec => '../node_modules/react-native-navigation/ReactNativeNavigation.podspec'

  use_native_modules!
end

```

--------------------------------

### Android Native Installation - build.gradle Configuration

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-7.32.1/docs/docs-Installing.mdx

Updates the `android/build.gradle` file to configure project-level settings for React Native Navigation. This includes setting minimum and target SDK versions, specifying Kotlin and Gradle plugin versions, and configuring repositories to include necessary dependencies.

```gradle
buildscript {
  ext {
    minSdkVersion = 21 // Or higher
    compileSdkVersion = 30
    targetSdkVersion = 30
    kotlinVersion = "1.5.31" // Or any version above 1.4.x
    RNNKotlinVersion = kotlinVersion
  }
  repositories {
        google()
        jcenter()
        mavenLocal()
        mavenCentral()
  }
  dependencies {
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion")
        classpath 'com.android.tools.build:gradle:4.0.1' // Or higher
  }
}

allprojects {
  repositories {
    google()
    mavenLocal()
    mavenCentral()
    maven {
      // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
      url "$rootDir/../node_modules/react-native/android"
    }
    maven { url 'https://jitpack.io' }
  }
}
```

--------------------------------

### Configure NPM script for Android Debug Build

Source: https://github.com/wix/react-native-navigation/blob/master/website/docs/docs/docs-Installing.mdx

Adds a script to `package.json` to streamline building and installing the Android debug APK. This command uses Gradle to assemble the debug version of the 'app' module and then installs it on the connected device or emulator. It requires the `android` directory to be present and Gradle to be configured for the project.

```json
{
  "scripts": {
    "android": "cd ./android && ./gradlew app:assembleDebug && ./gradlew installDebug"
  }
}
```

--------------------------------

### iOS Native Installation: AppDelegate.m Configuration

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-6.12.2/docs/docs-Installing.mdx

This snippet shows how to modify the `AppDelegate.m` file in an iOS project to integrate React Native Navigation. It includes importing necessary headers and initializing the navigation with `ReactNativeNavigation bootstrapWithDelegate` and defining the source URL for the React Native bridge.

```objectivec
#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <ReactNativeNavigation/ReactNativeNavigation.h>

@implementation AppDelegate

-(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [ReactNativeNavigation bootstrapWithDelegate:self launchOptions:launchOptions];
  
  return YES;
}

-(NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  #if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  #else
    return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
  #endif
}

@end
```

--------------------------------

### Android Native Installation: Update build.gradle

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-6.12.2/docs/docs-Installing.mdx

This diff shows modifications to the `android/build.gradle` file for Android native installation. It updates minimum SDK version, adds Kotlin version, and includes necessary repositories and classpath for the Kotlin Gradle plugin and Android Gradle plugin.

```diff
buildscript {
  ext {
-   minSdkVersion = 16
+   minSdkVersion = 19 // Or higher
    compileSdkVersion = 26
    targetSdkVersion = 26
    supportLibVersion = "26.1.0"
+   kotlinVersion = "1.3.72" // Or any version above 1.3.x
+   RNNKotlinVersion = kotlinVersion
  }
  repositories {
        google()
        jcenter()
+        mavenLocal()
+        mavenCentral()
  }
  dependencies {
+        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion")
+        classpath 'com.android.tools.build:gradle:3.5.3' // Or higher
-        classpath 'com.android.tools.build:gradle:2.2.3'
  }
}

allprojects {
  repositories {
+   google()
    mavenLocal()
    jcenter()
    maven {
      // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
      url "$rootDir/../node_modules/react-native/android"
    }
-        maven {
-            url 'https://maven.google.com/'
-            name 'Google'
-        }
+   maven { url 'https://jitpack.io' }
  }
}
```

--------------------------------

### Install React Native Navigation with npm or yarn

Source: https://github.com/wix/react-native-navigation/blob/master/website/docs/docs/docs-Installing.mdx

Installs the react-native-navigation library using either npm or yarn package managers. This is a fundamental step before proceeding with further configuration.

```sh
npm install --save react-native-navigation
```

```sh
yarn add react-native-navigation
```

--------------------------------

### Build and Install Playground App on Android

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-8.5.0/docs/meta-contributing.mdx

This command builds the debug or release version of the playground app and installs it onto connected Android devices or running emulators. The `-- --release` option can be used to build and install the release version.

```shell
yarn install-android
yarn install-android -- --release
```

--------------------------------

### Update MainApplication.java for react-native-navigation

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-6.12.2/docs/docs-Installing.mdx

Update `MainApplication.java` to extend `com.reactnativenavigation.NavigationApplication` and use `NavigationReactNativeHost`. This ensures proper initialization and handling of navigation-related components within the application lifecycle.

```java
import com.reactnativenavigation.NavigationApplication;
import com.reactnativenavigation.react.NavigationReactNativeHost;

public class MainApplication extends NavigationApplication {

    private final ReactNativeHost mReactNativeHost =
            new NavigationReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          return packages;
        }

        @Override
        protected String getJSMainModuleName() {
          return "index";
        }
      };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
  }
}
```

--------------------------------

### Install iOS Dependencies with CocoaPods

Source: https://github.com/wix/react-native-navigation/blob/master/website/docs/docs/docs-Installing.mdx

Installs native iOS dependencies for react-native-navigation using CocoaPods. This command should be run after the `rnn-link` script or as part of the manual installation process for iOS.

```sh
pod install --project-directory=ios
```

```sh
cd ios && pod install
```

--------------------------------

### Install Project Dependencies with Yarn Workspaces

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-8.5.0/docs/meta-contributing.mdx

This command installs all project dependencies across all workspaces, including the main library and the playground app. It leverages Yarn workspaces for efficient dependency management.

```shell
yarn install
```

--------------------------------

### Start React Native Packager for Debugging

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-8.5.0/docs/meta-contributing.mdx

This script starts the React Native packager, which is necessary for local debugging and development. It bundles the JavaScript code and serves it to the development app, enabling hot reloading and other debugging features.

```shell
yarn start
```

--------------------------------

### Android build.gradle Configuration Update

Source: https://github.com/wix/react-native-navigation/blob/master/website/docs/docs/docs-Installing.mdx

This snippet shows the necessary updates to the `android/build.gradle` file for Android projects. It primarily focuses on defining Kotlin and React Native versions and other SDK configurations.

```gradle
buildscript {
    ext {
        kotlinVersion = "2.0.21"
        RNNKotlinVersion = kotlinVersion
        compileSdkVersion = 35
        buildToolsVersion = "35.0.0"
        minSdkVersion = 24
        targetSdkVersion = 34
        ndkVersion = "27.1.12297006"
    }
  repositories {
        google()
        mavenCentral()
  }
  dependencies {
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath 'com.android.tools.build:gradle'
  }
}

allprojects {
  repositories {
   google()
    maven {
      // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
      url "$rootDir/../node_modules/react-native/android"
    }
  }
}
```

--------------------------------

### Top Bar Configuration Example

Source: https://github.com/wix/react-native-navigation/blob/master/website/docs/api/options-stack.mdx

A basic JavaScript object demonstrating the structure for configuring TopBar options in React Native Navigation. It includes properties like animate, title, subtitle, backButton, and background.

```javascript
const options = {
  topBar: {
    animate: true,
    title: {},
    subtitle: {},
    backButton: {},
    background: {},
  },
};
```

--------------------------------

### Install iOS Pod Dependencies

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-8.5.0/docs/meta-contributing.mdx

This script installs the necessary CocoaPods dependencies for the iOS version of the playground app. It ensures that all required libraries and frameworks are correctly linked for the iOS environment.

```shell
yarn pod-install
```

--------------------------------

### iOS Native Installation: Header Search Path

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-6.12.2/docs/docs-Installing.mdx

This objective-c code snippet specifies the header search path in Xcode. It's used to resolve 'ReactNativeNavigation.h' not found errors by including the path to the library's header files within the project's build settings.

```objectivec
$(SRCROOT)/../node_modules/react-native-navigation/lib/ios
```

--------------------------------

### Initialize Bottom Tab Options

Source: https://github.com/wix/react-native-navigation/blob/master/website/docs/api/options-bottomTab.mdx

This snippet shows the basic structure for initializing bottom tab options in JavaScript. It's a common starting point for defining the configuration of bottom tabs.

```javascript
const options = {
  bottomTab: {},
};
```

--------------------------------

### Define Dot Indicator for Bottom Tab

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-8.2.1/api/options-bottomTab.mdx

This example shows how to configure a dot indicator for a bottom tab, which can be used to visually highlight a tab. Options include color, size, visibility, and animation.

```javascript
const options = {
  bottomTab: {
    dotIndicator: {
      color: 'green',
      size: 5,
      visible: true,
      animate: true
    }
  }
};
```

--------------------------------

### Android MainActivity.kt Update for NavigationActivity

Source: https://github.com/wix/react-native-navigation/blob/master/website/docs/docs/docs-Installing.mdx

This snippet shows the minimal change required in `MainActivity.kt` for Android projects to use React Native Navigation. It involves changing the base class from `ReactActivity` to `NavigationActivity`.

```kotlin
import com.reactnativenavigation.NavigationActivity

class MainActivity : NavigationActivity()
```

--------------------------------

### Pre-load Icons with react-native-vector-icons for Navigation

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-7.37.0/docs/third-party-react-native-vector-icons.mdx

Pre-loads several icons from react-native-vector-icons to be used in React Native Navigation. It assumes prior installation and optional custom font setup.

```tsx
import React from 'react';
import Icon from 'react-native-vector-icons/Ionicons';

interface NavIconsProps {
  // Define any specific props if needed
}

const NavIcons: React.FC<NavIconsProps> = () => {
  // The actual icon loading logic would typically be outside the component, 
  // or managed by a service that provides the image sources.
  // This component is a placeholder to illustrate where icons might be used.
  return null;
};

export const icons = {
  tab1: require('react-native-vector-icons/glyphmaps/Ionicons.json')['ios-home'],
  tab2: require('react-native-vector-icons/glyphmaps/Ionicons.json')['ios-settings'],
  back: require('react-native-vector-icons/glyphmaps/Ionicons.json')['ios-arrow-back'],
};

// Example of how to get image sources (this logic would be in your app's setup)
export const getIconSource = async (iconName: string) => {
  return Icon.getImageSourceSync(iconName, 24, 'black');
};

export default NavIcons;
```

--------------------------------

### Pre-load react-native-vector-icons for Navigation

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-7.11.2/docs/third-party-react-native-vector-icons.mdx

Loads SVG icons from react-native-vector-icons synchronously using `getImageSourceSync` for use in React Native Navigation components. Assumes prior installation and custom font setup.

```tsx
import React from 'react';
import { Text, View } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

interface NavIconsProps {
}

export const NavIcons: React.FC<NavIconsProps> = () => {
  return (
    <View>
      <Text>NavIcons component</Text>
    </View>
  );
};

// Example of pre-loading icons
export const icons = {
  tab1: Icon.getImageSourceSync('home', 20, 'red'),
  tab2: Icon.getImageSourceSync('settings', 20, 'blue'),
  topBarSearch: Icon.getImageSourceSync('search', 20, 'black'),
  topBarAdd: Icon.getImageSourceSync('add', 20, 'green'),
};

```

--------------------------------

### Get Launch Arguments with React Native Navigation

Source: https://context7.com/wix/react-native-navigation/llms.txt

Retrieves arguments passed to the application upon launch, which can include deep links or notification data. This allows for handling initial app states based on how the app was started.

```typescript
import { Navigation } from 'react-native-navigation';

Navigation.getLaunchArgs().then((args) => {
  console.log('Launch arguments:', args);

  // Handle deep link
  if (args.deepLink) {
    handleDeepLink(args.deepLink);
  }

  // Handle notification
  if (args.notification) {
    handleNotification(args.notification);
  }
}).catch((error) => {
  console.error('Failed to get launch args:', error);
});

function handleDeepLink(url: string) {
  // Navigate to specific screen based on deep link
  Navigation.push('componentId', {
    component: {
      name: 'DetailScreen',
      passProps: { url }
    }
  });
}
```

--------------------------------

### Integrate MobX with Persistent Data

Source: https://github.com/wix/react-native-navigation/blob/master/website/docs/docs/third-party-mobx.mdx

Shows how to integrate MobX with persistent data storage using the `mobx-react-persist` library. This example assumes the use of the decorator pattern for MobX. It provides a basic setup for saving and loading store state.

```tsx
import React from 'react';
import { observable, action } from 'mobx';
import { observer } from 'mobx-react-lite';
import { useLocalStore } from 'mobx-react-lite';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { create, persist } from 'mobx-persist';

const hydrate = create({
  storage: AsyncStorage,
  jsonify: true,
});

const PersistentStore = observer(() => {
  const store = useLocalStore(() => ({
    @persist('list', (a, b) => a.id === b.id) // Example of persisting a list
    items: [],
    @persist
    name: 'Guest',

    addItem(item) {
      this.items.push(item);
    },
    setName(name) {
      this.name = name;
    }
  }));

  React.useEffect(() => {
    // Hydrate the store on component mount
    hydrate('myStoreKey', store).then(() => {
      console.log('Store hydrated');
    });
  }, [store]);

  return (
    <View>
      <Text>Name: {store.name}</Text>
      <Button title="Set Name to User" onPress={() => store.setName('User')}/>
      <Text>Items:</Text>
      {store.items.map(item => <Text key={item.id}>{item.name}</Text>) } 
      <Button title="Add Item" onPress={() => store.addItem({ id: Date.now(), name: 'New Item' })}/>
    </View>
  );
});

export default PersistentStore;
```

--------------------------------

### Resolve Android support library version conflicts

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-7.11.2/docs/docs-Installing.mdx

Configure your app/build.gradle file to enforce a consistent version for all Android support libraries. This approach prevents compilation errors caused by differing version requirements among dependencies, ensuring a stable build environment.

```groovy
android {
    ...
}

configurations.all {
    resolutionStrategy.eachDependency { DependencyResolveDetails details ->
        def requested = details.requested
        if (requested.group == 'com.android.support' && requested.name != 'multidex') {
            details.useVersion "${rootProject.ext.supportLibVersion}"
        }
    }
}

dependencies {
    ...
    implementation 'com.android.support:design:25.4.0'
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
}
```

--------------------------------

### Load Navigation Icons with getImageSourceSync (React Native)

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-8.2.1/docs/third-party-react-native-vector-icons.mdx

This snippet demonstrates how to pre-load icons from react-native-vector-icons using `getImageSourceSync` for use in React Native Navigation's BottomTabs or TopBarButtons. It assumes prior installation of react-native-vector-icons and optional custom font setup.

```tsx
import React from 'react';
import {Navigation} from 'react-native-navigation';
import Icon from 'react-native-vector-icons/MaterialIcons';

const NavIcons = {
  tabBarIcons: {
    home: Icon.getImageSourceSync('home', 20, 'blue'),
    settings: Icon.getImageSourceSync('settings', 20, 'black'),
    profile: Icon.getImageSourceSync('person', 20, 'black')
  },
  topBarButtons: {
    search: Icon.getImageSourceSync('search', 24, 'white'),
    add: Icon.getImageSourceSync('add-circle', 24, 'white')
  }
};

export default NavIcons;

```

--------------------------------

### IconInsets Options

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-7.25.4/api/options-iconInsets.mdx

Details on configuring top, bottom, left, and right insets for icons.

```APIDOC
## IconInsets Options

### Description
Configure the insets for icons, allowing for precise positioning within UI elements.

### Parameters

#### Request Body
- **top** (number) - Optional - Configure top inset.
- **bottom** (number) - Optional - Configure bottom inset.
- **left** (number) - Optional - Configure left inset.
- **right** (number) - Optional - Configure right inset.

### Request Example
```json
{
  "top": 10,
  "bottom": 5,
  "left": 15,
  "right": 20
}
```

### Response
#### Success Response (200)
- **message** (string) - Indicates successful configuration of IconInsets.

#### Response Example
```json
{
  "message": "IconInsets configured successfully."
}
```
```

--------------------------------

### Load SVG Icons with getImageSourceSync

Source: https://github.com/wix/react-native-navigation/blob/master/website/docs/docs/third-party-react-native-vector-icons.mdx

This snippet demonstrates how to pre-load SVG icons using `getImageSourceSync` from `react-native-vector-icons`. This is essential for using these icons as image sources in React Native Navigation's tabs and buttons. It assumes basic installation and optional custom font setup.

```tsx
import React from 'react';
import Icon from 'react-native-vector-icons/Ionicons';

const NavIcons = {
  tabBar: {
    home: Image.resolveAssetSource(require('react-native-vector-icons/glyphmaps/Ionicons.json')).uri,
    list: Image.resolveAssetSource(require('react-native-vector-icons/glyphmaps/Ionicons.json')).uri,
    settings: Image.resolveAssetSource(require('react-native-vector-icons/glyphmaps/Ionicons.json')).uri
  },
  navBar: {
    back: Image.resolveAssetSource(require('react-native-vector-icons/glyphmaps/Ionicons.json')).uri
  }
};

export const getIconSource = (iconName: string, iconSet: 'tabBar' | 'navBar') => {
  const icon = NavIcons[iconSet][iconName];
  return Icon.getImageSourceSync(iconName, 20, '#000000');
};

export default NavIcons;

```

--------------------------------

### Android: Update build.gradle for React Native Navigation

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-7.25.4/docs/docs-Installing.mdx

This diff shows modifications required for the `android/build.gradle` file to support React Native Navigation. It updates SDK versions, adds Kotlin support, and includes necessary repositories like `mavenLocal` and `mavenCentral`. Ensure your Gradle version is compatible.

```diff
buildscript {
  ext {
-   minSdkVersion = 16
+   minSdkVersion = 21 // Or higher
    compileSdkVersion = 30
    targetSdkVersion = 30
-   supportLibVersion = "26.1.0" // use AndroidX when possible
+   kotlinVersion = "1.5.31" // Or any version above 1.4.x
+   RNNKotlinVersion = kotlinVersion
  }
  repositories {
        google()
        jcenter()
+        mavenLocal()
+        mavenCentral()
  }
  dependencies {
+        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion")
+        classpath 'com.android.tools.build:gradle:4.0.1' // Or higher
-        classpath 'com.android.tools.build:gradle:2.2.3'
  }
}

allprojects {
  repositories {
+   google()
    mavenLocal()
-   jcenter()
+   mavenCentral()
    maven {
      // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
      url "$rootDir/../node_modules/react-native/android"
    }
-        maven {
-            url 'https://maven.google.com/'
-            name 'Google'
-        }
+   maven { url 'https://jitpack.io' }
  }
}
```

--------------------------------

### IconInsets Configuration

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-8.2.1/api/options-iconInsets.mdx

This section describes how to configure the top, bottom, left, and right insets for icons.

```APIDOC
## IconInsets Options

### Description
Configure the insets for icons to adjust their position within the navigation elements. This allows for fine-grained control over the spacing around the icon.

### Method
Not Applicable (Configuration Options)

### Endpoint
Not Applicable (Configuration Options)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
##### `top`
- **top** (number) - Optional - Configure top inset for the icon.

##### `bottom`
- **bottom** (number) - Optional - Configure bottom inset for the icon.

##### `left`
- **left** (number) - Optional - Configure left inset for the icon.

##### `right`
- **right** (number) - Optional - Configure right inset for the icon.

### Request Example
```json
{
  "top": 10,
  "bottom": 5,
  "left": 8,
  "right": 8
}
```

### Response
#### Success Response (200)
This is a configuration object and does not typically return a response in the traditional sense. The values are applied directly to the UI elements.

#### Response Example
N/A
```

--------------------------------

### Firebase Integration with Static Frameworks in Podfile

Source: https://github.com/wix/react-native-navigation/blob/master/website/docs/docs/docs-Installing.mdx

This snippet illustrates how to modify the Podfile to ensure Firebase modules are linked as static frameworks. This is crucial for Firebase integration, especially with newer React Native versions.

```ruby
linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end

static_frameworks = [
  'FirebaseCore',
  'FirebaseCoreExtension',
  'GoogleUtilities',
  'FirebaseCoreInternal',
  'FirebaseInstallations',
  'GoogleDataTransport',
  'FirebaseFirestoreInternal',
  'FirebaseMessagingInternal',
  'FirebaseAuth',
 ]

pre_install do |installer|
  installer.pod_targets.each do |pod|
    if static_frameworks.include?(pod.name)
      puts "Configuring #{pod.name} as static framework"
      def pod.build_type
        Pod::BuildType.new(:linkage => :static, :packaging => :framework)
      end
    end
  end
end

target '<ProjectName>' do
  config = use_native_modules!

  $RNFirebaseAsStaticFramework = true

  pod 'FirebaseAuthInterop', :modular_headers => true
  pod 'FirebaseAppCheckInterop', :modular_headers => true
  pod 'RecaptchaInterop', :modular_headers => true
...
```

--------------------------------

### Icon Background Configuration

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-7.32.1/api/options-iconBackground.mdx

Configure the visual properties of an icon's background.

```APIDOC
## Icon Background Options

### Description
Configure the visual properties of an icon's background, such as color, width, height, and corner radius.

### Method
Not Applicable (Configuration options)

### Endpoint
Not Applicable (Configuration options)

### Parameters
#### Request Body (Example Structure)
- **color** (Color) - Optional - Sets the background color of the icon.
- **width** (number) - Optional - Sets the width of the icon background.
- **height** (number) - Optional - Sets the height of the icon background.
- **cornerRadius** (number) - Optional - Sets the corner radius of the icon background.

### Request Example
```json
{
  "color": "#FFFFFF",
  "width": 30,
  "height": 30,
  "cornerRadius": 5
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.

#### Response Example
```json
{
  "status": "success"
}
```
```

--------------------------------

### SearchBar Configuration

Source: https://github.com/wix/react-native-navigation/blob/master/website/docs/api/topBar-searchBar.mdx

This section covers the various properties that can be used to configure the SearchBar component.

```APIDOC
## SearchBar Configuration

This section details the configurable properties for the SearchBar component within the TopBar.

### Method
SET

### Endpoint
/wix/react-native-navigation/topBar/searchBar

### Parameters
#### Request Body
- **visible** (boolean) - Optional - Determines if SearchBar is visible or not. Defaults to false.
- **focus** (boolean) - Optional - Auto focuses search bar. Defaults to false.
- **hideOnScroll** (boolean) - Optional - Hides the UISearchBar when scrolling. Defaults to false.
- **hideTopBarOnFocus** (boolean) - Optional - Indicates whether the navigation bar should be hidden when searching. True by default.
- **obscuresBackgroundDuringPresentation** (boolean) - Optional - A Boolean indicating whether the underlying content is obscured during a search. Defaults to false.
- **backgroundColor** (Color) - Optional - The background color of the UISearchBar's TextField.
- **tintColor** (Color) - Optional - The tint color of the UISearchBar. Affects text selection color, as well as "Cancel" button color.
- **searchBarPlaceholder** (string) - Optional - The placeholder value in the UISearchBar.
- **cancelText** (string) - Optional - The text value of "Cancel" button in the UISearchBar.

### Request Example
```json
{
  "visible": true,
  "searchBarPlaceholder": "Search here...",
  "cancelText": "Dismiss"
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.

#### Response Example
```json
{
  "status": "SearchBar configuration updated successfully"
}
```
```

--------------------------------

### SplitView Options Configuration

Source: https://github.com/wix/react-native-navigation/blob/master/website/versioned_docs/version-7.7.0/api/options-splitView.mdx

This section details the configurable options for SplitView components, allowing developers to customize the master view's display mode, position, dimensions, and background.

```APIDOC
## SplitView Options

### Description

This document outlines the various options available for configuring the SplitView component, primarily for iOS platforms.

### Method

Not applicable (Configuration options)

### Endpoint

Not applicable (Configuration options)

### Parameters

#### SplitView Display Mode

- **`displayMode`** (enum('auto', 'visible', 'hidden', 'overlay')) - Optional - Master view display mode. Defaults to 'auto'. Available on iOS.

#### SplitView Primary Edge

- **`primaryEdge`** (enum('leading', 'trailing')) - Optional - Master view side. 'leading' is left, 'trailing' is right. Defaults to 'leading'. Available on iOS.

#### SplitView Minimum Width

- **`minWidth`** (number) - Optional - Set the minimum width of the master view. Available on iOS.

#### SplitView Maximum Width

- **`maxWidth`** (number) - Optional - Set the maximum width of the master view. Available on iOS.

#### SplitView Primary Background Style

- **`primaryBackgroundStyle`** (enum('none', 'sidebar')) - Optional - Set background style of the sidebar. Currently works for Mac Catalyst apps only. Defaults to 'none'. Available on iOS.

### Request Example

```json
{
  "displayMode": "visible",
  "primaryEdge": "trailing",
  "minWidth": 300,
  "maxWidth": 400,
  "primaryBackgroundStyle": "sidebar"
}
```

### Response

#### Success Response (Configuration applied)

- No specific response body. Configuration is applied directly.

#### Response Example

N/A
```