| `fullScreen` |
+
+## `modalTransitionStyle`
+
+Configure the transition style of the modal.
+
+| Type | Required | Platform |
+| ----------------------------------------------------------------------- | -------- | -------- |
+| enum('coverVertical', 'crossDissolve', 'flipHorizontal', 'partialCurl') | No | Both |
+
+## `popGesture`
+
+Enable or disable swipe back to pop gesture.
+
+| Type | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No | iOS |
+
+## `backgroundImage`
+
+Background image of the screen.
+
+| Type | Required | Platform |
+| ----- | -------- | -------- |
+| Image | No | iOS |
+
+## `rootBackgroundImage`
+
+Background image for the Navigation View.
+
+| Type | Required | Platform |
+| ----- | -------- | -------- |
+| Image | No | Android |
+
+## `blurOnUnmount`
+
+Enable or disable automaticall blur of the focused input, dismissing keyboard on unmount.
+
+| Type | Required | Platform | Default |
+| ------- | -------- | -------- | ------- |
+| boolean | No | Android | false |
+
+## `navigationBar`
+Enable or disable automaticall blur of the focused input, dismissing keyboard on unmount.
+
+| Type | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No | Android |
diff --git a/website/versioned_docs/version-7.11.4/api/options-scrollEdgeAppearance.mdx b/website/versioned_docs/version-7.11.4/api/options-scrollEdgeAppearance.mdx
new file mode 100644
index 00000000000..c08d623130c
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/api/options-scrollEdgeAppearance.mdx
@@ -0,0 +1,59 @@
+---
+id: options-scrollEdgeAppearance
+title: Scroll Edge Appearance Options
+sidebar_label: Scroll Edge Appearance
+---
+
+Controls the top bar background styling.
+
+```js
+const options = {
+ topBar: {
+ scrollEdgeAppearance: {
+ background: {},
+ active: true,
+ },
+ },
+};
+```
+
+### `active`
+
+Since this might be considered as a breaking change (meaning that previous configs might behave different), you'll need to
+pass active `true/false` to activate this option.
+
+| Type | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No | iOS |
+
+### `color`
+
+Set the background color.
+
+| Type | Required | Platform |
+| ----- | -------- | -------- |
+| Color | No | iOS |
+
+### `translucent`
+
+Allows the Scroll Edge Appearance to be translucent (blurred).
+
+| Type | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No | iOS |
+
+### `borderColor`
+
+Change the topBar border color.
+
+| Type | Required | Platform |
+| ----- | -------- | -------- |
+| Color | No | iOS |
+
+### `noBorder`
+
+Disables border at the bottom of the TopBar.
+
+| Type | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No | iOS |
diff --git a/website/versioned_docs/version-7.11.4/api/options-sideMenu.mdx b/website/versioned_docs/version-7.11.4/api/options-sideMenu.mdx
new file mode 100644
index 00000000000..4552729c6cd
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/api/options-sideMenu.mdx
@@ -0,0 +1,39 @@
+---
+id: options-sideMenu
+title: Side Menu Options
+sidebar_label: Side Menu
+---
+
+```js
+const options = {
+ sideMenu: {
+ left: {},
+ right: {},
+ openGestureMode: 'entireScreen',
+ },
+};
+```
+
+### `left`
+
+Configure the left side menu.
+
+| Type | Required | Platform |
+| ---------------------------------------- | -------- | -------- |
+| [SideMenuSide](options-sideMenuSide.mdx) | No | Both |
+
+### `right`
+
+Configure the right side menu.
+
+| Type | Required | Platform |
+| ---------------------------------------- | -------- | -------- |
+| [SideMenuSide](options-sideMenuSide.mdx) | No | Both |
+
+### `openGestureMode`
+
+Configure how a user is allowed to open a drawer using gestures.
+
+| Type | Required | Platform | Default |
+| ----------------------------- | -------- | -------- | ------- |
+| enum('entireScreen', 'bezel') | No | iOS | 'bezel' |
diff --git a/website/versioned_docs/version-7.11.4/api/options-sideMenuSide.mdx b/website/versioned_docs/version-7.11.4/api/options-sideMenuSide.mdx
new file mode 100644
index 00000000000..92bcf6b2eb3
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/api/options-sideMenuSide.mdx
@@ -0,0 +1,48 @@
+---
+id: options-sideMenuSide
+title: Side Menu Side Options
+sidebar_label: Side Menu Side
+---
+
+```js
+const options = {
+ sideMenu: {
+ left: {
+ visible: false,
+ enabled: true
+ }
+ }
+};
+```
+
+### `visible`
+
+Show or hide the side menu.
+
+| Type | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No | Both |
+
+### `enabled`
+
+Enable or disable the side menu.
+
+| Type | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No | Both |
+
+### `width`
+
+Set the width of the side menu.
+
+| Type | Required | Platform |
+| ------ | -------- | -------- |
+| number | No | Both |
+
+### `height`
+
+Set the height of the side menu.
+
+| Type | Required | Platform |
+| ------ | -------- | -------- |
+| number | No | Both |
diff --git a/website/versioned_docs/version-7.11.4/api/options-splitView.mdx b/website/versioned_docs/version-7.11.4/api/options-splitView.mdx
new file mode 100644
index 00000000000..85f43f41e43
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/api/options-splitView.mdx
@@ -0,0 +1,47 @@
+---
+id: options-splitView
+title: SplitView Options
+sidebar_label: SplitView
+---
+
+### `displayMode`
+
+Master view display mode.
+
+| Type | Required | Default | Platform |
+| -------------------------------------------- | -------- | ------- | -------- |
+| enum('auto', 'visible', 'hidden', 'overlay') | No | 'auto' | iOS |
+
+### `primaryEdge`
+
+Master view side. Leading is left. Trailing is right.
+
+| Type | Required | Default | Platform |
+| --------------------------- | -------- | --------- | -------- |
+| enum('leading', 'trailing') | No | 'leading' | iOS |
+
+### `minWidth`
+
+Set the minimum width of master view.
+
+| Type | Required | Platform |
+| ------ | -------- | -------- |
+| number | No | iOS |
+
+### `maxWidth`
+
+Set the maximum width of master view.
+
+| Type | Required | Platform |
+| ------ | -------- | -------- |
+| number | No | iOS |
+
+### `primaryBackgroundStyle`
+
+Set background style of sidebar. Currently works for Mac Catalyst apps only.
+See: [Optimizing Your iPad App for Mac
+](https://developer.apple.com/documentation/uikit/mac_catalyst/optimizing_your_ipad_app_for_mac#3239145)
+
+| Type | Required | Default | Platform |
+| --------------------------- | -------- | --------- | -------- |
+| enum('none', 'sidebar') | No | 'none' | iOS |
diff --git a/website/versioned_docs/version-7.11.4/api/options-stack.mdx b/website/versioned_docs/version-7.11.4/api/options-stack.mdx
new file mode 100644
index 00000000000..5ea46a521ae
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/api/options-stack.mdx
@@ -0,0 +1,245 @@
+---
+id: options-stack
+title: Top Bar Options
+sidebar_label: Top Bar
+---
+
+## TopBar
+
+```js
+const options = {
+ topBar: {
+ animate: true,
+ title: {},
+ subtitle: {},
+ backButton: {},
+ background: {}
+ }
+};
+```
+
+### `visible`
+
+Determines if TopBar is visible or not.
+
+| Type | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No | Both |
+
+### `animate`
+
+Determines if changing the TopBar visibility will be animated or not.
+
+| Type | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No | Both |
+
+### `title`
+
+Controls the top bar title.
+
+| Type | Required | Platform |
+| ---------------------- | -------- | -------- |
+| [Title](options-title.mdx) | No | Both |
+
+### `subtitle`
+
+Controls the top bar subtitle.
+
+| Type | Required | Platform |
+| ---------------------------- | -------- | -------- |
+| [Subitle](options-subtitle.mdx) | No | Both |
+
+### `backButton`
+
+Controls the top bar back button.
+
+| Type | Required | Platform |
+| --------------------------------- | -------- | -------- |
+| [BackButton](options-backButton.mdx) | No | Both |
+
+### `background`
+
+Controls the top bar background.
+
+| Type | Required | Platform |
+| --------------------------------- | -------- | -------- |
+| [Background](options-background.mdx) | No | Both |
+
+### `scrollEdgeAppearance`
+
+Controls the appearance settings when the scrollable content reaches the matching edge of the navigation bar.
+
+| Type | Required | Platform |
+| --------------------------------- | -------- | -------- |
+| [Scroll Edge Background](options-scrollEdgeAppearance.mdx) | No | iOS 13+ |
+
+### `barStyle`
+
+Control the TopBar blur style. Requires `translucent: true`.
+
+| Type | Required | Platform |
+| ----------------------- | -------- | -------- |
+| enum('default','black') | No | iOS |
+
+### `height`
+
+Set TopBar height, in dp units, on Android only. For iOS use `largeTitle` see [Options](options-largeTitle.mdx).
+
+| Type | Required | Platform |
+| ------ | -------- | -------- |
+| number | No | Android |
+
+### `borderColor`
+
+Change the topBar border color.
+
+| Type | Required | Platform |
+| ----- | -------- | -------- |
+| Color | No | Both |
+
+### `borderHeight`
+
+Set the border height of the navbar in dp.
+
+| Type | Required | Platform |
+| ------ | -------- | -------- |
+| number | No | Android |
+
+### `drawBehind`
+
+Controls if child should be drawn behind the TopBar or below it.
+
+| Type | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No | Both |
+
+### `elevation`
+
+Set the elevation of the TopBar in dp. This option changes how the shadow under the TopBar looks. Setting this value to 0 will remove the shadow completely.
+
+| Type | Required | Platform |
+| ------ | -------- | -------- |
+| number | No | Android |
+
+### `hideOnScroll`
+
+Hide the TopBar when a scrolling layout is scrolled.
+
+| Type | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No | Both |
+
+:::warning Deprecation warning
+This option is currently deprecated and will be removed in a future release. Please use the [OptionsSearchBar](topBar-searchBar.mdx) option instead.
+:::
+
+### `hideNavBarOnFocusSearchBar`
+
+Indicates whether the navigation bar should be hidden when searching. True by default.
+
+| Type | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No | iOS 11+ |
+
+### `leftButtons`
+
+An array of buttons to be displayed at the right-side of the TopBar. Button layout is from left to right. See the [Buttons](options-button) section for more details.
+
+:::info Android support
+Android currently only supports a single left button and does not support custom left Buttons.
+:::
+
+
+| Type | Required | Platform |
+| ------------------------------ | -------- | -------- |
+| [[Button]](options-button.mdx) | No | Both |
+
+### `leftButtonColor`
+
+Default color for left buttons.
+
+| Type | Required | Platform |
+| ----- | -------- | -------- |
+| Color | No | Both |
+
+### `noBorder`
+
+Disables border at the bottom of the TopBar.
+
+| Type | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No | iOS |
+
+### `rightButtons`
+
+An array of buttons to be displayed at the right side of the TopBar. Button layout is from right to left. See the [Buttons](options-button) section for more details.
+
+| Type | Required | Platform |
+| -------------------------- | -------- | -------- |
+| [[Button]](options-button.mdx) | No | Both |
+
+### `rightButtonColor`
+
+Default color for the right button.
+
+| Type | Required | Platform |
+| ----- | -------- | -------- |
+| Color | No | Both |
+
+### `searchBar`
+
+Controls the SearchBar.
+
+| Type | Required | Platform |
+| ------- | -------- | -------- |
+| [OptionsSearchBar](topBar-searchBar.mdx) | No | iOS 11+ |
+
+
+:::warning Deprecation warning
+This option is currently deprecated and will be removed in a future release. Please use the [OptionsSearchBar](topBar-searchBar.mdx) option instead.
+:::
+
+### `searchBarHiddenWhenScrolling`
+
+Hides the UISearchBar when scrolling.
+
+| Type | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No | iOS 11+ |
+
+:::warning Deprecation warning
+This option is currently deprecated and will be removed in a future release. Please use the [OptionsSearchBar](topBar-searchBar.mdx) option instead.
+:::
+
+### `searchBarPlaceholder`
+
+The placeholder value in the UISearchBar.
+
+| Type | Required | Platform |
+| ------ | -------- | -------- |
+| string | No | iOS 11+ |
+
+:::warning Deprecation warning
+This option is currently deprecated and will be removed in a future release. Please use the [OptionsSearchBar](topBar-searchBar.mdx) option instead.
+:::
+
+### `searchBarBackgroundColor`
+
+The background color of the UISearchBar's TextField.
+
+| Type | Required | Platform |
+| ------ | -------- | -------- |
+| Color | No | iOS 13+ |
+
+:::warning Deprecation warning
+This option is currently deprecated and will be removed in a future release. Please use the [OptionsSearchBar](topBar-searchBar.mdx) option instead.
+:::
+
+### `searchBarTintColor`
+
+The tint color of the UISearchBar. Affects text selection color, as well as "Cancel" button color.
+
+| Type | Required | Platform |
+| ------ | -------- | -------- |
+| Color | No | iOS 13+ |
diff --git a/website/versioned_docs/version-7.11.4/api/options-statusBar.mdx b/website/versioned_docs/version-7.11.4/api/options-statusBar.mdx
new file mode 100644
index 00000000000..74f103285ba
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/api/options-statusBar.mdx
@@ -0,0 +1,75 @@
+---
+id: options-statusBar
+title: Status Bar Options
+sidebar_label: Status Bar
+---
+
+```js
+const options = {
+ statusBar: {},
+};
+```
+
+### `visible`
+
+Set the status bar visibility.
+
+| Type | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No | Both |
+
+### `style`
+
+Set the text color of the status bar.
+
+| Type | Required | Platform | Default |
+| --------------------- | -------- | -------- | ------- |
+| enum('light', 'dark') | No | Both | 'light' |
+
+### `backgroundColor`
+
+Set the background color of the status bar.
+
+| Type | Required | Platform |
+| ----- | -------- | -------- |
+| Color | No | Android |
+
+### `drawBehind`
+
+Draw screen behind the status bar.
+
+| Type | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No | Android |
+
+### `translucent`
+
+Set the status bar to be translucent.
+
+| Type | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No | Android |
+
+### `animate`
+
+Animate StatusBar style changes.
+
+| Type | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No | iOS |
+
+### `blur`
+
+Blur content beneath the StatusBar.
+
+| Type | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No | iOS |
+
+### `hideWithTopBar`
+
+Automatically hide the StatusBar when the TopBar hides.
+
+| Type | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No | iOS |
diff --git a/website/versioned_docs/version-7.11.4/api/options-subtitle.mdx b/website/versioned_docs/version-7.11.4/api/options-subtitle.mdx
new file mode 100644
index 00000000000..333b6631db6
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/api/options-subtitle.mdx
@@ -0,0 +1,75 @@
+---
+id: options-subtitle
+title: Subtitle Options
+sidebar_label: Subtitle
+---
+
+Controls the top bar subtitle.
+
+```js
+const options = {
+ topBar: {
+ subtitle: {},
+ },
+};
+```
+
+### `text`
+
+Subtitle text.
+
+| Type | Required | Platform |
+| ------ | -------- | -------- |
+| string | No | Both |
+
+### `fontSize`
+
+Subtitle fontSize. On Android this value is `sp`.
+
+| Type | Required | Platform |
+| ------ | -------- | -------- |
+| number | No | Both |
+
+### `color`
+
+Subtitle color.
+
+| Type | Required | Platform |
+| ----- | -------- | -------- |
+| Color | No | Both |
+
+### `fontFamily`
+
+Subtitle FontFamily.
+
+| Type | Required | Platform |
+| ---------- | -------- | -------- |
+| FontFamily | No | Both |
+
+### `fontStyle`
+
+| Type | Required | Platform |
+| ------------------------ | -------- | -------- |
+| enum('normal', 'italic') | No | Both |
+
+### `fontWeight`
+
+| Type | Required | Platform |
+| ------------------------------------------------------------------------------------- | -------- | -------- |
+| enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') | No | Both |
+
+### `alignment`
+
+`fill` will make the subtitle stretch and consume all available space in the TopBar while `center` will center the subtitle in the middle of the TopBar.
+
+| Type | Required | Platform |
+| ---------------------- | -------- | -------- |
+| enum('center', 'fill') | No | Both |
+
+### `testID`
+
+Used to interact with the TopBar in e2e tests.
+
+| Type | Required | Platform |
+| ------ | -------- | -------- |
+| string | No | Both |
diff --git a/website/versioned_docs/version-7.11.4/api/options-title.mdx b/website/versioned_docs/version-7.11.4/api/options-title.mdx
new file mode 100644
index 00000000000..4f1187d1071
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/api/options-title.mdx
@@ -0,0 +1,95 @@
+---
+id: options-title
+title: Title Options
+sidebar_label: Title
+---
+
+Controls the top bar title.
+
+```js
+const options = {
+ topBar: {
+ title: {},
+ },
+};
+```
+
+### `text`
+
+Set the title for the TopBar.
+
+| Type | Required | Platform |
+| ------ | -------- | -------- |
+| string | No | Both |
+
+### `fontSize`
+
+Set the title font size. On Android this value is in `sp`.
+
+| Type | Required | Platform |
+| ------ | -------- | -------- |
+| number | No | Both |
+
+### `color`
+
+Set the title color.
+
+| Type | Required | Platform |
+| ----- | -------- | -------- |
+| Color | No | Both |
+
+### `fontFamily`
+
+Set the title font family.
+
+| Type | Required | Platform |
+| ---------- | -------- | -------- |
+| FontFamily | No | Both |
+
+### `fontStyle`
+
+| Type | Required | Platform |
+| ------------------------ | -------- | -------- |
+| enum('normal', 'italic') | No | Both |
+
+### `fontWeight`
+
+| Type | Required | Platform |
+| ------------------------------------------------------------------------------------- | -------- | -------- |
+| enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') | No | Both |
+
+### `alignment`
+
+`fill` will make the title stretch and consume all available space in the TopBar while `center` will center the title in the middle of the TopBar.
+
+:::info defaults
+`center` is the default option on iOS while `fill` is the default for Android.
+:::
+
+| Type | Required | Platform |
+| --------------------- | -------- | -------- |
+| enum('center','fill') | No | Both |
+
+### `component`
+
+Set a react [component](layout-component.mdx) as the title. If this option is specified then text is ignored.
+
+| Type | Required | Platform |
+| --------------------------------- | -------- | -------- |
+| [Component](layout-component.mdx) | No | Both |
+
+### `topMargin`
+
+Change to TopBar's top margin.
+
+| Type | Required | Platform |
+| ------ | -------- | -------- |
+| number | No | Android |
+
+### `visible`
+
+Determines whether the TopBar is visible or not.
+
+| Type | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No | Both |
diff --git a/website/versioned_docs/version-7.11.4/api/topBar-searchBar.mdx b/website/versioned_docs/version-7.11.4/api/topBar-searchBar.mdx
new file mode 100644
index 00000000000..ead162857cc
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/api/topBar-searchBar.mdx
@@ -0,0 +1,54 @@
+---
+id: topBar-searchBar
+title: SearchBar
+sidebar_label: Layout
+---
+
+## `visible`
+
+| Type | Required | Platform | Description |
+| ------ | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| boolean | No | iOS | Determines if SearchBar is visible or not |
+
+## `focus`
+
+| Type | Required | Platform | Description |
+| ------ | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| boolean | No | iOS | Auto focuses search bar |
+
+
+## `hideOnScroll`
+
+| Type | Required | Platform | Description |
+| ----------------------- | -------- | -------- | ------------------------------ |
+| boolean | No | iOS | Hides the UISearchBar when scrolling. |
+
+## `hideTopBarOnFocus`
+
+| Type | Required | Platform | Description |
+| ------------------ | -------- | -------- | ----------------------------- |
+| boolean | No | iOS | Indicates whether the navigation bar should be hidden when searching. True by default. |
+
+## `obscuresBackgroundDuringPresentation`
+
+| Type | Required | Platform | Description |
+| ----------------------- | -------- | -------- | ------------------------------ |
+| boolean | No | iOS | A Boolean indicating whether the underlying content is obscured during a search. |
+
+## `backgroundColor`
+
+| Type | Required | Platform | Description |
+| ----------------------- | -------- | -------- | ------------------------------ |
+| Color | No | iOS | The background color of the UISearchBar's TextField. |
+
+## `tintColor`
+
+| Type | Required | Platform | Description |
+| ----------------------- | -------- | -------- | ------------------------------ |
+| Color | No | iOS | The tint color of the UISearchBar. Affects text selection color, as well as "Cancel" button color. |
+
+## `searchBarPlaceholder`
+
+| Type | Required | Platform | Description |
+| ----------------------- | -------- | -------- | ------------------------------ |
+| string | No | iOS | The placeholder value in the UISearchBar. |
diff --git a/website/versioned_docs/version-7.11.4/docs/community-libraries.mdx b/website/versioned_docs/version-7.11.4/docs/community-libraries.mdx
new file mode 100644
index 00000000000..2d9c4787da5
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/community-libraries.mdx
@@ -0,0 +1,19 @@
+---
+id: community-libraries
+title: Community libraries
+sidebar_label: Community libraries
+---
+
+React Native Navigation has an active community with a bunch of support libraries.
+
+[React Native Navigation Hooks](https://github.com/underscopeio/react-native-navigation-hooks) :
+A set of React hooks for React Native Navigation.
+
+[React Native Navigation Drawer Extension](https://github.com/lukebrandonfarrell/react-native-navigation-drawer-extension) :
+Drawer API built on top of React Native Navigation for iOS and Android.
+
+[React Native Navigation Search Bar](https://github.com/lukebrandonfarrell/react-native-navigation-search-bar) :
+React Native Elements search bar with collapsible header built for React Native Navigation.
+
+[React Native Navigation Register Screens](https://github.com/karlmarxlopez/react-native-navigation-register-screens) :
+Utility function to register array of screens instead of calling `Navigation.registerComponent` multiple times.
\ No newline at end of file
diff --git a/website/versioned_docs/version-7.11.4/docs/docs-Installing.mdx b/website/versioned_docs/version-7.11.4/docs/docs-Installing.mdx
new file mode 100644
index 00000000000..70bcdc7116d
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/docs-Installing.mdx
@@ -0,0 +1,397 @@
+---
+id: installing
+title: Installation
+sidebar_label: Installation
+---
+
+## Requirements
+
+- node >= 8
+- react-native >= 0.51
+
+## npm or yarn
+
+npm:
+
+```sh
+npm install --save react-native-navigation
+```
+
+yarn:
+
+```sh
+yarn add react-native-navigation
+```
+
+## Installing with `npx rnn-link`
+
+If you're using RN 0.60 or higher, you can benefit from autolinking for some of the necessary installation steps. But unlike most other libraries, react-native-navigation requires you to make a few changes to native files.
+
+We've simplified the process through a set of scripts. So to make all the necessary changes automatically, in your project's root folder run:
+
+`npx rnn-link`
+
+Make sure to commit the changes introduced by the `rnn-link` script.
+
+> The automatic linking is optimized for new applications created via the `react-native init` command. If you are migrating from a version of react-native-navigation older than v5, it's recommended to check the steps manually after the script runs.
+
+If one of the steps failed or you can't run (or are not comfortable with) the automatic scripts, you'll need to complete the relevant steps in the manual installation steps below, for both platforms.
+
+### CocoaPods
+
+After the the automatic scripts completed successfully, run pod install:
+
+```sh
+pod install --project-directory=ios
+```
+
+### Update index.js file
+
+`index.js` is typically used as an entry point into the app. It's first parsed and executed by the JS engine, therefore we'll want to show our UI from there.
+
+The following diff demonstrates changes needed to be made to `index.js`, initialized by `react-native init`.
+
+```diff
++import { Navigation } from "react-native-navigation";
+-import {AppRegistry} from 'react-native';
+import App from "./App";
+-import {name as appName} from './app.json';
+
+-AppRegistry.registerComponent(appName, () => App);
++Navigation.registerComponent('com.myApp.WelcomeScreen', () => App);
+
++Navigation.events().registerAppLaunchedListener(() => {
++ Navigation.setRoot({
++ root: {
++ stack: {
++ children: [
++ {
++ component: {
++ name: 'com.myApp.WelcomeScreen'
++ }
++ }
++ ]
++ }
++ }
++ });
++});
+```
+
+### Finish
+
+If you followed the steps successfully up to this point, then rebuild your application and you are good to go:
+
+```sh
+react-native run-ios
+react-native run-android
+```
+
+:::tip
+This is a good moment to build your application in both platforms, validate that everything is working properly and commit your changes. If you're coming from a fresh `react-native init` project, then you should be seeing the Welcome screen as usual, but under the hood your application is using react-native-navigation!
+::::
+
+---
+
+## Manual Installation
+
+If installation with `npx rnn-link` did not work, follow the manual installation steps below.
+
+### iOS
+
+> Make sure your Xcode is updated. We recommend editing `.h` and `.m` files in Xcode as the IDE will usually point out common errors.
+
+#### Installation with CocoaPods
+
+Projects generated using newer versions of react-native use CocoaPods by default. In that case it's easier to install react-native-navigation using CocoaPods.
+
+1. Update your `Podfile`:
+ **If you're upgrading to v5 from a previous RNN version**, make sure to remove manual linking of RNN
+
+```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
+```
+
+2. `cd ios && pod install`
+
+#### Native Installation
+
+> If the React Native version in your project is above 0.60 and you are following the manual installation, skip to step 3.
+
+If autolinking is not available in your project (RN version < 0.60), you can always try and install the hardcore way:
+
+1. In Xcode, in Project Navigator (left pane), right-click on the `Libraries` > `Add files to [project name]`. Add `node_modules/react-native-navigation/lib/ios/ReactNativeNavigation.xcodeproj` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking)).
+
+2. In Xcode, in Project Navigator (left pane), click on your project (top), then click on your _target_ row (on the "project and targets list", which is on the left column of the right pane) and select the `Build Phases` tab (right pane). In the `Link Binary With Libraries` section add `libReactNativeNavigation.a` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-2)).
+
+a. If you're seeing an error message in Xcode such as:
+
+```
+'ReactNativeNavigation/ReactNativeNavigation.h' file not found.
+```
+
+You may also need to add a Header Search Path: ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-3)).
+
+```objectivec
+$(SRCROOT)/../node_modules/react-native-navigation/lib/ios
+```
+
+3. In Xcode, you will need to edit this file: `AppDelegate.m`. This function is the main entry point for your app:
+
+```objectivec
+ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { ... }
+```
+
+Its content should look like this:
+
+```objectivec
+#import "AppDelegate.h"
+
+#import
+#import
+#import
+
+@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> *)extraModulesForBridge:(RCTBridge *)bridge {
+ return [ReactNativeNavigation extraModulesForBridge:bridge];
+}
+
+@end
+```
+
+ a. If, in Xcode, you see the following error message in `AppDelegate.m` next to `#import "RCTBundleURLProvider.h"`:
+ ```
+ ! 'RCTBundleURLProvider.h' file not found
+ ```
+ This is because the `React` scheme is missing from your project. You can verify this by opening the `Product` menu and the `Scheme` submenu.
+ To make the `React` scheme available to your project, run `npm install -g react-native-git-upgrade` followed by `react-native-git-upgrade`. Once this is done, you can click back to the menu in Xcode: `Product -> Scheme -> Manage Schemes`, then click '+' to add a new scheme. From the `Target` menu, select "React", and click the checkbox to make the scheme `shared`. This should make the error disappear.
+
+### Android
+
+> Make sure your Android Studio installation is up to date. We recommend editing `gradle` and `java` files in Android Studio as the IDE will suggest fixes and point out errors, this way you avoid most common pitfalls.
+
+#### 1 Update `android/build.gradle`:
+
+```diff
+buildscript {
+ ext {
+- minSdkVersion = 16
++ minSdkVersion = 21 // 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' }
+ }
+}
+```
+
+#### 2 Update `MainActivity.java`
+
+`MainActivity.java` should extend `com.reactnativenavigation.NavigationActivity` instead of `ReactActivity`.
+
+This file is located in `android/app/src/main/java/com//MainActivity.java`.
+
+```diff
+-import com.facebook.react.ReactActivity;
++import com.reactnativenavigation.NavigationActivity;
+
+-public class MainActivity extends ReactActivity {
++public class MainActivity extends NavigationActivity {
+- @Override
+- protected String getMainComponentName() {
+- return "yourproject";
+- }
+}
+```
+
+If you have any **react-native** related methods, you can safely delete them.
+
+#### 3 Update `MainApplication.java`
+
+This file is located in `android/app/src/main/java/com//MainApplication.java`.
+
+```diff
+...
+import android.app.Application;
+
+import com.facebook.react.ReactApplication;
+import com.facebook.react.ReactNativeHost;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.shell.MainReactPackage;
+import com.facebook.soloader.SoLoader;
+
++import com.reactnativenavigation.NavigationApplication;
++import com.reactnativenavigation.react.NavigationReactNativeHost;
+
+-public class MainApplication extends Application implements ReactApplication {
++public class MainApplication extends NavigationApplication {
+
+private final ReactNativeHost mReactNativeHost =
+- new ReactNativeHost(this) {
++ new NavigationReactNativeHost(this) {
+ @Override
+ public boolean getUseDeveloperSupport() {
+ return BuildConfig.DEBUG;
+ }
+
+ @Override
+ protected List getPackages() {
+ @SuppressWarnings("UnnecessaryLocalVariable")
+ List packages = new PackageList(this).getPackages();
+ // Packages that cannot be autolinked yet can be added manually here, for example:
+ // packages.add(new MyReactNativePackage());
+ return packages;
+ }
+
+ @Override
+ protected String getJSMainModuleName() {
+ return "index";
+ }
+ };
+
+ @Override
+ public ReactNativeHost getReactNativeHost() {
+ return mReactNativeHost;
+ }
+
+ @Override
+ public void onCreate() {
+ super.onCreate();
+- SoLoader.init(this, /* native exopackage */ false);
+ initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
+ }
+}
+```
+
+### App root
+
+Now that you're done, don't forget to update the `index.js` file, as [shown above](#update-indexjs-file).
+
+## Troubleshooting
+
+### Build app with gradle command
+
+**prefered solution** - The RNN flavor you would like to build is specified in `app/build.gradle`. Therefore in order to compile only that flavor, instead of building your entire project using `./gradlew assembleDebug`, you should instruct gradle to build the app module: `./gradlew app:assembleDebug`. The easiest way is to add a package.json command to build and install your debug Android APK .
+
+```
+"scripts": {
+ ...
+ "android": "cd ./android && ./gradlew app:assembleDebug && ./gradlew installDebug"
+}
+```
+
+Now run `npm run android` to build your application
+
+### Force the same support library version across all dependencies
+
+Some of your dependencies might require a different version of one of Google's support library packages. This results in compilation errors similar to this:
+
+```
+FAILURE: Build failed with an exception.
+
+* What went wrong:
+Execution failed for task ':app:preDebugBuild'.
+> Android dependency 'com.android.support:design' has different version for the compile (25.4.0) and runtime (26.1.0) classpath. You should manually set the same version via DependencyResolution
+```
+
+To resolve these conflicts, add the following to your `app/build.gradle`:
+
+```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}"
+}
+
+```
diff --git a/website/versioned_docs/version-7.11.4/docs/docs-advanced-navigation.mdx b/website/versioned_docs/version-7.11.4/docs/docs-advanced-navigation.mdx
new file mode 100644
index 00000000000..877e35ba251
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/docs-advanced-navigation.mdx
@@ -0,0 +1,295 @@
+---
+id: advanced-navigation
+title: Advanced navigation
+sidebar_label: Advanced navigation
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+## Tab navigation
+
+As mobile applications become bigger and more complex, they usually end up containing multiple primary high-level destinations, which are logically independent from one another. The `BottomTabs` layout is often used when an app contains three to five top-level destinations which should be accessible from anywhere in the app.
+
+Lets return to the example code from the previous section ([Basic navigation](basic-navigation)) and see how we can convert it to a tab-based application. We'll use the BottomTabs layout to display tabs at the bottom of the screen. Similarly to `Stack` layout, The BottomTabs layout also contains a `children` property where each child will be displayed in a tab.
+
+Lets change our code to the following and reload the app.
+
+```jsx
+import React from 'react';
+import { View, Text, Button, StyleSheet } from 'react-native';
+import { Navigation } from 'react-native-navigation';
+
+const HomeScreen = (props) => {
+ return (
+
+ Hello React Native Navigation 👋
+
+
+ );
+};
+HomeScreen.options = {
+ topBar: {
+ title: {
+ text: 'Home'
+ }
+ },
+ bottomTab: {
+ text: 'Home'
+ }
+};
+
+const SettingsScreen = () => {
+ return (
+
+ Settings Screen
+
+ );
+}
+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'
+ }
+});
+```
+
+Now our app has two tabs at the bottom of the screen and our users can easily navigate between them.
+
+
+
+## Replacing the root
+
+Up until now, we've discussed how to navigate within the same layout structure. We'll now learn how to replace the entire layout structure to display a new Root. A real life example for this use case would be, for instance, if you need to switch from a login screen to the app's main root. Replacing the root fits this use case since we'd like to discard the previous root (login root) entirely when switching to the main root.
+
+To demonstrate this, we'll make the following changes to our code:
+
+1. Add a login screen with a login button.
+2. When the button is clicked, we will switch to the main root.
+3. Replace our current root with the login screen. We'll also extract both roots to variables to improve code readability.
+
+```jsx
+const LoginScreen = () => {
+ return (
+
+
+ );
+};
+
+const HomeScreen = (props) => {
+ return (
+
+ Hello React Native Navigation 👋
+
+
+ );
+};
+HomeScreen.options = {
+ topBar: {
+ title: {
+ text: 'Home'
+ }
+ },
+ bottomTab: {
+ text: 'Home'
+ }
+};
+
+const SettingsScreen = () => {
+ return (
+
+ Settings Screen
+
+ );
+}
+SettingsScreen.options = {
+ topBar: {
+ title: {
+ text: 'Settings'
+ }
+ },
+ bottomTab: {
+ text: 'Settings'
+ }
+}
+
+Navigation.registerComponent('Login', () => LoginScreen);
+Navigation.registerComponent('Home', () => HomeScreen);
+Navigation.registerComponent('Settings', () => SettingsScreen);
+
+const mainRoot = {
+ root: {
+ bottomTabs: {
+ children: [
+ {
+ stack: {
+ children: [
+ {
+ component: {
+ name: 'Home'
+ }
+ },
+ ]
+ }
+ },
+ {
+ stack: {
+ children: [
+ {
+ component: {
+ name: 'Settings'
+ }
+ }
+ ]
+ }
+ }
+ ]
+ }
+ }
+};
+const loginRoot = {
+ root: {
+ component: {
+ name: 'Login'
+ }
+ }
+};
+
+
+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(loginRoot);
+});
+
+const styles = StyleSheet.create({
+ root: {
+ flex: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ backgroundColor: 'whitesmoke'
+ }
+});
+```
+
+## Conditional roots
+
+Now that our initial root is the Login root, we're facing a new problem - how do we show the Login root only to users that are not logged in? Since our initial root is determined in the `registerAppLaunchedListener` callback, we'll check if a user is logged in there and set the appropriate root accordingly.
+
+```jsx
+Navigation.events().registerAppLaunchedListener(async () => {
+ Navigation.setRoot(isLoggedIn() ? mainRoot : loginRoot);
+});
+
+function isLoggedIn() {
+ // TODO: your business logic goes here
+}
+```
diff --git a/website/versioned_docs/version-7.11.4/docs/docs-app-launch.mdx b/website/versioned_docs/version-7.11.4/docs/docs-app-launch.mdx
new file mode 100644
index 00000000000..e3a565d4e56
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/docs-app-launch.mdx
@@ -0,0 +1,37 @@
+---
+id: app-launch
+title: Launching the app
+sidebar_label: Launching the app
+---
+
+When your app is launched for the first time, the bundle is parsed and executed. At this point you need to display your UI. To do so, listen to the `appLaunched` event and call `Navigation.setRoot` when that event is received.
+
+```js
+Navigation.events().registerAppLaunchedListener(() => {
+ // Each time the event is received you should call Navigation.setRoot
+});
+```
+
+:::important
+Register the app launched listener as soon as possible - this should be one of the first lines in your `index.js` file.
+:::
+
+If you're observing a "white screen" or a hanging splash screen after relaunching your app, it probably means `Navigation.setRoot` isn't called as soon as the app is launched. Perhaps the listener was registered too late.
+
+## Difference between the platforms
+When your app is launched, RN makes sure JS context (which is what enables you to execute JavaScript code) is running. There are quite a few differences between iOS and Android in this regard.
+
+### iOS
+Whenever an app is put into the background, the app process can potentially be destroyed by the system. If this destruction takes place, the JS context will be destroyed alongside with the app process.
+
+### Android
+An Android application is typically bound to two contexts:
+
+1. Application context - bound to the app process
+1. Activity context - bound to app UI
+
+React's JS Context is executed on and bound to the Application context. This means that even when the Activity context (and thus the UI) is destroyed, React's JS Context remains active until the Application (and your process) are destroyed by the system.
+
+:::caution
+Because of this, when your app returns to foreground, JS Context might still exist on Android, even when the Activity and UI contexts have been destroyed - meaning you might not need to initialise all of your app logic; instead, you'll only need to call `Navigation.setRoot` to repopulate the UI context. This circumstance can easily be determined by setting a flag on your app's first `appLaunched` event, and checking the value of that flag on subsequent `appLaunched` events -- if the flag is true in your `appLaunched` callback, you need to call `Navigation.setRoot` to repopulate the UI.
+:::
diff --git a/website/versioned_docs/version-7.11.4/docs/docs-basic-navigation.mdx b/website/versioned_docs/version-7.11.4/docs/docs-basic-navigation.mdx
new file mode 100644
index 00000000000..a641f2edfc1
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/docs-basic-navigation.mdx
@@ -0,0 +1,333 @@
+---
+id: basic-navigation
+title: Basic navigation
+sidebar_label: Basic navigation
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+Generally, any mobile app consists of various destinations which display some content to the user. And in vast majority of cases using an app means navigating between these destinations. React-native-navigation provides ways for you to layout your content on user screen in a logical and performant manner.
+
+React Native Navigation's stack layout lets you push screens, and also navigate back to previous screens. Screens pushed into the stack hide the previous screen in the stack, making the user focus on a single screen at a time. Let's look at a stack layout that provides basic navigation for an app.
+
+## Creating a 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';
+
+const HomeScreen = (props) => {
+ return (
+
+ Home Screen
+
+ );
+};
+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'
+ }
+});
+```
+
+Running this code will render a screen with an empty TopBar and your HomeScreen component (shown below). The TopBar is part of the stack layout, we'll work on configuring it later.
+
+
+
+## Specifying options
+
+You can specify options of each layout (Stack, component pushed into a stack, etc.) to configure various parameters like the TopBar title or color. Lets spice things up by changing the TopBar color and while we're at it, also move the title to the TopBar.
+
+Lets change the Home screen declaration to the following and reload the app to see the changes.
+```jsx
+const HomeScreen = (props) => {
+ return (
+
+ Hello React Native Navigation 👋
+
+ );
+};
+HomeScreen.options = {
+ topBar: {
+ title: {
+ text: 'Home',
+ color: 'white'
+ },
+ background: {
+ color: '#4d089a'
+ }
+ }
+}
+```
+
+Our app should now look like this:
+
+
+## Navigating in a stack
+
+In the previous section we created a stack and initialized it with a single child. We'll now learn how to add another child to the stack. From now on, we'll call the action of adding children to the stack 'push', and removing children - 'pop'.
+
+In order to push another screen to the stack, we will add a button to the home screen and call `Navigation.push`. The 'push' command accepts two parameters, the first is the id used to indicate into which stack to push the screen and the second is the screen we're pushing. After pushing a screen, a back button is added automatically to the TopBar so the users can navigate easily back to the previous screen.
+
+You can read more about the stack layout [here](docs-stack.mdx) or dive right into the API [here](../api/layout-stack).
+
+:::info componentId
+Each React component registered with `Navigation.registerComponent` is assigned a unique `componentId` by Navigation. This unique id is used with Navigation commands (like the push command) to indicate into which stack we'd like to push. In this case, by using the componentId of the Home screen, we are telling Navigation to push into the stack containing the Home screen.
+:::
+
+```js
+Navigation.push(props.componentId, {
+ component: {
+ name: 'Settings', // Push the screen registered with the 'Settings' key
+ options: { // Optional options object to configure the screen
+ topBar: {
+ title: {
+ text: 'Settings' // Set the TopBar title of the new Screen
+ }
+ }
+ }
+ }
+});
+```
+
+Lets change our code to the following snippet below and reload the app. Now our Home should contain a button which when pressed, pushes a new screen into the stack. We've successfully navigated to a new 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 (
+
+ Hello React Native Navigation 👋
+
+ );
+};
+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 (
+
+ Settings Screen
+
+ );
+}
+
+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'
+ }
+});
+```
+
+
+
+## App theme
+
+Our app is growing and already contains two screens. This introduces a new problem - while the home screen has a nice purple TopBar, our settings screen seems pretty dull as it still uses the default system look and feel.
+
+Currently, our style declaration applies only to the Home screen, so lets apply it to all of our screens by using `Navigation.setDefaultOptions`.
+
+```js
+Navigation.setDefaultOptions({
+ statusBar: {
+ backgroundColor: '#4d089a'
+ },
+ topBar: {
+ title: {
+ color: 'white'
+ },
+ backButton: {
+ color: 'white'
+ },
+ background: {
+ color: '#4d089a'
+ }
+ }
+});
+```
+
+We need to add this snippet before registering the `registerAppLaunchedListener`. This way we ensure our theme is applied when our root is set. Our code should now look like this:
+
+```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 (
+
+ Hello React Native Navigation 👋
+
+ );
+};
+HomeScreen.options = {
+ topBar: {
+ title: {
+ text: 'Home',
+ }
+ }
+};
+
+// Settings screen declaration - this is the screen we'll be pushing into the stack
+const SettingsScreen = () => {
+ return (
+
+ Settings Screen
+
+ );
+}
+
+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'
+ }
+});
+```
+
+Lets run our code again - now our design is consistent across both screens.
+
+
+
+## Summary
+
+We've learned the basics of navigation with React Native Navigation by implementing a stack and pushing screens into it.
+We've also learned a few methods of applying styles to our screens and layouts with the Options mechanism.
+
+* Navigation.setRoot() sets the root layout of our app. The initial root has to be set from an `AppLaunchedEvent` callback.
+* Options can be applied directly to components.
+* Screens can be added to a stack with the `Navigation.push()` command.
+* Components registered with `Navigation.registerComponent()` are injected with a `componentId` which is used when navigating.
+* Themes are applied via the `Navigation.setDefaultOptions()` command.
+
+In the next section we'll explore a more advance navigation patterns using BottomTabs layout and also see how, and why, multiple roots are set.
diff --git a/website/versioned_docs/version-7.11.4/docs/docs-before-you-start.mdx b/website/versioned_docs/version-7.11.4/docs/docs-before-you-start.mdx
new file mode 100644
index 00000000000..e5483f3ba8e
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/docs-before-you-start.mdx
@@ -0,0 +1,12 @@
+---
+id: before-you-start
+title: Before you start
+sidebar_label: Before you start
+---
+
+React Native Navigation is a module, dependent on and intended to be used alongside [React Native](https://github.com/facebook/react-native), so some experience with it and knowledge of core concepts is required. If you feel the need, you can start with their [getting started](https://reactnative.dev/docs/getting-started) tutorial, and then come back here when you're ready.
+
+We also assume you are working on a Mac with XCode and Android Studio installed and setup. You can also make it work in a Linux distribution, of course, but in that case bear in mind that some sections of the docs that deal with iOS might not be relevant to you.
+
+If you want to dig right into it, start with [installing](docs-Installing.mdx) the library. If you're just looking around, we suggest checking out [basic navigation](docs-basic-navigation.mdx) first.
+
diff --git a/website/versioned_docs/version-7.11.4/docs/docs-bottomTabs.mdx b/website/versioned_docs/version-7.11.4/docs/docs-bottomTabs.mdx
new file mode 100644
index 00000000000..d7ae4bb0714
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/docs-bottomTabs.mdx
@@ -0,0 +1,142 @@
+---
+id: bottomTabs
+title: Bottom tabs
+sidebar_label: Bottom tabs
+---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+Bottom tabs refers to a row of links, displayed at the bottom of the screen, and is referred to as "Tab Bar" in iOS and as "Bottom Navigation Bar" on Android. Usually these are intended to be used to switch between top-level content views with a single tap.
+
+## Creating bottom tabs
+
+BottomTabs provide flat navigation and access to up to five equally important top-level root destinations. While any type of layout can be displayed in a tab, typically, [Stacks](stack) are used, since they allow for vertical navigation within a tab.
+
+### Example
+Lets see how to create a simple BottomTabs layout. There are a few things to notice here:
+1. Each child represents a tab on the screen.
+2. The root layout for each tab is a stack to allow for vertical navigation within the tab.
+3. Each stack declares `bottomTab` options which are used to configure the tab's text, icon, color etc.
+
+```js
+bottomTabs: {
+ id: 'BOTTOM_TABS_LAYOUT',
+ children: [
+ {
+ stack: {
+ id: 'HOME_TAB',
+ children: [
+ {
+ component: {
+ id: 'HOME_SCREEN',
+ name: 'HomeScreen'
+ }
+ }
+ ],
+ options: {
+ bottomTab: {
+ icon: require('./home.png')
+ }
+ }
+ }
+ },
+ {
+ stack: {
+ id: 'PROFILE_TAB',
+ children: [
+ {
+ component: {
+ id: 'PROFILE_SCREEN',
+ name: 'ProfileScreen'
+ }
+ }
+ ],
+ options: {
+ bottomTab: {
+ icon: require('./profile.png')
+ }
+ }
+ }
+ }
+ ]
+}
+```
+
+Once we run this code, our BottomTabs should look like this:
+
+
+## Selecting Tabs Programmatically
+Tabs can be selected programmatically by updating the `currentTabIndex` or `currentTabId` options.
+
+We'll use the BottomTabs layout showcased [above](bottomTabs#example) to demonstrate programmatic tab selection.
+
+### Selecting a tab by index
+The following mergeOptions command will select the second tab. We're passing the id of our BottomTabs layout, but we could also use the id of any of the child components, for example `PROFILE_TAB` or `PROFILE_SCREEN`.
+
+```js
+Navigation.mergeOptions('BOTTOM_TABS_LAYOUT', {
+ bottomTabs: {
+ currentTabIndex: 1
+ }
+});
+```
+
+### Selecting a tab by id
+Tabs can also be selected by id (`componentId`). This is particularly useful in cases where you don't know in which tab a screen is contained.
+For example, if invoked from one of the child components, `HOME_SCREEN` or `SETTINGS_SCREEN`, the following merge command will select the tab containing the child.
+
+```js
+Navigation.mergeOptions(this.props.componentId, {
+ bottomTabs: {
+ currentTabId: this.props.componentId
+ }
+});
+```
+
+## Changing BottomTabs visibility
+
+The `visible` property is used to control the BottomTab visibility. Visibility can be toggled dynamically using the `mergeOptions` command.
+```js
+Navigation.mergeOptions(componentId, {
+ bottomTabs: {
+ visible: false
+ },
+});
+```
+
+Visibility can also be changed when pushing screens.
+```js
+Navigation.push(componentId, {
+ component: {
+ name: 'pushedScreen',
+ options: {
+ bottomTabs: {
+ visible: false
+ }
+ }
+ }
+});
+```
+
+## Updating tab options dynamically
+
+To update a tab option, like an icon, text or color, simply call `mergeOptions` with new options using the id of a component or layout contained in the tab you wish to update.
+
+For instance, in the example below we update the color of a specific tab:
+```js
+Navigation.mergeOptions(componentId, {
+ bottomTab: {
+ iconColor: 'red',
+ textColor: 'red'
+ },
+});
+```
+
+## Controlling tab loading
+
+By default, all tabs are mounted at the same time. This can have a negative impact on performance since screens which are not visible to the user are mounted.
+
+The order in which tabs are mounted can be configured with the `tabsAttachMode` option:
+
+* `together` - all tabs are mounted at the same time, this is the default behavior.
+* `afterInitialTab` - after initial tab is mounted, other tabs are mounted.
+* `onSwitchToTab` - initial tab is mounted, other tabs are mounted when the user navigates to them for the first time.
diff --git a/website/versioned_docs/version-7.11.4/docs/docs-externalComponent.mdx b/website/versioned_docs/version-7.11.4/docs/docs-externalComponent.mdx
new file mode 100644
index 00000000000..652355da21d
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/docs-externalComponent.mdx
@@ -0,0 +1,100 @@
+---
+id: externalComponent
+title: External Component
+sidebar_label: External Component
+---
+
+The ExternalComponent layout allows you to display any native view as a screen. To use the External Component we'll need to register it with a string name. This name is then used when declaring layouts in JS.
+
+## Android
+### Implementing the native component
+When it comes to implementing an external component on Android, you have two choices. We recommend you use a base class extending `View`. If you're required to use Fragments, you'll find an basic example below.
+
+#### ViewGroup
+```java
+public class ViewGroupComponent implements ExternalComponent {
+ private final FrameLayout content;
+
+ ViewGroupComponent(FragmentActivity activity, JSONObject props) {
+ content = new FrameLayout(activity);
+ }
+
+ @Override
+ public View asView() {
+ return content;
+ }
+}
+```
+
+#### Fragment
+
+Using a Fragment as an external component is done by attaching the Fragment to a FrameLayout, and returning the FrameLayout from the `asView()` method of the ExternalComponent.
+
+```java
+public class FragmentComponent implements ExternalComponent {
+ private final FrameLayout content;
+
+ FragmentComponent(FragmentActivity activity, JSONObject props) {
+ // Create the FrameLayout to which we'll attach our Fragment to
+ content = new FrameLayout(activity);
+ content.setId(R.id.fragment_screen_content);
+ // Attach the Fragment to the FrameLayout
+ activity.getSupportFragmentManager()
+ .beginTransaction()
+ .add(R.id.fragment_screen_content, createFragment(props))
+ .commitAllowingStateLoss();
+ }
+
+ private FragmentScreen createFragment(JSONObject props) {
+ FragmentScreen fragment = new FragmentScreen();
+ // Pass the props sent from Js in a bundle
+ Bundle args = new Bundle();
+ args.putString("text", props.optString("text", ""));
+ fragment.setArguments(args);
+ return fragment;
+ }
+
+ @Override
+ public View asView() {
+ return content;
+ }
+}
+```
+
+### Registering the component
+```java
+public class MainApplication extends NavigationApplication {
+ @Override
+ public void onCreate() {
+ super.onCreate();
+ registerExternalComponent("MyExternalComponent", new FragmentCreator());
+ }
+}
+```
+
+## iOS
+### ViewController registration
+
+```objectivec
+[ReactNativeNavigation registerExternalComponent:@"MyExternalComponent" callback:^UIViewController *(NSDictionary *props, RCTBridge *bridge) {
+ return [[ExternalViewController alloc] initWithProps:props];
+}];
+
+```
+## Using the component from JS
+Once you've registered the external component in native, you can use it in your layout declarations.
+For example, to show an external component modally:
+```js
+Navigation.showModal({
+ externalComponent: {
+ name: 'MyExternalComponent',
+ passProps: {
+ text: "Text from JS"
+ }
+ }
+});
+```
+
+:::caution
+props passed to external components are sent over the bridge and therefore must be serializable.
+:::
\ No newline at end of file
diff --git a/website/versioned_docs/version-7.11.4/docs/docs-functional-components.mdx b/website/versioned_docs/version-7.11.4/docs/docs-functional-components.mdx
new file mode 100644
index 00000000000..4f063c8e7bb
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/docs-functional-components.mdx
@@ -0,0 +1,88 @@
+---
+id: functionalComponents
+title: Using functional components as screens
+sidebar_label: Using functional components
+---
+
+Both class components and functional components can be used as screens. There is no performance difference between the two. Deciding which type component to use boils down to user preference.
+
+## Declaring static options
+Static options are a great way to declare options close to where they are used. Declaring static options is done by first declaring the functional component, and then declaring the options on the function component.
+```jsx
+const MyScreen = (props) => {
+ return (
+
+ Screen Component
+
+ );
+};
+
+MyScreen.options = {
+ topBar: {
+ background: {
+ color: 'red'
+ }
+ }
+}
+```
+
+## Listening to navigation events
+Navigation events let you react to various events related to a specific component or the app itself. Read more about them [here](/react-native-navigation/api/events)
+
+```jsx
+import { useEffect } from 'react';
+import Navigation from 'react-native-navigation';
+
+function MyScreen(props) {
+ useEffect(() => {
+ const listener = {
+ componentDidAppear: () => {
+ console.log('RNN', `componentDidAppear`);
+ },
+ componentDidDisappear: () => {
+ console.log('RNN', `componentDidDisappear`);
+ }
+ };
+ // Register the listener to all events related to our component
+ const unsubscribe = Navigation.events().registerComponentListener(listener, props.componentId);
+ return () => {
+ // Make sure to unregister the listener during cleanup
+ unsubscribe.remove();
+ };
+ }, []);
+
+ return (
+
+ Screen Component
+
+ );
+}
+```
+
+In the example above, our listener is registered with the `componentId` passed in the second argument, and will receive only its related events.
+
+:::tip
+[underscopeio/react-native-navigation-hooks](https://github.com/underscopeio/react-native-navigation-hooks) is a wonderful library which greatly simplifies usage with hooks by introducing dedicated hooks for each event. The following example, which is taken from their docs, shows how to listen to all appear events and a particular screen's appear events:
+
+```jsx
+import { useNavigationComponentDidAppear } from 'react-native-navigation-hooks'
+
+const ScreenComponent = ({ componentId }) => {
+ // Global listener
+ useNavigationComponentDidAppear(e => {
+ console.log(`${e.componentName} (${e.componentId}) appeared`)
+ })
+
+ // Listen events only for this screen (componentId)
+ useNavigationComponentDidAppear(e => {
+ console.log(`${e.componentName} appeared`)
+ }, componentId)
+
+ return (
+
+ Screen Component
+
+ )
+}
+```
+:::
diff --git a/website/versioned_docs/version-7.11.4/docs/docs-modal.mdx b/website/versioned_docs/version-7.11.4/docs/docs-modal.mdx
new file mode 100644
index 00000000000..08903f0bdf5
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/docs-modal.mdx
@@ -0,0 +1,143 @@
+---
+id: modal
+title: Modal
+sidebar_label: Modal
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+In human-centered design, when we speak about a modal (or modality), we often refer to a set of techniques, aimed at bringing user attention to a specific event / screen / action / etc. Those often require user input. A pop-up on a website, a file deletion confirmation dialogue on your computer, or an alert asking you to enable location service on your phone - these can all be considered modals.
+
+A modal is a term used in native iOS world ([full description here](https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/)), while on Android, [dialogs](https://developer.android.com/guide/topics/ui/dialogs) are often used to create similar or identical behavior, alongside other techniques.
+
+## Presenting modals
+
+Modal can be displayed by invoking the `Navigation.showModal()` command, as shown in the example below:
+
+```js
+Navigation.showModal({
+ stack: {
+ children: [
+ {
+ component: {
+ name: 'MODAL_SCREEN',
+ options: {
+ topBar: {
+ title: {
+ text: 'Modal',
+ },
+ },
+ },
+ },
+ },
+ ],
+ },
+});
+```
+
+Here's how the Modal looks on both platforms.
+
+
+
+
+
+
+
+
+
+
+## Adding a dismiss button
+
+Modals should always have a dismiss button, on left-to-right devices it's typically placed as a left button in the TopBar.
+
+After we've added our dismiss button, we need to dismiss the modal when the button is pressed.
+
+:::note
+For the LeftButton to be visible, the screen must be displayed in a Stack.
+:::
+
+```js
+class ModalScreen extends React.Component {
+ // Set a dismiss button in static options
+ static options() {
+ return {
+ topBar: {
+ leftButtons: {
+ id: 'dismiss',
+ icon: require('./dismiss.png'),
+ },
+ },
+ };
+ }
+
+ constructor(props) {
+ super(props);
+ // Register to events
+ Navigation.events().bindComponent(this);
+ }
+
+ // Handle the button press event and dismiss the modal if needed
+ navigationButtonPressed({ buttonId }) {
+ if (buttonId === 'dismiss') {
+ Navigation.dismissModal(this.props.componentId);
+ }
+ }
+}
+```
+
+## Transparent modals
+
+Showing transparent modals is a nice technique to increase immersiveness while keeping the user in the same context.
+When a modal is displayed the content behind it (either root or modal) is removed from hierarchy. While this behavior improves performance, it's undesired when
+showing transparent modals as we need to see the content behind it.
+
+To configure this behaviour, we'll need to change the `modalPresentationStyle` option to `overCurrentContext` and change the layout background color to `'transparent'`.
+
+```js
+{
+ modalPresentationStyle: 'overCurrentContext',
+ layout: {
+ backgroundColor: 'transparent'
+ }
+}
+```
+
+## Preventing a Modal from being dismissed
+
+Preventing a modal from being dismissed is done differently for each platform. While preventing the user from dismissing the modal is possible,
+the modal could still be dismissed programmatically by calling `Navigation.dismissModal()`
+
+If the modal has a dismiss button, of course you'll need to handle it your self and avoid calling `Navigation.dismissModal()`
+when the button is pressed.
+
+### Android
+
+On Android, modals can be dismissed with the hardware back button. You can handle the back press yourself by
+disabling the hardware back button `dismissModalOnPress` option:
+
+```js
+{
+ hardwareBackButton: {
+ dismissModalOnPress: false;
+ }
+}
+```
+
+As a result, pressing the hardware back button will not dismiss the modal and will dispatch [`navigationButtonPress`](https://wix.github.io/react-native-navigation/api/events#navigationbuttonpressed-event) event with the default hardware back button id `RNN.hardwareBackButton`.
+
+### iOS
+
+While iOS devices don't have a hardware back button, PageSheet modals can be dismissed by swipe gesture
+from the top of the screen. To disable it, set [swipeToDismiss](#) option to false.
+
+## Presentation Style
+
+The [presentation style](/react-native-navigation/api/options-root#modalpresentationstyle) determines the look and feel of a screen displayed as modal.
diff --git a/website/versioned_docs/version-7.11.4/docs/docs-overlay.mdx b/website/versioned_docs/version-7.11.4/docs/docs-overlay.mdx
new file mode 100644
index 00000000000..ade2f36597d
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/docs-overlay.mdx
@@ -0,0 +1,157 @@
+---
+id: overlay
+title: Overlay
+sidebar_label: Overlay
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+Overlays are used to layout content on top of all other layout hierarchies, while fitting the screen bounds.
+The contents displayed in an Overlay can either be non-obtrusive, like Toasts and Snackbars, or an Alert that blocks all interactions with any content behind it. The view contained within it should be aligned either with absolute position, flex, or with margins, all according to your needs.
+
+## Handling touch events outside the view
+
+When showing views like Alert or Toast in an Overlay, you would want to configure if you want to allow users to interact with content behind the alert. This is done via the [interceptTouchOutside](#) option.
+
+## Overlay examples
+
+
+
+
+The example below demonstrates how to create a simple alert dialog using an Overlay. Touch events outside the alert will be blocked and won't pass through to the content behind the alert since we're specifying `interceptTouchOutside: true` in the static options of the Alert.
+
+
+
+```jsx
+const React = require('react');
+const { Text, Button, View } = require('react-native');
+const { Navigation } = require('react-native-navigation');
+
+function Alert({ componentId, title, message }) {
+ const dismiss = () => Navigation.dismissOverlay(componentId);
+
+ return (
+
+
+ {title}
+ {message}
+
+
+
+ );
+}
+
+const styles = {
+ root: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: '#00000050',
+ },
+ alert: {
+ alignItems: 'center',
+ backgroundColor: 'whitesmoke',
+ width: 250,
+ elevation: 4,
+ padding: 16,
+ },
+ title: {
+ fontSize: 18,
+ },
+ message: {
+ marginVertical: 8,
+ },
+};
+
+Alert.options = (props) => {
+ return {
+ overlay: {
+ interceptTouchOutside: true,
+ },
+ };
+};
+
+module.exports = Alert;
+```
+
+
+
+
+The example below demonstrates how to show a Toast using an Overlay. A user can interact with the content behind the toast since we've declared `interceptTouchOutside: false` in the static options of the Alert.
+
+
+
+```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 (
+
+
+ This a very important message!
+ Navigation.dismissOverlay(componentId)}
+ >
+ OK
+
+
+
+ );
+};
+
+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;
+```
+
+
+
diff --git a/website/versioned_docs/version-7.11.4/docs/docs-passing-data-to-components.mdx b/website/versioned_docs/version-7.11.4/docs/docs-passing-data-to-components.mdx
new file mode 100644
index 00000000000..e32064c858c
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/docs-passing-data-to-components.mdx
@@ -0,0 +1,62 @@
+---
+id: passing-data-to-components
+title: Passing data to components
+sidebar_label: Passing data to components
+---
+
+## Initial props
+
+React components use [props](https://facebook.github.io/react-native/docs/props) to receive data when they are created. When displaying the [component](../api/layout-component) layout, you can pass initial props to components using the `passProps` property.
+
+In this example, we push the `UserProfile` screen and pass two initial props to it:
+
+```js
+Navigation.push(this.props.componentId, {
+ component: {
+ name: 'UserProfile',
+ id: 'PROFILE_SCREEN_ID'
+ passProps: {
+ name: 'John Doe',
+ status: 'online'
+ }
+ }
+});
+```
+
+:::tip Serialization
+passProps don't need to be serializable. You can use this mechanism to pass lambda functions or even React Components.
+:::
+
+## Handling passProps in static options
+
+Each component can have a static options property which is used to configure the style properties of elements on the screen when that component is displayed.
+
+Static options can either be a simple object, or a function which accepts `passProps` as an argument. Sometimes when declaring components, not all style properties are known. For example, a user profile screen will usually have the user's name as the TopBar title text. Therefore the title must be configured dynamically when pushing the screen.
+
+Following the code example [above](passing-data-to-components#initial-props), lets see how to use props passed in the push command to set the TopBar title.
+
+```jsx
+class UserProfileScreen extends React.Component {
+ static options(props) {
+ return {
+ topBar: {
+ title: {
+ text: props.name
+ }
+ }
+ };
+ }
+}
+```
+
+## Updating props
+
+To update a component's props, use the [Navigation.updateProps()](../api/component#updateprops) command. Updating props triggers the component lifecycle methods related to [updating](https://reactjs.org/docs/react-component.html#updating).
+
+Notice that we're using the component `id` in order to update props of this specific instance of the component.
+
+```js
+Navigation.updateProps('PROFILE_SCREEN_ID', {
+ status: 'offline'
+});
+```
diff --git a/website/versioned_docs/version-7.11.4/docs/docs-playground-app.mdx b/website/versioned_docs/version-7.11.4/docs/docs-playground-app.mdx
new file mode 100644
index 00000000000..c57cd1d2ab5
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/docs-playground-app.mdx
@@ -0,0 +1,18 @@
+---
+id: playground-app
+title: Playground app
+sidebar_label: Playground app
+---
+
+### Running The Project
+
+If you want to have a quick look around and test things out, you can run the playground app, bundled with this repo.
+
+1. Install dependencies via `npm install` (if you haven't already) and `npm run pod-install` (for iOS)
+2. Run the playground project on Android and iOS
+ - `npm run start` to get the packager running in the terminal, leave it open
+ - **iOS**: open `./playground/ios` in Xcode and run it
+ - **Android**: open `./playground/android` in Android Studio and run it
+3. You can run tests if / when you need to (list of scripts [available here](meta-contributing#scripts)). Before
+you start changing things, make sure everything works.
+ - To easily run all tests in parallel `npm run test-all`
diff --git a/website/versioned_docs/version-7.11.4/docs/docs-root.mdx b/website/versioned_docs/version-7.11.4/docs/docs-root.mdx
new file mode 100644
index 00000000000..2ff7e4dedcc
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/docs-root.mdx
@@ -0,0 +1,157 @@
+---
+id: root
+title: Root
+sidebar_label: Root
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+The root is where the application layout structure is defined. It is typically the first UI element a user interacts with. The root can be changed multiple times during the lifespan of the application. For example, if an app requires users to login, it's common to use a stack-based root and transition to either tabs- or SideMenu-based root if login is successful.
+
+## Setting root on app launch
+RNN exposes an appLaunched listener which is invoked whenever root needs to be set.
+
+On iOS, the app launched event is usually emitted once in the lifespan of the application - when the app is opened for the first time. On Android things become a little bit more complicated. Like on iOS, the event is emitted when an app is opened for the first time. Since the system can destroy the Activity when the app is in the background to free resources, the event is emitted when the app returns to foreground after the activity has been destroyed.
+
+```js
+Navigation.events().registerAppLaunchedListener(() => {
+ Navigation.setRoot({
+ root: {
+
+ }
+ });
+});
+```
+
+:::important
+registerAppLaunchedListener() must be called as soon as the bundle is executed. Otherwise the event, which is emitted from native to JS, won't be handled at the correct moment in time.
+::::
+
+## Conditional initial root
+A common use case is to set the initial root according to a condition of some sort. For example:
+
+> If a user is logged in, show the application main root; otherwise show a login screen.
+
+To do this, simply set the appropriate root according to your needs.
+```js
+Navigation.events().registerAppLaunchedListener(() => {
+ if (isUserLoggedIn()) {
+ setMainRoot();
+ } else {
+ setLoginRoot();
+ }
+});
+```
+
+## Common root structures
+
+
+
+
+Stacks are usually used as root for small scale apps or for short-lived flows within one big app. For example, here's a login flow:
+
+```js
+Navigation.setRoot({
+ root: {
+ stack: {
+ children: [
+ {
+ component: {
+ name: 'LOGIN_SCREEN'
+ }
+ }
+ ]
+ }
+ }
+});
+```
+
+
+
+
+Typically, stacks are used as direct children of BottomTabs and each child is an independent root. This lets users seamlessly switch between tabs as each tab has its own navigation hierarchy.
+
+```js
+Navigation.setRoot({
+ root: {
+ bottomTabs: {
+ children: [
+ {
+ stack: {
+ children: [
+ {
+ component: {
+ name: 'FEED_SCREEN'
+ }
+ }
+ ]
+ }
+ },
+ {
+ stack: {
+ children: [
+ {
+ component: {
+ name: 'CHAT_LIST'
+ }
+ }
+ ]
+ }
+ },
+ {
+ stack: {
+ children: [
+ {
+ component: {
+ name: 'PROFILE_SCREEN'
+ }
+ }
+ ]
+ }
+ }
+ ]
+ }
+ }
+});
+```
+
+
+
+
+When a SideMenu layout is used as root, the center screen would typically be a stack. The center stack should be treated as a root - you can push child screens into it, or replace it alltogether by calling `setStackRoot`.
+
+```js
+Navigation.setRoot({
+ root: {
+ sideMenu: {
+ center: {
+ stack: {
+ children: [
+ {
+ component: {
+ name: 'HOME_SCREEN'
+ }
+ }
+ ]
+ }
+ },
+ left: {
+ component: {
+ name: 'MENU_SCREEN'
+ }
+ }
+ }
+ }
+});
+```
+
+
+
diff --git a/website/versioned_docs/version-7.11.4/docs/docs-screen-lifecycle.mdx b/website/versioned_docs/version-7.11.4/docs/docs-screen-lifecycle.mdx
new file mode 100644
index 00000000000..de5f98e54ff
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/docs-screen-lifecycle.mdx
@@ -0,0 +1,49 @@
+---
+id: screen-lifecycle
+title: Screen Lifecycle
+sidebar_label: Screen Lifecycle
+---
+
+Any React Component registered with react-native-navigation is enhanced with two additional lifecycle events:
+
+* `componentDidAppear` - called each time a component is revealed to the user
+* `componentDidDisappear` - called each time a component is hidden from user's view **as a result of being detached from hierarchy**
+
+These methods compliment React's lifecycle methods:
+
+* `componentDidMount` - called once, when a component is attached to hierarchy **for the first time**
+* `componentWillUnmount` - called once, when a component is destroyed
+
+### Mounting
+These methods are called in the following order when a component is created and attached to hierarchy.
+
+* constructor()
+* render()
+* componentDidMount()
+* componentDidAppear()
+
+### Unmounting
+These methods are called when a component is being removed from hierarchy
+
+* componentDidDisappear()
+* componentWillUnmount()
+
+### Modal
+
+When a modal is displayed, depending on the [modalPresentationStyle](/react-native-navigation/api/options-root#modalpresentationstyle), content behind it might be detached from hierarchy. This affects the visibility events which are emitted to the content behind the modal.
+
+When Modals with `pageSheet` or `overCurrentContext` modalPresentationStyle are displayed, previous content is still visible to the user. Thus `componentDidDisappear` event is **not** emitted.
+
+Same is applied when a modal is dismissed. If it was originally presented with `pageSheet` or `overCurrentContext` modalPresentationStyle, when that modal is then dismissed, the previous context won't receive a `componentDidAppear` event.
+
+### Overlay
+These methods are called in the following order when a component is displayed as an Overlay:
+
+* constructor()
+* render()
+* componentDidMount()
+* componentDidAppear()
+
+:::note
+Content displayed behind an Overlay does not receive the `componentDidDisappear`, since it's still visible to user and attached to the hierarchy.
+:::
diff --git a/website/versioned_docs/version-7.11.4/docs/docs-showcases.mdx b/website/versioned_docs/version-7.11.4/docs/docs-showcases.mdx
new file mode 100644
index 00000000000..c5e5da6eff0
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/docs-showcases.mdx
@@ -0,0 +1,44 @@
+---
+id: showcases
+title: Showcases
+sidebar_label: Showcases
+---
+
+## Apps
+### Hekla for Hacker News
+
+A hacker news client built from the ground up with v2 of react-native-navigation.
+
+It is a tab-based app and utilizes Split Layout for iOS tablets, 3D touch and more.
+
+- [Source code](https://github.com/birkir/hekla)
+- [Download iOS](https://itunes.apple.com/us/app/hekla/id1405096983?mt=8)
+- [Download Android](https://play.google.com/store/apps/details?id=is.pipe.hekla)
+
+## Starter Kits
+* [kanzitelli/expo-rnn-starter](https://github.com/kanzitelli/expo-rnn-starter) - Simple yet practical starter with React Native Navigation and [Expo Modules](https://docs.expo.io/bare/installing-unimodules/), [MobX-State-Tree](https://github.com/mobxjs/mobx-state-tree) and [Redux](https://github.com/reduxjs/redux) (pick one) and more goodies inside such as Typescript, [RNN Hooks](https://github.com/underscopeio/react-native-navigation-hooks), [RN Vector Icons](https://github.com/oblador/react-native-vector-icons), [RN Gesture Handler](https://github.com/kmagiera/react-native-gesture-handler). As an example, basic Reddit App implemented in two ways: using [MobX-State-Tree](https://github.com/mobxjs/mobx-state-tree) in `/srcMobX` and using [Redux](https://github.com/reduxjs/redux) in `/srcRedux`.
+* [atoami/react-native-navigation-redux-starter-kit](https://github.com/atoami/react-native-navigation-redux-starter-kit) - React Native Navigation(v2) Starter Kit with Redux, Saga, ESLint, Babel and Jest 😎
+* [alexwasner/react-native-mobx-firebase-starter](https://github.com/alexwasner/react-native-mobx-firebase-starter) - A React Native starter app with React Native Navigation(v2), MobX, Firebase, Lottie and More 🤓
+
+* [hsyndeniz/react-native-quick-start](https://github.com/hsyndeniz/react-native-quick-start) - A React Native starter app with React Native Navigation, Redux, Firebase, Social Auth, Phone Auth, Push Notifications, Google Maps, Google Admob, Lottie and More 🤓
+
+### Playground
+
+The playground example is a place where we showcase and test all features of react-native-navigation.
+
+```bash
+git clone https://github.com/wix/react-native-navigation
+cd react-native-navigation
+npm install
+
+# for iOS:
+npm run xcode # Opens XCode
+npm start # Starts the packager on linux like systems
+
+# for Android:
+# 1. open Android Studio inside ".\playground"
+# 2. start a emulator
+npm run start-windows # Start the packager if you are on a windows system
+
+# Run the app in Simulator or on Device from within XCode/Android Studio
+```
diff --git a/website/versioned_docs/version-7.11.4/docs/docs-sideMenu.mdx b/website/versioned_docs/version-7.11.4/docs/docs-sideMenu.mdx
new file mode 100644
index 00000000000..5a15ac4f33c
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/docs-sideMenu.mdx
@@ -0,0 +1,105 @@
+---
+id: sideMenu
+title: Side Menu
+sidebar_label: Side Menu
+---
+
+SideMenu provides access to destinations in the app from an easy to access menu which is accessible to the user via horizontal swipe gesture or a menu button.
+
+## Opening programmatically
+
+To open the side menu programmatically, you'll need to update the visible property of the side menu you'd like to open.
+
+The following snippet shows how to open the left side menu. The menu is opened by setting its visible option to visible.
+```jsx
+Navigation.mergeOptions(componentId, {
+ sideMenu: {
+ left: {
+ visible: true,
+ },
+ },
+});
+```
+
+## Opening via the hamburger menu
+The most common use case is to open the side menu by pressing the hamburger button at the TopBar. To achieve this, listen to the press event of the burger button, and open the side menu as shown above.
+
+```jsx
+const React = require('react');
+const Navigation = require('react-native-navigation');
+const { View, Text } = require('react-native');
+
+class SideMenuCenterScreen extends React.Component {
+ static options() {
+ return {
+ topBar: {
+ leftButtons: {
+ id: 'sideMenu',
+ icon: require('./menuIcon.png')
+ }
+ }
+ };
+ }
+
+ constructor(props) {
+ super(props);
+ Navigation.events().bindComponent(this);
+ }
+
+ render() {
+ return (
+
+ Click the hamburger icon to open the side menu
+
+ );
+ }
+
+ navigationButtonPressed({ buttonId }) {
+ if (buttonId === 'sideMenu') {
+ Navigation.mergeOptions(this, {
+ sideMenu: {
+ left: {
+ visible: true
+ }
+ }
+ });
+ }
+ }
+}
+```
+
+## Pushing to the center layout from a menu
+A common use case when using SideMenus is to interact with the center layout, e.g. pushing a screen to a stack in the center layout when a user clicks on a button from one of the menus.
+
+In order to interact with the stack, we'll first assign it a predefined id. For example:
+
+```js
+sideMenu: {
+ center: {
+ stack: {
+ id: 'CenterStack',
+ children: []
+ }
+ },
+ left: {
+ ...
+ }
+}
+```
+
+Now that we've defined an `id` for out stack, we can go ahead and push our screen to it. If we're pushing while the SideMenu is open, we'll need to make sure we close it by updating the visibility option of the relevant menu (left or right).
+
+```js
+Navigation.push('CenterStack', {
+ component: {
+ name: Screens.Pushed,
+ options: {
+ sideMenu: {
+ left: {
+ visible: false
+ }
+ }
+ }
+ }
+});
+```
diff --git a/website/versioned_docs/version-7.11.4/docs/docs-stack.mdx b/website/versioned_docs/version-7.11.4/docs/docs-stack.mdx
new file mode 100644
index 00000000000..583b180778e
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/docs-stack.mdx
@@ -0,0 +1,287 @@
+---
+id: stack
+title: Stack
+sidebar_label: Stack
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+A stack is a container layout promoting a hierarchical navigation. It is used for navigating between screens at consecutive levels of hierarchy, steps in a flow or across an app.
+
+The first child in the stack (represented by the `children` array) is the root and is displayed at the bottom of the stack. The last child in the children array is the child currently being displayed.
+
+In this layout, only a single child screen is visible at any given time and consecutive screen can be added to the top of the stack using the `Navigation.push` command. Tapping the back button will pop the stack and remove the top most screen.
+
+The stack manages the TopBar at the top of the stack. The TopBar displays the current screens' title and buttons. It can be hidden with the `topBar: { visible: false }` option. By default, screens are rendered below the TopBar. This behavior can be changed by setting `topBar: { drawBehind: true }` in the current screens' options.
+
+# Layout Examples
+
+
+
+
+
+A stack declared with a single child.
+
+```js
+const stack = {
+ children: [
+ {
+ component: {
+ name: 'MyComponent',
+ },
+ },
+ ],
+};
+```
+
+
+
+
+
+A stack can be initialized with more than one child, in which case the last child will be the currently displayed child and the first child will be hidden. In this case the back button will be visible automatically, clicking it will go back in the stack revealing the first (previous) child.
+Once the root child becomes visible, the back button is hidden.
+
+```js
+const stack = {
+ children: [
+ {
+ component: {
+ name: 'RootComponent',
+ },
+ },
+ {
+ component: {
+ name: 'SecondComponent',
+ },
+ },
+ ],
+};
+```
+
+
+
+
+
+## TopBar Buttons
+
+Buttons can be added to the [right](#rightButtons) and [left](#leftButtons) areas of the TopBar. Buttons can have either an icon or a text. They are declared in the the options object and, as with any other option, can be updated dynamically with the `Navigation.mergeOptions` command.
+
+:::tip Always assign titles to buttons!
+When using an icon button on **Android**, you should always pass a title as well. The title is used when the button is collapsed to the overflow menu and as a tooltip when the button is long pressed.
+:::
+
+### Overflow menu
+
+It's common practice to group less important actions in a menu or an action sheet.
+
+To do so on iOS, include a button with a menu icon and open an [ActionSheet](https://facebook.github.io/react-native/docs/actionsheetios) with the relevant actions when the button is clicked.
+
+On Android, use the [showAsAction](../api/options-button#showasaction) options to control when the button should appear in the menu.
+
+### Using a react component in a button
+
+Sometimes we require more from our buttons. In order to support every product need, React Components can be used as custom views of buttons.
+To do so, you'll first need to register the view with Navigation, just like you register your components used as screens:
+
+```js
+Navigation.registerComponent('ButtonComponent', () => require('./ButtonComponent'));
+```
+
+Now you can create buttons which use the component registered with `'ButtonComponent'` as their custom view:
+
+```js
+topBar: {
+ rightButtons: [
+ {
+ component: 'ButtonComponent',
+ passProps: {
+ // Pass initial props to the button here
+ },
+ },
+ ];
+}
+```
+
+### Updating props of custom buttons
+
+To update props of a mounted component used as a button, you'll first need to assign it a unique id, then call the `Navigation.updateProps()` command with the id.
+
+Calling the updateProps command will trigger Reacts component lifecycle methods related to [props update](https://reactjs.org/docs/react-component.html#updating)
+
+```js
+// Declare the button and assign it a unique id
+topBar: {
+ rightButtons: [
+ {
+ id: 'SomeUniqueId',
+ component: 'ButtonComponent',
+ passProps: {
+ count: 0,
+ },
+ },
+ ];
+}
+
+// Update props
+Navigation.updateProps('SomeUniqueId', {
+ count: 1,
+});
+```
+
+### Changing buttons dynamically
+
+As buttons are part of a screen's options, they can be modified like any other styling option using the [mergeOptions](#) command.
+
+#### Setting buttons
+
+The following command will set the screen's right buttons. If the screen already has Right Buttons declared - they will be overridden.
+
+```js
+Navigation.mergeOptions(this.props.componentId, {
+ topBar: {
+ rightButtons: [
+ {
+ id: 'myDynamicButton',
+ text: 'My Button',
+ },
+ ],
+ },
+});
+```
+
+#### Removing buttons
+
+Buttons can be removed by setting zero buttons, as shown in the snippet below.
+
+```js
+Navigation.mergeOptions(this.props.componentId, {
+ topBar: {
+ rightButtons: [],
+ },
+});
+```
+
+## Back Button
+
+The back button is added automatically when two or more screens are pushed into the stack.
+
+### Styling the back button
+
+The back button's style can be customized by declaring a backButton options object. This configuration can be part of a screen's static options, or default options.
+
+```js
+backButton: {
+ color: 'red',
+ icon: require('../../img/customChevron.png')
+}
+```
+
+### Controlling visibility
+
+The back buttons visibility can be controlled with the visible property.
+
+```js
+backButton: {
+ visible: false;
+}
+```
+
+### Changing visibility programmatically
+
+Back button visibility can be changed dynamically using the mergeOptions command. When using a screen's componentId, the change will affect only that specific screen. But when using the stack's id, the change will affect all screens pushed into the stack.
+
+```js
+Navigation.mergeOptions(this.props.componentId, {
+ backButton: {
+ visible: false,
+ },
+});
+```
+
+### Handling the back button
+
+Handling the back button press event is done by first disabling the default back button behaviour by adding:
+
+```js
+topBar: {
+ backButton: {
+ popStackOnPress: false,
+ }
+}
+```
+
+As a result, pressing the back button will not pop the stack and will dispatch [`navigationButtonPress`](https://wix.github.io/react-native-navigation/api/events#navigationbuttonpressed-event) event with the default back button id `RNN.back`.
+
+### Handling the hardware back button on Android
+
+Same as handling the default back button, handling the hardware back button is done by disabling `popStackOnPress` for the hardware button:
+
+```js
+hardwareBackButton: {
+ popStackOnPress: false,
+}
+```
+
+As a result, pressing the hardware back button will not pop the stack and will dispatch [`navigationButtonPress`](https://wix.github.io/react-native-navigation/api/events#navigationbuttonpressed-event) event with the default hardware back button id `RNN.hardwareBackButton`.
+
+## Interacting programmatically
+
+The Navigation object provides ways to programmatically manipulate the stack.
+
+### Interact with the Stack by componentId
+
+Each layout pushed into the stack has an id. When in the context of a component, The component's `componentId` can be used to interact with a parent stack.
+When using a component's componentId, the native implementation knows to perform the command on the parent Stack of this component.
+
+In this example, we push a screen onto the component's parent stack.
+
+```jsx
+const React = require('react');
+const Navigation = require('react-native-navigation');
+
+class MyComponent extends React.Component {
+ onButtonClick = () => {
+ Navigation.push(this.props.componentId, {
+ component: {
+ name: 'PUSHED_SCREEN',
+ },
+ });
+ };
+}
+```
+
+### Interact with the Stack by a predefined id
+
+Sometimes we're required to interact with a specific stack not from the context of a component pushed into it. To do so, assign the stack a predefined `id` and use it when invoking any stack command.
+
+```js
+Navigation.setRoot({
+ root: {
+ stack: {
+ id: 'MyStack', // This is the id we're going to use when interacting with the stack
+ children: [
+ {
+ component: {
+ name: 'SomeComponent',
+ },
+ },
+ ],
+ },
+ },
+});
+
+function push() {
+ Navigation.push('MyStack', {
+ component: {
+ name: 'PushedScreen',
+ },
+ });
+}
+```
diff --git a/website/versioned_docs/version-7.11.4/docs/meta-contributing.mdx b/website/versioned_docs/version-7.11.4/docs/meta-contributing.mdx
new file mode 100644
index 00000000000..2a4a1a9c19a
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/meta-contributing.mdx
@@ -0,0 +1,147 @@
+---
+id: meta-contributing
+title: Contributing
+sidebar_label: Contributing
+---
+
+Thank you for showing interest in contributing to React-Native-Navigation! This project is developed and maintained by Wix in collaboration with the community.
+
+There are various ways in which you can contribute to this library, not all require knowledge or expertise in native development. Listed below is all you need to get started with your first contribution.
+
+## Stack Overflow
+
+Stack Overflow is used by developers to find answers and troubleshoot code. Users are encouraged to post questions on SO and tag them with the [wix-react-native-navigation](https://stackoverflow.com/questions/tagged/wix-react-native-navigation) tag. Answering issues on SO is very helpful and beneficial to the community, only this time, there's a personal angle - you can boost your SO ranking and rack up points quickly.
+
+## Discord
+
+Another popular communication channel is our [Discord channel](https://discord.gg/DhkZjq2) where users post questions and consult with each other. You're welcome to join the discussions and answer questions. This is also a great place to meet other community members and project maintainers.
+
+## Contributing to React-Native-Navigation
+
+### iOS
+
+There are 2 ways to test your contribution to this project on iOS:
+
+1. You can contribute and test your changes using the playground provided.
+
+
+2. You can install React-Native-Navigation in a new or existing project and set your project to use your local clone of React-Native-Navigation in the podfile.
+The following steps are required in order to make the project work with your local environment:
+
+#### 2.1
+
+Install React-Native-Navigation as you'll usually do in your project, using `npm install --save react-native-navigation`.
+
+#### 2.2
+
+Add the following configuration to the `react-native.config.js` file, at the root of your project.
+
+```javascript
+module.exports = {
+ project: {
+ ios: {},
+ android: {},
+ },
+ dependencies: {
+ 'react-native-navigation': {
+ platforms: {
+ ios: null,
+ android: null
+ },
+ },
+ },
+};
+```
+
+#### 2.3
+
+Clone the project using `git clone https://github.com/wix/react-native-navigation` at your desired location.
+
+#### 2.4
+
+Add the following line in the Podfile:
+
+```ruby
+pod 'ReactNativeNavigation', :path => '/path/to/cloned/react-native-navigation'
+```
+
+You're done. Happy coding!
+
+## GitHub Issues
+
+### Open an issue
+Found a bug? Missing a feature? Go ahead and open an issue! Make sure to add all details mentioned in the issue template. If you're interested in suggesting a big change, please speak to one of the admins on [Discord](#discord) to coordinate your effort.
+
+### Respond to issues
+Although the issue tracker is used solely for bug reports, issues are frequently opened for questions or to request assistance. As the project grows in popularity, more issues remain unanswered for long periods of time.
+
+Some issues can be trivial and easy to pinpoint - a missing import statement or apostrophe, wrong layout structure, etc. If you're an experienced user, helping out newcomers can be quite satisfying and allows maintainers to focus on features and bug fixes.
+
+Some issues are tagged as ["looking for contributors"](https://github.com/wix/react-native-navigation/labels/user%3A%20looking%20for%20contributors). These issues have been recognized by the team, but aren't prioritized by Wix developers due to lack of time or for some other reason. We leave these issues to our community and you're more than welcome to take a crack at them. If you'd like to submit a PR, see [these instructions](#running-the-project) on how to run the project locally.
+
+### Provide reproductions
+Reproducing bugs takes time. Lots of time. Usually that's because an issue is lacking important information, which then causes lots of back and forth communication between maintainers and users. Help us address more bugs and issues by providing reproductions.
+
+Providing reproductions improves the chances of an issue being prioritized by maintainers!
+
+If an issue is reproduced with a specific combination of options, posting these options will usually suffice. If a specific layout structure is involved or specific actions need to be performed in a certain order - then we ask that you fork the project and push a branch with a reproduction to the Playground app.
+
+Check out the [list of issues requiring reproductions](https://github.com/wix/react-native-navigation/labels/user%3A%20requires%20reproduction).
+
+## Submitting PRs
+So you've fixed a bug or added a feature and you're ready to submit a pull request 🎉🎊 Make sure the title is clear and describes the reason for the PR. Please include any information you can which will help us understand the reasons for the PR, what it fixes and what it changes. Please include before/after pictures/gifs when appropriate.
+
+## Workflow
+This project is driven by tests. Before implementing any feature or fixing any bug, a failing test (e2e or unit or both) should be added, depending on the environment of where the fix should be implemented. For example, for an API change, a failing e2e should be written. For a small bug fix in Android, for example, a unit test in Android should be added.
+
+This will ensure good quality throughout the life of the project and will help avoid unexpected breakages.
+
+No PR will be accepted without adequate test coverage.
+
+If you need help running the project, have a look at the [Playground app](playground-app) section. You can run the tests using the scripts below.
+
+
+### Tests and the Playground app
+Besides an overview of basic React Native Navigation functionality, the [Playground app](playground-app) can (and rather should) be used for e2e tests and reproductions. If your change requires an e2e, add it to the playground app, to the appropriate screen. Again, quick setup instructions available in [Playground app](playground-app) section of these docs.
+
+:::tip
+If a screen contains too many buttons, e2e tests might fail if the button is positioned out of screen bounds because Detox matchers detect it's invisible.
+:::
+
+### Enable linter
+The project uses [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) to ensure code style consistency across the codebase. Make sure to install these plugins in your IDE.
+
+A pre-commit hook will verify that the linter passes when committing.
+
+### Playground app Folder Structure
+
+| Folder | Description |
+| ------ | ----------- |
+| `lib` | The project itself composed of: |
+| `lib/android` | android sources and unit tests |
+| `lib/ios` | iOS sources and unit tests |
+| `lib/src` | TypeScript sources and unit tests |
+| `lib/dist` | compiled javascript sources and unit tests |
+| `lib/dist/index.js` | the entry point for `import Navigation from 'react-native-navigation'` |
+| `e2e` | [detox](https://github.com/wix/detox) e2e tests on both Android and iOS |
+| `playground` | The end-user project all e2e tests run against. Contains its own `src`, `android` and `ios`. Does not have its own package.json, depends on the local `/lib` for faster local development (no need to `npm install` locally). |
+| `integration` | misc javascript integration tests, proving integration with other libraries like redux |
+| `scripts` | all scripts |
+
+### Scripts
+
+| Command | Description |
+| ------- | ----------- |
+| `npm install` | installs dependencies |
+| `npm run build` | compiles TypeScript sources `./lib/src` into javascript `./lib/dist` |
+| `npm run clean` | cleans all build directories, stops packager, fixes flakiness by removing watchman cache, etc. |
+| `npm run start` | starts the react-native packager for local debugging |
+| `npm run xcode` | for convenience, opens xcode in this project |
+| `npm run install-android` | builds playground debug/release version and installs on running android devices/emulators. **Options:** `-- --release` |
+| `npm run uninstall-android` | uninstalls playground from running android devices/simulators |
+| `npm run test-js` | runs javascript tests and coverage report |
+| `npm run test-unit-ios` | runs ios unit tests in debug/release **Options:** `-- --release` |
+| `npm run test-unit-android` | runs android unit tests in debug/release **Options:** `-- --release` |
+| `npm run test-e2e-ios` | runs the ios e2e tests using [detox](https://github.com/wix/detox) in debug/release **Options:** `-- --release`|
+| `npm run test-e2e-android` | runs the android e2e tests using [detox](https://github.com/wix/detox) in debug/release **Options:** `-- --release` |
+| `npm run test-all` | runs all tests in parallel |
diff --git a/website/versioned_docs/version-7.11.4/docs/sideMenu-disable.mdx b/website/versioned_docs/version-7.11.4/docs/sideMenu-disable.mdx
new file mode 100644
index 00000000000..78385b25f50
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/sideMenu-disable.mdx
@@ -0,0 +1,65 @@
+---
+id: sideMenu-disable
+title: Disable Open and Close gesture
+sidebar_label: Open and Close Gesture
+---
+
+To open the side menu programmatically, you'll need to update the visible property of the side menu you'd like to open.
+
+The following snippet shows how to open the left side menu.
+```jsx
+Navigation.mergeOptions(componentId, {
+ sideMenu: {
+ left: {
+ visible: true,
+ },
+ },
+});
+```
+
+## Open by pressing on the hamburger menu
+The most common use case is to open the side menu by pressing the hamburger button in the TopBar. To achieve this, listen to the press event of the burger button, and open the side menu as shown above.
+
+```jsx
+const React = require('react');
+const Navigation = require('react-native-navigation');
+const { View, Text } = require('react-native');
+
+class SideMenuCenterScreen extends React.Component {
+ static options() {
+ return {
+ topBar: {
+ leftButtons: {
+ id: 'sideMenu',
+ icon: require('./menuIcon.png')
+ }
+ }
+ };
+ }
+
+ constructor(props) {
+ super(props);
+ Navigation.events().bindComponent(this);
+ }
+
+ render() {
+ return (
+
+ Click the hamburger icon to open the side menu
+
+ );
+ }
+
+ navigationButtonPressed({ buttonId }) {
+ if (buttonId === 'sideMenu') {
+ Navigation.mergeOptions(this, {
+ sideMenu: {
+ left: {
+ visible: true
+ }
+ }
+ });
+ }
+ }
+}
+```
diff --git a/website/versioned_docs/version-7.11.4/docs/stack-backButton.mdx b/website/versioned_docs/version-7.11.4/docs/stack-backButton.mdx
new file mode 100644
index 00000000000..75949b16778
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/stack-backButton.mdx
@@ -0,0 +1,40 @@
+---
+id: stack-backButton
+title: The Back button
+sidebar_label: Back button
+---
+
+The back button is added automatically when two or more screens are pushed into the stack.
+
+## Styling the back button
+The back button's style can be customised by declaring a backButton options object. This configuration can be part of a screen's static options, or default options.
+
+```js
+backButton: {
+ color: 'red',
+ icon: require('../../img/customChevron.png')
+}
+```
+
+## Controling visibility
+The back buttons visbility can be controlled with the visible property.
+
+```js
+backButton: {
+ visible: false
+}
+```
+
+## Changing visbility programmatically
+Back button visibility can be changed dynamically using the mergeOptions command. When using a screen's componentId, the change will affect only that specific screen. But when using the stack's id, the change will affect all screens pushed into the stack.
+
+```js
+Navigation.mergeOptions(this.props.componentId, {
+ backButton: {
+ visible: false
+ }
+});
+```
+
+## Handling the back button
+Handling the back button is not possible. However, you can set a left button with a chevron and handle it like you'd handle any other button and calling `Navigation.pop` when desired.
\ No newline at end of file
diff --git a/website/versioned_docs/version-7.11.4/docs/stack-backNavigation.mdx b/website/versioned_docs/version-7.11.4/docs/stack-backNavigation.mdx
new file mode 100644
index 00000000000..e8fac098ed4
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/stack-backNavigation.mdx
@@ -0,0 +1,10 @@
+---
+id: stack-backNavigation
+title: Back Navigation
+sidebar_label: Back navigation
+---
+
+## Disabling back navigation
+
+## Handling back navigation
+
diff --git a/website/versioned_docs/version-7.11.4/docs/stack-buttons.mdx b/website/versioned_docs/version-7.11.4/docs/stack-buttons.mdx
new file mode 100644
index 00000000000..db2d7262084
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/stack-buttons.mdx
@@ -0,0 +1,109 @@
+---
+id: stack-buttons
+title: TopBar Buttons
+sidebar_label: TopBar Buttons
+---
+
+Buttons can be added to the [right](#rightButtons) and [left](#leftButtons) areas of the TopBar. Buttons can have either an icon or a text. They are declared in the the options object and, as with any other option, can be updated dynamically with the `Navigation.mergeOptions` command.
+
+> When using an icon button on **Android**, you should always pass a title as well. The title is used when the button is collapsed to the overflow menu and as a tooltip when the button is long pressed.
+
+# Overflow menu
+
+It's common practice to group less important actions in a menu or an action sheet.
+
+To do so on iOS, include a button with a menu icon and open an [ActionSheet](https://facebook.github.io/react-native/docs/actionsheetios) with the relevant actions when the button is clicked.
+
+On Android, use the [showAsAction](#showasaction) options to control when the button should appear in the menu.
+
+# Left button
+
+Left buttons behave like right buttons with two caveats on Android:
+
+- Only a single left button is alowed
+- Textual left button isn't supported
+
+# Using a react component in a button
+
+> ⚠️At the moment, Android only supports using custom buttons in `rightButtons`.
+
+Sometimes we require more from our buttons. In order to support every product need React Components can be used as custom views of buttons.
+To do so, you'll first need to register the view with Navigation, just like you register your components used as screens:
+
+```js
+Navigation.registerComponent('ButtonComponent', () => require('./ButtonComponent'));
+```
+
+Now you can create buttons which use the component registered with `'ButtonComponent'` as thier custom view:
+
+```js
+topBar: {
+ rightButtons: [
+ {
+ component: 'ButtonComponent',
+ passProps: {
+ // Pass initial props to the button here
+ },
+ },
+ ];
+}
+```
+
+## Updating props of custom buttons
+
+To update props of a mounted compoennt used as a button, you'll first need to assign it a unique id, then call the `Navigation.updateProps()` command with the id.
+
+Calling the updateProps command will trigger React's component lifecycle methods related to [props update](https://reactjs.org/docs/react-component.html#updating)
+
+```js
+// Declare the button and assign it a unique id
+topBar: {
+ rightButtons: [
+ {
+ id: 'SomeUniqueId',
+ component: 'ButtonComponent',
+ passProps: {
+ count: 0,
+ },
+ },
+ ];
+}
+
+// Update props
+Navigation.updateProps('SomeUniqueId', {
+ count: 1,
+});
+```
+
+# Changing buttons dynamically
+
+As buttons are part of a screen's options, they can be modified like any other styling option using the [mergeOptions](#) command.
+
+## Setting buttons
+
+The following command will set the screen's right buttons. If the screen already has Right Buttons declared - they will be overridden.
+
+```js
+Navigation.mergeOptions(this.props.componentId, {
+ topBar: {
+ rightButtons: [
+ {
+ id: 'myDynamicButton',
+ text: 'My Button',
+ },
+ ],
+ },
+});
+```
+
+## Removing buttons
+
+Buttons can be removed by setting zero buttons, as shown in the snippet below.
+
+```js
+Navigation.mergeOptions(this.props.componentId, {
+ topBar: {
+ rightButtons: [],
+ },
+});
+```
diff --git a/website/versioned_docs/version-7.11.4/docs/stack-programmatically.mdx b/website/versioned_docs/version-7.11.4/docs/stack-programmatically.mdx
new file mode 100644
index 00000000000..7f443b053c0
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/stack-programmatically.mdx
@@ -0,0 +1,56 @@
+---
+id: stack-programmatically
+title: Interact programmatically with the Stack
+sidebar_label: Interact programmatically
+---
+
+The Navigation object provides ways to programmatically manipulate the stack.
+
+## Interact with the Stack by componentId
+Each layout pushed into the stack has an id. When in the context of a component, The component's `componentId` can be used to interact with a parent stack.
+When using a component's componentId, the native implementation knows to perform the command on the parent Stack of this component.
+
+In this example, we push a screen onto the component's parent stack.
+
+```jsx
+const React = require('react');
+const Navigation = require('react-native-navigation');
+
+class MyComponent extends React.Component {
+ onButtonClick = () => {
+ Navigation.push(this.props.componentId, {
+ component: {
+ name: 'PUSHED_SCREEN'
+ }
+ });
+ }
+}
+```
+
+## Interact with the Stack by a predefined id
+Sometimes we're required to interact with a specific stack not from the context of a component pushed into it. To do so, assign the stack a predefined `id` and use it when invoking any stack command.
+
+```js
+Navigation.setRoot({
+ root: {
+ stack: {
+ id: 'MyStack', // This is the id we're going to use when interacting with the stack
+ children: [
+ {
+ component: {
+ name: 'SomeComponent'
+ }
+ }
+ ]
+ }
+ }
+});
+
+function push() {
+ Navigation.push('MyStack', {
+ component: {
+ name: 'PushedScreen'
+ }
+ });
+}
+```
diff --git a/website/versioned_docs/version-7.11.4/docs/style-animations.mdx b/website/versioned_docs/version-7.11.4/docs/style-animations.mdx
new file mode 100644
index 00000000000..4e6b79d1375
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/style-animations.mdx
@@ -0,0 +1,416 @@
+---
+id: style-animations
+title: Animations
+sidebar_label: Animations
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+Various UI elements can be animated by declaring animation options.
+You can change the default animations for various commands, like push and pop, and even animate elements in
+your screens during screen transitions.
+
+#### Animation properties
+
+The following properties can be animated with our animation framework:
+
+- **x** - Translate the view to a coordinate along the x axis.
+- **y** - Translate the view to a coordinate along the y axis.
+- **translationX** - Translate the view along the x axis relative to its current x position.
+- **translationY** - Translate the view along the y axis relative to its current y position.
+- **alpha** - Apply alpha animation to the view. A value of 0 means the view is not visible, 1 means it's visible.
+- **scaleX** - Scale the view on the x axis. A value of 1 means that no scaling is applied.
+- **scaleY** - Scale the view on the y axis. A value of 1 means that no scaling is applied.
+- **rotationX** - Applies rotation around the x axis (in degrees, passed as a float).
+- **rotationY** - Applies rotation around the y axis (in degrees, passed as a float).
+- **rotation** - Rotates the view on all axis. Positive values result in clockwise rotation.
+
+## Layout animations
+
+### Root animations
+
+Animating switches between roots, using the enter/exit animations that grants control on how each root is animated when entering or exiting the screen.
+
+This can be acheived by modifying the default options (`setDefaultOptions` for example) to be like:
+
+```js
+options:{
+ animations: {
+ push:{...},
+ setRoot: {
+ enter: {
+ waitForRender: true,
+ enabled: false,
+ translationY: {
+ from: 0,
+ to: 1,
+ duration: 3,
+ },
+ },
+ exit:{...}
+ },
+ },
+ };
+```
+In Playground, you can try it by setting `useCustomAnimations` in `flags.ts` file.
+
+### Stack animations
+
+When animating screens in and out of a stack, there are three elements you can work with:
+
+1. **content** - screen being pushed or popped
+2. **topBar** - stack's TopBar
+3. **bottomTabs** - if stack is a child of a bottomTabs layout, we can control the `hide` and `show` animations of the bottomTabs.
+
+The following example demonstrates how to replace the default push and pop animations with slide animations.
+
+
+
+
+```js
+options: {
+ animations: {
+ push: {
+ content: {
+ translationX: {
+ from: require('react-native').Dimensions.get('window').width,
+ to: 0,
+ duration: 300
+ }
+ }
+ }
+ }
+}
+```
+
+
+
+
+```js
+options: {
+ animations: {
+ pop: {
+ content: {
+ translationX: {
+ from: 0,
+ to: -require('react-native').Dimensions.get('window').width,
+ duration: 300
+ }
+ }
+ }
+ }
+}
+```
+
+
+
+
+### Modal animations
+
+Modal animations are declared similarly to stack animations, only this time we animate the entire view and not only part of the UI (content).
+The appearing modal can play custom enter animation and exit for the disappearing screen when showing/dismissing modal.
+
+
+
+
+The following example demonstrates how to show a modal with a fade-in animation.
+
+:::warning Deprecation warning
+Consider using enter, exit animations instead.
+```js
+options: {
+ animations: {
+ showModal: {
+ alpha: {
+ from: 0,
+ to: 1,
+ duration: 300
+ }
+ }
+ }
+}
+```
+:::
+```js
+options: {
+ animations: {
+ showModal: {
+ enter :{
+ enabled:true,
+ alpha: {
+ from: 0,
+ to: 1,
+ duration: 300
+ }
+ },
+ exit :{
+ enabled:true,
+ alpha: {
+ from: 1,
+ to: 0,
+ duration: 300
+ }
+ }
+ }
+ }
+}
+```
+
+
+
+
+
+The following example demonstrates how to dismiss a modal with a fade-out animation.
+
+:::warning Deprecation warning
+Consider using enter, exit animations instead.
+```js
+options: {
+ animations: {
+ dismissModal: {
+ alpha: {
+ from: 1,
+ to: 0,
+ duration: 300
+ }
+ }
+ }
+}
+```
+:::
+
+```js
+options: {
+ animations: {
+ dismissModal: {
+ exit:{
+ enabled:true
+ alpha: {
+ from: 1,
+ to: 0,
+ duration: 300
+ }
+ },
+ enter:{
+ enabled:false
+ alpha: {
+ from: 0,
+ to: 1,
+ duration: 300
+ }
+ }
+ }
+ }
+}
+```
+
+
+
+## Shared element transitions
+
+Shared element transitions allow us to provide visual continuity when navigating between destinations. This also focuses user attention on a particular significant element, which then also gives such user better context when transitioning to some other destination.
+
+:::caution
+At the moment, the transition is available for push and pop commands. We are working on expanding supported commands to show/dismiss modal and change BottomTabs.
+:::
+
+### Transition breakdown
+
+Let's take a more in-depth look at the following example, which you can find in the playground app:
+
+> [Source screen](https://github.com/wix/react-native-navigation/blob/master/playground/src/screens/sharedElementTransition/CocktailsListScreen.tsx) and the [Destination screen](https://github.com/wix/react-native-navigation/blob/master/playground/src/screens/sharedElementTransition/CocktailDetailsScreen.tsx)
+
+
+
+
+
+Four elements are animated in this example. Let's list the elements involved in the transition and note which properties are being animated.
+
+- **image** - the item image is animated to the next screen.
+
+ - image scale (resizeMode)
+ - position on screen
+
+- **image background** - each item has a "shadow" view which transitions to the next screen and turns into a colorful header.
+
+ - scale
+ - position on screen
+ - color
+
+- **title** - the title of the item is animated to the next screen.
+
+ - font size
+ - font color
+ - position on screen
+
+- **Description** - the description of the item in the destination screen.
+ - fade-in
+ - translation y
+
+### Implementing shared element transitions
+
+#### Step 1 - set a nativeID prop to elements in the source screen
+
+In order for RNN to be able to detect the corresponding native views of the elements,
+each element must include a unique `nativeID` prop.
+
+```jsx
+
+```
+
+#### Step 2 - set a nativeID prop to elements in the destination screen
+
+```jsx
+
+```
+
+#### Step 3 - Declare the shared element animation when pushing the screen
+
+```jsx
+Navigation.push(this.props.componentId, {
+ component: {
+ name: Screens.CocktailDetailsScreen,
+ passProps: { ...item },
+ options: {
+ animations: {
+ push: {
+ sharedElementTransitions: [
+ {
+ fromId: `image${item.id}`,
+ toId: `image${item.id}Dest`,
+ interpolation: { type: 'linear' }
+ },
+ ],
+ },
+ },
+ },
+ },
+});
+```
+
+The `interpolation` property is an object which consists of a `type` property, and optional parameters to further configure the interpolation function. The following `type`s are supported:
+
+* `'accelerate'`: Begin building up speed until destination has been reached.
+ - `factor`: The acceleration factor. Higher values look faster.
+* `'decelerate'`: Start at a high speed and slow down to settle.
+ - `factor`: The acceleration factor. Higher values look slower.
+* `'accelerateDecelerate'`: Begin building up speed until half of the animation is complete, then begin slowing down to settle.
+* `'decelerateAccelerate'`: Start at a high speed and slow down until half of the animation is complete, then speed up again to settle.
+* `'linear'`: Linearly move towards the destination.
+* `'overshoot'`: Begin building up speed and overshoot the destination, then fling back to settle.
+ - `tension`: The tension of the overshoot animation defines how far the object can overshoot. _Default: `1`_
+* `'spring'`: Acts like an actual spring. Depending on the configuration, this interpolation can overshoot the destination multiple times, or be very stiff and smoothly ease towards the destination.
+ - `mass`: The mass defines how "heavy" the object is. _Default: `3`_
+ - `damping`: The damping property specifies how much the moving object is being slowed down. Higher values can lead to overdamping, lower values to underdamping. _Default: `500`_
+ - `stiffness`: The stiffness property defines how stiff the animated object is. _Default: `200`_
+
+:::caution
+Since a Spring interpolation is not a time based animation, you have to manually tweak the configuration to match the duration of the animation, otherwise the remaining time of the Spring interpolation will get skipped.
+:::
+
+## Element Transitions
+
+Element transitions also allow you to animate elements during shared element transitions.
+
+### Recreating
+
+#### Step 1 - Set a nativeID prop to the element you'd like to animate
+
+An element can either be in the source or destination screen.
+
+```jsx
+
+ {this.props.description}
+
+```
+
+#### Step 2 - Declare the element animation when pushing the screen
+
+```jsx
+Navigation.push(this.props.componentId, {
+ component: {
+ name: Screens.CocktailDetailsScreen,
+ passProps: { ...item },
+ options: {
+ animations: {
+ push: {
+ elementTransitions: [
+ {
+ id: 'description',
+ alpha: {
+ from: 0, // We don't declare 'to' value as that is the element's current alpha value, here we're essentially animating from 0 to 1
+ duration: SHORT_DURATION,
+ },
+ translationY: {
+ from: 16, // Animate translationY from 16dp to 0dp
+ duration: SHORT_DURATION,
+ },
+ },
+ ],
+ },
+ },
+ },
+ },
+});
+```
+
+## Peek and Pop (iOS 11.4+)
+
+react-native-navigation supports [Peek and pop](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/Adopting3DTouchOniPhone/#//apple_ref/doc/uid/TP40016543-CH1-SW3) feature in iOS 11.4 and newer.
+
+This works by passing a ref to a component you want to transform into peek view. We have included a handy component to handle all the touches and ref for you:
+
+```jsx
+const handlePress ({ reactTag }) => {
+ Navigation.push(this.props.componentId, {
+ component {
+ name: 'previewed.screen',
+ options: {
+ preview: {
+ reactTag,
+ height: 300,
+ width: 300,
+ commit: true,
+ actions: [{
+ title: "Displayed Name",
+ id: "actionId",
+ style: 'default', /* or 'selected', 'destructive'*/
+ actions: [/*define a submenu of actions with the same options*/]
+ }]
+ },
+ },
+ },
+ });
+};
+
+const Button = (
+
+ My button
+
+);
+```
+
+All options except for reactTag are optional. Actions trigger the same event as [navigation button presses](https://wix.github.io/react-native-navigation/#/docs/topBar-buttons?id=handling-button-press-events). To react when a preview is committed, listen to the [previewCompleted](https://wix.github.io/react-native-navigation/#/docs/events?id=previewcompleted-ios-114-only) event.
diff --git a/website/versioned_docs/version-7.11.4/docs/style-constants.mdx b/website/versioned_docs/version-7.11.4/docs/style-constants.mdx
new file mode 100644
index 00000000000..a1fd0fa52aa
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/style-constants.mdx
@@ -0,0 +1,28 @@
+---
+id: style-constants
+title: Constants
+sidebar_label: Constants
+---
+
+React Native Navigation exposes a set of constants which can be used to get the dimensions of various navigation elements on the screen: StatusBar, TopBar and BottomTabs.
+
+## When are constants evaluated
+Some of the values exposed through the constants API are actually evaluated only after the UI is created (`setRoot` has been called) and therefore are not accessible through static getters.
+
+For example, if you need to get the height of the BottomTabs, you'll first need to have BottomTabs visible on the screen and only then retrieve their height via the constants API.
+
+:::important
+We recommend you don't cache the actual constants object returned by `await Navigation.constants()` as it might not be accurate later on when, for example, a new root is set or orientation changes.
+:::
+
+## API
+As explained above, constants are evaluated in native each time the API is invoked. That's why `Navigation.constants()` returns a promise and the use is as follows:
+
+```js
+const { Navigation } = require('react-native-navigation');
+const {
+ statusBarHeight,
+ topBarHeight,
+ bottomTabsHeight
+} = await Navigation.constants();
+```
diff --git a/website/versioned_docs/version-7.11.4/docs/style-fonts.mdx b/website/versioned_docs/version-7.11.4/docs/style-fonts.mdx
new file mode 100644
index 00000000000..8733c641341
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/style-fonts.mdx
@@ -0,0 +1,85 @@
+---
+id: style-fonts
+title: Changing fonts
+sidebar_label: Changing fonts
+---
+
+Before you begin using your own fonts, you'll first need to add them to the app project.
+
+* **Android** - add the `.ttf` or `.otf` files to `src/main/assets/fonts/`
+* **iOS** - follow this [guide](https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e)
+
+Once we've added the font files to our project, we can star using them in options.
+
+:::note
+When declaring fonts in options, use only the file name without the file type suffix.
+:::
+
+## BottomTab font
+
+```js
+options: {
+ bottomTab: {
+ fontFamily: 'helvetica'
+ }
+}
+```
+
+## Button font
+
+```js
+options: {
+ rightButtons: [
+ {
+ id: 'SAVE_BUTTON',
+ text: 'Save',
+ fontFamily: 'helvetica'
+ }
+ ],
+ leftButtons: [
+ {
+ id: 'CANCEL_BUTTON',
+ text: 'Cancel',
+ fontFamily: 'helvetica'
+ }
+ ]
+}
+```
+
+## Title font
+
+```js
+options: {
+ topBar: {
+ title: {
+ fontFamily: 'helvetica'
+ }
+ }
+}
+```
+
+## Subtitle font
+
+```js
+options: {
+ topBar: {
+ subtitle: {
+ fontFamily: 'helvetica'
+ }
+ }
+}
+```
+
+## Back button
+
+In iOS the back button will display the title of the previous screen. Use the `backButton` option to modify its font family.
+
+```js
+options: {
+ topBar: {
+ backButton: {
+ fontFamily: 'helvetica'
+ }
+ }
+}
+```
diff --git a/website/versioned_docs/version-7.11.4/docs/style-orientation.mdx b/website/versioned_docs/version-7.11.4/docs/style-orientation.mdx
new file mode 100644
index 00000000000..24d7b0f746f
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/style-orientation.mdx
@@ -0,0 +1,86 @@
+---
+id: style-orientation
+title: Orientation
+sidebar_label: Orientation
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+## Locking orientation
+Orientation can be locked either in the layout level, or across the app via default options. You can declare orientations you'd like your app to support in default options.
+
+
+
+
+Setting orientation in default options will affect all screens in all hierarchy levels. It's still possible to override orientation for specific screens.
+
+```js
+Navigation.setDefaultOptions({
+ layout: {
+ orientation: ['portrait']
+ }
+});
+```
+
+
+
+
+The following example demonstrates how to show a modal in landscape orientation.
+
+```js
+Navigation.showModal({
+ component: {
+ name: 'VideoPlayer'
+ options: {
+ layout: {
+ orientation: ['landscape']
+ }
+ }
+ }
+});
+```
+
+
+
+
+Applying orientation in the root level will affect all screens in the root hierarchy level. It **will not** apply to modals.
+
+```js
+Navigation.setRoot({
+ root: {
+ bottomTabs: {
+ options: {
+ layout: {
+ orientation: ['portrait']
+ }
+ },
+ children: [
+ ...
+ ]
+ }
+ }
+});
+```
+
+
+
+
+## Changing orientation dynamically
+
+Changing orientation dynamically through `Navigation.mergeOption()` is supported only on Android.
+
+```js
+Navigation.mergeOptions(this.props.componentId, {
+ layout: {
+ orientation: ['landscape']
+ }
+});
+```
diff --git a/website/versioned_docs/version-7.11.4/docs/style-screens.mdx b/website/versioned_docs/version-7.11.4/docs/style-screens.mdx
new file mode 100644
index 00000000000..574bf8d6fc8
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/style-screens.mdx
@@ -0,0 +1,100 @@
+---
+id: style-options
+title: Styling with options
+sidebar_label: Options
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+A Screen's look and feel is configured with an [Options](../api/options-root) object. Options can be applied to screens in three ways. Each method of applying options has benefits and draw backs which are important be aware of so we can use the right tool for the job.
+
+## Command options
+
+Options can be passed to layouts as part of a command. For example when pushing a screen. Options passed in commands are typically dynamic options which are determined at runtime.
+
+In the example below we're pushing a user profile screen and we'd like show the user name in the title. To do so, we set the title in the component's options.
+
+```tsx file=./style-screens/command-options.tsx
+```
+
+Notice how the title is actually inferred from the `user` object which is set in `passProps`. While this works perfectly fine, declaring the title each time a screen is pushed is a bit tedious and error prone. Later on we'll see a more convenient method to declare dynamic options which are inferred from props.
+
+## Static options
+
+Static options are options that are declared statically **on** the component class. Whenever a screen has a known predefined style, static options should be used as they are evaluated immediately when the screen is created.
+
+
+
+
+```tsx file=./style-screens/static-options-class.tsx
+```
+
+
+
+
+```tsx file=./style-screens/static-options-fn.tsx
+```
+
+
+
+
+### Handle props in static options
+
+Sometimes a screen's style includes properties defined in the calling scope where the screen is used. Like in the user profile screen we've seen above where the the user name is used as the TopBar title. As the user name is unique for each profile, it can't be defined explicitly in the static options.
+
+Luckily, we can access props from static options and set the title from static options! Let's see how this is done:
+
+
+
+
+```tsx file=./style-screens/static-options-props-class.tsx
+```
+
+
+
+
+```tsx file=./style-screens/static-options-props-fn.tsx
+```
+
+
+
+
+Following this approach we can determine options that are dependent on other external factors, such as experiments or A/B tests.
+
+```tsx file=./style-screens/static-options-experiments.tsx
+```
+
+## Merge options
+
+The `mergeOptions` command is used to update a layout's style. Keep in mind that the merge happens in native, and not ins JS. This meaning that if `mergeOptions` is called to update a screen's options, the static options declared on the React Component are not affected by mergeOptions.
+
+The following example shows how to update a TopBar background color to red.
+
+```tsx file=./style-screens/merge-options.tsx
+```
+
+---
+
+:::warning
+**Avoid using mergeOptions in a screen's constructor or in componentDidMount!**
+:::
+
+When a screen first appears, it's `constructor` and `componentDidMount` functions are called followed by a `componentDidAppear` event. (read more about screen lifecycle [here](docs-screen-lifecycle.mdx)).
+
+Developers might be tempted to call `mergeOptions` in constructor or componentDidMount to update options. Calling `mergeOptions` before the `componentDidAppear` event has been received has two very negative effects:
+
+1. Updating certain options can trigger additional layout and draw cycles which can have serious impact on performance.
+2. Options applied dynamically with the `mergeOptions` command might be handled in native **after** the screen has already appeared. This will result in noticeable flickering and artifacts as options are updated after the initial options have been applied and are visible to the user.
diff --git a/website/versioned_docs/version-7.11.4/docs/style-screens/command-options.tsx b/website/versioned_docs/version-7.11.4/docs/style-screens/command-options.tsx
new file mode 100644
index 00000000000..80d2d49b298
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/style-screens/command-options.tsx
@@ -0,0 +1,17 @@
+import { Navigation } from 'react-native-navigation';
+
+function showUserProfileScreen(user: User) {
+ Navigation.push(componentId, {
+ component: {
+ name: 'ProfileScreen',
+ passProps: { user },
+ options: {
+ topBar: {
+ title: {
+ text: user.name,
+ },
+ },
+ },
+ },
+ });
+}
diff --git a/website/versioned_docs/version-7.11.4/docs/style-screens/merge-options.tsx b/website/versioned_docs/version-7.11.4/docs/style-screens/merge-options.tsx
new file mode 100644
index 00000000000..2801d7288f9
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/style-screens/merge-options.tsx
@@ -0,0 +1,9 @@
+import { Navigation } from 'react-native-navigation';
+
+Navigation.mergeOptions(componentId, {
+ topBar: {
+ background: {
+ color: 'red',
+ },
+ },
+});
diff --git a/website/versioned_docs/version-7.11.4/docs/style-screens/static-options-class.tsx b/website/versioned_docs/version-7.11.4/docs/style-screens/static-options-class.tsx
new file mode 100644
index 00000000000..b2b7e252b39
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/style-screens/static-options-class.tsx
@@ -0,0 +1,11 @@
+import { NavigationComponent, Options } from 'react-native-navigation';
+
+class MyScreen extends NavigationComponent {
+ static options: Options = {
+ topBar: {
+ title: {
+ text: 'My Screen',
+ },
+ },
+ };
+}
diff --git a/website/versioned_docs/version-7.11.4/docs/style-screens/static-options-experiments.tsx b/website/versioned_docs/version-7.11.4/docs/style-screens/static-options-experiments.tsx
new file mode 100644
index 00000000000..969a036068e
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/style-screens/static-options-experiments.tsx
@@ -0,0 +1,16 @@
+import { NavigationComponent, Options } from 'react-native-navigation';
+
+class ExperimentScreen extends NavigationComponent {
+ static options(): Options {
+ const ExperimentsManager = require('./ExperimentsManager');
+ const food = ExperimentsManager.isActive('VeganExperiment') ? 'Tofu' : 'Hamburger';
+
+ return {
+ topBar: {
+ title: {
+ text: `Hello ${food}!`,
+ },
+ },
+ };
+ }
+}
diff --git a/website/versioned_docs/version-7.11.4/docs/style-screens/static-options-fn.tsx b/website/versioned_docs/version-7.11.4/docs/style-screens/static-options-fn.tsx
new file mode 100644
index 00000000000..98ff981f44e
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/style-screens/static-options-fn.tsx
@@ -0,0 +1,14 @@
+import { View } from 'react-native';
+import { NavigationComponentProps, NavigationFunctionComponent } from 'react-native-navigation';
+
+const MyFunctionalScreen: NavigationFunctionComponent = (props: NavigationComponentProps) => {
+ return ;
+};
+
+MyFunctionalScreen.options = {
+ topBar: {
+ title: {
+ text: 'My Screen',
+ },
+ },
+};
diff --git a/website/versioned_docs/version-7.11.4/docs/style-screens/static-options-props-class.tsx b/website/versioned_docs/version-7.11.4/docs/style-screens/static-options-props-class.tsx
new file mode 100644
index 00000000000..8123f7c8074
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/style-screens/static-options-props-class.tsx
@@ -0,0 +1,17 @@
+import { NavigationComponent, NavigationComponentProps, Options } from 'react-native-navigation';
+
+interface Props extends NavigationComponentProps {
+ order: OrderDetails;
+}
+
+class OrderScreen extends NavigationComponent {
+ static options(props: Props): Options {
+ return {
+ topBar: {
+ title: {
+ text: props.order.orderId,
+ },
+ },
+ };
+ }
+}
diff --git a/website/versioned_docs/version-7.11.4/docs/style-screens/static-options-props-fn.tsx b/website/versioned_docs/version-7.11.4/docs/style-screens/static-options-props-fn.tsx
new file mode 100644
index 00000000000..aacd4e998a5
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/style-screens/static-options-props-fn.tsx
@@ -0,0 +1,20 @@
+import { View } from 'react-native';
+import { NavigationComponentProps, NavigationFunctionComponent } from 'react-native-navigation';
+
+interface Props extends NavigationComponentProps {
+ order: OrderDetails;
+}
+
+const OrderScreen: NavigationFunctionComponent = (props: Props) => {
+ return ;
+};
+
+OrderScreen.options = (props: Props) => {
+ return {
+ topBar: {
+ title: {
+ text: props.order.orderId,
+ },
+ },
+ };
+};
diff --git a/website/versioned_docs/version-7.11.4/docs/style-statusbar.mdx b/website/versioned_docs/version-7.11.4/docs/style-statusbar.mdx
new file mode 100644
index 00000000000..4c64ac2039e
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/style-statusbar.mdx
@@ -0,0 +1,48 @@
+---
+id: style-statusBar
+title: StatusBar
+sidebar_label: StatusBar
+---
+
+The StatusBar appearance is controlled through options.
+
+For example, the following options will change the StatusBar background color to white will use dark colors for the StatusBar content (time, battery information, notification icons etc)
+
+```js
+options: {
+ statusBar: {
+ backgroundColor: 'white',
+ style: 'dark'
+ }
+}
+```
+
+:::warning Compatibility with StatusBar component
+React native's [StatusBar](https://reactnative.dev/docs/statusbar#__docusaurus) component is incompatible with React Native Navigation and you should avoid using it.
+:::
+
+## Changing StatusBar style dynamically
+
+As the StatusBar is controlled through options, it can be configured dynamically by calling `Navigation.mergeOptions` with the desired StatusBar options.
+
+For example, here's how you would hide the StatusBar dynamically
+
+```js
+Navigation.mergeOptions(this.props.componentId, {
+ statusBar: {
+ visible: false
+ }
+});
+```
+
+## How keep current StatusBar color when displaying screens
+
+When screens are displayed, the StatusBar color always changes to the color associated with the current screen. If a color isn't specified for a given screen (and thus for the StatusBar), the default (System default or from defaultOptions) color is used. Sometimes you might want to keep the current StatusBar color, for example when displaying an alert or a toast. To keep StatusBar color unchanged when displaying a screen, use `null` as a StatusBar color.
+
+```js
+options: {
+ statusBar: {
+ backgroundColor: null
+ }
+}
+```
diff --git a/website/versioned_docs/version-7.11.4/docs/style-theme.mdx b/website/versioned_docs/version-7.11.4/docs/style-theme.mdx
new file mode 100644
index 00000000000..4d5be5c1a1c
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/style-theme.mdx
@@ -0,0 +1,62 @@
+---
+id: style-theme
+title: Themes
+sidebar_label: Themes
+---
+
+A theme is a type of style which is applied to the entire app. It allows you to declare
+a consistent style to all Navigation components such as the TopBar and BottomTabs and also
+to system elements like the StatusBar and NavigationBar.
+
+## Applying a theme
+
+Themes are applied using `Navigation.setDefaultOptions()` which must be called **before** `Navigation.setRoot()` is called.
+
+```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: [
+ ...
+ ]
+ }
+ }
+});
+```
+
+## Conditional themes with Options Processor
+
+Some style requirements can't be facilitated with the `defaultOptions` api. For example, an app may have a unique theme for screens displayed in a modal or require that modals have a default dismiss button in the TopBar. An Options Processor allow us to mutate the options object of each screen and layout right before they are displayed.
+
+Lets see how we can leverage this API to add a dismiss button to the TopBar when showing a modal.
+
+```tsx file=./style-theme/option-processor.tsx
+```
+
+The Options Processors can also be used to set default options for buttons, here's how:
+
+```tsx file=./style-theme/option-processor-defaults.tsx
+```
+
+## Conditional themes with Layout Processor
+
+Layout Processor is similar in concept to the Options Processor discussed above. While Options Processor is invoked for each options object, Layout Processor is invoked once on the entire (layout)['../api/layout-layout/'] tree passed to the Navigation command.
+
+Through the Layout Processor we can access the layout and it's children, and mutate both options and passProps before the layout is displayed. In this example we iterate on the stack's children and set a dark TopBar color according to a `theme` property in the child's props.
+
+```tsx file=./style-theme/layout-processor.tsx
+```
+
+## Changing theme dynamically
+
+Apps can have multiple themes and sometimes you might need to change theme dynamically. To change current theme, simply call `Navigation.setDefaultOptions()` with updated theme options, following that with a call to `Navigation.setRoot()`. The reason we need to setRoot once more is because `Navigation.setDefaultOptions()` does not apply options to screens which had already been created.
diff --git a/website/versioned_docs/version-7.11.4/docs/style-theme/layout-processor.tsx b/website/versioned_docs/version-7.11.4/docs/style-theme/layout-processor.tsx
new file mode 100644
index 00000000000..b229cda4151
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/style-theme/layout-processor.tsx
@@ -0,0 +1,28 @@
+import { Layout, Navigation } from 'react-native-navigation';
+
+interface ScreenProps {
+ theme: 'light' | 'dark';
+}
+
+function isScreenProps(obj: unknown): obj is ScreenProps {
+ return typeof obj === 'object' && obj !== null && typeof (obj as ScreenProps).theme === 'string';
+}
+
+Navigation.addLayoutProcessor((layout: Layout, commandName: string) => {
+ layout.stack?.children?.forEach((child) => {
+ if (!child.component) {
+ return;
+ }
+ const props = child.component.passProps;
+ if (isScreenProps(props) && props.theme === 'dark') {
+ child.component.options = {
+ topBar: {
+ background: {
+ color: 'black',
+ },
+ },
+ };
+ }
+ });
+ return layout;
+});
diff --git a/website/versioned_docs/version-7.11.4/docs/style-theme/option-processor-defaults.tsx b/website/versioned_docs/version-7.11.4/docs/style-theme/option-processor-defaults.tsx
new file mode 100644
index 00000000000..8e41e94dfb2
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/style-theme/option-processor-defaults.tsx
@@ -0,0 +1,10 @@
+import { CommandName, Navigation, OptionsTopBarButton } from 'react-native-navigation';
+
+Navigation.addOptionProcessor(
+ 'topBar.rightButtons',
+ (button: OptionsTopBarButton, commandName: CommandName): OptionsTopBarButton => {
+ button.fontFamily = 'helvetica';
+ button.color = 'red';
+ return button;
+ }
+);
diff --git a/website/versioned_docs/version-7.11.4/docs/style-theme/option-processor.tsx b/website/versioned_docs/version-7.11.4/docs/style-theme/option-processor.tsx
new file mode 100644
index 00000000000..e0143f3a00e
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/style-theme/option-processor.tsx
@@ -0,0 +1,33 @@
+import {
+ CommandName,
+ Navigation,
+ NavigationButtonPressedEvent,
+ OptionsTopBar,
+} from 'react-native-navigation';
+
+Navigation.addOptionProcessor(
+ 'topBar',
+ (topBar: OptionsTopBar, commandName: CommandName, _props: any): OptionsTopBar => {
+ if (commandName === CommandName.ShowModal) {
+ if (!topBar.leftButtons) {
+ topBar.leftButtons = [
+ {
+ id: 'dismissModalButton',
+ icon: require('dismissIcon.png'),
+ color: 'black',
+ },
+ ];
+ }
+ }
+ return topBar;
+ }
+);
+
+// Now that each modal has a dismiss button, let's handle the button press event and dismiss the modal when needed.
+Navigation.events().registerNavigationButtonPressedListener(
+ (event: NavigationButtonPressedEvent) => {
+ if (event.buttonId === 'dismissModalButton') {
+ Navigation.dismissModal(event.componentId);
+ }
+ }
+);
diff --git a/website/versioned_docs/version-7.11.4/docs/third-party-mobx.mdx b/website/versioned_docs/version-7.11.4/docs/third-party-mobx.mdx
new file mode 100644
index 00000000000..04715b4332b
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/third-party-mobx.mdx
@@ -0,0 +1,75 @@
+---
+id: third-party-mobx
+title: MobX
+sidebar_label: MobX
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+MobX is one of the most popular state management libraries used by applications sized from small to large.
+With the introduction of the new React Context API, MobX can now be very easily integrated in React Native Navigation
+projects.
+
+:::info Note
+With the introduction of the new Context API, there is no need to use `Provider` pattern with MobX and you
+can now just use the React Context API.
+
+Also the example uses `mobx-react-lite` but you can use the normal `mobx-react`.
+:::
+
+## Sharing a store between multiple screens
+
+In the example below we will be creating a small Counter app. We will learn how to integrate Mobx with React-Native-Navigation and demonstrate how updating the store from one component, triggers renders in other components connected to the same store.
+
+Once you finish implementing the example, your screen should look similar to this:
+
+
+
+### Step 1 - Create a Counter store
+
+Let's first create a counter store using MobX. Our store has a single `count` object and two methods to increment and decrement it.
+
+
+
+
+
+```tsx file=./third-party-mobx/counter-store.tsx
+```
+
+
+
+
+
+ From `mobx@6.0.0` decorators have become an opt-in feature. To enable decorators for `mobx`, follow the [official guide](https://mobx.js.org/enabling-decorators.html).
+
+ ```tsx file=./third-party-mobx/counter-store-decorator.tsx
+ ```
+
+
+
+
+
+### Step 2 - Consuming the store
+
+You can consume the Counter store in any React components using `useCounterStore` hook or `React.useContext`
+
+```tsx file=./third-party-mobx/counter-screen.tsx
+```
+
+## How to use MobX persistent data
+
+Often the app will require a persistent data solution and with MobX you can use [`mobx-react-persist`](https://github.com/pinqy520/mobx-persist).
+It only takes few extra steps to integrate the library.
+
+Also the integration assumes that you are using the decorator pattern for `mobx`.
+
+```tsx file=./third-party-mobx/persistent-data.tsx
+```
diff --git a/website/versioned_docs/version-7.11.4/docs/third-party-mobx/counter-screen.tsx b/website/versioned_docs/version-7.11.4/docs/third-party-mobx/counter-screen.tsx
new file mode 100644
index 00000000000..791ad4922f8
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/third-party-mobx/counter-screen.tsx
@@ -0,0 +1,28 @@
+// CounterScreen.js
+import React, { useContext } from 'react';
+import { Button, Text, View } from 'react-native';
+import { Navigation } from 'react-native-navigation'
+import { observer } from 'mobx-react-lite';
+
+import { useCounterStore, CounterStoreContext } from './counter.store';
+
+export const CounterScreen = observer(({ componentId }) => {
+ const { count, increment, decrement } = useCounterStore(); // OR useContext(CounterStoreContext)
+
+ const navigateToNextScreen = () => {
+ Navigation.push(componentId, {
+ component: {
+ name: 'NextScreen'
+ }
+ })
+ }
+
+ return (
+
+ {`Clicked ${count} times!`}
+
+
+
+
+ );
+});
diff --git a/website/versioned_docs/version-7.11.4/docs/third-party-mobx/counter-store-decorator.tsx b/website/versioned_docs/version-7.11.4/docs/third-party-mobx/counter-store-decorator.tsx
new file mode 100644
index 00000000000..0847bb48840
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/third-party-mobx/counter-store-decorator.tsx
@@ -0,0 +1,28 @@
+// counter.store.js
+import React from 'react';
+import { observable, action, makeObservable } from 'mobx';
+
+class CounterStore {
+ @observable count = 0;
+
+ constructor() {
+ makeObservable(this)
+ }
+
+ @action.bound
+ increment() {
+ this.count += 1;
+ }
+
+ @action.bound
+ decrement() {
+ this.count -= 1;
+ }
+}
+
+// Instantiate the counter store.
+const counterStore = new CounterStore();
+
+// Create a React Context with the counter store instance.
+export const CounterStoreContext = React.createContext(counterStore);
+export const useCounterStore = () => React.useContext(CounterStoreContext)
diff --git a/website/versioned_docs/version-7.11.4/docs/third-party-mobx/counter-store.tsx b/website/versioned_docs/version-7.11.4/docs/third-party-mobx/counter-store.tsx
new file mode 100644
index 00000000000..76a7b3ee2e4
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/third-party-mobx/counter-store.tsx
@@ -0,0 +1,29 @@
+// counter.store.js
+import React from 'react';
+import { makeObservable, action, observable } from 'mobx';
+
+class CounterStore {
+ count = 0;
+
+ constructor() {
+ makeObservable(this, {
+ count: observable,
+ increment: action.bound,
+ decrement: action.bound
+ })
+ }
+
+ increment() {
+ this.count += 1;
+ }
+
+ decrement() {
+ this.count -= 1;
+ }
+}
+
+// Instantiate the counter store.
+const counterStore = new CounterStore();
+// Create a React Context with the counter store instance.
+export const CounterStoreContext = React.createContext(counterStore);
+export const useCounterStore = () => React.useContext(CounterStoreContext)
diff --git a/website/versioned_docs/version-7.11.4/docs/third-party-mobx/persistent-data.tsx b/website/versioned_docs/version-7.11.4/docs/third-party-mobx/persistent-data.tsx
new file mode 100644
index 00000000000..27db3c2857f
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/third-party-mobx/persistent-data.tsx
@@ -0,0 +1,45 @@
+//counter.store.js
+import React from 'react';
+import { makeObservable, observable, action } from 'mobx';
+import { persist } from 'mobx-persist'; // add this.
+
+class CounterStore {
+ constructor() {
+ makeObservable(this)
+ }
+
+ @persist @observable count = 0; // count is now persistent.
+
+
+ @action.bound
+ increment() {
+ this.count += 1;
+ }
+
+ @action.bound
+ decrement() {
+ this.count -= 1;
+ }
+}
+
+export const counterStore = new CounterStore(); // You need to export the counterStore instance.
+export const CounterStoreContext = React.createContext(counterStore);
+export const useCounterStore = () => React.useContext(CounterStoreContext)
+
+// index.js
+import { Navigation } from 'react-native-navigation';
+import AsyncStorage from '@react-native-community/async-storage';
+import { create } from 'mobx-persist';
+import { counterStore } from './counter.store'; // import the counter store instance.
+
+// Create a store hydration function.
+async function hydrateStores() {
+ const hydrate = create({ storage: AsyncStorage });
+ await hydrate('CounterStore', counterStore);
+}
+
+Navigation.events().registerAppLaunchedListener(() => {
+ hydrateStores().then(() => {
+ // ...register screens and start the app.
+ });
+});
diff --git a/website/versioned_docs/version-7.11.4/docs/third-party-react-context.mdx b/website/versioned_docs/version-7.11.4/docs/third-party-react-context.mdx
new file mode 100644
index 00000000000..cd8b0cc9128
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/third-party-react-context.mdx
@@ -0,0 +1,41 @@
+---
+id: third-party-react-context
+title: React Context API
+sidebar_label: React Context API
+---
+
+## React Context API
+React Context API provides a easy way to pass data through the component tree without having to pass props down
+manually at every level. You can find more about the Context API in [React documentation](https://reactjs.org/docs/context.html).
+
+You can use the React Context API with React Native Navigation with a limitation. In this example, we are going to create a screen which uses the Counter Context.
+
+:::important Limitation
+As RNN screens are not part of the same component tree, updating the values in the shared context does not trigger a re-render across all screens.
+However you can still use the React.Context per RNN screen component tree.
+
+If you need to trigger a re-render across all screens, there are many popular third party libraries such as
+[MobX](third-party-mobx.mdx) or Redux.
+:::
+
+## Create a Counter context
+
+```tsx file=./third-party-react-context/CounterContext.tsx
+```
+
+## Register the screen
+When registering the screen that will be using the Counter Context, we need to wrap it
+with the Counter Context Provider we created earlier.
+
+```tsx file=./third-party-react-context/index.tsx
+```
+
+## Consuming the context
+You can consume the Counter Context any way you want such as `Provider.Consumer` or `React.useContext` like in the
+example below.
+
+```tsx file=./third-party-react-context/App.tsx
+```
+
+```tsx file=./third-party-react-context/App-consumer.tsx
+```
diff --git a/website/versioned_docs/version-7.11.4/docs/third-party-react-context/App-consumer.tsx b/website/versioned_docs/version-7.11.4/docs/third-party-react-context/App-consumer.tsx
new file mode 100644
index 00000000000..2afd9acffa8
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/third-party-react-context/App-consumer.tsx
@@ -0,0 +1,19 @@
+// App.tsx
+import React from 'react';
+import { Button, Text, View } from 'react-native';
+import { CounterContext } from './CounterContext';
+
+export const App = () => {
+ // Using Context consumer
+ return (
+
+ {({ count, increment, decrement }) => (
+
+ {`Clicked ${count} times!`}
+
+
+
+ )}
+
+ );
+};
diff --git a/website/versioned_docs/version-7.11.4/docs/third-party-react-context/App.tsx b/website/versioned_docs/version-7.11.4/docs/third-party-react-context/App.tsx
new file mode 100644
index 00000000000..fe30d133adb
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/third-party-react-context/App.tsx
@@ -0,0 +1,17 @@
+// App.tsx
+import React from 'react';
+import { Button, Text, View } from 'react-native';
+import { CounterContext } from './CounterContext';
+
+export const App = () => {
+ // Using useContext API
+ const { count, increment, decrement } = React.useContext(CounterContext);
+
+ return (
+
+ {`Clicked ${count} times!`}
+
+
+
+ );
+};
diff --git a/website/versioned_docs/version-7.11.4/docs/third-party-react-context/CounterContext.tsx b/website/versioned_docs/version-7.11.4/docs/third-party-react-context/CounterContext.tsx
new file mode 100644
index 00000000000..41ebe57615d
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/third-party-react-context/CounterContext.tsx
@@ -0,0 +1,41 @@
+// CounterContext.tsx
+import React from 'react';
+
+// Declaring the state object globally.
+const initialCounterState = {
+ count: 0,
+};
+
+const counterContextWrapper = (component?: React.Component) => ({
+ ...initialCounterState,
+ increment: () => {
+ initialCounterState.count += 1;
+ component?.setState({ context: counterContextWrapper(component) });
+ },
+ decrement: () => {
+ initialCounterState.count -= 1;
+ component?.setState({ context: counterContextWrapper(component) });
+ },
+});
+
+type Context = ReturnType;
+
+export const CounterContext = React.createContext(counterContextWrapper());
+
+interface State {
+ context: Context;
+}
+
+export class CounterContextProvider extends React.Component {
+ state: State = {
+ context: counterContextWrapper(this),
+ };
+
+ render() {
+ return (
+
+ {this.props.children}
+
+ );
+ }
+}
diff --git a/website/versioned_docs/version-7.11.4/docs/third-party-react-context/index.tsx b/website/versioned_docs/version-7.11.4/docs/third-party-react-context/index.tsx
new file mode 100644
index 00000000000..48c5534f321
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/third-party-react-context/index.tsx
@@ -0,0 +1,14 @@
+// index.tsx
+import { Navigation } from 'react-native-navigation';
+import { CounterContextProvider } from './CounterContext';
+import { App } from './App';
+
+Navigation.registerComponent(
+ 'App',
+ () => (props) => (
+
+
+
+ ),
+ () => App
+);
diff --git a/website/versioned_docs/version-7.11.4/docs/third-party-react-native-vector-icons.mdx b/website/versioned_docs/version-7.11.4/docs/third-party-react-native-vector-icons.mdx
new file mode 100644
index 00000000000..fc00dd8fb62
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/third-party-react-native-vector-icons.mdx
@@ -0,0 +1,41 @@
+---
+id: third-party-react-native-vector-icons
+title: react-native-vector-icons
+sidebar_label: react-native-vector-icons
+---
+
+react-native-vector-icons is a very popular library for using SVG icons in react-native, which keeps large static images
+out of your app while providing crisp icons. Using this library with React Native Navigation is not difficult, but does take
+a few extra steps..
+
+## Using SVG icons in BottomTabs or TopBarButtons
+
+In the example below we will detail a simple app that pre-loads several icons from react-native-vector-icons to be used in our navigation. The example assumes
+you have worked through the [installation](https://github.com/oblador/react-native-vector-icons#installation) and optional steps to support [custom fonts](https://github.com/oblador/react-native-vector-icons#custom-fonts)
+according to the react-native-vector-icons project.
+
+### Step 1 - Choose icons and load image source.
+
+The core issue here is that React Native Navigation wants 'images' for its icons while react-native-vector-icon typically works as a component. However,
+there is a way around this, by using the `getImageSourceSync` method exposed by react-native-vector-icons.
+
+You can use this directly when specifying an `icon` in an react-native-navigation option, or you can group them all together into a central object like so:
+
+```tsx file=./third-party-react-native-vector-icons/NavIcons.tsx
+```
+
+### Step 2 - Launching the app.
+
+We now launch our app in the usual fashion.
+
+```tsx file=./third-party-react-native-vector-icons/index.ts
+```
+
+### Step 3 - Using NavIcons in components.
+
+One of the nice features of React Native Navigation is that it is possible to specify the navigation 'options' on each individual component. This still works with NavIcons
+framework we have setup:
+
+
+```tsx file=./third-party-react-native-vector-icons/ExampleComponent.tsx
+```
diff --git a/website/versioned_docs/version-7.11.4/docs/third-party-react-native-vector-icons/ExampleComponent.tsx b/website/versioned_docs/version-7.11.4/docs/third-party-react-native-vector-icons/ExampleComponent.tsx
new file mode 100644
index 00000000000..5afbfd41b68
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/third-party-react-native-vector-icons/ExampleComponent.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+import { iconsMap } from './NavIcons';
+interface Props {
+ // ... my props
+}
+
+function ExampleComponent({ }: Props) {
+ return (
+
+ An example component
+
+ )
+}
+
+ExampleComponent.options = () => {
+ return {
+ topBar: {
+ title: {
+ text: 'Example Component',
+ },
+ leftButtons: [{
+ icon: iconsMap.add,
+ color: '#888',
+ accessibilityLabel: 'Add',
+ }],
+ },
+ };
+};
+
+export default ExampleComponent;
+
diff --git a/website/versioned_docs/version-7.11.4/docs/third-party-react-native-vector-icons/MyIcon.tsx b/website/versioned_docs/version-7.11.4/docs/third-party-react-native-vector-icons/MyIcon.tsx
new file mode 100644
index 00000000000..6291304a282
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/third-party-react-native-vector-icons/MyIcon.tsx
@@ -0,0 +1,10 @@
+import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
+
+// This file is a renamed "selection.json" file exported in the IcoMoon bundle
+import myIconConfig from 'assets/myicon-config.json';
+
+// Constructing that the font has been properly registered in each platfom build.
+const MyIcon = createIconSetFromIcoMoon(myIconConfig);
+
+export default MyIcon;
+
diff --git a/website/versioned_docs/version-7.11.4/docs/third-party-react-native-vector-icons/NavIcons.tsx b/website/versioned_docs/version-7.11.4/docs/third-party-react-native-vector-icons/NavIcons.tsx
new file mode 100644
index 00000000000..b32ec991127
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/third-party-react-native-vector-icons/NavIcons.tsx
@@ -0,0 +1,20 @@
+import { forEach, keys, map } from 'lodash';
+
+import MyIcon from './MyIcon';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import { Icon } from 'react-native-vector-icons/Icon';
+
+const iconsMap: {
+ [key: string]: number;
+} = {
+ book: MyIcon.getImageSourceSync('book', 30, '#888'),
+ gear: MyIcon.getImageSourceSync('gear', 30, '#888'),
+ 'arrow-back': MaterialIcons.getImageSourceSync('arrow-back', 24, '#888'),
+ add: MaterialIcons.getImageSourceSync('add', 28, '#888'),
+};
+
+export {
+ iconsMap,
+};
+
+
diff --git a/website/versioned_docs/version-7.11.4/docs/third-party-react-native-vector-icons/index.ts b/website/versioned_docs/version-7.11.4/docs/third-party-react-native-vector-icons/index.ts
new file mode 100644
index 00000000000..151c8b93f3f
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/third-party-react-native-vector-icons/index.ts
@@ -0,0 +1,61 @@
+import { Navigation } from 'react-native-navigation';
+
+import { iconsMap } from './NavIcons';
+
+Navigation.events().registerAppLaunchedListener(() => {
+ registerScreens();
+ const firstTab = {
+ component: {
+ name: 'MyFirstTab',
+ options: {
+ topBar: {
+ title: {
+ text: 'First Tab',
+ },
+ rightButtons: [{
+ icon: iconsMap.add,
+ id: 'add',
+ color: 'blue',
+ accessibilityLabel: 'Add item',
+ }],
+ },
+ },
+ },
+ };
+ const secondTab = {
+ component: {
+ name: 'MySecondTab',
+ options: {
+ topBar: {
+ title: {
+ text: 'Second Tab',
+ },
+ },
+ },
+ },
+ };
+ Navigation.setRoot({
+ root: {
+ bottomTabs: {
+ children: [{
+ stack: {
+ children: [firstTab],
+ bottomTab: {
+ text: 'First',
+ icon: iconsMap.book,
+ },
+ },
+ },
+ {
+ stack: {
+ children: [secondTab],
+ bottomTab: {
+ text: 'Second',
+ icon: iconsMap.gear,
+ },
+ },
+ }],
+ },
+ },
+ });
+});
diff --git a/website/versioned_docs/version-7.11.4/docs/third-party-typescript.mdx b/website/versioned_docs/version-7.11.4/docs/third-party-typescript.mdx
new file mode 100644
index 00000000000..2d664da35bf
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/third-party-typescript.mdx
@@ -0,0 +1,50 @@
+---
+id: third-party-typescript
+title: TypeScript
+sidebar_label: TypeScript
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+## Strongly typed components
+
+Both functional and class components can be typed to get the benefits of strongly typed options and props.
+
+
+
+
+
+```tsx file=./third-party-typescript/strongly-typed-components-class.tsx
+```
+
+
+
+
+
+```tsx file=./third-party-typescript/strongly-typed-components-fn.tsx
+```
+
+
+
+
+
+## Typed props in commands
+
+Arguments are passed to components view the `passProp`. This is a common source for errors as these props tend to change overtime. Luckily we can type the passProps property to avoid these regressions. The example below shows how to declare types for passProps when pushing a screen.
+
+```tsx file=./third-party-typescript/typed-props-in-commands.tsx
+```
+
+The following commands accept typed passProps:
+
+- push
+- setStackRoot
+- showModal
+- showOverlay
diff --git a/website/versioned_docs/version-7.11.4/docs/third-party-typescript/strongly-typed-components-class.tsx b/website/versioned_docs/version-7.11.4/docs/third-party-typescript/strongly-typed-components-class.tsx
new file mode 100644
index 00000000000..c1e86d3d705
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/third-party-typescript/strongly-typed-components-class.tsx
@@ -0,0 +1,27 @@
+import { NavigationComponent, NavigationComponentProps } from 'react-native-navigation';
+
+interface Props extends NavigationComponentProps {
+ age: number;
+}
+
+export default class MyComponent extends NavigationComponent {
+ // Options are strongly typed
+ static options() {
+ return {
+ statusBar: {
+ // Some options are of union type. We're using `as const` to let the-
+ // TS compiler know this value is not a regular string
+ style: 'dark' as const,
+ },
+ topBar: {
+ title: {
+ text: 'My Screen',
+ },
+ },
+ };
+ }
+
+ constructor(props: Props) {
+ super(props);
+ }
+}
diff --git a/website/versioned_docs/version-7.11.4/docs/third-party-typescript/strongly-typed-components-fn.tsx b/website/versioned_docs/version-7.11.4/docs/third-party-typescript/strongly-typed-components-fn.tsx
new file mode 100644
index 00000000000..b4b18274a4e
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/third-party-typescript/strongly-typed-components-fn.tsx
@@ -0,0 +1,20 @@
+import { View } from 'react-native';
+import { NavigationFunctionComponent } from 'react-native-navigation';
+
+interface Props {
+ name: string;
+}
+
+const MyFunctionalComponent: NavigationFunctionComponent = ({ componentId, name }) => {
+ return ;
+};
+
+// Static options are also supported!
+MyFunctionalComponent.options = {
+ topBar: {
+ title: {
+ text: 'Hello functional component',
+ },
+ },
+};
+export default MyFunctionalComponent;
diff --git a/website/versioned_docs/version-7.11.4/docs/third-party-typescript/typed-props-in-commands.tsx b/website/versioned_docs/version-7.11.4/docs/third-party-typescript/typed-props-in-commands.tsx
new file mode 100644
index 00000000000..f15c806589e
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/third-party-typescript/typed-props-in-commands.tsx
@@ -0,0 +1,16 @@
+import { Navigation } from 'react-native-navigation';
+
+interface Props {
+ name: string;
+}
+
+Navigation.push(componentId, {
+ component: {
+ name: 'MyComponent',
+ passProps: {
+ name: 'Bob',
+ // @ts-expect-error
+ color: 'red', // Compilation error! color isn't declared in Props
+ },
+ },
+});
diff --git a/website/versioned_sidebars/version-7.11.4-sidebars.json b/website/versioned_sidebars/version-7.11.4-sidebars.json
new file mode 100644
index 00000000000..855b65a613d
--- /dev/null
+++ b/website/versioned_sidebars/version-7.11.4-sidebars.json
@@ -0,0 +1,342 @@
+{
+ "version-7.11.4/docs": [
+ {
+ "collapsed": true,
+ "type": "category",
+ "label": "Getting Started",
+ "items": [
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/before-you-start"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/installing"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/playground-app"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/showcases"
+ }
+ ]
+ },
+ {
+ "collapsed": true,
+ "type": "category",
+ "label": "Using the app",
+ "items": [
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/app-launch"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/basic-navigation"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/advanced-navigation"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/screen-lifecycle"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/passing-data-to-components"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/functionalComponents"
+ }
+ ]
+ },
+ {
+ "collapsed": true,
+ "type": "category",
+ "label": "Layouts",
+ "items": [
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/stack"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/bottomTabs"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/sideMenu"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/externalComponent"
+ }
+ ]
+ },
+ {
+ "collapsed": true,
+ "type": "category",
+ "label": "Hierarchy",
+ "items": [
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/root"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/modal"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/overlay"
+ }
+ ]
+ },
+ {
+ "collapsed": true,
+ "type": "category",
+ "label": "Styling",
+ "items": [
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/style-options"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/style-theme"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/style-statusBar"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/style-orientation"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/style-animations"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/style-fonts"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/style-constants"
+ }
+ ]
+ },
+ {
+ "collapsed": true,
+ "type": "category",
+ "label": "Third party integration",
+ "items": [
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/community-libraries"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/third-party-typescript"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/third-party-mobx"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/third-party-react-context"
+ }
+ ]
+ },
+ {
+ "collapsed": true,
+ "type": "category",
+ "label": "Meta",
+ "items": [
+ {
+ "type": "doc",
+ "id": "version-7.11.4/docs/meta-contributing"
+ }
+ ]
+ }
+ ],
+ "version-7.11.4/api": [
+ {
+ "collapsed": true,
+ "type": "category",
+ "label": "Navigation",
+ "items": [
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/component"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/root"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/stack"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/modal"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/overlay"
+ }
+ ]
+ },
+ {
+ "collapsed": true,
+ "type": "category",
+ "label": "Layouts",
+ "items": [
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/layout-layout"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/layout-component"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/layout-stack"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/layout-bottomTabs"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/layout-sideMenu"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/layout-splitView"
+ }
+ ]
+ },
+ {
+ "collapsed": true,
+ "type": "category",
+ "label": "Options",
+ "items": [
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/options-api"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/options-root"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/options-bottomTabs"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/options-bottomTab"
+ },
+ {
+ "collapsed": true,
+ "type": "category",
+ "label": "Stack",
+ "items": [
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/options-stack"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/options-title"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/options-subtitle"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/options-background"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/options-backButton"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/options-hardwareBackButton"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/options-button"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/options-iconInsets"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/options-iconBackground"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/options-largeTitle"
+ }
+ ]
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/options-statusBar"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/options-layout"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/options-modal"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/options-navigationBar"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/options-overlay"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/options-sideMenu"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/options-sideMenuSide"
+ },
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/options-splitView"
+ }
+ ]
+ },
+ {
+ "collapsed": true,
+ "type": "category",
+ "label": "Events",
+ "items": [
+ {
+ "type": "doc",
+ "id": "version-7.11.4/api/events"
+ }
+ ]
+ }
+ ]
+}
diff --git a/website/versions.json b/website/versions.json
index de8c67697ba..878e12e1303 100644
--- a/website/versions.json
+++ b/website/versions.json
@@ -1,4 +1,5 @@
[
+ "7.11.4",
"7.11.2",
"7.7.0",
"6.12.2"
})
+
+})
+
+| Type | Required | Platform | Default |
+| --------------------- | -------- | -------- | ------- |
+| Color | No | Android | 'black' |
\ No newline at end of file
diff --git a/website/versioned_docs/version-7.11.4/api/options-overlay.mdx b/website/versioned_docs/version-7.11.4/api/options-overlay.mdx
new file mode 100644
index 00000000000..ee4bf5e8750
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/api/options-overlay.mdx
@@ -0,0 +1,29 @@
+---
+id: options-overlay
+title: Overlay
+sidebar_label: Overlay
+---
+
+Controls overlay options
+
+```js
+const options = {
+ overlay: {
+
+ }
+}
+```
+
+### `interceptTouchOutside`
+Controls whether touch events outside the bounds of the overlay are to be handled by content behind the overlay. When set to true, touch events will **not** pass through to the underlying content.
+
+| Type | Required | Platform |
+| ----- | -------- | -------- |
+| boolean | No | Both |
+
+### `handleKeyboardEvents`
+Overlays on iOS don't handle keyboard events by default. If your Overlay contains a TextInput component, you'll want to enable this option so that TextInput responds to keyboard events.
+
+| Type | Required | Platform |
+| ------ | -------- | -------- |
+| boolean | No | iOS |
diff --git a/website/versioned_docs/version-7.11.4/api/options-preview.mdx b/website/versioned_docs/version-7.11.4/api/options-preview.mdx
new file mode 100644
index 00000000000..f51ec404222
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/api/options-preview.mdx
@@ -0,0 +1,5 @@
+---
+id: options-preview
+title: Preview (iOS)
+sidebar_label: Preview (iOS)
+---
diff --git a/website/versioned_docs/version-7.11.4/api/options-root.mdx b/website/versioned_docs/version-7.11.4/api/options-root.mdx
new file mode 100644
index 00000000000..d9d0a3c75d2
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/api/options-root.mdx
@@ -0,0 +1,173 @@
+---
+id: options-root
+title: The options object
+sidebar_label: Options object
+---
+
+```js
+const options = {
+ bottomTab,
+ bottomTabs,
+ topBar,
+ layout,
+ sideMenu,
+ overlay,
+ modal,
+ preview,
+ navigationBar
+};
+```
+
+## `bottomTab`
+
+Controls the bottom tab icon, font, color, and more.
+
+| Type | Required | Platform |
+| ------------------------------------- | -------- | -------- |
+| [BottomTabOptions](options-bottomTab.mdx) | No | Both |
+
+## `bottomTabs`
+
+Controls the bottom tabs container.
+
+| Type | Required | Platform |
+| --------------------------------------- | -------- | -------- |
+| [BottomTabsOptions](options-bottomTabs.mdx) | No | Both |
+
+## `topBar`
+
+Controls the Stack top bar styling.
+
+| Type | Required | Platform |
+| ------------------------------ | -------- | -------- |
+| [TopBarOptions](options-stack.mdx) | | No |
+
+## `statusBar`
+
+Controls the system status bar styling.
+
+| Type | Required | Platform |
+| ------------------------------------- | -------- | -------- |
+| [StatusBarOptions](options-statusBar.mdx) | No | Both |
+
+## `layout`
+
+| Type | Required | Platform |
+| ------------------------------- | -------- | -------- |
+| [LayoutOptions](options-layout.mdx) | No | Both |
+
+## `sideMenu`
+
+| Type | Required | Platform |
+| ----------------------------------- | -------- | -------- |
+| [SideMenuOptions](options-sideMenu.mdx) | No | Both |
+
+## `overlay`
+
+| Type | Required | Platform |
+| --------------------------------- | -------- | -------- |
+| [OverlayOptions](options-overlay.mdx) | No | Both |
+
+## `animations`
+
+| Type | Required | Platform |
+| --------------------------------------- | -------- | -------- |
+| [AnimationsOptions](options-animations.mdx) | No | Both |
+
+## `modal`
+
+| Type | Required | Platform |
+| ----------------------------- | -------- | -------- |
+| [ModalOptions](options-modal.mdx) | No | Both |
+
+## `preview`
+
+| Type | Required | Platform |
+| --------------------------------- | -------- | -------- |
+| [PreviewOptions](options-preview.mdx) | No | iOS |
+
+## `splitView`
+
+| Type | Required | Platform |
+| ------------------------------------- | -------- | -------- |
+| [SplitViewOptions](options-splitView.mdx) | No | iOS |
+
+## `fab`
+
+| Type | Required | Platform |
+| ------------------ | -------- | -------- |
+| [Fab](options-fab.mdx) | No | Android |
+
+## `modalPresentationStyle`
+
+Configure the presentation style of the modal.
+
+| Type | Required | Platform |
+| ------------------------------------------------------------------------------------------------------- | -------- | -------- |
+| enum('formSheet', 'pageSheet', 'fullScreen', 'overFullScreen', 'overCurrentContext', 'popOver', 'none') | No | Both |
+
+#### Styles supported on both platforms
+
+- **overCurrentContext** - Display the modal and do not remove previous content when the show animation ends.
+- **none** - default system presentation style
+
+#### Styles supported only on iOS
+
+- **fullScreen** - The view covers the underlying content completely.
+- **pageSheet** - partially cover the underlying content.
+- **formSheet** - display content centered in the screen.
+- **overFullScreen** - display the modal in full screen mode and do not remove previous content when the show animation ends.
+- **popOver** - Center content on screen and dim the content behind it.
+
+The default presentation style is different on each platform.
+
+| iOS | Android |
+| ---------------------------------------------------------------------------------------- | ------------ |
+| })
+
+## Replacing the root
+
+Up until now, we've discussed how to navigate within the same layout structure. We'll now learn how to replace the entire layout structure to display a new Root. A real life example for this use case would be, for instance, if you need to switch from a login screen to the app's main root. Replacing the root fits this use case since we'd like to discard the previous root (login root) entirely when switching to the main root.
+
+To demonstrate this, we'll make the following changes to our code:
+
+1. Add a login screen with a login button.
+2. When the button is clicked, we will switch to the main root.
+3. Replace our current root with the login screen. We'll also extract both roots to variables to improve code readability.
+
+```jsx
+const LoginScreen = () => {
+ return (
+ })
+
+## Specifying options
+
+You can specify options of each layout (Stack, component pushed into a stack, etc.) to configure various parameters like the TopBar title or color. Lets spice things up by changing the TopBar color and while we're at it, also move the title to the TopBar.
+
+Lets change the Home screen declaration to the following and reload the app to see the changes.
+```jsx
+const HomeScreen = (props) => {
+ return (
+ })
+
+## Navigating in a stack
+
+In the previous section we created a stack and initialized it with a single child. We'll now learn how to add another child to the stack. From now on, we'll call the action of adding children to the stack 'push', and removing children - 'pop'.
+
+In order to push another screen to the stack, we will add a button to the home screen and call `Navigation.push`. The 'push' command accepts two parameters, the first is the id used to indicate into which stack to push the screen and the second is the screen we're pushing. After pushing a screen, a back button is added automatically to the TopBar so the users can navigate easily back to the previous screen.
+
+You can read more about the stack layout [here](docs-stack.mdx) or dive right into the API [here](../api/layout-stack).
+
+:::info componentId
+Each React component registered with `Navigation.registerComponent` is assigned a unique `componentId` by Navigation. This unique id is used with Navigation commands (like the push command) to indicate into which stack we'd like to push. In this case, by using the componentId of the Home screen, we are telling Navigation to push into the stack containing the Home screen.
+:::
+
+```js
+Navigation.push(props.componentId, {
+ component: {
+ name: 'Settings', // Push the screen registered with the 'Settings' key
+ options: { // Optional options object to configure the screen
+ topBar: {
+ title: {
+ text: 'Settings' // Set the TopBar title of the new Screen
+ }
+ }
+ }
+ }
+});
+```
+
+Lets change our code to the following snippet below and reload the app. Now our Home should contain a button which when pressed, pushes a new screen into the stack. We've successfully navigated to a new 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 (
+ })
+
+## App theme
+
+Our app is growing and already contains two screens. This introduces a new problem - while the home screen has a nice purple TopBar, our settings screen seems pretty dull as it still uses the default system look and feel.
+
+Currently, our style declaration applies only to the Home screen, so lets apply it to all of our screens by using `Navigation.setDefaultOptions`.
+
+```js
+Navigation.setDefaultOptions({
+ statusBar: {
+ backgroundColor: '#4d089a'
+ },
+ topBar: {
+ title: {
+ color: 'white'
+ },
+ backButton: {
+ color: 'white'
+ },
+ background: {
+ color: '#4d089a'
+ }
+ }
+});
+```
+
+We need to add this snippet before registering the `registerAppLaunchedListener`. This way we ensure our theme is applied when our root is set. Our code should now look like this:
+
+```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 (
+ })
+
+## Summary
+
+We've learned the basics of navigation with React Native Navigation by implementing a stack and pushing screens into it.
+We've also learned a few methods of applying styles to our screens and layouts with the Options mechanism.
+
+* Navigation.setRoot() sets the root layout of our app. The initial root has to be set from an `AppLaunchedEvent` callback.
+* Options can be applied directly to components.
+* Screens can be added to a stack with the `Navigation.push()` command.
+* Components registered with `Navigation.registerComponent()` are injected with a `componentId` which is used when navigating.
+* Themes are applied via the `Navigation.setDefaultOptions()` command.
+
+In the next section we'll explore a more advance navigation patterns using BottomTabs layout and also see how, and why, multiple roots are set.
diff --git a/website/versioned_docs/version-7.11.4/docs/docs-before-you-start.mdx b/website/versioned_docs/version-7.11.4/docs/docs-before-you-start.mdx
new file mode 100644
index 00000000000..e5483f3ba8e
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/docs-before-you-start.mdx
@@ -0,0 +1,12 @@
+---
+id: before-you-start
+title: Before you start
+sidebar_label: Before you start
+---
+
+React Native Navigation is a module, dependent on and intended to be used alongside [React Native](https://github.com/facebook/react-native), so some experience with it and knowledge of core concepts is required. If you feel the need, you can start with their [getting started](https://reactnative.dev/docs/getting-started) tutorial, and then come back here when you're ready.
+
+We also assume you are working on a Mac with XCode and Android Studio installed and setup. You can also make it work in a Linux distribution, of course, but in that case bear in mind that some sections of the docs that deal with iOS might not be relevant to you.
+
+If you want to dig right into it, start with [installing](docs-Installing.mdx) the library. If you're just looking around, we suggest checking out [basic navigation](docs-basic-navigation.mdx) first.
+
diff --git a/website/versioned_docs/version-7.11.4/docs/docs-bottomTabs.mdx b/website/versioned_docs/version-7.11.4/docs/docs-bottomTabs.mdx
new file mode 100644
index 00000000000..d7ae4bb0714
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/docs-bottomTabs.mdx
@@ -0,0 +1,142 @@
+---
+id: bottomTabs
+title: Bottom tabs
+sidebar_label: Bottom tabs
+---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+Bottom tabs refers to a row of links, displayed at the bottom of the screen, and is referred to as "Tab Bar" in iOS and as "Bottom Navigation Bar" on Android. Usually these are intended to be used to switch between top-level content views with a single tap.
+
+## Creating bottom tabs
+
+BottomTabs provide flat navigation and access to up to five equally important top-level root destinations. While any type of layout can be displayed in a tab, typically, [Stacks](stack) are used, since they allow for vertical navigation within a tab.
+
+### Example
+Lets see how to create a simple BottomTabs layout. There are a few things to notice here:
+1. Each child represents a tab on the screen.
+2. The root layout for each tab is a stack to allow for vertical navigation within the tab.
+3. Each stack declares `bottomTab` options which are used to configure the tab's text, icon, color etc.
+
+```js
+bottomTabs: {
+ id: 'BOTTOM_TABS_LAYOUT',
+ children: [
+ {
+ stack: {
+ id: 'HOME_TAB',
+ children: [
+ {
+ component: {
+ id: 'HOME_SCREEN',
+ name: 'HomeScreen'
+ }
+ }
+ ],
+ options: {
+ bottomTab: {
+ icon: require('./home.png')
+ }
+ }
+ }
+ },
+ {
+ stack: {
+ id: 'PROFILE_TAB',
+ children: [
+ {
+ component: {
+ id: 'PROFILE_SCREEN',
+ name: 'ProfileScreen'
+ }
+ }
+ ],
+ options: {
+ bottomTab: {
+ icon: require('./profile.png')
+ }
+ }
+ }
+ }
+ ]
+}
+```
+
+Once we run this code, our BottomTabs should look like this:
+})
+
+## Selecting Tabs Programmatically
+Tabs can be selected programmatically by updating the `currentTabIndex` or `currentTabId` options.
+
+We'll use the BottomTabs layout showcased [above](bottomTabs#example) to demonstrate programmatic tab selection.
+
+### Selecting a tab by index
+The following mergeOptions command will select the second tab. We're passing the id of our BottomTabs layout, but we could also use the id of any of the child components, for example `PROFILE_TAB` or `PROFILE_SCREEN`.
+
+```js
+Navigation.mergeOptions('BOTTOM_TABS_LAYOUT', {
+ bottomTabs: {
+ currentTabIndex: 1
+ }
+});
+```
+
+### Selecting a tab by id
+Tabs can also be selected by id (`componentId`). This is particularly useful in cases where you don't know in which tab a screen is contained.
+For example, if invoked from one of the child components, `HOME_SCREEN` or `SETTINGS_SCREEN`, the following merge command will select the tab containing the child.
+
+```js
+Navigation.mergeOptions(this.props.componentId, {
+ bottomTabs: {
+ currentTabId: this.props.componentId
+ }
+});
+```
+
+## Changing BottomTabs visibility
+
+The `visible` property is used to control the BottomTab visibility. Visibility can be toggled dynamically using the `mergeOptions` command.
+```js
+Navigation.mergeOptions(componentId, {
+ bottomTabs: {
+ visible: false
+ },
+});
+```
+
+Visibility can also be changed when pushing screens.
+```js
+Navigation.push(componentId, {
+ component: {
+ name: 'pushedScreen',
+ options: {
+ bottomTabs: {
+ visible: false
+ }
+ }
+ }
+});
+```
+
+## Updating tab options dynamically
+
+To update a tab option, like an icon, text or color, simply call `mergeOptions` with new options using the id of a component or layout contained in the tab you wish to update.
+
+For instance, in the example below we update the color of a specific tab:
+```js
+Navigation.mergeOptions(componentId, {
+ bottomTab: {
+ iconColor: 'red',
+ textColor: 'red'
+ },
+});
+```
+
+## Controlling tab loading
+
+By default, all tabs are mounted at the same time. This can have a negative impact on performance since screens which are not visible to the user are mounted.
+
+The order in which tabs are mounted can be configured with the `tabsAttachMode` option:
+
+* `together` - all tabs are mounted at the same time, this is the default behavior.
+* `afterInitialTab` - after initial tab is mounted, other tabs are mounted.
+* `onSwitchToTab` - initial tab is mounted, other tabs are mounted when the user navigates to them for the first time.
diff --git a/website/versioned_docs/version-7.11.4/docs/docs-externalComponent.mdx b/website/versioned_docs/version-7.11.4/docs/docs-externalComponent.mdx
new file mode 100644
index 00000000000..652355da21d
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/docs-externalComponent.mdx
@@ -0,0 +1,100 @@
+---
+id: externalComponent
+title: External Component
+sidebar_label: External Component
+---
+
+The ExternalComponent layout allows you to display any native view as a screen. To use the External Component we'll need to register it with a string name. This name is then used when declaring layouts in JS.
+
+## Android
+### Implementing the native component
+When it comes to implementing an external component on Android, you have two choices. We recommend you use a base class extending `View`. If you're required to use Fragments, you'll find an basic example below.
+
+#### ViewGroup
+```java
+public class ViewGroupComponent implements ExternalComponent {
+ private final FrameLayout content;
+
+ ViewGroupComponent(FragmentActivity activity, JSONObject props) {
+ content = new FrameLayout(activity);
+ }
+
+ @Override
+ public View asView() {
+ return content;
+ }
+}
+```
+
+#### Fragment
+
+Using a Fragment as an external component is done by attaching the Fragment to a FrameLayout, and returning the FrameLayout from the `asView()` method of the ExternalComponent.
+
+```java
+public class FragmentComponent implements ExternalComponent {
+ private final FrameLayout content;
+
+ FragmentComponent(FragmentActivity activity, JSONObject props) {
+ // Create the FrameLayout to which we'll attach our Fragment to
+ content = new FrameLayout(activity);
+ content.setId(R.id.fragment_screen_content);
+ // Attach the Fragment to the FrameLayout
+ activity.getSupportFragmentManager()
+ .beginTransaction()
+ .add(R.id.fragment_screen_content, createFragment(props))
+ .commitAllowingStateLoss();
+ }
+
+ private FragmentScreen createFragment(JSONObject props) {
+ FragmentScreen fragment = new FragmentScreen();
+ // Pass the props sent from Js in a bundle
+ Bundle args = new Bundle();
+ args.putString("text", props.optString("text", ""));
+ fragment.setArguments(args);
+ return fragment;
+ }
+
+ @Override
+ public View asView() {
+ return content;
+ }
+}
+```
+
+### Registering the component
+```java
+public class MainApplication extends NavigationApplication {
+ @Override
+ public void onCreate() {
+ super.onCreate();
+ registerExternalComponent("MyExternalComponent", new FragmentCreator());
+ }
+}
+```
+
+## iOS
+### ViewController registration
+
+```objectivec
+[ReactNativeNavigation registerExternalComponent:@"MyExternalComponent" callback:^UIViewController *(NSDictionary *props, RCTBridge *bridge) {
+ return [[ExternalViewController alloc] initWithProps:props];
+}];
+
+```
+## Using the component from JS
+Once you've registered the external component in native, you can use it in your layout declarations.
+For example, to show an external component modally:
+```js
+Navigation.showModal({
+ externalComponent: {
+ name: 'MyExternalComponent',
+ passProps: {
+ text: "Text from JS"
+ }
+ }
+});
+```
+
+:::caution
+props passed to external components are sent over the bridge and therefore must be serializable.
+:::
\ No newline at end of file
diff --git a/website/versioned_docs/version-7.11.4/docs/docs-functional-components.mdx b/website/versioned_docs/version-7.11.4/docs/docs-functional-components.mdx
new file mode 100644
index 00000000000..4f063c8e7bb
--- /dev/null
+++ b/website/versioned_docs/version-7.11.4/docs/docs-functional-components.mdx
@@ -0,0 +1,88 @@
+---
+id: functionalComponents
+title: Using functional components as screens
+sidebar_label: Using functional components
+---
+
+Both class components and functional components can be used as screens. There is no performance difference between the two. Deciding which type component to use boils down to user preference.
+
+## Declaring static options
+Static options are a great way to declare options close to where they are used. Declaring static options is done by first declaring the functional component, and then declaring the options on the function component.
+```jsx
+const MyScreen = (props) => {
+ return (
+ })
+ })
+ })
+
+```jsx
+const React = require('react');
+const { Text, Button, View } = require('react-native');
+const { Navigation } = require('react-native-navigation');
+
+function Alert({ componentId, title, message }) {
+ const dismiss = () => Navigation.dismissOverlay(componentId);
+
+ return (
+ })
+
+```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 (
+ })
+})
+
+### Step 1 - Create a Counter store
+
+Let's first create a counter store using MobX. Our store has a single `count` object and two methods to increment and decrement it.
+
+