React Native Navigation

https://github.com/wix/react-native-navigation
Admin
React Native Navigation provides 100% native platform navigation for iOS and Android, offering a...
Tokens:102,904
Snippets:1,135
Trust Score:9.1
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### Full index.js with theme and navigation setup

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

Complete index.js example that registers two screens, sets default options for the theme, and sets the root with a stack containing the Home screen. The theme is applied before registering the app launched listener to ensure consistent styling.

```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'
  }
});
```

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

### Install with npm

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

Install react-native-navigation using npm.

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

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

### Run pod install

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

After automatic linking, run pod install in the ios directory.

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

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

### Install with yarn

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

Install react-native-navigation using yarn.

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

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

### Complete stack navigation example with button and options

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

Full example of a Home screen with a button that pushes a Settings screen. Includes options, screen declarations, registration, app launch listener, and styles. This is the expanded code from the previous snippets.

```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'
  }
});
```

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

### Build and run the app

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

Commands to run the app on iOS and Android after installation.

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

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

### setDefaultOptions example

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

Sets default options for all screens, useful for consistent styling. The example sets bottom tab text colors.

```js
Navigation.setDefaultOptions({
  bottomTab: {
    textColor: 'black',
    selectedTextColor: 'blue',
  },
});
```

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

### Configure Side Menu Side Options

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

Example of setting the visibility and enabled state for the left side menu.

```js
const options = {
  sideMenu: {
    left: {
      visible: false,
      enabled: true
    }
  }
};
```

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

### Configure deep linking with Navigation.setLinking

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

A complete example showing component registration, linking configuration with prefixes and paths, and handling readiness states.

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

Navigation.registerComponent('Home', () => require('./screens/Home').default);
Navigation.registerComponent('Profile', () => require('./screens/Profile').default);
Navigation.registerComponent('Settings', () => require('./screens/Settings').default);
Navigation.registerComponent('Notifications', () => require('./screens/Notifications').default);

let isLoggedIn = false;

Navigation.setLinking({
  prefixes: ['myapp://', 'https://myapp.com'],
  config: {
    screens: {
      Home: 'home',
      Profile: 'user/:id',
      Settings: {
        path: 'settings',
        screens: { Notifications: 'notifications' },
      },
    },
  },
  isReady: () => isLoggedIn,
  fallback: (url) => console.warn(`Unhandled: ${url}`),
});

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

export function onLoginComplete() {
  isLoggedIn = true;
  Navigation.setLinkingReady(true);
}
```

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

### Install iOS Pods

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

Installs iOS dependencies via CocoaPods. Run from the project root after navigating to the ios directory.

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

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

### Build and Run iOS App

Source: https://github.com/wix/react-native-navigation/blob/master/test-app/README.md

Launch the application on an iOS simulator or connected device after installing dependencies.

```sh
# Using npm
npm run ios

# OR using Yarn
yarn ios
```

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

### mergeOptions example

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

Changes navigation options for a specific component or layout identified by componentId. The example hides the bottom tabs.

```js
Navigation.mergeOptions('componentId', {
  bottomTabs: {
    visible: false,
  },
});
```

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

### Start Metro Development Server

Source: https://github.com/wix/react-native-navigation/blob/master/test-app/README.md

Run the Metro JavaScript build tool from the root of your project to enable development features.

```sh
# Using npm
npm start

# OR using Yarn
yarn start
```

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

### Show an overlay with Navigation.showOverlay()

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

Displays a component as an overlay. The example configures a transparent background and enables touch interception outside the overlay.

```js
Navigation.showOverlay({
  component: {
    name: 'example.Overlay',
    options: {
      layout: {
            componentBackgroundColor: 'transparent',
          },
      overlay: {
        interceptTouchOutside: true
      }
    }
  }
});
```

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

### Install CocoaPods Dependencies

Source: https://github.com/wix/react-native-navigation/blob/master/test-app/README.md

Install the Ruby bundler and CocoaPods dependencies required for iOS development.

```sh
bundle install
```

```sh
bundle exec pod install
```

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

### Present modal with Navigation.showModal()

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

Invoke the Navigation.showModal() command to display a modal screen. The example shows a stack with a single component named 'MODAL_SCREEN' and a topBar title 'Modal'.

```js
Navigation.showModal({
  stack: {
    children: [
      {
        component: {
          name: 'MODAL_SCREEN',
          options: {
            topBar: {
              title: {
                text: 'Modal',
              },
            },
          },
        },
      },
    ],
  },
});
```

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

### Usage of Navigation.setRoot

Source: https://github.com/wix/react-native-navigation/blob/master/src/ARCHITECTURE.md

Usage example for the public Navigation API. Import the Navigation singleton and call setRoot with a layout tree to set the app's root.

```typescript
import { Navigation } from 'react-native-navigation';
Navigation.setRoot({ root: { stack: { children: [...] } } });
```

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

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

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

Adds an 'android' script to package.json that runs Gradle to assemble the debug APK and install it. This is the preferred way to build only the app module instead of the entire project.

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

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

### Typed Props in Commands

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

Example showing how to declare types for passProps when pushing a screen. This helps avoid regressions as props change over time. The following commands accept typed passProps: push, setStackRoot, showModal, showOverlay.

```tsx
```tsx file=./third-party-typescript/typed-props-in-commands.tsx
```
```

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

### Convert basic navigation to BottomTabs layout

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

Converts the basic navigation example into a tab-based app using the BottomTabs layout. Registers Home and Settings components, sets default options for status bar, top bar, and bottom tabs, and sets the root with two stacks each containing a component. Reload the app to see two tabs at the bottom.

```jsx
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { Navigation } from 'react-native-navigation';

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'
          }
        })} />
    </View>
  );
};
HomeScreen.options = {
  topBar: {
    title: {
      text: 'Home'
    }
  },
  bottomTab: {
    text: 'Home'
  }
};

const SettingsScreen = () => {
  return (
    <View style={styles.root}>
      <Text>Settings Screen</Text>
    </View>
  );
}
SettingsScreen.options = {
  topBar: {
    title: {
      text: 'Settings'
    }
  },
  bottomTab: {
    text: 'Settings'
  }
}

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

Navigation.setDefaultOptions({
  statusBar: {
    backgroundColor: '#4d089a'
  },
  topBar: {
    title: {
      color: 'white'
    },
    backButton: {
      color: 'white'
    },
    background: {
      color: '#4d089a'
    }
  },
  bottomTab: {
    fontSize: 14,
    selectedFontSize: 14
  }
});

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

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

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

### onLink - full escape hatch

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

Provides complete control over navigation. When supplied, RNN does not present anything itself; you call navigation commands yourself. The example pushes onto an existing stack for 'Profile' and shows a modal otherwise. Note that when `onLink` is set, `getModal` is ignored.

```javascript
Navigation.setLinking({
  // ...
  onLink: (match) => {
    const leaf = match.path[match.path.length - 1];

    if (leaf.screen === 'Profile') {
      Navigation.push('mainStack', {
        component: {
          name: 'Profile',
          passProps: { id: leaf.params.id },
        },
      });
      return;
    }

    Navigation.showModal({
      stack: {
        children: match.path.map((segment) => ({
          component: { name: segment.screen, passProps: segment.params },
        })),
      },
    });
  },
});
```

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

### Strongly Typed Functional Component

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

Example of a functional component with typed options and props. Use this to get type safety for component options and props.

```tsx
```tsx file=./third-party-typescript/strongly-typed-components-fn.tsx
```
```

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

### Strongly Typed Class Component

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

Example of a class component with typed options and props. Use this to get type safety for component options and props.

```tsx
```tsx file=./third-party-typescript/strongly-typed-components-class.tsx
```
```

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

### Clone and Run Playground

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

Instructions for cloning the React Native Navigation repository and setting up the playground environment for iOS and Android development.

```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
```

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

### Build and Run Android App

Source: https://github.com/wix/react-native-navigation/blob/master/test-app/README.md

Use these commands to build and launch the application on an Android emulator or connected device.

```sh
# Using npm
npm run android

# OR using Yarn
yarn android
```

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

### scrollEdgeEffect

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

Documentation for the scrollEdgeEffect option in React Native Navigation, including its properties and usage examples.

```APIDOC
## scrollEdgeEffect

### Description
Controls the iOS 26+ `UIScrollEdgeEffect` (Liquid Glass fade) shown at the edges of scroll views when content scrolls under bars.

### Properties

#### `hidden`
- **Type**: boolean
- **Required**: No
- **Platform**: iOS 26+
- **Description**: Hide the scroll edge effect.

#### `style`
- **Type**: enum('automatic', 'soft', 'hard')
- **Required**: No
- **Platform**: iOS 26+
- **Default**: 'automatic'
- **Description**: Set the scroll edge effect style.

#### `top` / `bottom` / `left` / `right`
- **Type**: `{ hidden?: boolean; style?: 'automatic' | 'soft' | 'hard' }`
- **Required**: No
- **Platform**: iOS 26+
- **Description**: Per-edge override. Values fall back to the global `hidden` / `style`. Per-edge values take precedence.

### Usage Examples

Hide all edges:

```js
MyScreen.options = {
  scrollEdgeEffect: { hidden: true },
};
```

Top visible, bottom hidden:

```js
MyScreen.options = {
  scrollEdgeEffect: {
    top: { hidden: false },
    bottom: { hidden: true },
  },
};
```

Dynamic update:

```js
Navigation.mergeOptions(componentId, {
  scrollEdgeEffect: { bottom: { hidden: true } },
});
```
```

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

### Create a stack with a registered component in index.js

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

Use this snippet in index.js of a new project to set up a stack layout with a single screen. It registers the 'Home' component and sets the root to a stack containing that component. Running it renders a screen with an empty TopBar and the HomeScreen component.

```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';

const HomeScreen = (props) => {
  return (
    <View style={styles.root}>
      <Text>Home Screen</Text>
    </View>
  );
};
Navigation.registerComponent('Home', () => HomeScreen);

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'
  }
});
```

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

### Update MainApplication.kt to use NavigationApplication

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

Modifies the MainApplication class to extend NavigationApplication and use NavigationReactNativeHost. Removes SoLoader initialization and the New Architecture load call.

```diff
// ...

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 : DefaultReactNativeHost(this) {
+        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()
-        SoLoader.init(this, OpenSourceMergedSoMapping)
-        if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-            // If you opted-in for the New Architecture, we load the native entry point for this app.
-            load()
-        }
    }
}
```

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

### Push other layouts (SideMenu)

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

Any layout type can be pushed. This example pushes a SideMenu layout with left and center components.

```js
Navigation.push(this.props.componentId, {
  sideMenu: {
    left: {
      component: {
        name: 'drawerScreen'
      }
    },
    center: {
      component: {
        name: 'centerScreen'
      }
    }
  }
});
```

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

### Initialize navigationBar options

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

Basic structure for defining navigation bar options within the options object.

```js
const options = {
  navigationBar: {}
};
```

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

### Hide StatusBar dynamically with Navigation.mergeOptions

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

Calls `Navigation.mergeOptions` to hide the StatusBar dynamically. This is an example of changing StatusBar options at runtime.

```js
Navigation.mergeOptions(this.props.componentId, {
  statusBar: {
    visible: false
  }
});
```

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

### Navigation.setLinkingReady(ready)

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

Sets the user-controlled readiness gate. Passing true flushes queued links; passing false blocks future links until called again with true.

```APIDOC
## Navigation.setLinkingReady(ready)

### Description
Set the user-controlled readiness gate. Passing `true` flushes queued links; passing `false` blocks future links until called again with `true`.

### Method
setLinkingReady

### Parameters
- **ready** (boolean) - Required - The readiness state.

### Request Example
```js
Navigation.setLinkingReady(true);
```

### Response
No return value documented.
```

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

### TopBar options object

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

Example of the topBar options object with common properties: animate, title, subtitle, backButton, and background.

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

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

### Apply Default Options before Navigation.setRoot

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

Default options must be configured using Navigation.setDefaultOptions before calling Navigation.setRoot to ensure the styles are applied to the initial layout.

```js
// Set the default topBar background color to red
Navigation.setDefaultOptions({
  topBar: {
    background: {
      color: 'red'
    }
  }
});

// That stack's topBar background color will be red, as is set in default options
Navigation.setRoot({
  root: {
    stack: {
      children: [
        ...
      ]
    }
  }
});
```

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

### Overlay options object

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

Base structure for overlay options. The overlay object is empty in this example, but can contain properties like interceptTouchOutside and handleKeyboardEvents.

```javascript
const options = {
  overlay: {

  }
}
```

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

### Update android/build.gradle with RNNKotlinVersion

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

Adds RNNKotlinVersion to the buildscript ext block and ensures the required SDK versions are set. This is the first step in the Android installation.

```diff
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"
    }
  }
}
```

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

### iOS Directory Structure

Source: https://github.com/wix/react-native-navigation/blob/master/ios/ARCHITECTURE.md

Shows the layout of the ios/ directory, listing key source files and folders for both legacy and new architecture, including TurboModules, Utils, and the Xcode project.

```text
ios/
├── RNNBridgeModule.h/mm         # Bridge entry point (legacy architecture)
├── RNNBridgeManager.h/mm        # Bridge initialization
├── RNNCommandsHandler.h/mm      # Command dispatcher
├── RNNEventEmitter.h/mm         # Event emission to JS
├── RNNLayoutManager.h/mm        # View controller tracking
├── RNNLayoutNode.h/mm           # Layout tree parsing
├── RNNNavigationOptions.h/mm    # Options model
├── RNNComponentViewController.h/mm  # React component screen
├── RNNStackController.h/mm      # Stack navigation
├── RNNBottomTabsController.h/mm # Tab navigation
├── RNNSideMenuViewController.h/mm   # Side menu
├── RNNTopTabsViewController.h/mm    # Top tabs
├── RNNSplitViewController.h/mm  # Split view (iPad)
├── RNNModalManager.h/mm         # Modal presentation
├── RNNOverlayManager.h/mm       # Overlay management
├── TurboModules/                # New architecture entry points
│   ├── RNNTurboModule.h/mm      # TurboModule spec implementation
│   ├── RNNTurboManager.h/mm     # Manager for host, window, external components
│   ├── RNNTurboCommandsHandler.h/mm  # TurboModule command routing
│   └── RNNTurboEventEmitter.h/mm     # Event emission for new arch
├── Utils/                       # Utility classes
├── RNNSideMenu/                 # MMDrawerController integration
└── ReactNativeNavigation.xcodeproj/
```

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

### Configure Deep Linking with Navigation.setLinking

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

Call Navigation.setLinking during app startup to define URL prefixes and the screen mapping configuration.

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

Navigation.setLinking({
  prefixes: ['myapp://', 'https://myapp.com'],
  config: {
    screens: {
      Home: 'home',
      Profile: 'user/:id',
      Settings: {
        path: 'settings',
        screens: {
          Notifications: 'notifications',
        },
      },
    },
  },
});
```

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

### Dynamically update scrollEdgeEffect with mergeOptions

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

Dynamically update the scroll edge effect at runtime using Navigation.mergeOptions. This example hides the effect on the bottom edge.

```js
Navigation.mergeOptions(componentId, {
  scrollEdgeEffect: { bottom: { hidden: true } },
});
```

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

### ReactNativeNavigation bootstrap and registerExternalComponent

Source: https://github.com/wix/react-native-navigation/blob/master/ios/ARCHITECTURE.md

Shows the public API for native initialization. Use bootstrapWithHost: for new architecture (0.77+), bootstrapWithBridge: for legacy bridge, and registerExternalComponent: to register native screens.

```objc
// New architecture (0.77+)
[ReactNativeNavigation bootstrapWithHost:reactHost];

// Legacy bridge
[ReactNativeNavigation bootstrapWithBridge:bridge];

// Register native screens
[ReactNativeNavigation registerExternalComponent:@"NativeScreen"
                                        callback:^(NSDictionary *props, RCTBridge *bridge) {
    return [[MyNativeVC alloc] init];
}];
```

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

### showModal()

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

Shows a screen as a modal. Accepts a layout object that can be any type of layout.

```APIDOC
## `showModal()`

### Description
Show a screen as a modal.

### Method
`showModal`

### Parameters
| Name   | Required | Type                | Description                                                                                                            |
| ------ | -------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| layout | Yes      | [Layout](layout-layout.mdx) | Any type of layout. [BottomTabs](layout-BottomTabs.mdx), [Stack](layout-stack.mdx), [SideMenu](layout-sideMenu.mdx), [Component](layout-component.mdx) |

### Request Example
```js
Navigation.showModal({
  stack: {
    children: [{
      component: {
        name: 'example.ModalScreen',
        passProps: {
          text: 'stack with one child'
        },
        options: {
          topBar: {
            title: {
              text: 'Modal'
            }
          }
        }
      }
    }]
  }
});
```
```

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

### Configure FAB button options

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

Example of setting FAB button options on Android. The `id` is mandatory when initiating the FAB button, but not required when updating with `Navigation.mergeOptions`.

```javascript
const options = {
  fab: {
    id: 'id',
    icon: require('path-to-fab-icon'),
    backgroundColor: 'coral',
    actions: [
      {
        id: 'id2',
        icon: require('path-to-fab-icon-2),
      }
    ]
  },
};
```

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

### Register app launched listener and set root

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

Sets the root layout when the app is launched. Must be called as soon as the bundle is executed to handle the event correctly.

```js
Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {

    }
  });
});
```

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

### Create a Toast Overlay

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

Demonstrates showing a Toast using an Overlay. Users can interact with content behind the toast because interceptTouchOutside is set to false.

```jsx
const React = require('react');
const { View, Text, StyleSheet, TouchableOpacity } = require('react-native');
const Colors = require('../commons/Colors');
const Navigation = require('../services/Navigation');

const Toast = function ({ componentId }) {
  return (
    <View style={styles.root}>
      <View style={styles.toast}>
        <Text style={styles.text}>This a very important message!</Text>
        <TouchableOpacity
          style={styles.button}
          onPress={() => Navigation.dismissOverlay(componentId)}
        >
          <Text style={styles.buttonText}>OK</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    flex: 1,
    flexDirection: 'column-reverse',
  },
  toast: {
    elevation: 2,
    flexDirection: 'row',
    height: 40,
    margin: 16,
    borderRadius: 20,
    backgroundColor: Colors.accent,
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  text: {
    color: 'white',
    fontSize: 16,
    marginLeft: 16,
  },
  button: {
    marginRight: 16,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

Toast.options = {
  layout: {
    componentBackgroundColor: 'transparent',
  },
  overlay: {
    interceptTouchOutside: false,
  },
};

module.exports = Toast;
```

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

### Create a Counter store with decorators

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

Defines a counter store using MobX decorators. Requires enabling decorators in the project configuration as per the official MobX guide.

```tsx
```tsx file=./third-party-mobx/counter-store-decorator.tsx 
```
```

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

### showOverlay()

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

Shows a component as an overlay. Accepts a layout object, typically a Component layout, and returns a promise that resolves when the overlay is shown.

```APIDOC
## showOverlay()

### Description
Shows a component as an overlay. Accepts a layout object, typically a Component layout, and returns a promise that resolves when the overlay is shown.

### Method
showOverlay

### Parameters
#### layout (Layout) - Required
Any type of layout. Typically, Component layout is used in Overlays but it's possible to load any other layout (BottomTabs, Stack, SideMenu, Component).

### Request Example
```js
Navigation.showOverlay({
  component: {
    name: 'example.Overlay',
    options: {
      layout: {
        componentBackgroundColor: 'transparent',
      },
      overlay: {
        interceptTouchOutside: true
      }
    }
  }
});
```
```

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

### Update AppDelegate.m for RN 0.79 Objective-C

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

For React Native 0.79 Objective-C projects, update AppDelegate.m to remove manual React Native setup and call super.

```diff
-  ReactNativeDelegate *delegate = [[ReactNativeDelegate alloc] init];
-  RCTReactNativeFactory *factory = [[RCTReactNativeFactory alloc] initWithDelegate:delegate];
-  delegate.dependencyProvider = [[RCTAppDependencyProvider alloc] init];

-  self.reactNativeDelegate = delegate;
-  self.reactNativeFactory = factory;
-  self.window = [[UIWindow alloc] initWithFrame:UIScreen.mainScreen.bounds];

-  [factory startReactNativeWithModuleName:@"RN79"
-                                      in:self.window
-                            launchOptions:launchOptions];
+  self.reactNativeDelegate = [ReactNativeDelegate new];
+  [super application:application didFinishLaunchingWithOptions:launchOptions];
```

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

### setRoot()

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

Sets the UI of the application. This method accepts a layout object that defines the root hierarchy, such as BottomTabs, Stack, SideMenu, or Component. Use examples with Stack and BottomTabs layouts.

```APIDOC
## setRoot()

### Description
Sets the UI of the application by defining the root layout hierarchy.

### Method
setRoot

### Signature
`setRoot(layout: Layout)`

### Parameters
- **layout** (Layout) - Required - Any type of layout: BottomTabs, Stack, SideMenu, Component. See [Layout](layout-layout.mdx) for details.

### Request Example
#### With Stack layout
```js
Navigation.setRoot({
  root: {
    stack: {
      children: [{
        component: {
          name: 'example.FirstTabScreen',
          passProps: {
            text: 'This is tab 1'
          }
        }
      }],
      options: {
        bottomTab: {
          text: 'Tab 1',
          icon: require('../images/one.png'),
          testID: 'FIRST_TAB_BAR_BUTTON'
        }
      }
    }
  }
});
```

#### With BottomTabs layout
```js
Navigation.setRoot({
  root: {
    bottomTabs: {
      children: [{
        stack: {
          children: [{
            component: {
              name: 'example.FirstTabScreen',
              passProps: {
                text: 'This is tab 1'
              }
            }
          }],
          options: {
            bottomTab: {
              text: 'Tab 1',
              icon: require('../images/one.png'),
              testID: 'FIRST_TAB_BAR_BUTTON'
            }
          }
        }
      },
      {
        component: {
          name: 'navigation.playground.TextScreen',
          passProps: {
            text: 'This is tab 2'
          },
          options: {
            bottomTab: {
              text: 'Tab 2',
              icon: require('../images/two.png'),
              testID: 'SECOND_TAB_BAR_BUTTON'
            }
          }
        }
      }]
    }
  }
});
```

### Response
No response details are provided in the source documentation.
```

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

### Push with options (update options on push)

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

Pushes a component and applies options when the screen becomes visible. The options include a topBar title.

```js
Navigation.push(this.props.componentId, {
  component: {
    name: 'example.PushedScreen',
    options: {
      topBar: {
        title: {
          text: 'Pushed screen title'
        }
      }
    }
  }
});
```

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

### Handle hardware back button press with navigationButtonPressed

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

Listen for navigationButtonPressed events and check for buttonId 'RNN.hardwareBackButton' to handle the hardware back button after disabling default behaviors. Log a message in this example.

```js
navigationButtonPressed({ buttonId }) {
  if (buttonId === 'RNN.hardwareBackButton') {
    console.log('The hardware back button was pressed!');
  }
}
```

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

### push()

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

Pushes a screen into the stack and updates the display according to the screen options. Accepts a componentId and an optional layout to push.

```APIDOC
## push()

### Description
Pushes a screen into the stack and updates the display according to the screen options.

### Method
push

### Parameters
#### Parameters
- **componentId** (string) - Required - The componentId of a screen pushed into the stack, or the id of the stack.
- **layout** (Layout) - Optional - The layout being pushed into the stack. Any type of layout (except stack) can be pushed into stacks. Typically, Component layout is pushed into stacks but it's possible to push SideMenu or BottomTabs as well.

### Request Example
```js
Navigation.push(this.props.componentId, {
  component: {
    name: 'example.PushedScreen'
  }
});
```

### Response
No response is documented.
```

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

### Handle software back button press with navigationButtonPressed

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

Listen for navigationButtonPressed events and check for buttonId 'RNN.back' to handle the software back button after disabling the default pop. Log a message in this example.

```js
navigationButtonPressed({ buttonId }) {
  if (buttonId === 'RNN.back') {
    console.log('The software back button was pressed!');
  }
}
```

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

### Register option processor with Navigation.addOptionProcessor

Source: https://github.com/wix/react-native-navigation/blob/master/src/ARCHITECTURE.md

Registers a custom option processor for the 'topBar.title.text' option. The processor receives the current value and command name, and returns the transformed value. In this example, all titles are converted to uppercase.

```typescript
Navigation.addOptionProcessor('topBar.title.text', (value, commandName) => {
  return value.toUpperCase(); // Transform all titles
});
```

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

### Register onAppLaunched listener

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

Registers a listener for the app launch event to set the initial layout.

```js
const appLaunchedListener = Navigation.events().registerAppLaunchedListener(() => {});
```

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

### Extend NavigationApplication in MainApplication.kt

Source: https://github.com/wix/react-native-navigation/blob/master/android/ARCHITECTURE.md

User's MainApplication must extend NavigationApplication and provide a NavigationReactNativeHost. This is required for navigation to work.

```kotlin
// MainApplication.kt - User extends NavigationApplication
class MainApplication : NavigationApplication() {
    override val reactNativeHost: ReactNativeHost
        get() = NavigationReactNativeHost(this) // Must use NavigationReactNativeHost
}
```

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

### Root animations: setRoot enter/exit

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

Configures the setRoot animation with enter and exit animations. The example shows an enter animation with waitForRender, enabled, and translationY properties. The exit animation is omitted (shown as 'exit:{...}').

```js
options:{
  animations: {
        push:{...},
        setRoot: {
          enter: {
            waitForRender: true,
            enabled: false,
            translationY: {
              from: 0,
              to: 1,
              duration: 3,
            },
          },
          exit:{...}
        },
      },
    };
```

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

### Register appLaunched listener with Navigation.events().registerAppLaunchedListener

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

Register the appLaunched listener as early as possible in index.js. On each event, call Navigation.setRoot to display your UI. If the listener is registered too late, you may see a white screen or hanging splash screen after relaunching.

```javascript
Navigation.events().registerAppLaunchedListener(() => {
  // Each time the event is received you should call Navigation.setRoot
});
```

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

### Force support library version in app/build.gradle

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

Add this configuration to app/build.gradle to force all com.android.support dependencies (except multidex) to use the version specified by rootProject.ext.supportLibVersion. Also includes example implementation dependencies for design and appcompat-v7.

```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}"
}
```

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

### Register layout processor with Navigation.addLayoutProcessor

Source: https://github.com/wix/react-native-navigation/blob/master/src/ARCHITECTURE.md

Registers a layout transformer using Navigation.addLayoutProcessor. The processor receives the layout and command name, and can modify the layout before it is used. This example shows a placeholder for adding default options to all components.

```typescript
Navigation.addLayoutProcessor((layout, commandName) => {
  // Add default options to all components
  return layout;
});
```

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

### Link local React-Native-Navigation in Podfile

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

Add this line to your Podfile to point the project to your local clone of the React-Native-Navigation repository.

```ruby
pod 'ReactNativeNavigation', :path => '/path/to/cloned/react-native-navigation'
```
Tokens:
Raw