diff --git a/404.html b/404.html index 3caf3df0ed..d37c194cdf 100644 --- a/404.html +++ b/404.html @@ -7,23 +7,23 @@ Page Not Found | React Native Navigation - - - - - - - + + + + + + +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- - - - - - - + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/component/index.html b/6.12.2/api/component/index.html index 481f1c3ae9..75d8b7f95d 100644 --- a/6.12.2/api/component/index.html +++ b/6.12.2/api/component/index.html @@ -7,28 +7,28 @@ Component | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Component

registerComponent#

Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component or React.PureComponent. It can also be a HOC to provide context (or a Redux store) or a functional component. Similar to React Native's AppRegistry.registerComponent.

Parameters#

NameRequiredTypeDescription
componentNameYesstringUnique component name - not to be confused with componentId
componentProviderYesFunctionAnonymous function that returns the React component to register, OR the component wrapped with Providers
concreteComponentProviderNoFunctionAnonymous function that returns the concrete React component. If your component is wrapped with Providers, this must be an instance of the concrete component.

Examples#

Registering a component#
Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
Registering a component wrapped with Providers#
import { Provider } from 'react-redux';
const store = createStore();
Navigation.registerComponent(`navigation.playground.MyScreen`, () => (props) =>
<Provider store={store}>
<MyScreen {...props} />
</Provider>,
() => MyScreen)
);

setLazyComponentRegistrator#

Pass a function that will allow you to register a component lazily. When encountering an unknown component name, this function will be called, giving you a chance to register the component before an error is thrown.

Parameters#

NameRequiredTypeDescription
lazyRegistratorFnYes(lazyComponentRequest: stringnumber) => void

Example#

Navigation.setLazyComponentRegistrator((componentName) => {
if (componentName === 'navigation.playground.LazyScreen') {
Navigation.registerComponent(Screens.LazilyRegisteredScreen, () => LazyScreen);
}
});

updateProps#

Update props of a component registered with registerComponent. Updating props triggers the component lifecycle methods related to updating.

Parameters#

NameRequiredTypeDescription
componentIdYesstringUnique component id
optionsYesobjectprops object to pass to the component

Example#

Navigation.updateProps('MY_COMPONENT', {
// props to pass to the component
};
important

updateProps is called with a componentId. This is the same unique id components have in props. Don't confuse it with the componentName we use when registering components with Navigation.registerComponent.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/events/index.html b/6.12.2/api/events/index.html index 876fd3511b..37075aa3ab 100644 --- a/6.12.2/api/events/index.html +++ b/6.12.2/api/events/index.html @@ -7,15 +7,15 @@ Events | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -42,14 +42,14 @@
searchBarCancelPressed() {}
}

previewCompleted (iOS 11.4+ only)#

Called when preview peek is completed.

class MyComponent extends Component {
componentDidMount() {
this.navigationEventListener = Navigation.events().bindComponent(this);
}
componentWillUnmount() {
// Not mandatory
if (this.navigationEventListener) {
this.navigationEventListener.remove();
}
}
previewCompleted({ previewComponentId }) {}
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/layout-bottomTabs/index.html b/6.12.2/api/layout-bottomTabs/index.html index 54ce046d71..734e0bda7d 100644 --- a/6.12.2/api/layout-bottomTabs/index.html +++ b/6.12.2/api/layout-bottomTabs/index.html @@ -7,27 +7,27 @@ Bottom Tabs | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Bottom Tabs

A container view for managing a radio-style selection interface, where a selection determines which child view controller to display.

{
id: 'BOTTOM_TABS_LAYOUT',
children: [
{
component: {
id: 'HOME_SCREEN',
name: 'HomeScreen'
}
},
{
stack: {
id: 'PROFILE_TAB',
children: [
{
component: {
id: 'PROFILE_SCREEN',
name: 'ProfileScreen'
}
}
]
}
}
]
}

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation api, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

children#

TypeRequiredDescription
Layout[]YESChild layouts of any kind.

options#

TypeRequiredDescription
OptionsNodynamic options which will apply to all screens in bottomTabs
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/layout-component/index.html b/6.12.2/api/layout-component/index.html index 3ab7c3955d..adb4cd9cb3 100644 --- a/6.12.2/api/layout-component/index.html +++ b/6.12.2/api/layout-component/index.html @@ -7,27 +7,27 @@ Component | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Component

{
name: "MyRegisteredComponent";
}

name#

TypeRequiredDescription
stringYesKey used when registering the component with Navigation.registerComponent.

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation api, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

options#

TypeRequiredDescription
OptionsNodynamic options for the component

alignment#

TypeRequiredDescription
enum('center', 'fill')NoThis option is relevant only to title components. fill will make the component stretch and consume all available space in the TopBar while center will center it in the middle of the TopBar. center is the default option in iOS while fill is the default for Android.

waitForRender#

TypeRequiredDescription
booleanNoWait for this component to fully render before showing the screen.

This option is useful for ensuring that both a child screen pushed into the stack and all of the TopBar components (title, background and buttons) are displayed to the user at the same time.

To enable this option, waitForRender in the relevant screen animation option needs to be enabled as well.

caution

This option might introduce delays when pushing screens and should be used with caution.

passProps#

TypeRequiredDescription
objectNoA JavaScript object with props accessible inside the component using this.props.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/layout-layout/index.html b/6.12.2/api/layout-layout/index.html index ed2e280334..1767716574 100644 --- a/6.12.2/api/layout-layout/index.html +++ b/6.12.2/api/layout-layout/index.html @@ -7,27 +7,27 @@ Layout | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Layout

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation API, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

options#

TypeRequiredDescription
OptionsNodynamic options for the layout

children#

TypeRequiredDescription
Layout[]YesChild layouts of any kind.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/layout-sideMenu/index.html b/6.12.2/api/layout-sideMenu/index.html index 17518d88f1..9bc7e62c32 100644 --- a/6.12.2/api/layout-sideMenu/index.html +++ b/6.12.2/api/layout-sideMenu/index.html @@ -7,27 +7,27 @@ Side Menu | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Side Menu

This layout allows implementing sidemenus, which can be opened by swiping from one side towards the other side.

{
left: {
component: {}
},
center: {
stack: {
options: {},
children: [{
component: {}
}]
}
},
right: {
component: {}
}
}

center#

TypeRequiredDescription
LayoutYesCenter component, contains the main application.

left#

TypeRequiredDescription
LayoutNoContains the left component layout.

right#

TypeRequiredDescription
LayoutNoContains the right component layout.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/layout-splitView/index.html b/6.12.2/api/layout-splitView/index.html index cc492c2e25..38b6072865 100644 --- a/6.12.2/api/layout-splitView/index.html +++ b/6.12.2/api/layout-splitView/index.html @@ -7,28 +7,28 @@ SplitView | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

SplitView

A container view controller implementing a master-detail interface. See UISplitViewController docs. Currently implemented only in iOS.

{
id: 'PROFILE_TAB',
master: {
component: {
id: 'MASTER_SCREEN',
name: 'MasterScreen'
}
},
detail: {
component: {
id: 'DETAIL_SCREEN',
name: 'DetailScreen'
}
}
}

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation api, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

master#

TypeRequiredDescription
LayoutYESSet master layout (the smaller screen, sidebar)

detail#

TypeRequiredDescription
LayoutYESSet detail layout (the larger screen, flexes)

options#

TypeRequiredDescription
OptionsNodynamic options which will apply to all screens
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/layout-stack/index.html b/6.12.2/api/layout-stack/index.html index da74d0e615..4e33aa3263 100644 --- a/6.12.2/api/layout-stack/index.html +++ b/6.12.2/api/layout-stack/index.html @@ -7,27 +7,27 @@ Stack | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Stack

A stack is a container layout promoting a hierarchical navigation. It is used to navigate between screens at consecutive levels of hierarchy, steps in a flow or across an app.

{
id: 'PROFILE_TAB',
children: [
{
component: {
id: 'PROFILE_SCREEN',
name: 'ProfileScreen'
}
}
]
}

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation api, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

children#

TypeRequiredDescription
Layout[]YESChild layouts of any kind.

options#

TypeRequiredDescription
OptionsNoOptions that will apply to all screens in stack
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/modal/index.html b/6.12.2/api/modal/index.html index 27616d466e..500c70fd49 100644 --- a/6.12.2/api/modal/index.html +++ b/6.12.2/api/modal/index.html @@ -7,27 +7,27 @@ Modal | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Modal

showModal()#

Show a screen as a modal.

Parameters#

NameRequiredTypeDescription
layoutYesLayoutAny type of layout. BottomTabs, Stack, SideMenu, Component
Navigation.showModal({
stack: {
children: [{
component: {
name: 'example.ModalScreen',
passProps: {
text: 'stack with one child'
},
options: {
topBar: {
title: {
text: 'Modal'
}
}
}
}
}]
}
});

dismissModal()#

Dismiss the current modal.

Parameters#

NameRequiredTypeDescription
componentIdYesstringAny component id presented in the modal
mergeOptionsNoOptionsOptions to be merged before dismissing the Modal.
Navigation.dismissModal(this.props.componentId);

dismissAllModals()#

Dismiss all current modals at the same time.

Parameters#

NameRequiredTypeDescription
mergeOptionsNoOptionsOptions to be merged before dismissing all modals.
Navigation.dismissAllModals();
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/options-animations/index.html b/6.12.2/api/options-animations/index.html index d0fef474d6..1cbcce2b4c 100644 --- a/6.12.2/api/options-animations/index.html +++ b/6.12.2/api/options-animations/index.html @@ -7,27 +7,27 @@ Animations | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Animations

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/options-api/index.html b/6.12.2/api/options-api/index.html index 5a7539a990..9ebabd4fda 100644 --- a/6.12.2/api/options-api/index.html +++ b/6.12.2/api/options-api/index.html @@ -7,27 +7,27 @@ Options Commands | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Options Commands

setDefaultOptions#

Set default options for all screens. Useful for declaring a consistent style across the app.

Parameters#

NameTypeRequiredDescription
optionsOptionsYesOptions root

Example#

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

mergeOptions#

Change navigation options of a component or layout.

Parameters#

NameTypeRequiredDescription
componentIdstringYesThe component or layout id
optionsOptionsYesOptions root

Example#

Navigation.mergeOptions('componentId', {
bottomTabs: {
visible: false,
},
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/options-backButton/index.html b/6.12.2/api/options-backButton/index.html index 5089944b22..b660f93f8b 100644 --- a/6.12.2/api/options-backButton/index.html +++ b/6.12.2/api/options-backButton/index.html @@ -7,27 +7,27 @@ Back Button Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Back Button Options

Controls the back button styling.

const options = {
topBar: {
backButton: {},
},
};

accessibilityLabel#

Overrides the text that's read by the screen reader when the user interacts with the back button.

TypeRequiredPlatform
stringNoAndroid

id#

Button id for reference press event.

TypeRequiredPlatform
stringNoAndroid

color#

Change the back button color. This will change the text color as well.

TypeRequiredPlatform
colorNoBoth

icon#

Change the default back button icon.

TypeRequiredPlatform
numberNoBoth

showTitle#

Show or hide the text displayed next to the back button.

TypeRequiredPlatform
numberNoiOS

title#

Change the text displayed next to the title. Usually the back button shows the title of the previous screen.

TypeRequiredPlatform
stringNoiOS

visible#

Hide or show the back button.

TypeRequiredPlatform
booleanNoBoth

testID#

Used to interact with the back button in e2e tests.

TypeRequiredPlatform
stringNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/options-background/index.html b/6.12.2/api/options-background/index.html index 0c24727a55..fd895a4a6b 100644 --- a/6.12.2/api/options-background/index.html +++ b/6.12.2/api/options-background/index.html @@ -7,27 +7,27 @@ Background Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Background Options

Controls the top bar background styling.

const options = {
topBar: {
background: {}
}
};

color#

Set the background color. Ignored if a component is specified.

TypeRequiredPlatform
ColorNoBoth

component#

Set a react component as the background. Useful when you need to show a gradient as background, for instance.

On Android, setting an id to the Component will prevent the component from being recreated each time it's used by a screen. The component will be created once and whenever possible it will be reused.

TypeRequiredPlatform
ComponentNoBoth

clipToBounds#

Clip the top bar background to bounds if set to true.

TypeRequiredPlatform
booleanNoiOS

translucent#

Allows the NavBar to be translucent (blurred).

TypeRequiredPlatform
booleanNoiOS

blur#

Enable background blur.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/options-bottomTab/index.html b/6.12.2/api/options-bottomTab/index.html index db1aeff03c..df2fe73746 100644 --- a/6.12.2/api/options-bottomTab/index.html +++ b/6.12.2/api/options-bottomTab/index.html @@ -7,27 +7,27 @@ Bottom Tab Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Bottom Tab Options

const options = {
bottomTab: {},
};

badge#

TypeRequiredPlatform
stringNoBoth

badgeColor#

TypeRequiredPlatform
colorNoBoth

animateBadge#

TypeRequiredPlatform
booleanNoAndroid

disableIconTint#

TypeRequiredPlatform
booleanNoBoth

dotIndicator#

TypeRequiredPlatform
DotIndicatorNoBoth

fontFamily#

TypeRequiredPlatform
stringNoBoth

fontSize#

TypeRequiredPlatform
numberNoBoth

icon#

TypeRequiredPlatform
numberNoBoth

iconColor#

TypeRequiredPlatform
colorNoBoth

selectedFontSize#

TypeRequiredPlatform
numberNoBoth

selectedIcon#

TypeRequiredPlatform
numberNoBoth

selectedIconColor#

TypeRequiredPlatform
colorNoBoth

iconInsets#

TypeRequiredPlatform
IconInsetsNoBoth

disableSelectedIconTint#

TypeRequiredPlatform
booleanNoAndroid

disableIconTint#

TypeRequiredPlatform
booleanNoAndroid

selectedTextColor#

TypeRequiredPlatform
colorNoBoth

testID#

TypeRequiredPlatform
stringNoBoth

text#

TypeRequiredPlatform
stringNoBoth

textColor#

TypeRequiredPlatform
colorNoBoth

DotIndicator#

color?: color#
size?: number#
visible?: boolean#
animate?: boolean#

IconInsets#

top?: number#
left?: number#
right?: number#
bottom?: number#
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/options-bottomTabs/index.html b/6.12.2/api/options-bottomTabs/index.html index 144534b8c0..f3d8324b06 100644 --- a/6.12.2/api/options-bottomTabs/index.html +++ b/6.12.2/api/options-bottomTabs/index.html @@ -7,28 +7,28 @@ Bottom Tabs Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Bottom Tabs Options

const options = {
bottomTabs: {},
};

animate#

Controls whether toggling visibility states will be animated.

TypeRequiredPlatform
booleanNoBoth

backgroundColor#

Change the background color.

TypeRequiredPlatform
colorNoBoth

barStyle#

Controls whether the BottomTabs use dark (black) or light (default) visual style. Requires translucent: true.

TypeRequiredPlatform
enum('default','black')NoBoth

currentTabId#

Select a tab by the id (componentId) of a child contained in it. See Selecting tabs programmatically for a detailed explanation.

TypeRequiredPlatform
numberNoBoth

currentTabIndex#

TypeRequiredPlatform
numberNoBoth

drawBehind#

TypeRequiredPlatform
booleanNoBoth

elevation#

TypeRequiredPlatform
numberNoAndroid

hideShadow#

TypeRequiredPlatform
booleanNoiOS

hideOnScroll#

Hides the BottomTabs on scroll to increase the amount of content visible to the user. The options requires that the scrollable view will be the root view of the screen and that it specifies nestedScrollEnabled: true.

TypeRequiredPlatform
booleanNoAndroid

preferLargeIcons#

TypeRequiredPlatform
booleanNoAndroid

tabsAttachMode#

TypeRequiredPlatform
enum('together','afterInitialTab','onSwitchToTab')NoBoth

testID#

TypeRequiredPlatform
stringNoBoth

titleDisplayMode#

TypeRequiredAndroid
enum('alwaysShow','showWhenActive','alwaysHide')NoBoth

translucent#

A Boolean value that indicates whether the BottomTabs are translucent. For this option to function as expected the screen needs to be drawn behind the BottomTabs; Make sure the list component you're using (FlatList for example) is the root component in the screen and not SafeAreaView. When SafeAreView is the root component it shifts the content above the BottomTabs and the translucent effect isn't visible.

TypeRequiredPlatform
booleanNoiOS

visible#

TypeRequiredPlatform
booleanNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/options-button/index.html b/6.12.2/api/options-button/index.html index cdce1203f9..07adfa2b03 100644 --- a/6.12.2/api/options-button/index.html +++ b/6.12.2/api/options-button/index.html @@ -7,27 +7,27 @@ Button Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Button Options

const options = {
topBar: {
leftButtons: [
{
id: 'id',
text: 'Button',
},
],
},
};

allCaps#

This option will set whether characters are all capitalized or not.

TypeRequiredPlatformDefault
booleanNoAndroidtrue

fontSize#

If the button has text, this option is used to set font size in DP.

TypeRequiredPlatform
numberNoBoth

id#

Buttons are identified by their id property. When a button is clicked, a buttonPress event is emitted to js, containing the id of the clicked button.

TypeRequiredPlatform
stringYesBoth

icon#

Button icon. If the button is pushed to the overflow menu, the button text is used instead.

TypeRequiredPlatform
numberNoBoth

text#

Button text. Ignored if an icon is specified, unless the button is displayed in the overflow menu.

TypeRequiredPlatform
stringNoBoth

showAsAction#

TypeRequiredPlatform
enum('always', 'never', 'withText', 'ifRoom')NoAndroid
  • ifRoom - Only add button to the TopBar if there is room for it, otherwise add it to the overflow menu.
  • never - Never place this button in the TopBar. Instead, list the button in the overflow menu.
  • always - Always place this button in the app bar.

component#

Set a react component as this button's view which will be displayed instead of the regular view.

TypeRequiredPlatform
ComponentNoBoth

iconInsets#

IconInsets are applied to the icon to translate its original position on the screen.

TypeRequiredPlatform
IconInsetsNoiOS

systemItem#

System icon; ignored if an icon is specified. For more information, see apple's guidelines.

TypeRequiredPlatform
enum('done', 'cancel', 'edit', 'save', 'add', 'flexibleSpace', 'fixedSpace', 'compose', 'reply', 'action', 'organize', 'bookmarks', 'search', 'refresh', 'stop', 'camera', 'trash', 'play', 'pause', 'rewind', 'fastForward', 'undo', 'redo')NoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/options-fab/index.html b/6.12.2/api/options-fab/index.html index 5b37ff6607..56f9e4d9ad 100644 --- a/6.12.2/api/options-fab/index.html +++ b/6.12.2/api/options-fab/index.html @@ -7,27 +7,27 @@ Fab | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Fab

Controls the FAB button styling on Android.

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

id#

Button id for reference press event.

Note

This option is mandatory when you are initiating the FAB button. However you do not need to pass in id when updating the Fab button options with Navigation.mergeOptions.

TypeRequiredPlatform
stringNoAndroid

icon#

Change the default back button icon.

TypeRequiredPlatform
numberNoAndroid

iconColor#

Change the icon color of the FAB button.

TypeRequiredPlatform
colorNoAndroid

backgroundColor#

Change the background color of the FAB button.

TypeRequiredPlatform
colorNoAndroid

clickColor#

Change the on-clicked background color of the FAB button.

TypeRequiredPlatform
colorNoAndroid

rippleColor#

Change the ripple color of the FAB button.

TypeRequiredPlatform
colorNoAndroid

visible#

Show or hide the FAB button.

TypeRequiredPlatform
booleanNoAndroid

alignHorizontally#

Set the horizontal position of the FAB button on the screen.

TypeRequiredPlatform
'left' or 'right'NoAndroid

hideOnScroll#

Hide the FAB button on scroll.

TypeRequiredPlatform
booleanNoAndroid

size#

Set the size of the FAB button.

TypeRequiredPlatform
'mini' or 'regular'NoAndroid
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/options-iconInsets/index.html b/6.12.2/api/options-iconInsets/index.html index bbb72fd43f..0d333209c0 100644 --- a/6.12.2/api/options-iconInsets/index.html +++ b/6.12.2/api/options-iconInsets/index.html @@ -7,27 +7,27 @@ IconInsets Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

IconInsets Options

top#

Configure top inset

TypeRequiredPlatform
numberNoBoth

bottom#

Configure bottom inset

TypeRequiredPlatform
numberNoBoth

left#

Configure left inset

TypeRequiredPlatform
numberNoBoth

right#

Configure right inset

TypeRequiredPlatform
numberNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/options-largeTitle/index.html b/6.12.2/api/options-largeTitle/index.html index d7ff751cb8..bc29383dd9 100644 --- a/6.12.2/api/options-largeTitle/index.html +++ b/6.12.2/api/options-largeTitle/index.html @@ -7,27 +7,27 @@ Large Title Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Large Title Options

Controls the top bar large title on iOS, available on iOS 11 and above.

const options = {
topBar: {
largeTitle: {}
}
};

visible#

Controls whether the large title is visible or not.

TypeRequiredPlatform
booleanNoiOS

fontSize#

Set the title font size. On Android this value is in sp.

TypeRequiredPlatform
numberNoiOS

color#

Large title text color.

TypeRequiredPlatform
ColorNoiOS

fontFamily#

Set the large title FontFamily.

TypeRequiredPlatform
FontFamilyNoiOS

fontWeight#

Set the font weight for the large title.

TypeRequiredPlatform
numberNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/options-layout/index.html b/6.12.2/api/options-layout/index.html index 2d61676ad6..a0a782a666 100644 --- a/6.12.2/api/options-layout/index.html +++ b/6.12.2/api/options-layout/index.html @@ -7,27 +7,27 @@ Layout Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Layout Options

const options = {
layout: {}
};

fitSystemWindows#

TypeRequiredPlatform
booleanNoBoth

backgroundColor#

Set the screen background color.

TypeRequiredPlatform
ColorNoBoth

componentBackgroundColor#

Set background color only for components. On Android, using this option instead of backgroundColor helps reduce overdraw.

TypeRequiredPlatform
ColorNoBoth

orientation#

Set the allowed orientations.

TypeRequiredPlatform
['portrait', 'landscape']NoBoth

topMargin#

Set the layout top margin.

TypeRequiredPlatform
numberNoAndroid

direction#

Set language direction, only works with DefaultOptions. locale is an Android specific option which sets the direction according to the device locale.

TypeRequiredPlatform
enum('rtl', 'ltr', 'locale')NoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/options-migration/index.html b/6.12.2/api/options-migration/index.html index bce106d1d2..367c8b1b14 100644 --- a/6.12.2/api/options-migration/index.html +++ b/6.12.2/api/options-migration/index.html @@ -7,27 +7,27 @@ options-migration | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

options-migration

Common Options#

navBarTextColor#

Title text color

topBar: {
title: {
color: 'red'
}
}

navBarTextFontSize#

Title font size

topBar: {
title: {
fontSize: 18
}
}

navBarTextFontFamily#

Title font

topBar: {
title: {
fontFamily: 'Helvetica'
}
}

navBarBackgroundColor#

TopBar background color

topBar: {
background: {
color: 'red'
}
}

navBarCustomView#

Use a react view as the TopBar's background or use a React view instead of the textual title.

topBar: {
background: {
component: {
name: 'example.CustomTopBarBackground'
}
},
title: {
component: {
name: 'example.CustomTopBarTitle'
}
}
}

navBarClipToBounds#

Restrict the navbar background color to the navbar, and do not flow behind the status bar.

topBar: {
background: {
component: {
name: 'example.CustomTopBarBackground',
clipToBounds: true
}
},
}

navBarComponentAlignment#

Align the React view used as the title

topBar: {
title: {
component: {
name: 'example.CustomTopBarTitle',
alignment: 'center' | 'fill'
}
}
}

navBarCustomViewInitialProps#

Initial props passed to the React component

topBar: {
background: {
component: {
name: 'example.CustomTopBarBackground',
passProps: {}
}
},
title: {
component: {
name: 'example.CustomTopBarTitle',
passProps: {}
}
}
}

navBarButtonColor#

TopBar button color

topBar: {
rightButtons: [
{
color: 'red'
}
],
leftButtons: [
{
color: 'red'
}
],
backButton: {
color: 'red'
}
}

navBarHidden#

TopBar visibility. When setting visible: false, you probably want to set drawBehind: true as well. Use animate: false to toggle visibility without animation.

topBar: {
visible: false
}

navBarTransparent#

Transparent TopBar. Set drawBehind: true to draw the screen behind the transparent TopBar.

topBar: {
background: {
color: 'transparent'
}
}

drawUnderNavBar#

Draw the screen behind the TopBar, Useful when the TopBar is toggled or transparent

topBar: {
drawBehind: true
}

drawUnderTabBar#

Draw the screen behind the BottomTabs, Useful when toggling BottomTabs or when the BottomTabs are translucent.

bottomTabs: {
drawBehind: true
}

tabBarHidden#

BottomTabs visibility.

bottomTabs: {
visible: false
}

The BottomTab's visibility can be toggled only on Android using mergeOptions:

Navigation.mergeOptions(this.props.componentId, {
bottomTabs: {
visible: false
}
});

On iOS, BottomTab visibility can be changed only when pushing screens. This means that if you'd like to hide BottomTabs when pushing a screen, You'll need to set the property to false in the options passed to the push command or via the static options(passProps) {} api.

statusBarHidden#

StatusBar visibility. For android, also set drawBehind: true.

statusBar: {
visible: false
}

statusBarTextColorScheme#

Theme of text and icons displayed in the StatusBar

statusBar: {
style: 'light' | 'dark'
}

navBarSubtitleColor#

Subtitle color

topBar: {
subtitle: {
color: 'red'
}
}

navBarSubtitleFontFamily#

Subtitle font

topBar: {
subtitle: {
fontFamily: 'Helvetica'
}
}

navBarSubtitleFontSize#

Subtitle font size

topBar: {
subtitle: {
fontSize: 14
}
}

screenBackgroundColor#

Screen color, visible before the actual React view is rendered

layout: {
backgroundColor: 'red'
}

orientation#

layout: {
orientation: ['portrait', 'landscape'] // An array of supported orientations
}

disabledButtonColor#

Button color when enabled: false is used

topBar: {
rightButtons: [
{
disabledColor: 'grey'
}
]
}

navBarButtonFontSize#

Button font size

topBar: {
rightButtons: [
{
fontSize: 13
}
],
leftButtons: [
{
fontSize: 13
}
]
}

navBarLeftButtonFontSize#

Left button font size

{
topBar: {
leftButtons: [
{
fontSize: 13
}
]
}
}

navBarLeftButtonColor#

Left button color

{
topBar: {
leftButtons: [
{
color: 'red'
}
]
}
}

navBarLeftButtonFontWeight#

Left button font weight

{
topBar: {
leftButtons: [
{
weight: '300'
}
]
}
}

navBarRightButtonFontSize#

Right button font size

topBar: {
leftButtons: [
{
fontSize: 13
}
]
}

navBarRightButtonColor#

Right button color

topBar: {
rightButtons: [
{
color: 'red'
}
]
}

navBarRightButtonFontWeight#

Right button font weight

topBar: {
rightButtons: [
{
weight: '400'
}
]
}

modalPresentationStyle#

Controls the behavior of screens displayed modally.

Options supported on iOS#

  • overCurrentContext - Content is displayed over the previous screen. Useful for transparent modals
  • formSheet - Content is centered in the screen
  • pageSheet -Content partially covers the underlying content
  • overFullScreen - Content covers the screen, without detaching previous content.
  • fullScreen - Content covers the screen, previous content is detached.
  • popover - Content is displayed in a popover view.

More information on the different styles for iOS can be found on https://developer.apple.com/documentation/uikit/uimodalpresentationstyle

Options supported on Android#

  • overCurrentContext - Content is displayed over the previous screen. Useful for transparent modals
  • none - Previous content is detached when the Modal's show animation ends
{
modalPresentationStyle: 'overCurrentContext'
}

navBarButtonFontFamily#

Button font family

topBar: {
rightButtons: [
{
fontFamily: 'Helvetica'
}
]
}

iOS only#

navBarHideOnScroll#

Hide TopBar when list is scrolled

topBar: {
hideOnScroll: true
}

navBarTranslucent#

Translucent TopBar, Setting drawBehind: true is required for this property to work as expected.

topBar: {
drawBehind: true,
background: {
translucent: true
}
}

navBarNoBorder#

Remove TopBar border (hair line)

topBar: {
noBorder: true
}

navBarBlur#

Blur the area behind the TopBar, Setting drawBehind: true and topBar background transparent: true is required for this property to work as expected.

topBar: {
drawBehind: true,
background: {
blur: true,
transparent: true
}
}

rootBackgroundImageName#

  • iOS: name of image in Images.xcassets
  • Android: name of drawable
{
rootBackgroundImage: require('rootBackground.png')
}

screenBackgroundImageName#

name of image in Images.xcassets

{
backgroundImage: require('background.png')
}

statusBarHideWithNavBar#

Hide the StatusBar if the TopBar is also hidden

statusBar: {
hideWithTopBar: true
}

statusBarBlur#

Blur the area behind the StatusBar

statusBar: {
blur: true
}

disabledBackGesture#

Disable the back (swipe) gesture used to pop screens

{
popGesture: false
}

largeTitle#

Use iOS 11 large title

topBar: {
largeTitle: {
visible: true,
fontSize: 30,
color: 'red',
fontFamily: 'Helvetica'
}
}

Android Options#

topBarElevationShadowEnabled#

TopBar elevation in dp. Set this value to 0 to disable the TopBar's shadow.

topBar: {
elevation: 0
}

navBarTitleTextCentered#

Title alignment

topBar: {
title: {
alignment: 'center'|'fill'
}
}

statusBarColor#

StatusBar color

statusBar: {
backgroundColor: 'red'
}

navigationBarColor#

NavigationBar color

navigationBar: {
backgroundColor: 'red'
}

drawUnderStatusBar#

Draw content behind the StatusBar

statusBar: {
drawBehind: true
}

navBarHeight#

TopBar height in dp

topBar: {
height: 70
}

navBarTopPadding#

Content top margin

layout: {
topMargin: 26
}

topTabsHeight#

TopTabs height

topTabs: {
height: 70
}

topBarBorderColor#

TopBar border color

topBar: {
borderColor: 'red'
}

topBarBorderWidth#

TopBar border height

topBar: {
borderHeight: 1.3
}

Unsupported options#

  • disabledSimultaneousGesture
  • statusBarTextColorSchemeSingleScreen
  • navBarButtonFontWeight
  • topBarShadowColor
  • topBarShadowOpacity
  • topBarShadowOffset
  • topBarShadowRadius
  • preferredContentSize
  • navBarSubTitleTextCentered
  • collapsingToolBarImage
  • collapsingToolBarCollapsedColor
  • navBarTextFontBold
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/options-modal/index.html b/6.12.2/api/options-modal/index.html index 11cd25cdb6..bdb99b59d0 100644 --- a/6.12.2/api/options-modal/index.html +++ b/6.12.2/api/options-modal/index.html @@ -7,27 +7,27 @@ Modal Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Modal Options

const options = {
swipeToDismiss
};

swipeToDismiss#

Control wether this modal should be dismiss using swipe gesture when the modalPresentationStyle is pageSheet

TypeRequiredPlatformDefault
booleanNoBothtrue
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/options-navigationBar/index.html b/6.12.2/api/options-navigationBar/index.html index f4a6226849..d8158479d1 100644 --- a/6.12.2/api/options-navigationBar/index.html +++ b/6.12.2/api/options-navigationBar/index.html @@ -7,27 +7,27 @@ Navigation Bar Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Navigation Bar Options

The Navigation Bar is the area at the bottom of the screen containing Android's three navigation buttons: Back, Home and Recents.

An example of a dark navigation bar:



const options = {
navigationBar: {}
};

visible#

Set the navigation bar visibility.

TypeRequiredPlatform
booleanNoAndroid

backgroundColor#

Set the navigation bar color. When a light background color is used, the color of the navigation bar icons will adapt to a dark color.

TypeRequiredPlatformDefault
ColorNoAndroid'black'
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/options-overlay/index.html b/6.12.2/api/options-overlay/index.html index d5bcbc33ba..94d6cb0350 100644 --- a/6.12.2/api/options-overlay/index.html +++ b/6.12.2/api/options-overlay/index.html @@ -7,28 +7,28 @@ Overlay | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Overlay

Controls overlay options

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.

TypeRequiredPlatform
booleanNoBoth

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.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/options-preview/index.html b/6.12.2/api/options-preview/index.html index 3d4248e81e..f498a919ad 100644 --- a/6.12.2/api/options-preview/index.html +++ b/6.12.2/api/options-preview/index.html @@ -7,27 +7,27 @@ Preview (iOS) | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Preview (iOS)

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/options-root/index.html b/6.12.2/api/options-root/index.html index e45d66e9da..c4a590774e 100644 --- a/6.12.2/api/options-root/index.html +++ b/6.12.2/api/options-root/index.html @@ -7,27 +7,27 @@ The options object | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

The options object

const options = {
bottomTab,
bottomTabs,
topBar,
layout,
sideMenu,
overlay,
modal,
preview,
navigationBar
};

bottomTab#

Controls the bottom tab icon, font, color, and more.

TypeRequiredPlatform
BottomTabOptionsNoBoth

bottomTabs#

Controls the bottom tabs container.

TypeRequiredPlatform
BottomTabsOptionsNoBoth

topBar#

Controls the Stack top bar styling.

TypeRequiredPlatform
TopBarOptionsNo

statusBar#

Controls the system status bar styling.

TypeRequiredPlatform
StatusBarOptionsNoBoth

layout#

TypeRequiredPlatform
LayoutOptionsNoBoth

sideMenu#

TypeRequiredPlatform
SideMenuOptionsNoBoth

overlay#

TypeRequiredPlatform
OverlayOptionsNoBoth

animations#

TypeRequiredPlatform
AnimationsOptionsNoBoth

modal#

TypeRequiredPlatform
ModalOptionsNoBoth

preview#

TypeRequiredPlatform
PreviewOptionsNoiOS

splitView#

TypeRequiredPlatform
SplitViewOptionsNoiOS

fab#

TypeRequiredPlatform
FabNoAndroid

modalPresentationStyle#

Configure the presentation style of the modal.

TypeRequiredPlatform
enum('formSheet', 'pageSheet', 'fullScreen', 'overFullScreen', 'overCurrentContext', 'popOver', 'none')NoBoth

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.

iOSAndroid
  • iOS 12 and below - fullScreen
  • iOS 13 and above - pageSheet
fullScreen

modalTransitionStyle#

Configure the transition style of the modal.

TypeRequiredPlatform
enum('coverVertical', 'crossDissolve', 'flipHorizontal', 'partialCurl')NoBoth

popGesture#

Enable or disable swipe back to pop gesture.

TypeRequiredPlatform
booleanNoiOS

backgroundImage#

Background image of the screen.

TypeRequiredPlatform
ImageNoiOS

rootBackgroundImage#

Background image for the Navigation View.

TypeRequiredPlatform
ImageNoAndroid

blurOnUnmount#

Enable or disable automaticall blur of the focused input, dismissing keyboard on unmount.

TypeRequiredPlatformDefault
booleanNoAndroidfalse

navigationBar#

Enable or disable automaticall blur of the focused input, dismissing keyboard on unmount.

TypeRequiredPlatform
booleanNoAndroid
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/options-sideMenu/index.html b/6.12.2/api/options-sideMenu/index.html index 75668ff8b2..3d37b12c0c 100644 --- a/6.12.2/api/options-sideMenu/index.html +++ b/6.12.2/api/options-sideMenu/index.html @@ -7,27 +7,27 @@ Side Menu Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Side Menu Options

const options = {
sideMenu: {
left: {},
right: {},
openGestureMode: 'entireScreen',
},
};

left#

Configure the left side menu.

TypeRequiredPlatform
SideMenuSideNoBoth

right#

Configure the right side menu.

TypeRequiredPlatform
SideMenuSideNoBoth

openGestureMode#

Configure how a user is allowed to open a drawer using gestures.

TypeRequiredPlatformDefault
enum('entireScreen', 'bezel')NoiOS'bezel'
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/options-sideMenuSide/index.html b/6.12.2/api/options-sideMenuSide/index.html index f247a7429c..494be5869d 100644 --- a/6.12.2/api/options-sideMenuSide/index.html +++ b/6.12.2/api/options-sideMenuSide/index.html @@ -7,27 +7,27 @@ Side Menu Side Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Side Menu Side Options

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

visible#

Show or hide the side menu.

TypeRequiredPlatform
booleanNoBoth

enabled#

Enable or disable the side menu.

TypeRequiredPlatform
booleanNoBoth

width#

Set the width of the side menu.

TypeRequiredPlatform
numberNoBoth

height#

Set the height of the side menu.

TypeRequiredPlatform
numberNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/options-splitView/index.html b/6.12.2/api/options-splitView/index.html index 4a927a00ed..549cfbd7bb 100644 --- a/6.12.2/api/options-splitView/index.html +++ b/6.12.2/api/options-splitView/index.html @@ -7,29 +7,29 @@ SplitView Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

SplitView Options

displayMode#

Master view display mode.

TypeRequiredDefaultPlatform
enum('auto', 'visible', 'hidden', 'overlay')No'auto'iOS

primaryEdge#

Master view side. Leading is left. Trailing is right.

TypeRequiredDefaultPlatform
enum('leading', 'trailing')No'leading'iOS

minWidth#

Set the minimum width of master view.

TypeRequiredPlatform
numberNoiOS

maxWidth#

Set the maximum width of master view.

TypeRequiredPlatform
numberNoiOS

primaryBackgroundStyle#

Set background style of sidebar. Currently works for Mac Catalyst apps only. See: Optimizing Your iPad App for Mac

TypeRequiredDefaultPlatform
enum('none', 'sidebar')No'none'iOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/options-stack/index.html b/6.12.2/api/options-stack/index.html index 0f1f6ebcd8..d61173179d 100644 --- a/6.12.2/api/options-stack/index.html +++ b/6.12.2/api/options-stack/index.html @@ -7,27 +7,27 @@ Top Bar Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Top Bar Options

TopBar#

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

visible#

Determines if TopBar is visible or not.

TypeRequiredPlatform
booleanNoBoth

animate#

Determines if changing the TopBar visibility will be animated or not.

TypeRequiredPlatform
booleanNoBoth

title#

Controls the top bar title.

TypeRequiredPlatform
TitleNoBoth

subtitle#

Controls the top bar subtitle.

TypeRequiredPlatform
SubitleNoBoth

backButton#

Controls the top bar back button.

TypeRequiredPlatform
BackButtonNoBoth

background#

Controls the top bar background.

TypeRequiredPlatform
BackgroundNoBoth

barStyle#

Control the TopBar blur style. Requires translucent: true.

TypeRequiredPlatform
enum('default','black')NoiOS

borderColor#

Change the topBar border color.

TypeRequiredPlatform
ColorNoiOS

borderHeight#

Set the border height of the navbar in dp.

TypeRequiredPlatform
numberNoAndroid

drawBehind#

Controls if child should be drawn behind the TopBar or below it.

TypeRequiredPlatform
booleanNoBoth

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.

TypeRequiredPlatform
numberNoAndroid

hideOnScroll#

Hide the TopBar when a scrolling layout is scrolled.

TypeRequiredPlatform
booleanNoBoth

hideNavBarOnFocusSearchBar#

Indicates whether the navigation bar should be hidden when searching. True by default.

TypeRequiredPlatform
booleanNoiOS 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 section for more details.

Android support

Android currently only supports a single left button and does not support custom left Buttons.

TypeRequiredPlatform
[Button]NoBoth

leftButtonColor#

Default color for left buttons.

TypeRequiredPlatform
ColorNoBoth

noBorder#

Disables border at the bottom of the TopBar.

TypeRequiredPlatform
booleanNoiOS

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 section for more details.

TypeRequiredPlatform
[Button]NoBoth

rightButtonColor#

Default color for the right button.

TypeRequiredPlatform
ColorNoBoth

searchBar#

Shows the UISearchBar in the TopBar.

TypeRequiredPlatform
booleanNoiOS 11+

searchBarHiddenWhenScrolling#

Hides the UISearchBar when scrolling.

TypeRequiredPlatform
booleanNoiOS 11+

searchBarPlaceholder#

The placeholder value in the UISearchBar.

TypeRequiredPlatform
stringNoiOS 11+
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/options-statusBar/index.html b/6.12.2/api/options-statusBar/index.html index 6a23087d5d..12d0b2229f 100644 --- a/6.12.2/api/options-statusBar/index.html +++ b/6.12.2/api/options-statusBar/index.html @@ -7,27 +7,27 @@ Status Bar Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Status Bar Options

const options = {
statusBar: {},
};

visible#

Set the status bar visibility.

TypeRequiredPlatform
booleanNoBoth

style#

Set the text color of the status bar.

TypeRequiredPlatformDefault
enum('light', 'dark')NoBoth'light'

backgroundColor#

Set the background color of the status bar.

TypeRequiredPlatform
ColorNoAndroid

drawBehind#

Draw screen behind the status bar.

TypeRequiredPlatform
booleanNoAndroid

translucent#

Set the status bar to be translucent.

TypeRequiredPlatform
booleanNoAndroid
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/options-subtitle/index.html b/6.12.2/api/options-subtitle/index.html index 0662d526a7..d9882bb43c 100644 --- a/6.12.2/api/options-subtitle/index.html +++ b/6.12.2/api/options-subtitle/index.html @@ -7,27 +7,27 @@ Subtitle Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Subtitle Options

Controls the top bar subtitle.

const options = {
topBar: {
subtitle: {}
}
};

text#

Subtitle text.

TypeRequiredPlatform
stringNoBoth

fontSize#

Subtitle fontSize. On Android this value is sp.

TypeRequiredPlatform
numberNoBoth

color#

Subtitle color.

TypeRequiredPlatform
ColorNoBoth

fontFamily#

Subtitle FontFamily.

TypeRequiredPlatform
FontFamilyNoBoth

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.

TypeRequiredPlatform
enum('center', 'fill')NoBoth

testID#

Used to interact with the TopBar in e2e tests.

TypeRequiredPlatform
stringNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/options-title/index.html b/6.12.2/api/options-title/index.html index 851c0e1e05..d3a3566bd9 100644 --- a/6.12.2/api/options-title/index.html +++ b/6.12.2/api/options-title/index.html @@ -7,27 +7,27 @@ Title Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Title Options

Controls the top bar title.

const options = {
topBar: {
title: {}
}
};

text#

Set the title for the TopBar.

TypeRequiredPlatform
stringNoBoth

fontSize#

Set the title font size. On Android this value is in sp.

TypeRequiredPlatform
numberNoBoth

color#

Set the title color.

TypeRequiredPlatform
ColorNoBoth

fontFamily#

Set the title font family.

TypeRequiredPlatform
FontFamilyNoBoth

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.

defaults

center is the default option on iOS while fill is the default for Android.

TypeRequiredPlatform
enum('center','fill')NoBoth

component#

Set a react component as the title. If this option is specified then text is ignored.

TypeRequiredPlatform
ComponentNoBoth

topMargin#

Change to TopBar's top margin.

TypeRequiredPlatform
numberNoAndroid

visible#

Determines whether the TopBar is visible or not.

TypeRequiredPlatform
booleanNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/overlay/index.html b/6.12.2/api/overlay/index.html index aa5dc13145..4063e67d67 100644 --- a/6.12.2/api/overlay/index.html +++ b/6.12.2/api/overlay/index.html @@ -7,27 +7,27 @@ Overlay | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Overlay

showOverlay()#

Shows a component as an overlay.

NameRequiredTypeDescription
layoutYesLayoutAny type of layout. Typically, Component layout is used in Overlays but it's possible to load any other layout (BottomTabs, Stack, SideMenu, Component)
Navigation.showOverlay({
component: {
name: 'example.Overlay',
options: {
layout: {
componentBackgroundColor: 'transparent',
},
overlay: {
interceptTouchOutside: true
}
}
}
});

dismissOverlay()#

Dismisses an overlay matching the given overlay componentId.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe component id presented in Overlay
Navigation.dismissOverlay(this.props.componentId);
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/root/index.html b/6.12.2/api/root/index.html index 38167244ef..8b17736fc1 100644 --- a/6.12.2/api/root/index.html +++ b/6.12.2/api/root/index.html @@ -7,27 +7,27 @@ Root | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Root

setRoot()#

Used to set the UI of the application. Read more about the root hierarchy level in the docs section.

Parameters#

NameRequiredTypeDescription
layoutYesLayoutAny type of layout. BottomTabs, Stack, SideMenu, Component

Example#

Navigation.setRoot({
root: {
stack: {
children: [{
component: {
name: 'example.FirstTabScreen',
passProps: {
text: 'This is tab 1'
}
}
}],
options: {
bottomTab: {
text: 'Tab 1',
icon: require('../images/one.png'),
testID: 'FIRST_TAB_BAR_BUTTON'
}
}
}
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/sideMenu-api/index.html b/6.12.2/api/sideMenu-api/index.html index 2094f94152..be3e3ae7b7 100644 --- a/6.12.2/api/sideMenu-api/index.html +++ b/6.12.2/api/sideMenu-api/index.html @@ -7,27 +7,27 @@ Side Menu | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Side Menu

This layout allows to implement sidemenus, which can be opened by swiping from one side towards the other side.

{
left: {
component: {}
},
center: {
stack: {
options: {},
children: [{
component: {}
}]
}
},
right: {
component: {}
}
}

center: Layout#

Center component, contains the main application.

left?: Layout#

Contain the left component layout.

right?: Layout#

Contain the right component layout.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/api/stack/index.html b/6.12.2/api/stack/index.html index 74913d50b0..602422568d 100644 --- a/6.12.2/api/stack/index.html +++ b/6.12.2/api/stack/index.html @@ -7,27 +7,27 @@ Stack | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Stack

push()#

Push a screen into the stack and update the display according to the screen options.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe componentId of a screen pushed into the stack, or the id of the stack.
layoutNoLayoutThe layout being pushed into the stack. Any type of layout (except stack) can be pushed into stacks. Typically, Component layout is pushed into stacks but it's possible to push SideMenu or BottomTabs as well.

Example#

The most common use case - push a single React component.
Navigation.push(this.props.componentId, {
component: {
name: 'example.PushedScreen'
}
});

pop()#

Pop the top screen from the stack.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe componentId of a screen pushed into the stack, or the stack id.
mergeOptionsNoOptionsOptions to be merged before popping the screen (optional).
Navigation.pop(this.props.componentId);

popToRoot()#

Pop all screens pushed into the stack.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe componentId of a screen pushed into the stack, or the stack id.
mergeOptionsNoOptionsOptions to be merged before popping the screen (optional).
Navigation.popToRoot(this.props.componentId);

popTo()#

Pop the stack to a given component.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe destination componentId
mergeOptionsNoOptionsOptions to be merged before popping the screen (optional).
Navigation.popTo(componentId);

setStackRoot()#

Reset the stack to the given layout (accepts multiple children).

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe componentId of a screen pushed into the stack, or the stack id.
layoutYesLayout or Layout[]A single Component or array of components.

Example#

Navigation.setStackRoot(this.props.componentId, {
component: {
name: 'example.NewRootScreen'
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/advanced-navigation/index.html b/6.12.2/docs/advanced-navigation/index.html index b584e63d0e..08dfc757d0 100644 --- a/6.12.2/docs/advanced-navigation/index.html +++ b/6.12.2/docs/advanced-navigation/index.html @@ -7,15 +7,15 @@ Advanced navigation | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -36,14 +36,14 @@
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.

Navigation.events().registerAppLaunchedListener(async () => {
Navigation.setRoot(isLoggedIn() ? mainRoot : loginRoot);
});
function isLoggedIn() {
// TODO: your business logic goes here
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/app-launch/index.html b/6.12.2/docs/app-launch/index.html index 368b3810cd..2fa0432022 100644 --- a/6.12.2/docs/app-launch/index.html +++ b/6.12.2/docs/app-launch/index.html @@ -7,27 +7,27 @@ Launching the app | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

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.

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
  2. 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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/basic-navigation/index.html b/6.12.2/docs/basic-navigation/index.html index 31b9b8ec9e..39f122e2aa 100644 --- a/6.12.2/docs/basic-navigation/index.html +++ b/6.12.2/docs/basic-navigation/index.html @@ -7,15 +7,15 @@ Basic navigation | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -35,14 +35,14 @@
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.

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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/before-you-start/index.html b/6.12.2/docs/before-you-start/index.html index 60a4d2638b..afbce34f52 100644 --- a/6.12.2/docs/before-you-start/index.html +++ b/6.12.2/docs/before-you-start/index.html @@ -7,27 +7,27 @@ Before you start | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Before you start

React Native Navigation is a module, dependent on and intended to be used alongside 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 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 the library. If you're just looking around, we suggest checking out basic navigation first.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/bottomTabs/index.html b/6.12.2/docs/bottomTabs/index.html index ce3f257522..bf03116ce9 100644 --- a/6.12.2/docs/bottomTabs/index.html +++ b/6.12.2/docs/bottomTabs/index.html @@ -7,28 +7,28 @@ Bottom tabs | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Bottom tabs

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

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.

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.

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

Visibility can also be changed when pushing screens.

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:

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.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/community-libraries/index.html b/6.12.2/docs/community-libraries/index.html index e1accc8035..0a0a1c0405 100644 --- a/6.12.2/docs/community-libraries/index.html +++ b/6.12.2/docs/community-libraries/index.html @@ -7,15 +7,15 @@ Community libraries | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -24,14 +24,14 @@ Drawer API built on top of React Native Navigation for iOS and Android.

React Native Navigation Search Bar : React Native Elements search bar with collapsible header built for React Native Navigation.

React Native Navigation Register Screens : Utility function to register array of screens instead of calling Navigation.registerComponent multiple times.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/externalComponent/index.html b/6.12.2/docs/externalComponent/index.html index 004c55664c..04c9196015 100644 --- a/6.12.2/docs/externalComponent/index.html +++ b/6.12.2/docs/externalComponent/index.html @@ -7,15 +7,15 @@ External Component | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -27,14 +27,14 @@
@Override
public View asView() {
return content;
}
}

Registering the component#

public class MainApplication extends NavigationApplication {
@Override
public void onCreate() {
super.onCreate();
registerExternalComponent("MyExternalComponent", new FragmentCreator());
}
}

iOS#

ViewController registration#

[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:

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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/functionalComponents/index.html b/6.12.2/docs/functionalComponents/index.html index f104096aef..844ca95ef2 100644 --- a/6.12.2/docs/functionalComponents/index.html +++ b/6.12.2/docs/functionalComponents/index.html @@ -7,15 +7,15 @@ Using functional components as screens | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -26,14 +26,14 @@
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 (
<View>
<Text>Screen Component</Text>
</View>
)
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/installing/index.html b/6.12.2/docs/installing/index.html index 01f6473c8b..0cf5a9ec41 100644 --- a/6.12.2/docs/installing/index.html +++ b/6.12.2/docs/installing/index.html @@ -7,15 +7,15 @@ Installation | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -35,14 +35,14 @@
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}"
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/meta-contributing/index.html b/6.12.2/docs/meta-contributing/index.html index 606276fe7a..28c713c3dd 100644 --- a/6.12.2/docs/meta-contributing/index.html +++ b/6.12.2/docs/meta-contributing/index.html @@ -7,27 +7,27 @@ Contributing | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

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

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 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". 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 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.

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 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 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 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 with Prettier 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#

FolderDescription
libThe project itself composed of:
lib/androidandroid sources and unit tests
lib/iosiOS sources and unit tests
lib/srcTypeScript sources and unit tests
lib/distcompiled javascript sources and unit tests
lib/dist/index.jsthe entry point for import Navigation from 'react-native-navigation'
e2edetox e2e tests on both Android and iOS
playgroundThe 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 <root>/lib for faster local development (no need to npm install locally).
integrationmisc javascript integration tests, proving integration with other libraries like redux
scriptsall scripts

Scripts#

CommandDescription
npm installinstalls dependencies
npm run buildcompiles TypeScript sources ./lib/src into javascript ./lib/dist
npm run cleancleans all build directories, stops packager, fixes flakiness by removing watchman cache, etc.
npm run startstarts the react-native packager for local debugging
npm run xcodefor convenience, opens xcode in this project
npm run install-androidbuilds playground debug/release version and installs on running android devices/emulators.
Options: -- --release
npm run uninstall-androiduninstalls playground from running android devices/simulators
npm run test-jsruns javascript tests and coverage report
npm run test-unit-iosruns ios unit tests in debug/release
Options: -- --release
npm run test-unit-androidruns android unit tests in debug/release
Options: -- --release
npm run test-e2e-iosruns the ios e2e tests using detox in debug/release
Options: -- --release
npm run test-e2e-androidruns the android e2e tests using detox in debug/release
Options: -- --release
npm run test-allruns all tests in parallel
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/modal/index.html b/6.12.2/docs/modal/index.html index b36052980a..d43cc3753f 100644 --- a/6.12.2/docs/modal/index.html +++ b/6.12.2/docs/modal/index.html @@ -7,15 +7,15 @@ Modal | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -28,14 +28,14 @@ when the button is pressed.

Android#

On Android, modals can be dismissed with the hardware back button. You can handle the back press your self by adding a BackHandler

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 determines the look and feel of a screen displayed as modal.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/overlay/index.html b/6.12.2/docs/overlay/index.html index c96475841d..aaa3553a91 100644 --- a/6.12.2/docs/overlay/index.html +++ b/6.12.2/docs/overlay/index.html @@ -7,15 +7,15 @@ Overlay | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -30,14 +30,14 @@
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;
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/passing-data-to-components/index.html b/6.12.2/docs/passing-data-to-components/index.html index 58c9491190..82b7c7770c 100644 --- a/6.12.2/docs/passing-data-to-components/index.html +++ b/6.12.2/docs/passing-data-to-components/index.html @@ -7,27 +7,27 @@ Passing data to components | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Passing data to components

Initial props#

React components use props to receive data when they are created. When displaying the 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:

Navigation.push(this.props.componentId, {
component: {
name: 'UserProfile',
id: 'PROFILE_SCREEN_ID'
passProps: {
name: 'John Doe',
status: 'online'
}
}
});
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, lets see how to use props passed in the push command to set the TopBar title.

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() command. Updating props triggers the component lifecycle methods related to updating.

Notice that we're using the component id in order to update props of this specific instance of the component.

Navigation.updateProps('PROFILE_SCREEN_ID', {
status: 'offline'
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/playground-app/index.html b/6.12.2/docs/playground-app/index.html index 300da9eab0..6aa6292b0f 100644 --- a/6.12.2/docs/playground-app/index.html +++ b/6.12.2/docs/playground-app/index.html @@ -7,28 +7,28 @@ Playground app | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

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). Before you start changing things, make sure everything works.
    - To easily run all tests in parallel `npm run test-all`
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/root/index.html b/6.12.2/docs/root/index.html index d9fac4735f..8d4fa5d716 100644 --- a/6.12.2/docs/root/index.html +++ b/6.12.2/docs/root/index.html @@ -7,28 +7,28 @@ Root | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Root

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.

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.

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:
Navigation.setRoot({
root: {
stack: {
children: [
{
component: {
name: 'LOGIN_SCREEN'
}
}
]
}
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/screen-lifecycle/index.html b/6.12.2/docs/screen-lifecycle/index.html index 5b1ef71471..a03f79f74f 100644 --- a/6.12.2/docs/screen-lifecycle/index.html +++ b/6.12.2/docs/screen-lifecycle/index.html @@ -7,27 +7,27 @@ Screen Lifecycle | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

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, 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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/showcases/index.html b/6.12.2/docs/showcases/index.html index d3c3563182..6cf7dd3e7b 100644 --- a/6.12.2/docs/showcases/index.html +++ b/6.12.2/docs/showcases/index.html @@ -7,15 +7,15 @@ Showcases | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -23,14 +23,14 @@
# 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
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/sideMenu-disable/index.html b/6.12.2/docs/sideMenu-disable/index.html index 3606422920..c3c544b1c6 100644 --- a/6.12.2/docs/sideMenu-disable/index.html +++ b/6.12.2/docs/sideMenu-disable/index.html @@ -7,15 +7,15 @@ Disable Open and Close gesture | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -24,14 +24,14 @@
constructor(props) {
super(props);
Navigation.events().bindComponent(this);
}
render() {
return (
<View>
<Text>Click the hamburger icon to open the side menu</Text>
</View>
);
}
navigationButtonPressed({ buttonId }) {
if (buttonId === 'sideMenu') {
Navigation.mergeOptions(this, {
sideMenu: {
left: {
visible: true
}
}
});
}
}
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/sideMenu/index.html b/6.12.2/docs/sideMenu/index.html index dda7307405..182be282c1 100644 --- a/6.12.2/docs/sideMenu/index.html +++ b/6.12.2/docs/sideMenu/index.html @@ -7,15 +7,15 @@ Side Menu | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -24,14 +24,14 @@
constructor(props) {
super(props);
Navigation.events().bindComponent(this);
}
render() {
return (
<View>
<Text>Click the hamburger icon to open the side menu</Text>
</View>
);
}
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:

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).

Navigation.push('CenterStack', {
component: {
name: Screens.Pushed,
options: {
sideMenu: {
left: {
visible: false
}
}
}
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/stack-backButton/index.html b/6.12.2/docs/stack-backButton/index.html index a0790a7814..0e3667ebbb 100644 --- a/6.12.2/docs/stack-backButton/index.html +++ b/6.12.2/docs/stack-backButton/index.html @@ -7,27 +7,27 @@ The Back button | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

The 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.

backButton: {
color: 'red',
icon: require('../../img/customChevron.png')
}

Controling visibility#

The back buttons visbility can be controlled with the visible property.

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.

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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/stack-backNavigation/index.html b/6.12.2/docs/stack-backNavigation/index.html index 96b2ff79e7..b27a2fe4fa 100644 --- a/6.12.2/docs/stack-backNavigation/index.html +++ b/6.12.2/docs/stack-backNavigation/index.html @@ -7,27 +7,27 @@ Back Navigation | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Back Navigation

Disabling back navigation#

Handling back navigation#

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/stack-buttons/index.html b/6.12.2/docs/stack-buttons/index.html index 285a53c531..7c11614d94 100644 --- a/6.12.2/docs/stack-buttons/index.html +++ b/6.12.2/docs/stack-buttons/index.html @@ -7,29 +7,29 @@ TopBar Buttons | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

TopBar Buttons

Buttons can be added to the right and left 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 with the relevant actions when the button is clicked.

On Android, use the 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:

Navigation.registerComponent('ButtonComponent', () => require('./ButtonComponent'));

Now you can create buttons which use the component registered with 'ButtonComponent' as thier custom view:

topBar: {
rightButtons: [
{
component: {
name: '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

// Declare the button and assign it a unique id
topBar: {
rightButtons: [
{
id: 'SomeUniqueId',
component: {
name: '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.

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.

Navigation.mergeOptions(this.props.componentId, {
topBar: {
rightButtons: [],
},
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/stack-programmatically/index.html b/6.12.2/docs/stack-programmatically/index.html index ba1d014d0a..dac9d88c50 100644 --- a/6.12.2/docs/stack-programmatically/index.html +++ b/6.12.2/docs/stack-programmatically/index.html @@ -7,15 +7,15 @@ Interact programmatically with the Stack | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -23,14 +23,14 @@ 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.

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.

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'
}
});
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/stack/index.html b/6.12.2/docs/stack/index.html index 65b4425b6e..c24cd034f4 100644 --- a/6.12.2/docs/stack/index.html +++ b/6.12.2/docs/stack/index.html @@ -7,15 +7,15 @@ Stack | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -26,14 +26,14 @@ 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.

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.

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

Disabling back navigation#

Handling back navigation#

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/style-animations/index.html b/6.12.2/docs/style-animations/index.html index 310e13d144..e6ffbe72d8 100644 --- a/6.12.2/docs/style-animations/index.html +++ b/6.12.2/docs/style-animations/index.html @@ -7,15 +7,15 @@ Animations | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -24,14 +24,14 @@ your screens during screen transitions.

Animation properties#

The following properties can be animated with our animation framework:

Layout animations#

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.

options: {
animations: {
push: {
content: {
translationX: {
from: require('react-native').Dimensions.get('window').width,
to: 0,
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 following example demonstrates how to show a modal with a fade-in animation.

options: {
animations: {
showModal: {
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 and the Destination screen

Shared Element Transition

Four elements are animated in this example. Let's list the elements involved in the transition and note which properties are being animated.

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.

<Image
source={item.image}
nativeID={`image${item.id}`}
style={styles.image}
resizeMode={'contain'}
/>

Step 2 - set a nativeID prop to elements in the destination screen#

<Image source={this.props.image} nativeID={`image${this.props.id}Dest`} style={styles.image} />

Step 3 - Declare the shared element animation when pushing the screen#

Navigation.push(this.props.componentId, {
component: {
name: Screens.CocktailDetailsScreen,
passProps: { ...item },
options: {
animations: {
push: {
sharedElementTransitions: [
{
fromId: `image${item.id}`,
toId: `image${item.id}Dest`,
},
],
},
},
},
},
});

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.

<Text nativeID="description" style={styles.description}>
{this.props.description}
</Text>

Step 2 - Declare the element animation when pushing the screen#

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

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 = (
<Navigation.TouchablePreview
touchableComponent={TouchableHighlight}
onPress={handlePress}
onPressIn={handlePress}
>
<Text>My button</Text>
</Navigation.TouchablePreview>
);

All options except for reactTag are optional. Actions trigger the same event as navigation button presses. To react when a preview is committed, listen to the previewCompleted event.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/style-constants/index.html b/6.12.2/docs/style-constants/index.html index 7c463e7229..58bae878e8 100644 --- a/6.12.2/docs/style-constants/index.html +++ b/6.12.2/docs/style-constants/index.html @@ -7,27 +7,27 @@ Constants | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

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:

const { Navigation } = require('react-native-navigation');
const {
statusBarHeight,
topBarHeight,
bottomTabsHeight
} = await Navigation.constants();
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/style-fonts/index.html b/6.12.2/docs/style-fonts/index.html index abb402d231..ecd9e4747e 100644 --- a/6.12.2/docs/style-fonts/index.html +++ b/6.12.2/docs/style-fonts/index.html @@ -7,27 +7,27 @@ Changing fonts | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

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

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#

options: {
bottomTab: {
fontFamily: 'helvetica'
}
}

Button font#

options: {
rightButtons: [
{
id: 'SAVE_BUTTON',
text: 'Save',
fontFamily: 'helvetica'
}
],
leftButtons: [
{
id: 'CANCEL_BUTTON',
text: 'Cancel',
fontFamily: 'helvetica'
}
]
}

Title font#

options: {
topBar: {
title: {
fontFamily: 'helvetica'
}
}
}

Subtitle font#

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.

options: {
topBar: {
backButton: {
fontFamily: 'helvetica'
}
}
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/style-options/index.html b/6.12.2/docs/style-options/index.html index d152622797..090f9b0498 100644 --- a/6.12.2/docs/style-options/index.html +++ b/6.12.2/docs/style-options/index.html @@ -7,15 +7,15 @@ Styling with options | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -32,14 +32,14 @@
class ExperimentScreen extends NavigationComponent {
static options(): Options {
const ExperimentsManager = require('./ExperimentsManager');
const food = ExperimentsManager.isActive('VeganExperiment') ? 'Tofu' : 'Hamburger';
return {
topBar: {
title: {
text: `Hello ${food}!`,
},
},
};
}
}

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.

import { Navigation } from 'react-native-navigation';
Navigation.mergeOptions(componentId, {
topBar: {
background: {
color: 'red',
},
},
});
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).

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.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/style-orientation/index.html b/6.12.2/docs/style-orientation/index.html index 0969690041..5f85c4732d 100644 --- a/6.12.2/docs/style-orientation/index.html +++ b/6.12.2/docs/style-orientation/index.html @@ -7,27 +7,27 @@ Orientation | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

Orientation

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.

Navigation.setDefaultOptions({
layout: {
orientation: ['portrait']
}
});

Changing orientation dynamically#

Changing orientation dynamically through Navigation.mergeOption() is supported only on Android.

Navigation.mergeOptions(this.props.componentId, {
layout: {
orientation: ['landscape']
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/style-statusBar/index.html b/6.12.2/docs/style-statusBar/index.html index 25a16c9689..f0625e4ac7 100644 --- a/6.12.2/docs/style-statusBar/index.html +++ b/6.12.2/docs/style-statusBar/index.html @@ -7,27 +7,27 @@ StatusBar | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 6.12.2

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)

options: {
statusBar: {
backgroundColor: 'white',
style: 'dark'
}
}
Compatibility with StatusBar component

React native's StatusBar 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

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.

options: {
statusBar: {
backgroundColor: null
}
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/style-theme/index.html b/6.12.2/docs/style-theme/index.html index d852c8a5e7..1d2c154945 100644 --- a/6.12.2/docs/style-theme/index.html +++ b/6.12.2/docs/style-theme/index.html @@ -7,15 +7,15 @@ Themes | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -29,14 +29,14 @@
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;
});

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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/third-party-mobx/index.html b/6.12.2/docs/third-party-mobx/index.html index 9deb5fed8c..b6e7c5160b 100644 --- a/6.12.2/docs/third-party-mobx/index.html +++ b/6.12.2/docs/third-party-mobx/index.html @@ -7,15 +7,15 @@ MobX | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -37,14 +37,14 @@
// 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.
});
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/third-party-react-context/index.html b/6.12.2/docs/third-party-react-context/index.html index d50721367e..4c4c9c6f37 100644 --- a/6.12.2/docs/third-party-react-context/index.html +++ b/6.12.2/docs/third-party-react-context/index.html @@ -7,15 +7,15 @@ React Context API | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -36,14 +36,14 @@
export const App = () => {
// Using useContext API
const { count, increment, decrement } = React.useContext(CounterContext);
return (
<View>
<Text>{`Clicked ${count} times!`}</Text>
<Button title="Increment" onPress={increment} />
<Button title="Decrement" onPress={decrement} />
</View>
);
};
// App.tsx
import React from 'react';
import { Button, Text, View } from 'react-native';
import { CounterContext } from './CounterContext';
export const App = () => {
// Using Context consumer
return (
<CounterContext.Consumer>
{({ count, increment, decrement }) => (
<View>
<Text>{`Clicked ${count} times!`}</Text>
<Button title="Increment" onPress={increment} />
<Button title="Decrement" onPress={decrement} />
</View>
)}
</CounterContext.Consumer>
);
};
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/6.12.2/docs/third-party-typescript/index.html b/6.12.2/docs/third-party-typescript/index.html index 14c0105136..7daf41f794 100644 --- a/6.12.2/docs/third-party-typescript/index.html +++ b/6.12.2/docs/third-party-typescript/index.html @@ -7,15 +7,15 @@ TypeScript | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -28,14 +28,14 @@
// Static options are also supported!
MyFunctionalComponent.options = {
topBar: {
title: {
text: 'Hello functional component',
},
},
};
export default MyFunctionalComponent;

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.

import { Navigation } from 'react-native-navigation';
interface Props {
name: string;
}
Navigation.push<Props>(componentId, {
component: {
name: 'MyComponent',
passProps: {
name: 'Bob',
// @ts-expect-error
color: 'red', // Compilation error! color isn't declared in Props
},
},
});

The following commands accept typed passProps:

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/component/index.html b/7.11.2/api/component/index.html index 1e23ac4d79..13091ba928 100644 --- a/7.11.2/api/component/index.html +++ b/7.11.2/api/component/index.html @@ -7,28 +7,28 @@ Component | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Component

registerComponent#

Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component or React.PureComponent. It can also be a HOC to provide context (or a Redux store) or a functional component. Similar to React Native's AppRegistry.registerComponent.

Parameters#

NameRequiredTypeDescription
componentNameYesstringUnique component name - not to be confused with componentId
componentProviderYesFunctionAnonymous function that returns the React component to register, OR the component wrapped with Providers
concreteComponentProviderNoFunctionAnonymous function that returns the concrete React component. If your component is wrapped with Providers, this must be an instance of the concrete component.

Examples#

Registering a component#
Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
Registering a component wrapped with Providers#
import { Provider } from 'react-redux';
const store = createStore();
Navigation.registerComponent(`navigation.playground.MyScreen`, () => (props) =>
<Provider store={store}>
<MyScreen {...props} />
</Provider>,
() => MyScreen)
);

setLazyComponentRegistrator#

Pass a function that will allow you to register a component lazily. When encountering an unknown component name, this function will be called, giving you a chance to register the component before an error is thrown.

Parameters#

NameRequiredTypeDescription
lazyRegistratorFnYes(lazyComponentRequest: stringnumber) => void

Example#

Navigation.setLazyComponentRegistrator((componentName) => {
if (componentName === 'navigation.playground.LazyScreen') {
Navigation.registerComponent(Screens.LazilyRegisteredScreen, () => LazyScreen);
}
});

updateProps#

Update props of a component registered with registerComponent. Updating props triggers the component lifecycle methods related to updating.

Parameters#

NameRequiredTypeDescription
componentIdYesstringUnique component id
optionsYesobjectprops object to pass to the component

Example#

Navigation.updateProps('MY_COMPONENT', {
// props to pass to the component
};
important

updateProps is called with a componentId. This is the same unique id components have in props. Don't confuse it with the componentName we use when registering components with Navigation.registerComponent.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/events/index.html b/7.11.2/api/events/index.html index f20c93a2e1..983ef726d7 100644 --- a/7.11.2/api/events/index.html +++ b/7.11.2/api/events/index.html @@ -7,15 +7,15 @@ Events | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -42,14 +42,14 @@
searchBarCancelPressed() {}
}

previewCompleted (iOS 11.4+ only)#

Called when preview peek is completed.

class MyComponent extends Component {
componentDidMount() {
this.navigationEventListener = Navigation.events().bindComponent(this);
}
componentWillUnmount() {
// Not mandatory
if (this.navigationEventListener) {
this.navigationEventListener.remove();
}
}
previewCompleted({ previewComponentId }) {}
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/layout-bottomTabs/index.html b/7.11.2/api/layout-bottomTabs/index.html index a73b32a8ee..26dbe5ee3f 100644 --- a/7.11.2/api/layout-bottomTabs/index.html +++ b/7.11.2/api/layout-bottomTabs/index.html @@ -7,27 +7,27 @@ Bottom Tabs | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Bottom Tabs

A container view for managing a radio-style selection interface, where a selection determines which child view controller to display.

{
id: 'BOTTOM_TABS_LAYOUT',
children: [
{
component: {
id: 'HOME_SCREEN',
name: 'HomeScreen'
}
},
{
stack: {
id: 'PROFILE_TAB',
children: [
{
component: {
id: 'PROFILE_SCREEN',
name: 'ProfileScreen'
}
}
]
}
}
]
}

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation api, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

children#

TypeRequiredDescription
Layout[]YESChild layouts of any kind.

options#

TypeRequiredDescription
OptionsNodynamic options which will apply to all screens in bottomTabs
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/layout-component/index.html b/7.11.2/api/layout-component/index.html index e4b1a82e2c..004f284945 100644 --- a/7.11.2/api/layout-component/index.html +++ b/7.11.2/api/layout-component/index.html @@ -7,27 +7,27 @@ Component | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Component

{
name: "MyRegisteredComponent";
}

name#

TypeRequiredDescription
stringYesKey used when registering the component with Navigation.registerComponent.

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation api, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

options#

TypeRequiredDescription
OptionsNodynamic options for the component

alignment#

TypeRequiredDescription
enum('center', 'fill')NoThis option is relevant only to title components. fill will make the component stretch and consume all available space in the TopBar while center will center it in the middle of the TopBar. center is the default option in iOS while fill is the default for Android.

waitForRender#

TypeRequiredDescription
booleanNoWait for this component to fully render before showing the screen.

This option is useful for ensuring that both a child screen pushed into the stack and all of the TopBar components (title, background and buttons) are displayed to the user at the same time.

To enable this option, waitForRender in the relevant screen animation option needs to be enabled as well.

caution

This option might introduce delays when pushing screens and should be used with caution.

passProps#

TypeRequiredDescription
objectNoA JavaScript object with props accessible inside the component using this.props.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/layout-layout/index.html b/7.11.2/api/layout-layout/index.html index fcaab5bab1..627b560231 100644 --- a/7.11.2/api/layout-layout/index.html +++ b/7.11.2/api/layout-layout/index.html @@ -7,27 +7,27 @@ Layout | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Layout

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation API, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

options#

TypeRequiredDescription
OptionsNodynamic options for the layout

children#

TypeRequiredDescription
Layout[]YesChild layouts of any kind.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/layout-sideMenu/index.html b/7.11.2/api/layout-sideMenu/index.html index ab98b43d4e..a51ff814d8 100644 --- a/7.11.2/api/layout-sideMenu/index.html +++ b/7.11.2/api/layout-sideMenu/index.html @@ -7,27 +7,27 @@ Side Menu | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Side Menu

This layout allows implementing sidemenus, which can be opened by swiping from one side towards the other side.

{
left: {
component: {}
},
center: {
stack: {
options: {},
children: [{
component: {}
}]
}
},
right: {
component: {}
}
}

center#

TypeRequiredDescription
LayoutYesCenter component, contains the main application.

left#

TypeRequiredDescription
LayoutNoContains the left component layout.

right#

TypeRequiredDescription
LayoutNoContains the right component layout.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/layout-splitView/index.html b/7.11.2/api/layout-splitView/index.html index ac11c4211b..1efb46f505 100644 --- a/7.11.2/api/layout-splitView/index.html +++ b/7.11.2/api/layout-splitView/index.html @@ -7,28 +7,28 @@ SplitView | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

SplitView

A container view controller implementing a master-detail interface. See UISplitViewController docs. Currently implemented only in iOS.

{
id: 'PROFILE_TAB',
master: {
component: {
id: 'MASTER_SCREEN',
name: 'MasterScreen'
}
},
detail: {
component: {
id: 'DETAIL_SCREEN',
name: 'DetailScreen'
}
}
}

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation api, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

master#

TypeRequiredDescription
LayoutYESSet master layout (the smaller screen, sidebar)

detail#

TypeRequiredDescription
LayoutYESSet detail layout (the larger screen, flexes)

options#

TypeRequiredDescription
OptionsNodynamic options which will apply to all screens
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/layout-stack/index.html b/7.11.2/api/layout-stack/index.html index ded0d662ac..e82aa87e8c 100644 --- a/7.11.2/api/layout-stack/index.html +++ b/7.11.2/api/layout-stack/index.html @@ -7,27 +7,27 @@ Stack | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Stack

A stack is a container layout promoting a hierarchical navigation. It is used to navigate between screens at consecutive levels of hierarchy, steps in a flow or across an app.

{
id: 'PROFILE_TAB',
children: [
{
component: {
id: 'PROFILE_SCREEN',
name: 'ProfileScreen'
}
}
]
}

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation api, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

children#

TypeRequiredDescription
Layout[]YESChild layouts of any kind.

options#

TypeRequiredDescription
OptionsNoOptions that will apply to all screens in stack
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/modal/index.html b/7.11.2/api/modal/index.html index 7096f2d5dd..5ae6b96447 100644 --- a/7.11.2/api/modal/index.html +++ b/7.11.2/api/modal/index.html @@ -7,27 +7,27 @@ Modal | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Modal

showModal()#

Show a screen as a modal.

Parameters#

NameRequiredTypeDescription
layoutYesLayoutAny type of layout. BottomTabs, Stack, SideMenu, Component
Navigation.showModal({
stack: {
children: [{
component: {
name: 'example.ModalScreen',
passProps: {
text: 'stack with one child'
},
options: {
topBar: {
title: {
text: 'Modal'
}
}
}
}
}]
}
});

dismissModal()#

Dismiss the current modal.

Parameters#

NameRequiredTypeDescription
componentIdYesstringAny component id presented in the modal
mergeOptionsNoOptionsOptions to be merged before dismissing the Modal.
Navigation.dismissModal(this.props.componentId);

dismissAllModals()#

Dismiss all current modals at the same time.

Parameters#

NameRequiredTypeDescription
mergeOptionsNoOptionsOptions to be merged before dismissing all modals.
Navigation.dismissAllModals();
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-animations/index.html b/7.11.2/api/options-animations/index.html index dd84910710..901d40fdc9 100644 --- a/7.11.2/api/options-animations/index.html +++ b/7.11.2/api/options-animations/index.html @@ -7,27 +7,27 @@ Animations | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Animations

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-api/index.html b/7.11.2/api/options-api/index.html index fdbf482efc..8d00c3c430 100644 --- a/7.11.2/api/options-api/index.html +++ b/7.11.2/api/options-api/index.html @@ -7,27 +7,27 @@ Options Commands | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Options Commands

setDefaultOptions#

Set default options for all screens. Useful for declaring a consistent style across the app.

Parameters#

NameTypeRequiredDescription
optionsOptionsYesOptions root

Example#

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

mergeOptions#

Change navigation options of a component or layout.

Parameters#

NameTypeRequiredDescription
componentIdstringYesThe component or layout id
optionsOptionsYesOptions root

Example#

Navigation.mergeOptions('componentId', {
bottomTabs: {
visible: false,
},
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-backButton/index.html b/7.11.2/api/options-backButton/index.html index 1b88fef4f5..421fbfb543 100644 --- a/7.11.2/api/options-backButton/index.html +++ b/7.11.2/api/options-backButton/index.html @@ -7,29 +7,29 @@ Back Button Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Back Button Options

Controls the back button styling.

const options = {
topBar: {
backButton: {},
},
};

accessibilityLabel#

Overrides the text that's read by the screen reader when the user interacts with the back button.

TypeRequiredPlatform
stringNoAndroid

id#

Button id for reference press event.

TypeRequiredPlatform
stringNoAndroid

color#

Change the back button color. This will change the text color as well.

TypeRequiredPlatform
colorNoBoth

icon#

Change the default back button icon.

TypeRequiredPlatform
ImageResourceNoBoth

showTitle#

Show or hide the text displayed next to the back button.

TypeRequiredPlatform
numberNoiOS

displayMode#

Set display mode of the back button. Currently works for iOS 14+ only. See: UINavigationItem.BackButtonDisplayMode

TypeRequiredPlatform
enum('default', 'generic', 'minimal')NoiOS

title#

Change the text displayed next to the title. Usually the back button shows the title of the previous screen.

TypeRequiredPlatform
stringNoiOS

visible#

Hide or show the back button.

TypeRequiredPlatform
booleanNoBoth

testID#

Used to interact with the back button in e2e tests.

TypeRequiredPlatform
stringNoBoth

enableMenu#

Enables iOS 14 back button menu display.

TypeRequiredPlatformDefault
booleanNoiOStrue

popStackOnPress#

Controls whether the default back button should pop screen or not.

TypeRequiredDefault
booleanNotrue
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-background/index.html b/7.11.2/api/options-background/index.html index 1125afb4f2..4fa13500ea 100644 --- a/7.11.2/api/options-background/index.html +++ b/7.11.2/api/options-background/index.html @@ -7,27 +7,27 @@ Background Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Background Options

Controls the top bar background styling.

const options = {
topBar: {
background: {}
}
};

color#

Set the background color. Ignored if a component is specified.

TypeRequiredPlatform
ColorNoBoth

component#

Set a react component as the background. Useful when you need to show a gradient as background, for instance.

On Android, setting an id to the Component will prevent the component from being recreated each time it's used by a screen. The component will be created once and whenever possible it will be reused.

TypeRequiredPlatform
ComponentNoBoth

clipToBounds#

Clip the top bar background to bounds if set to true.

TypeRequiredPlatform
booleanNoiOS

translucent#

Allows the NavBar to be translucent (blurred).

TypeRequiredPlatform
booleanNoiOS

blur#

Enable background blur.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-bottomTab/index.html b/7.11.2/api/options-bottomTab/index.html index c318d332e6..5923703aec 100644 --- a/7.11.2/api/options-bottomTab/index.html +++ b/7.11.2/api/options-bottomTab/index.html @@ -7,27 +7,27 @@ Bottom Tab Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Bottom Tab Options

const options = {
bottomTab: {},
};

badge#

TypeRequiredPlatform
stringNoBoth

badgeColor#

TypeRequiredPlatform
colorNoBoth

animateBadge#

TypeRequiredPlatform
booleanNoAndroid

disableIconTint#

TypeRequiredPlatform
booleanNoBoth

dotIndicator#

TypeRequiredPlatform
DotIndicatorNoBoth

fontFamily#

TypeRequiredPlatform
stringNoBoth

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoBoth

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoBoth

fontSize#

TypeRequiredPlatform
numberNoBoth

icon#

TypeRequiredPlatform
ImageResourceNoBoth

iconWidth#

The width (in dp) of the icon.

TypeRequiredPlatform
numberNoAndroid

iconHeight#

The height (in dp) of the icon.

TypeRequiredPlatform
numberNoAndroid

iconColor#

TypeRequiredPlatform
colorNoBoth

selectedFontSize#

TypeRequiredPlatform
numberNoBoth

selectedIcon#

TypeRequiredPlatform
ImageResourceNoBoth

selectedIconColor#

TypeRequiredPlatform
colorNoBoth

iconInsets#

TypeRequiredPlatform
IconInsetsNoBoth

disableSelectedIconTint#

TypeRequiredPlatform
booleanNoAndroid

disableIconTint#

TypeRequiredPlatform
booleanNoAndroid

selectedTextColor#

TypeRequiredPlatform
colorNoBoth

testID#

TypeRequiredPlatform
stringNoBoth

accessibilityLabel#

Overrides the text that's read by the screen reader when the user interacts with the bottomTab button.

TypeRequiredPlatform
stringNoiOS

text#

TypeRequiredPlatform
stringNoBoth

textColor#

TypeRequiredPlatform
colorNoBoth

DotIndicator#

color?: color#
size?: number#
visible?: boolean#
animate?: boolean#

IconInsets#

top?: number#
left?: number#
right?: number#
bottom?: number#
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-bottomTabs/index.html b/7.11.2/api/options-bottomTabs/index.html index ec35534359..21155582c5 100644 --- a/7.11.2/api/options-bottomTabs/index.html +++ b/7.11.2/api/options-bottomTabs/index.html @@ -7,28 +7,28 @@ Bottom Tabs Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Bottom Tabs Options

const options = {
bottomTabs: {},
};

animate#

Controls whether toggling visibility states will be animated.

TypeRequiredPlatform
booleanNoBoth

animateTabSelection#

Controls wether tab selection is animated or not

TypeRequiredPlatform
booleanNoAndroid

backgroundColor#

Change the background color.

TypeRequiredPlatform
colorNoBoth

barStyle#

Controls whether the BottomTabs use dark (black) or light (default) visual style. Requires translucent: true.

TypeRequiredPlatform
enum('default','black')NoBoth

currentTabId#

Select a tab by the id (componentId) of a child contained in it. See Selecting tabs programmatically for a detailed explanation.

TypeRequiredPlatform
numberNoBoth

currentTabIndex#

TypeRequiredPlatform
numberNoBoth

drawBehind#

TypeRequiredPlatform
booleanNoBoth

elevation#

TypeRequiredPlatform
numberNoAndroid

hideShadow#

TypeRequiredPlatform
booleanNoiOS

hideOnScroll#

Hides the BottomTabs on scroll to increase the amount of content visible to the user. The options requires that the scrollable view will be the root view of the screen and that it specifies nestedScrollEnabled: true.

TypeRequiredPlatform
booleanNoAndroid

preferLargeIcons#

TypeRequiredPlatform
booleanNoAndroid

tabsAttachMode#

TypeRequiredPlatform
enum('together','afterInitialTab','onSwitchToTab')NoBoth

testID#

TypeRequiredPlatform
stringNoBoth

titleDisplayMode#

TypeRequiredPlatform
enum('alwaysShow','showWhenActive','alwaysHide')NoBoth

translucent#

A Boolean value that indicates whether the BottomTabs are translucent. For this option to function as expected the screen needs to be drawn behind the BottomTabs; Make sure the list component you're using (FlatList for example) is the root component in the screen and not SafeAreaView. When SafeAreView is the root component it shifts the content above the BottomTabs and the translucent effect isn't visible.

TypeRequiredPlatform
booleanNoiOS

visible#

TypeRequiredPlatform
booleanNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-button/index.html b/7.11.2/api/options-button/index.html index 128341b66f..421749bb5f 100644 --- a/7.11.2/api/options-button/index.html +++ b/7.11.2/api/options-button/index.html @@ -7,27 +7,27 @@ Button Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Button Options

const options = {
topBar: {
leftButtons: [
{
id: 'id',
text: 'Button',
},
],
},
};

allCaps#

This option will set whether characters are all capitalized or not.

TypeRequiredPlatformDefault
booleanNoAndroidtrue

fontSize#

If the button has text, this option is used to set font size in DP.

TypeRequiredPlatform
numberNoBoth

fontFamily#

TypeRequiredPlatform
stringNoBoth

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoBoth

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoBoth

id#

Buttons are identified by their id property. When a button is clicked, a buttonPress event is emitted to js, containing the id of the clicked button.

TypeRequiredPlatform
stringYesBoth

icon#

Button icon. If the button is pushed to the overflow menu, the button text is used instead.

TypeRequiredPlatform
ImageResourceNoBoth

text#

Button text. Ignored if an icon is specified, unless the button is displayed in the overflow menu.

TypeRequiredPlatform
stringNoBoth

showAsAction#

TypeRequiredPlatform
enum('always', 'never', 'withText', 'ifRoom')NoAndroid
  • ifRoom - Only add button to the TopBar if there is room for it, otherwise add it to the overflow menu.
  • never - Never place this button in the TopBar. Instead, list the button in the overflow menu.
  • always - Always place this button in the app bar.

component#

Set a react component as this button's view which will be displayed instead of the regular view.

TypeRequiredPlatform
ComponentNoBoth

iconInsets#

IconInsets are applied to the icon to translate its original position on the screen.

TypeRequiredPlatform
IconInsetsNoiOS

systemItem#

System icon; ignored if an icon is specified. For more information, see apple's guidelines.

TypeRequiredPlatform
enum('done', 'cancel', 'edit', 'save', 'add', 'flexibleSpace', 'fixedSpace', 'compose', 'reply', 'action', 'organize', 'bookmarks', 'search', 'refresh', 'stop', 'camera', 'trash', 'play', 'pause', 'rewind', 'fastForward', 'undo', 'redo')NoiOS

iconBackground#

iconBackground is applied to the icon's background.

TypeRequiredPlatform
iconBackgroundNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-fab/index.html b/7.11.2/api/options-fab/index.html index 2084e21517..84a32455ed 100644 --- a/7.11.2/api/options-fab/index.html +++ b/7.11.2/api/options-fab/index.html @@ -7,27 +7,27 @@ Fab | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Fab

Controls the FAB button styling on Android.

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

id#

Button id for reference press event.

Note

This option is mandatory when you are initiating the FAB button. However you do not need to pass in id when updating the Fab button options with Navigation.mergeOptions.

TypeRequiredPlatform
stringNoAndroid

icon#

Change the default back button icon.

TypeRequiredPlatform
numberNoAndroid

iconColor#

Change the icon color of the FAB button.

TypeRequiredPlatform
colorNoAndroid

backgroundColor#

Change the background color of the FAB button.

TypeRequiredPlatform
colorNoAndroid

clickColor#

Change the on-clicked background color of the FAB button.

TypeRequiredPlatform
colorNoAndroid

rippleColor#

Change the ripple color of the FAB button.

TypeRequiredPlatform
colorNoAndroid

visible#

Show or hide the FAB button.

TypeRequiredPlatform
booleanNoAndroid

alignHorizontally#

Set the horizontal position of the FAB button on the screen.

TypeRequiredPlatform
'left' or 'right'NoAndroid

hideOnScroll#

Hide the FAB button on scroll.

TypeRequiredPlatform
booleanNoAndroid

size#

Set the size of the FAB button.

TypeRequiredPlatform
'mini' or 'regular'NoAndroid
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-hardwareBackButton/index.html b/7.11.2/api/options-hardwareBackButton/index.html index 8ec5d3008d..cf625ebeca 100644 --- a/7.11.2/api/options-hardwareBackButton/index.html +++ b/7.11.2/api/options-hardwareBackButton/index.html @@ -7,27 +7,27 @@ Hardware Back Button Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Hardware Back Button Options

Controls Android hardware back button.

const options = {
hardwareBackButton: {},
};

dismissModalOnPress#

Controls whether the hardware back button should dismiss modal or not.

TypeRequiredDefaultPlatform
booleanNotrueAndroid

popStackOnPress#

Controls whether the hardware back button should pop stacks or not.

TypeRequiredDefaultPlatform
booleanNotrueAndroid
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-iconBackground/index.html b/7.11.2/api/options-iconBackground/index.html index a65c151bf1..69a979d638 100644 --- a/7.11.2/api/options-iconBackground/index.html +++ b/7.11.2/api/options-iconBackground/index.html @@ -7,27 +7,27 @@ iconBackground Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

iconBackground Options

color#

Set the background color.

TypeRequiredPlatform
ColorNoBoth

width#

Set the background width.

TypeRequiredPlatform
numberNoBoth

height#

Set the background height.

TypeRequiredPlatform
numberNoBoth

cornerRadius#

Set the background cornerRadius.

TypeRequiredPlatform
numberNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-iconInsets/index.html b/7.11.2/api/options-iconInsets/index.html index e6951a9452..c6b8be6daf 100644 --- a/7.11.2/api/options-iconInsets/index.html +++ b/7.11.2/api/options-iconInsets/index.html @@ -7,27 +7,27 @@ IconInsets Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

IconInsets Options

top#

Configure top inset

TypeRequiredPlatform
numberNoBoth

bottom#

Configure bottom inset

TypeRequiredPlatform
numberNoBoth

left#

Configure left inset

TypeRequiredPlatform
numberNoBoth

right#

Configure right inset

TypeRequiredPlatform
numberNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-imageResource/index.html b/7.11.2/api/options-imageResource/index.html index 5c3a46767b..0b1d995515 100644 --- a/7.11.2/api/options-imageResource/index.html +++ b/7.11.2/api/options-imageResource/index.html @@ -7,27 +7,27 @@ Image Resource | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Image Resource

ImageResource#

const options = {
topBar: {
leftButtons: [
icon: require('./backButton.png')
]
},
};

The following icon types are available:

TypeRequiredPlatform
ImageRequireSourceNoBoth
stringNoBoth
ImageSystemSourceNoiOS

ImageSystemSource#

system#

You can use platform specific system icons for iOS only.

Example:

const options = {
topBar: {
leftButtons: [
icon: {
system: 'calendar',
fallback: require('./calendar.png')
}
]
},
};
TypeRequiredPlatform
stringYesiOS 13+

fallback#

TypeRequiredPlatform
FallbackSourceNoiOS 13+

FallbackSource#

For iOS, SF Symbols is available only for iOS 13 and later. For iOS 12 and earlier you should use a fallback icon.

ImageRequireSource#

TypeRequiredPlatform
numberNoBoth

string#

TypeRequiredPlatform
numberNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-largeTitle/index.html b/7.11.2/api/options-largeTitle/index.html index d748b80d73..6930677370 100644 --- a/7.11.2/api/options-largeTitle/index.html +++ b/7.11.2/api/options-largeTitle/index.html @@ -7,27 +7,27 @@ Large Title Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Large Title Options

Controls the top bar large title on iOS, available on iOS 11 and above.

const options = {
topBar: {
largeTitle: {},
},
};

visible#

Controls whether the large title is visible or not.

TypeRequiredPlatform
booleanNoiOS

fontSize#

Set the title font size. On Android this value is in sp.

TypeRequiredPlatform
numberNoiOS

color#

Large title text color.

TypeRequiredPlatform
ColorNoiOS

fontFamily#

Set the large title FontFamily.

TypeRequiredPlatform
FontFamilyNoiOS

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoiOS

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-layout/index.html b/7.11.2/api/options-layout/index.html index 48d2e98f87..0d4c4ac668 100644 --- a/7.11.2/api/options-layout/index.html +++ b/7.11.2/api/options-layout/index.html @@ -7,27 +7,27 @@ Layout Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Layout Options

const options = {
layout: {},
};

fitSystemWindows#

TypeRequiredPlatform
booleanNoBoth

backgroundColor#

Set the screen background color.

TypeRequiredPlatform
ColorNoBoth

componentBackgroundColor#

Set background color only for components. On Android, using this option instead of backgroundColor helps reduce overdraw.

TypeRequiredPlatform
ColorNoBoth

orientation#

Set the allowed orientations.

TypeRequiredPlatform
['portrait', 'landscape']NoBoth

topMargin#

Set the layout top margin.

TypeRequiredPlatform
numberNoAndroid

direction#

Set language direction, only works with DefaultOptions. locale is an Android specific option which sets the direction according to the device locale.

TypeRequiredPlatform
enum('rtl', 'ltr', 'locale')NoBoth

autoHideHomeIndicator#

Controls the application's preferred home indicator auto-hiding.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-migration/index.html b/7.11.2/api/options-migration/index.html index e80b179d1a..9733347d6f 100644 --- a/7.11.2/api/options-migration/index.html +++ b/7.11.2/api/options-migration/index.html @@ -7,27 +7,27 @@ options-migration | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

options-migration

Common Options#

navBarTextColor#

Title text color

topBar: {
title: {
color: 'red'
}
}

navBarTextFontSize#

Title font size

topBar: {
title: {
fontSize: 18
}
}

navBarTextFontFamily#

Title font

topBar: {
title: {
fontFamily: 'Helvetica'
}
}

navBarBackgroundColor#

TopBar background color

topBar: {
background: {
color: 'red'
}
}

navBarCustomView#

Use a react view as the TopBar's background or use a React view instead of the textual title.

topBar: {
background: {
component: {
name: 'example.CustomTopBarBackground'
}
},
title: {
component: {
name: 'example.CustomTopBarTitle'
}
}
}

navBarClipToBounds#

Restrict the navbar background color to the navbar, and do not flow behind the status bar.

topBar: {
background: {
component: {
name: 'example.CustomTopBarBackground',
clipToBounds: true
}
},
}

navBarComponentAlignment#

Align the React view used as the title

topBar: {
title: {
component: {
name: 'example.CustomTopBarTitle',
alignment: 'center' | 'fill'
}
}
}

navBarCustomViewInitialProps#

Initial props passed to the React component

topBar: {
background: {
component: {
name: 'example.CustomTopBarBackground',
passProps: {}
}
},
title: {
component: {
name: 'example.CustomTopBarTitle',
passProps: {}
}
}
}

navBarButtonColor#

TopBar button color

topBar: {
rightButtons: [
{
color: 'red'
}
],
leftButtons: [
{
color: 'red'
}
],
backButton: {
color: 'red'
}
}

navBarHidden#

TopBar visibility. When setting visible: false, you probably want to set drawBehind: true as well. Use animate: false to toggle visibility without animation.

topBar: {
visible: false
}

navBarTransparent#

Transparent TopBar. Set drawBehind: true to draw the screen behind the transparent TopBar.

topBar: {
background: {
color: 'transparent'
}
}

drawUnderNavBar#

Draw the screen behind the TopBar, Useful when the TopBar is toggled or transparent

topBar: {
drawBehind: true
}

drawUnderTabBar#

Draw the screen behind the BottomTabs, Useful when toggling BottomTabs or when the BottomTabs are translucent.

bottomTabs: {
drawBehind: true
}

tabBarHidden#

BottomTabs visibility.

bottomTabs: {
visible: false
}

The BottomTab's visibility can be toggled only on Android using mergeOptions:

Navigation.mergeOptions(this.props.componentId, {
bottomTabs: {
visible: false
}
});

On iOS, BottomTab visibility can be changed only when pushing screens. This means that if you'd like to hide BottomTabs when pushing a screen, You'll need to set the property to false in the options passed to the push command or via the static options(passProps) {} api.

statusBarHidden#

StatusBar visibility. For android, also set drawBehind: true.

statusBar: {
visible: false
}

statusBarTextColorScheme#

Theme of text and icons displayed in the StatusBar

statusBar: {
style: 'light' | 'dark'
}

navBarSubtitleColor#

Subtitle color

topBar: {
subtitle: {
color: 'red'
}
}

navBarSubtitleFontFamily#

Subtitle font

topBar: {
subtitle: {
fontFamily: 'Helvetica'
}
}

navBarSubtitleFontSize#

Subtitle font size

topBar: {
subtitle: {
fontSize: 14
}
}

screenBackgroundColor#

Screen color, visible before the actual React view is rendered

layout: {
backgroundColor: 'red'
}

orientation#

layout: {
orientation: ['portrait', 'landscape'] // An array of supported orientations
}

disabledButtonColor#

Button color when enabled: false is used

topBar: {
rightButtons: [
{
disabledColor: 'grey'
}
]
}

navBarButtonFontSize#

Button font size

topBar: {
rightButtons: [
{
fontSize: 13
}
],
leftButtons: [
{
fontSize: 13
}
]
}

navBarLeftButtonFontSize#

Left button font size

{
topBar: {
leftButtons: [
{
fontSize: 13
}
]
}
}

navBarLeftButtonColor#

Left button color

{
topBar: {
leftButtons: [
{
color: 'red'
}
]
}
}

navBarLeftButtonFontWeight#

Left button font weight

{
topBar: {
leftButtons: [
{
weight: '300'
}
]
}
}

navBarRightButtonFontSize#

Right button font size

topBar: {
leftButtons: [
{
fontSize: 13
}
]
}

navBarRightButtonColor#

Right button color

topBar: {
rightButtons: [
{
color: 'red'
}
]
}

navBarRightButtonFontWeight#

Right button font weight

topBar: {
rightButtons: [
{
weight: '400'
}
]
}

modalPresentationStyle#

Controls the behavior of screens displayed modally.

Options supported on iOS#

  • overCurrentContext - Content is displayed over the previous screen. Useful for transparent modals
  • formSheet - Content is centered in the screen
  • pageSheet -Content partially covers the underlying content
  • overFullScreen - Content covers the screen, without detaching previous content.
  • fullScreen - Content covers the screen, previous content is detached.
  • popover - Content is displayed in a popover view.

More information on the different styles for iOS can be found on https://developer.apple.com/documentation/uikit/uimodalpresentationstyle

Options supported on Android#

  • overCurrentContext - Content is displayed over the previous screen. Useful for transparent modals
  • none - Previous content is detached when the Modal's show animation ends
{
modalPresentationStyle: 'overCurrentContext'
}

navBarButtonFontFamily#

Button font family

topBar: {
rightButtons: [
{
fontFamily: 'Helvetica'
}
]
}

iOS only#

navBarHideOnScroll#

Hide TopBar when list is scrolled

topBar: {
hideOnScroll: true
}

navBarTranslucent#

Translucent TopBar, Setting drawBehind: true is required for this property to work as expected.

topBar: {
drawBehind: true,
background: {
translucent: true
}
}

navBarNoBorder#

Remove TopBar border (hair line)

topBar: {
noBorder: true
}

navBarBlur#

Blur the area behind the TopBar, Setting drawBehind: true and topBar background transparent: true is required for this property to work as expected.

topBar: {
drawBehind: true,
background: {
blur: true,
transparent: true
}
}

rootBackgroundImageName#

  • iOS: name of image in Images.xcassets
  • Android: name of drawable
{
rootBackgroundImage: require('rootBackground.png')
}

screenBackgroundImageName#

name of image in Images.xcassets

{
backgroundImage: require('background.png')
}

statusBarHideWithNavBar#

Hide the StatusBar if the TopBar is also hidden

statusBar: {
hideWithTopBar: true
}

statusBarBlur#

Blur the area behind the StatusBar

statusBar: {
blur: true
}

statusBarAnimate#

Animate between style changes of the StatusBar

statusBar: {
animate: true
}

disabledBackGesture#

Disable the back (swipe) gesture used to pop screens

{
popGesture: false
}

largeTitle#

Use iOS 11 large title

topBar: {
largeTitle: {
visible: true,
fontSize: 30,
color: 'red',
fontFamily: 'Helvetica'
}
}

Android Options#

topBarElevationShadowEnabled#

TopBar elevation in dp. Set this value to 0 to disable the TopBar's shadow.

topBar: {
elevation: 0
}

navBarTitleTextCentered#

Title alignment

topBar: {
title: {
alignment: 'center'|'fill'
}
}

statusBarColor#

StatusBar color

statusBar: {
backgroundColor: 'red'
}

navigationBarColor#

NavigationBar color

navigationBar: {
backgroundColor: 'red'
}

drawUnderStatusBar#

Draw content behind the StatusBar

statusBar: {
drawBehind: true
}

navBarHeight#

TopBar height in dp

topBar: {
height: 70
}

navBarTopPadding#

Content top margin

layout: {
topMargin: 26
}

topTabsHeight#

TopTabs height

topTabs: {
height: 70
}

topBarBorderColor#

TopBar border color

topBar: {
borderColor: 'red'
}

topBarBorderWidth#

TopBar border height

topBar: {
borderHeight: 1.3
}

Unsupported options#

  • disabledSimultaneousGesture
  • statusBarTextColorSchemeSingleScreen
  • navBarButtonFontWeight
  • topBarShadowColor
  • topBarShadowOpacity
  • topBarShadowOffset
  • topBarShadowRadius
  • preferredContentSize
  • navBarSubTitleTextCentered
  • collapsingToolBarImage
  • collapsingToolBarCollapsedColor
  • navBarTextFontBold
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-modal/index.html b/7.11.2/api/options-modal/index.html index a9f4798a16..fd1ded235c 100644 --- a/7.11.2/api/options-modal/index.html +++ b/7.11.2/api/options-modal/index.html @@ -7,27 +7,27 @@ Modal Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Modal Options

const options = {
swipeToDismiss
};

swipeToDismiss#

Control wether this modal should be dismiss using swipe gesture when the modalPresentationStyle is pageSheet

TypeRequiredPlatformDefault
booleanNoBothtrue
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-navigationBar/index.html b/7.11.2/api/options-navigationBar/index.html index c14bff0d2b..5bec0c7c3d 100644 --- a/7.11.2/api/options-navigationBar/index.html +++ b/7.11.2/api/options-navigationBar/index.html @@ -7,27 +7,27 @@ Navigation Bar Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Navigation Bar Options

The Navigation Bar is the area at the bottom of the screen containing Android's three navigation buttons: Back, Home and Recents.

An example of a dark navigation bar:



const options = {
navigationBar: {}
};

visible#

Set the navigation bar visibility.

TypeRequiredPlatform
booleanNoAndroid

backgroundColor#

Set the navigation bar color. When a light background color is used, the color of the navigation bar icons will adapt to a dark color.

TypeRequiredPlatformDefault
ColorNoAndroid'black'
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-overlay/index.html b/7.11.2/api/options-overlay/index.html index 519fc9d7fe..17fde12daa 100644 --- a/7.11.2/api/options-overlay/index.html +++ b/7.11.2/api/options-overlay/index.html @@ -7,28 +7,28 @@ Overlay | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Overlay

Controls overlay options

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.

TypeRequiredPlatform
booleanNoBoth

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.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-preview/index.html b/7.11.2/api/options-preview/index.html index 6738da4c5b..ead7cae483 100644 --- a/7.11.2/api/options-preview/index.html +++ b/7.11.2/api/options-preview/index.html @@ -7,27 +7,27 @@ Preview (iOS) | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Preview (iOS)

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-root/index.html b/7.11.2/api/options-root/index.html index e127ccb2df..8b0fabd7ec 100644 --- a/7.11.2/api/options-root/index.html +++ b/7.11.2/api/options-root/index.html @@ -7,27 +7,27 @@ The options object | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

The options object

const options = {
bottomTab,
bottomTabs,
topBar,
layout,
sideMenu,
overlay,
modal,
preview,
navigationBar
};

bottomTab#

Controls the bottom tab icon, font, color, and more.

TypeRequiredPlatform
BottomTabOptionsNoBoth

bottomTabs#

Controls the bottom tabs container.

TypeRequiredPlatform
BottomTabsOptionsNoBoth

topBar#

Controls the Stack top bar styling.

TypeRequiredPlatform
TopBarOptionsNo

statusBar#

Controls the system status bar styling.

TypeRequiredPlatform
StatusBarOptionsNoBoth

layout#

TypeRequiredPlatform
LayoutOptionsNoBoth

sideMenu#

TypeRequiredPlatform
SideMenuOptionsNoBoth

overlay#

TypeRequiredPlatform
OverlayOptionsNoBoth

animations#

TypeRequiredPlatform
AnimationsOptionsNoBoth

modal#

TypeRequiredPlatform
ModalOptionsNoBoth

preview#

TypeRequiredPlatform
PreviewOptionsNoiOS

splitView#

TypeRequiredPlatform
SplitViewOptionsNoiOS

fab#

TypeRequiredPlatform
FabNoAndroid

modalPresentationStyle#

Configure the presentation style of the modal.

TypeRequiredPlatform
enum('formSheet', 'pageSheet', 'fullScreen', 'overFullScreen', 'overCurrentContext', 'popOver', 'none')NoBoth

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.

iOSAndroid
  • iOS 12 and below - fullScreen
  • iOS 13 and above - pageSheet
fullScreen

modalTransitionStyle#

Configure the transition style of the modal.

TypeRequiredPlatform
enum('coverVertical', 'crossDissolve', 'flipHorizontal', 'partialCurl')NoBoth

popGesture#

Enable or disable swipe back to pop gesture.

TypeRequiredPlatform
booleanNoiOS

backgroundImage#

Background image of the screen.

TypeRequiredPlatform
ImageNoiOS

rootBackgroundImage#

Background image for the Navigation View.

TypeRequiredPlatform
ImageNoAndroid

blurOnUnmount#

Enable or disable automaticall blur of the focused input, dismissing keyboard on unmount.

TypeRequiredPlatformDefault
booleanNoAndroidfalse

navigationBar#

Enable or disable automaticall blur of the focused input, dismissing keyboard on unmount.

TypeRequiredPlatform
booleanNoAndroid
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-scrollEdgeAppearance/index.html b/7.11.2/api/options-scrollEdgeAppearance/index.html index 596d1f25b3..a011bf1c89 100644 --- a/7.11.2/api/options-scrollEdgeAppearance/index.html +++ b/7.11.2/api/options-scrollEdgeAppearance/index.html @@ -7,28 +7,28 @@ Scroll Edge Appearance Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Scroll Edge Appearance Options

Controls the top bar background styling.

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.

TypeRequiredPlatform
booleanNoiOS

color#

Set the background color.

TypeRequiredPlatform
ColorNoiOS

translucent#

Allows the Scroll Edge Appearance to be translucent (blurred).

TypeRequiredPlatform
booleanNoiOS

borderColor#

Change the topBar border color.

TypeRequiredPlatform
ColorNoiOS

noBorder#

Disables border at the bottom of the TopBar.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-sideMenu/index.html b/7.11.2/api/options-sideMenu/index.html index 85c5db0ee0..8c6866da6d 100644 --- a/7.11.2/api/options-sideMenu/index.html +++ b/7.11.2/api/options-sideMenu/index.html @@ -7,27 +7,27 @@ Side Menu Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Side Menu Options

const options = {
sideMenu: {
left: {},
right: {},
openGestureMode: 'entireScreen',
},
};

left#

Configure the left side menu.

TypeRequiredPlatform
SideMenuSideNoBoth

right#

Configure the right side menu.

TypeRequiredPlatform
SideMenuSideNoBoth

openGestureMode#

Configure how a user is allowed to open a drawer using gestures.

TypeRequiredPlatformDefault
enum('entireScreen', 'bezel')NoiOS'bezel'
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-sideMenuSide/index.html b/7.11.2/api/options-sideMenuSide/index.html index e90def8fd8..d133658008 100644 --- a/7.11.2/api/options-sideMenuSide/index.html +++ b/7.11.2/api/options-sideMenuSide/index.html @@ -7,27 +7,27 @@ Side Menu Side Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Side Menu Side Options

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

visible#

Show or hide the side menu.

TypeRequiredPlatform
booleanNoBoth

enabled#

Enable or disable the side menu.

TypeRequiredPlatform
booleanNoBoth

width#

Set the width of the side menu.

TypeRequiredPlatform
numberNoBoth

height#

Set the height of the side menu.

TypeRequiredPlatform
numberNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-splitView/index.html b/7.11.2/api/options-splitView/index.html index cc2e8eaa9e..8e26015819 100644 --- a/7.11.2/api/options-splitView/index.html +++ b/7.11.2/api/options-splitView/index.html @@ -7,29 +7,29 @@ SplitView Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

SplitView Options

displayMode#

Master view display mode.

TypeRequiredDefaultPlatform
enum('auto', 'visible', 'hidden', 'overlay')No'auto'iOS

primaryEdge#

Master view side. Leading is left. Trailing is right.

TypeRequiredDefaultPlatform
enum('leading', 'trailing')No'leading'iOS

minWidth#

Set the minimum width of master view.

TypeRequiredPlatform
numberNoiOS

maxWidth#

Set the maximum width of master view.

TypeRequiredPlatform
numberNoiOS

primaryBackgroundStyle#

Set background style of sidebar. Currently works for Mac Catalyst apps only. See: Optimizing Your iPad App for Mac

TypeRequiredDefaultPlatform
enum('none', 'sidebar')No'none'iOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-stack/index.html b/7.11.2/api/options-stack/index.html index 72acc0bd91..07f5561ac3 100644 --- a/7.11.2/api/options-stack/index.html +++ b/7.11.2/api/options-stack/index.html @@ -7,27 +7,27 @@ Top Bar Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Top Bar Options

TopBar#

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

visible#

Determines if TopBar is visible or not.

TypeRequiredPlatform
booleanNoBoth

animate#

Determines if changing the TopBar visibility will be animated or not.

TypeRequiredPlatform
booleanNoBoth

title#

Controls the top bar title.

TypeRequiredPlatform
TitleNoBoth

subtitle#

Controls the top bar subtitle.

TypeRequiredPlatform
SubitleNoBoth

backButton#

Controls the top bar back button.

TypeRequiredPlatform
BackButtonNoBoth

background#

Controls the top bar background.

TypeRequiredPlatform
BackgroundNoBoth

scrollEdgeAppearance#

Controls the appearance settings when the scrollable content reaches the matching edge of the navigation bar.

TypeRequiredPlatform
Scroll Edge BackgroundNoiOS 13+

barStyle#

Control the TopBar blur style. Requires translucent: true.

TypeRequiredPlatform
enum('default','black')NoiOS

height#

Set TopBar height, in dp units, on Android only. For iOS use largeTitle see Options.

TypeRequiredPlatform
numberNoAndroid

borderColor#

Change the topBar border color.

TypeRequiredPlatform
ColorNoBoth

borderHeight#

Set the border height of the navbar in dp.

TypeRequiredPlatform
numberNoAndroid

drawBehind#

Controls if child should be drawn behind the TopBar or below it.

TypeRequiredPlatform
booleanNoBoth

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.

TypeRequiredPlatform
numberNoAndroid

hideOnScroll#

Hide the TopBar when a scrolling layout is scrolled.

TypeRequiredPlatform
booleanNoBoth
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

hideNavBarOnFocusSearchBar#

Indicates whether the navigation bar should be hidden when searching. True by default.

TypeRequiredPlatform
booleanNoiOS 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 section for more details.

Android support

Android currently only supports a single left button and does not support custom left Buttons.

TypeRequiredPlatform
[Button]NoBoth

leftButtonColor#

Default color for left buttons.

TypeRequiredPlatform
ColorNoBoth

noBorder#

Disables border at the bottom of the TopBar.

TypeRequiredPlatform
booleanNoiOS

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 section for more details.

TypeRequiredPlatform
[Button]NoBoth

rightButtonColor#

Default color for the right button.

TypeRequiredPlatform
ColorNoBoth

searchBar#

Controls the SearchBar.

TypeRequiredPlatform
OptionsSearchBarNoiOS 11+
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

searchBarHiddenWhenScrolling#

Hides the UISearchBar when scrolling.

TypeRequiredPlatform
booleanNoiOS 11+
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

searchBarPlaceholder#

The placeholder value in the UISearchBar.

TypeRequiredPlatform
stringNoiOS 11+
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

searchBarBackgroundColor#

The background color of the UISearchBar's TextField.

TypeRequiredPlatform
ColorNoiOS 13+
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

searchBarTintColor#

The tint color of the UISearchBar. Affects text selection color, as well as "Cancel" button color.

TypeRequiredPlatform
ColorNoiOS 13+
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-statusBar/index.html b/7.11.2/api/options-statusBar/index.html index 8926ae1ec3..ff7904ec2c 100644 --- a/7.11.2/api/options-statusBar/index.html +++ b/7.11.2/api/options-statusBar/index.html @@ -7,27 +7,27 @@ Status Bar Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Status Bar Options

const options = {
statusBar: {},
};

visible#

Set the status bar visibility.

TypeRequiredPlatform
booleanNoBoth

style#

Set the text color of the status bar.

TypeRequiredPlatformDefault
enum('light', 'dark')NoBoth'light'

backgroundColor#

Set the background color of the status bar.

TypeRequiredPlatform
ColorNoAndroid

drawBehind#

Draw screen behind the status bar.

TypeRequiredPlatform
booleanNoAndroid

translucent#

Set the status bar to be translucent.

TypeRequiredPlatform
booleanNoAndroid

animate#

Animate StatusBar style changes.

TypeRequiredPlatform
booleanNoiOS

blur#

Blur content beneath the StatusBar.

TypeRequiredPlatform
booleanNoiOS

hideWithTopBar#

Automatically hide the StatusBar when the TopBar hides.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-subtitle/index.html b/7.11.2/api/options-subtitle/index.html index ecc90e9694..f7ae96a52a 100644 --- a/7.11.2/api/options-subtitle/index.html +++ b/7.11.2/api/options-subtitle/index.html @@ -7,27 +7,27 @@ Subtitle Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Subtitle Options

Controls the top bar subtitle.

const options = {
topBar: {
subtitle: {},
},
};

text#

Subtitle text.

TypeRequiredPlatform
stringNoBoth

fontSize#

Subtitle fontSize. On Android this value is sp.

TypeRequiredPlatform
numberNoBoth

color#

Subtitle color.

TypeRequiredPlatform
ColorNoBoth

fontFamily#

Subtitle FontFamily.

TypeRequiredPlatform
FontFamilyNoBoth

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoBoth

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoBoth

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.

TypeRequiredPlatform
enum('center', 'fill')NoBoth

testID#

Used to interact with the TopBar in e2e tests.

TypeRequiredPlatform
stringNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/options-title/index.html b/7.11.2/api/options-title/index.html index d3584c6595..eb52942334 100644 --- a/7.11.2/api/options-title/index.html +++ b/7.11.2/api/options-title/index.html @@ -7,27 +7,27 @@ Title Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Title Options

Controls the top bar title.

const options = {
topBar: {
title: {},
},
};

text#

Set the title for the TopBar.

TypeRequiredPlatform
stringNoBoth

fontSize#

Set the title font size. On Android this value is in sp.

TypeRequiredPlatform
numberNoBoth

color#

Set the title color.

TypeRequiredPlatform
ColorNoBoth

fontFamily#

Set the title font family.

TypeRequiredPlatform
FontFamilyNoBoth

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoBoth

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoBoth

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.

defaults

center is the default option on iOS while fill is the default for Android.

TypeRequiredPlatform
enum('center','fill')NoBoth

component#

Set a react component as the title. If this option is specified then text is ignored.

TypeRequiredPlatform
ComponentNoBoth

topMargin#

Change to TopBar's top margin.

TypeRequiredPlatform
numberNoAndroid

visible#

Determines whether the TopBar is visible or not.

TypeRequiredPlatform
booleanNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/overlay/index.html b/7.11.2/api/overlay/index.html index a79aa8191f..fd4f61d1e6 100644 --- a/7.11.2/api/overlay/index.html +++ b/7.11.2/api/overlay/index.html @@ -7,27 +7,27 @@ Overlay | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Overlay

showOverlay()#

Shows a component as an overlay.

NameRequiredTypeDescription
layoutYesLayoutAny type of layout. Typically, Component layout is used in Overlays but it's possible to load any other layout (BottomTabs, Stack, SideMenu, Component)
Navigation.showOverlay({
component: {
name: 'example.Overlay',
options: {
layout: {
componentBackgroundColor: 'transparent',
},
overlay: {
interceptTouchOutside: true
}
}
}
});

dismissOverlay()#

Dismisses an overlay matching the given overlay componentId.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe component id presented in Overlay
Navigation.dismissOverlay(this.props.componentId);

dismissAllOverlays()#

Dismisses all overlays.

Navigation.dismissAllOverlays();
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/root/index.html b/7.11.2/api/root/index.html index ca24419bff..ac84791c47 100644 --- a/7.11.2/api/root/index.html +++ b/7.11.2/api/root/index.html @@ -7,27 +7,27 @@ Root | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Root

setRoot()#

Used to set the UI of the application. Read more about the root hierarchy level in the docs section.

Parameters#

NameRequiredTypeDescription
layoutYesLayoutAny type of layout. BottomTabs, Stack, SideMenu, Component

Example#

Navigation.setRoot({
root: {
stack: {
children: [{
component: {
name: 'example.FirstTabScreen',
passProps: {
text: 'This is tab 1'
}
}
}],
options: {
bottomTab: {
text: 'Tab 1',
icon: require('../images/one.png'),
testID: 'FIRST_TAB_BAR_BUTTON'
}
}
}
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/sideMenu-api/index.html b/7.11.2/api/sideMenu-api/index.html index 22655919fa..46b454aad1 100644 --- a/7.11.2/api/sideMenu-api/index.html +++ b/7.11.2/api/sideMenu-api/index.html @@ -7,27 +7,27 @@ Side Menu | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Side Menu

This layout allows to implement sidemenus, which can be opened by swiping from one side towards the other side.

{
left: {
component: {}
},
center: {
stack: {
options: {},
children: [{
component: {}
}]
}
},
right: {
component: {}
}
}

center: Layout#

Center component, contains the main application.

left?: Layout#

Contain the left component layout.

right?: Layout#

Contain the right component layout.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/stack/index.html b/7.11.2/api/stack/index.html index eb54ef1b40..aa751189fd 100644 --- a/7.11.2/api/stack/index.html +++ b/7.11.2/api/stack/index.html @@ -7,27 +7,27 @@ Stack | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Stack

push()#

Push a screen into the stack and update the display according to the screen options.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe componentId of a screen pushed into the stack, or the id of the stack.
layoutNoLayoutThe layout being pushed into the stack. Any type of layout (except stack) can be pushed into stacks. Typically, Component layout is pushed into stacks but it's possible to push SideMenu or BottomTabs as well.

Example#

The most common use case - push a single React component.
Navigation.push(this.props.componentId, {
component: {
name: 'example.PushedScreen'
}
});

pop()#

Pop the top screen from the stack.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe componentId of a screen pushed into the stack, or the stack id.
mergeOptionsNoOptionsOptions to be merged before popping the screen (optional).
Navigation.pop(this.props.componentId);

popToRoot()#

Pop all screens pushed into the stack.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe componentId of a screen pushed into the stack, or the stack id.
mergeOptionsNoOptionsOptions to be merged before popping the screen (optional).
Navigation.popToRoot(this.props.componentId);

popTo()#

Pop the stack to a given component.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe destination componentId
mergeOptionsNoOptionsOptions to be merged before popping the screen (optional).
Navigation.popTo(componentId);

setStackRoot()#

Reset the stack to the given layout (accepts multiple children).

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe componentId of a screen pushed into the stack, or the stack id.
layoutYesLayout or Layout[]A single Component or array of components.

Example#

Navigation.setStackRoot(this.props.componentId, {
component: {
name: 'example.NewRootScreen'
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/api/topBar-searchBar/index.html b/7.11.2/api/topBar-searchBar/index.html index a1fa9a52cc..955a4082b9 100644 --- a/7.11.2/api/topBar-searchBar/index.html +++ b/7.11.2/api/topBar-searchBar/index.html @@ -7,27 +7,27 @@ SearchBar | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

SearchBar

visible#

TypeRequiredPlatformDescription
booleanNoiOSDetermines if SearchBar is visible or not

focus#

TypeRequiredPlatformDescription
booleanNoiOSAuto focuses search bar

hideOnScroll#

TypeRequiredPlatformDescription
booleanNoiOSHides the UISearchBar when scrolling.

hideTopBarOnFocus#

TypeRequiredPlatformDescription
booleanNoiOSIndicates whether the navigation bar should be hidden when searching. True by default.

obscuresBackgroundDuringPresentation#

TypeRequiredPlatformDescription
booleanNoiOSA Boolean indicating whether the underlying content is obscured during a search.

backgroundColor#

TypeRequiredPlatformDescription
ColorNoiOSThe background color of the UISearchBar's TextField.

tintColor#

TypeRequiredPlatformDescription
ColorNoiOSThe tint color of the UISearchBar. Affects text selection color, as well as "Cancel" button color.

searchBarPlaceholder#

TypeRequiredPlatformDescription
stringNoiOSThe placeholder value in the UISearchBar.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/advanced-navigation/index.html b/7.11.2/docs/advanced-navigation/index.html index 15942f4b81..422b7fe510 100644 --- a/7.11.2/docs/advanced-navigation/index.html +++ b/7.11.2/docs/advanced-navigation/index.html @@ -7,15 +7,15 @@ Advanced navigation | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -36,14 +36,14 @@
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.

Navigation.events().registerAppLaunchedListener(async () => {
Navigation.setRoot(isLoggedIn() ? mainRoot : loginRoot);
});
function isLoggedIn() {
// TODO: your business logic goes here
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/app-launch/index.html b/7.11.2/docs/app-launch/index.html index 129a539ebe..09adc579c4 100644 --- a/7.11.2/docs/app-launch/index.html +++ b/7.11.2/docs/app-launch/index.html @@ -7,27 +7,27 @@ Launching the app | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

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.

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
  2. 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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/basic-navigation/index.html b/7.11.2/docs/basic-navigation/index.html index b848c552bf..475e17648e 100644 --- a/7.11.2/docs/basic-navigation/index.html +++ b/7.11.2/docs/basic-navigation/index.html @@ -7,15 +7,15 @@ Basic navigation | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -35,14 +35,14 @@
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.

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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/before-you-start/index.html b/7.11.2/docs/before-you-start/index.html index 72b11afe21..8e9499000d 100644 --- a/7.11.2/docs/before-you-start/index.html +++ b/7.11.2/docs/before-you-start/index.html @@ -7,27 +7,27 @@ Before you start | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Before you start

React Native Navigation is a module, dependent on and intended to be used alongside 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 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 the library. If you're just looking around, we suggest checking out basic navigation first.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/bottomTabs/index.html b/7.11.2/docs/bottomTabs/index.html index 8fb188e1cc..d17893edb2 100644 --- a/7.11.2/docs/bottomTabs/index.html +++ b/7.11.2/docs/bottomTabs/index.html @@ -7,28 +7,28 @@ Bottom tabs | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Bottom tabs

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

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.

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.

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

Visibility can also be changed when pushing screens.

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:

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.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/community-libraries/index.html b/7.11.2/docs/community-libraries/index.html index bdc9a7155d..3f200311da 100644 --- a/7.11.2/docs/community-libraries/index.html +++ b/7.11.2/docs/community-libraries/index.html @@ -7,15 +7,15 @@ Community libraries | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -24,14 +24,14 @@ Drawer API built on top of React Native Navigation for iOS and Android.

React Native Navigation Search Bar : React Native Elements search bar with collapsible header built for React Native Navigation.

React Native Navigation Register Screens : Utility function to register array of screens instead of calling Navigation.registerComponent multiple times.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/externalComponent/index.html b/7.11.2/docs/externalComponent/index.html index 81045b1510..9e44e7dea8 100644 --- a/7.11.2/docs/externalComponent/index.html +++ b/7.11.2/docs/externalComponent/index.html @@ -7,15 +7,15 @@ External Component | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -27,14 +27,14 @@
@Override
public View asView() {
return content;
}
}

Registering the component#

public class MainApplication extends NavigationApplication {
@Override
public void onCreate() {
super.onCreate();
registerExternalComponent("MyExternalComponent", new FragmentCreator());
}
}

iOS#

ViewController registration#

[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:

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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/functionalComponents/index.html b/7.11.2/docs/functionalComponents/index.html index 6db89d79dc..7267e2f3c0 100644 --- a/7.11.2/docs/functionalComponents/index.html +++ b/7.11.2/docs/functionalComponents/index.html @@ -7,15 +7,15 @@ Using functional components as screens | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -26,14 +26,14 @@
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 (
<View>
<Text>Screen Component</Text>
</View>
)
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/installing/index.html b/7.11.2/docs/installing/index.html index 2908230e2d..5fd07053fb 100644 --- a/7.11.2/docs/installing/index.html +++ b/7.11.2/docs/installing/index.html @@ -7,15 +7,15 @@ Installation | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -36,14 +36,14 @@
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}"
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/meta-contributing/index.html b/7.11.2/docs/meta-contributing/index.html index 58963f99a0..d392283d68 100644 --- a/7.11.2/docs/meta-contributing/index.html +++ b/7.11.2/docs/meta-contributing/index.html @@ -7,28 +7,28 @@ Contributing | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

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 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 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.
  1. 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.

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:

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 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". 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 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.

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 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 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 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 with Prettier 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#

FolderDescription
libThe project itself composed of:
lib/androidandroid sources and unit tests
lib/iosiOS sources and unit tests
lib/srcTypeScript sources and unit tests
lib/distcompiled javascript sources and unit tests
lib/dist/index.jsthe entry point for import Navigation from 'react-native-navigation'
e2edetox e2e tests on both Android and iOS
playgroundThe 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 <root>/lib for faster local development (no need to npm install locally).
integrationmisc javascript integration tests, proving integration with other libraries like redux
scriptsall scripts

Scripts#

CommandDescription
npm installinstalls dependencies
npm run buildcompiles TypeScript sources ./lib/src into javascript ./lib/dist
npm run cleancleans all build directories, stops packager, fixes flakiness by removing watchman cache, etc.
npm run startstarts the react-native packager for local debugging
npm run xcodefor convenience, opens xcode in this project
npm run install-androidbuilds playground debug/release version and installs on running android devices/emulators.
Options: -- --release
npm run uninstall-androiduninstalls playground from running android devices/simulators
npm run test-jsruns javascript tests and coverage report
npm run test-unit-iosruns ios unit tests in debug/release
Options: -- --release
npm run test-unit-androidruns android unit tests in debug/release
Options: -- --release
npm run test-e2e-iosruns the ios e2e tests using detox in debug/release
Options: -- --release
npm run test-e2e-androidruns the android e2e tests using detox in debug/release
Options: -- --release
npm run test-allruns all tests in parallel
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/modal/index.html b/7.11.2/docs/modal/index.html index be5e76eea4..d52f04e2fc 100644 --- a/7.11.2/docs/modal/index.html +++ b/7.11.2/docs/modal/index.html @@ -7,15 +7,15 @@ Modal | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -28,14 +28,14 @@ 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:

{
hardwareBackButton: {
dismissModalOnPress: false;
}
}

As a result, pressing the hardware back button will not dismiss the modal and will dispatch navigationButtonPress 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 determines the look and feel of a screen displayed as modal.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/overlay/index.html b/7.11.2/docs/overlay/index.html index 875ee60a02..dc9dea4f3c 100644 --- a/7.11.2/docs/overlay/index.html +++ b/7.11.2/docs/overlay/index.html @@ -7,15 +7,15 @@ Overlay | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -30,14 +30,14 @@
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;
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/passing-data-to-components/index.html b/7.11.2/docs/passing-data-to-components/index.html index 5da58c9c6f..6cabc27e92 100644 --- a/7.11.2/docs/passing-data-to-components/index.html +++ b/7.11.2/docs/passing-data-to-components/index.html @@ -7,27 +7,27 @@ Passing data to components | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Passing data to components

Initial props#

React components use props to receive data when they are created. When displaying the 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:

Navigation.push(this.props.componentId, {
component: {
name: 'UserProfile',
id: 'PROFILE_SCREEN_ID'
passProps: {
name: 'John Doe',
status: 'online'
}
}
});
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, lets see how to use props passed in the push command to set the TopBar title.

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() command. Updating props triggers the component lifecycle methods related to updating.

Notice that we're using the component id in order to update props of this specific instance of the component.

Navigation.updateProps('PROFILE_SCREEN_ID', {
status: 'offline'
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/playground-app/index.html b/7.11.2/docs/playground-app/index.html index 7b0a409d13..d6e5aea20c 100644 --- a/7.11.2/docs/playground-app/index.html +++ b/7.11.2/docs/playground-app/index.html @@ -7,28 +7,28 @@ Playground app | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

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). Before you start changing things, make sure everything works.
    - To easily run all tests in parallel `npm run test-all`
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/root/index.html b/7.11.2/docs/root/index.html index 36d8a47306..eaff0ed2d3 100644 --- a/7.11.2/docs/root/index.html +++ b/7.11.2/docs/root/index.html @@ -7,28 +7,28 @@ Root | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Root

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.

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.

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:
Navigation.setRoot({
root: {
stack: {
children: [
{
component: {
name: 'LOGIN_SCREEN'
}
}
]
}
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/screen-lifecycle/index.html b/7.11.2/docs/screen-lifecycle/index.html index e744d3a71a..18d3ac19a2 100644 --- a/7.11.2/docs/screen-lifecycle/index.html +++ b/7.11.2/docs/screen-lifecycle/index.html @@ -7,27 +7,27 @@ Screen Lifecycle | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

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, 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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/showcases/index.html b/7.11.2/docs/showcases/index.html index 55c5b6517c..c494d346e2 100644 --- a/7.11.2/docs/showcases/index.html +++ b/7.11.2/docs/showcases/index.html @@ -7,15 +7,15 @@ Showcases | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -23,14 +23,14 @@
# 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
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/sideMenu-disable/index.html b/7.11.2/docs/sideMenu-disable/index.html index a765015acb..ae0e994f56 100644 --- a/7.11.2/docs/sideMenu-disable/index.html +++ b/7.11.2/docs/sideMenu-disable/index.html @@ -7,15 +7,15 @@ Disable Open and Close gesture | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -24,14 +24,14 @@
constructor(props) {
super(props);
Navigation.events().bindComponent(this);
}
render() {
return (
<View>
<Text>Click the hamburger icon to open the side menu</Text>
</View>
);
}
navigationButtonPressed({ buttonId }) {
if (buttonId === 'sideMenu') {
Navigation.mergeOptions(this, {
sideMenu: {
left: {
visible: true
}
}
});
}
}
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/sideMenu/index.html b/7.11.2/docs/sideMenu/index.html index 25f33447ff..db81338280 100644 --- a/7.11.2/docs/sideMenu/index.html +++ b/7.11.2/docs/sideMenu/index.html @@ -7,15 +7,15 @@ Side Menu | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -24,14 +24,14 @@
constructor(props) {
super(props);
Navigation.events().bindComponent(this);
}
render() {
return (
<View>
<Text>Click the hamburger icon to open the side menu</Text>
</View>
);
}
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:

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).

Navigation.push('CenterStack', {
component: {
name: Screens.Pushed,
options: {
sideMenu: {
left: {
visible: false
}
}
}
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/stack-backButton/index.html b/7.11.2/docs/stack-backButton/index.html index c4cf72d796..91dd124e42 100644 --- a/7.11.2/docs/stack-backButton/index.html +++ b/7.11.2/docs/stack-backButton/index.html @@ -7,27 +7,27 @@ The Back button | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

The 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.

backButton: {
color: 'red',
icon: require('../../img/customChevron.png')
}

Controling visibility#

The back buttons visbility can be controlled with the visible property.

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.

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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/stack-backNavigation/index.html b/7.11.2/docs/stack-backNavigation/index.html index 657797745f..c3b8086504 100644 --- a/7.11.2/docs/stack-backNavigation/index.html +++ b/7.11.2/docs/stack-backNavigation/index.html @@ -7,27 +7,27 @@ Back Navigation | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Back Navigation

Disabling back navigation#

Handling back navigation#

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/stack-buttons/index.html b/7.11.2/docs/stack-buttons/index.html index a647bbb405..1f30908dc5 100644 --- a/7.11.2/docs/stack-buttons/index.html +++ b/7.11.2/docs/stack-buttons/index.html @@ -7,29 +7,29 @@ TopBar Buttons | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

TopBar Buttons

Buttons can be added to the right and left 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 with the relevant actions when the button is clicked.

On Android, use the 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:

Navigation.registerComponent('ButtonComponent', () => require('./ButtonComponent'));

Now you can create buttons which use the component registered with 'ButtonComponent' as thier custom view:

topBar: {
rightButtons: [
{
component: {
name: '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

// Declare the button and assign it a unique id
topBar: {
rightButtons: [
{
id: 'SomeUniqueId',
component: {
name: '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.

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.

Navigation.mergeOptions(this.props.componentId, {
topBar: {
rightButtons: [],
},
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/stack-programmatically/index.html b/7.11.2/docs/stack-programmatically/index.html index 42ef5a3e74..0a57704f57 100644 --- a/7.11.2/docs/stack-programmatically/index.html +++ b/7.11.2/docs/stack-programmatically/index.html @@ -7,15 +7,15 @@ Interact programmatically with the Stack | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -23,14 +23,14 @@ 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.

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.

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'
}
});
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/stack/index.html b/7.11.2/docs/stack/index.html index 7068f8147c..1827f47c5d 100644 --- a/7.11.2/docs/stack/index.html +++ b/7.11.2/docs/stack/index.html @@ -7,15 +7,15 @@ Stack | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -26,14 +26,14 @@ 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.

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.

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',
},
});
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/style-animations/index.html b/7.11.2/docs/style-animations/index.html index 2eeb10cf93..a32a83a885 100644 --- a/7.11.2/docs/style-animations/index.html +++ b/7.11.2/docs/style-animations/index.html @@ -7,15 +7,15 @@ Animations | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -25,14 +25,14 @@ 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.

Deprecation warning
options: {
animations: {
showModal: {
alpha: {
from: 0,
to: 1,
duration: 300
}
}
}
}

Consider using enter, exit animations instead.

options: {
animations: {
showModal: {
enter :{
enabled:true,
alpha: {
from: 0,
to: 1,
duration: 300
}
},
exit :{
enabled:true,
alpha: {
from: 1,
to: 0,
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 and the Destination screen

Shared Element Transition

Four elements are animated in this example. Let's list the elements involved in the transition and note which properties are being animated.

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.

<Image
source={item.image}
nativeID={`image${item.id}`}
style={styles.image}
resizeMode={'contain'}
/>

Step 2 - set a nativeID prop to elements in the destination screen#

<Image source={this.props.image} nativeID={`image${this.props.id}Dest`} style={styles.image} />

Step 3 - Declare the shared element animation when pushing the screen#

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 types are supported:

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.

<Text nativeID="description" style={styles.description}>
{this.props.description}
</Text>

Step 2 - Declare the element animation when pushing the screen#

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

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 = (
<Navigation.TouchablePreview
touchableComponent={TouchableHighlight}
onPress={handlePress}
onPressIn={handlePress}
>
<Text>My button</Text>
</Navigation.TouchablePreview>
);

All options except for reactTag are optional. Actions trigger the same event as navigation button presses. To react when a preview is committed, listen to the previewCompleted event.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/style-constants/index.html b/7.11.2/docs/style-constants/index.html index d8940b5755..aa185d1fe5 100644 --- a/7.11.2/docs/style-constants/index.html +++ b/7.11.2/docs/style-constants/index.html @@ -7,27 +7,27 @@ Constants | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

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:

const { Navigation } = require('react-native-navigation');
const {
statusBarHeight,
topBarHeight,
bottomTabsHeight
} = await Navigation.constants();
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/style-fonts/index.html b/7.11.2/docs/style-fonts/index.html index ad2c2be3ee..47845b6c7e 100644 --- a/7.11.2/docs/style-fonts/index.html +++ b/7.11.2/docs/style-fonts/index.html @@ -7,27 +7,27 @@ Changing fonts | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

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

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#

options: {
bottomTab: {
fontFamily: 'helvetica'
}
}

Button font#

options: {
rightButtons: [
{
id: 'SAVE_BUTTON',
text: 'Save',
fontFamily: 'helvetica'
}
],
leftButtons: [
{
id: 'CANCEL_BUTTON',
text: 'Cancel',
fontFamily: 'helvetica'
}
]
}

Title font#

options: {
topBar: {
title: {
fontFamily: 'helvetica'
}
}
}

Subtitle font#

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.

options: {
topBar: {
backButton: {
fontFamily: 'helvetica'
}
}
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/style-options/index.html b/7.11.2/docs/style-options/index.html index 8317495a1a..53196c72f2 100644 --- a/7.11.2/docs/style-options/index.html +++ b/7.11.2/docs/style-options/index.html @@ -7,15 +7,15 @@ Styling with options | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -32,14 +32,14 @@
class ExperimentScreen extends NavigationComponent {
static options(): Options {
const ExperimentsManager = require('./ExperimentsManager');
const food = ExperimentsManager.isActive('VeganExperiment') ? 'Tofu' : 'Hamburger';
return {
topBar: {
title: {
text: `Hello ${food}!`,
},
},
};
}
}

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.

import { Navigation } from 'react-native-navigation';
Navigation.mergeOptions(componentId, {
topBar: {
background: {
color: 'red',
},
},
});
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).

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.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/style-orientation/index.html b/7.11.2/docs/style-orientation/index.html index 33807eb7ae..9b659c5a6f 100644 --- a/7.11.2/docs/style-orientation/index.html +++ b/7.11.2/docs/style-orientation/index.html @@ -7,27 +7,27 @@ Orientation | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

Orientation

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.

Navigation.setDefaultOptions({
layout: {
orientation: ['portrait']
}
});

Changing orientation dynamically#

Changing orientation dynamically through Navigation.mergeOption() is supported only on Android.

Navigation.mergeOptions(this.props.componentId, {
layout: {
orientation: ['landscape']
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/style-statusBar/index.html b/7.11.2/docs/style-statusBar/index.html index 058c08ada2..c085a8a690 100644 --- a/7.11.2/docs/style-statusBar/index.html +++ b/7.11.2/docs/style-statusBar/index.html @@ -7,27 +7,27 @@ StatusBar | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.11.2

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)

options: {
statusBar: {
backgroundColor: 'white',
style: 'dark'
}
}
Compatibility with StatusBar component

React native's StatusBar 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

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.

options: {
statusBar: {
backgroundColor: null
}
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/style-theme/index.html b/7.11.2/docs/style-theme/index.html index 36560eee02..ca4ba8372f 100644 --- a/7.11.2/docs/style-theme/index.html +++ b/7.11.2/docs/style-theme/index.html @@ -7,15 +7,15 @@ Themes | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -29,14 +29,14 @@
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;
});

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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/third-party-mobx/index.html b/7.11.2/docs/third-party-mobx/index.html index 59e71f2e4d..ab244c3116 100644 --- a/7.11.2/docs/third-party-mobx/index.html +++ b/7.11.2/docs/third-party-mobx/index.html @@ -7,15 +7,15 @@ MobX | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -47,14 +47,14 @@
// 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.
});
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/third-party-react-context/index.html b/7.11.2/docs/third-party-react-context/index.html index fe23ab359d..5f2468e237 100644 --- a/7.11.2/docs/third-party-react-context/index.html +++ b/7.11.2/docs/third-party-react-context/index.html @@ -7,15 +7,15 @@ React Context API | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -36,14 +36,14 @@
export const App = () => {
// Using useContext API
const { count, increment, decrement } = React.useContext(CounterContext);
return (
<View>
<Text>{`Clicked ${count} times!`}</Text>
<Button title="Increment" onPress={increment} />
<Button title="Decrement" onPress={decrement} />
</View>
);
};
// App.tsx
import React from 'react';
import { Button, Text, View } from 'react-native';
import { CounterContext } from './CounterContext';
export const App = () => {
// Using Context consumer
return (
<CounterContext.Consumer>
{({ count, increment, decrement }) => (
<View>
<Text>{`Clicked ${count} times!`}</Text>
<Button title="Increment" onPress={increment} />
<Button title="Decrement" onPress={decrement} />
</View>
)}
</CounterContext.Consumer>
);
};
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/third-party-react-native-vector-icons/index.html b/7.11.2/docs/third-party-react-native-vector-icons/index.html index fdddf05bd7..9e8d33560e 100644 --- a/7.11.2/docs/third-party-react-native-vector-icons/index.html +++ b/7.11.2/docs/third-party-react-native-vector-icons/index.html @@ -7,15 +7,15 @@ react-native-vector-icons | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -35,14 +35,14 @@
function ExampleComponent({ }: Props) {
return (
<View>
<Text>An example component</Text>
</View>
)
}
ExampleComponent.options = () => {
return {
topBar: {
title: {
text: 'Example Component',
},
leftButtons: [{
icon: iconsMap.add,
color: '#888',
accessibilityLabel: 'Add',
}],
},
};
};
export default ExampleComponent;
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.11.2/docs/third-party-typescript/index.html b/7.11.2/docs/third-party-typescript/index.html index 8ddc41e69b..8bef620149 100644 --- a/7.11.2/docs/third-party-typescript/index.html +++ b/7.11.2/docs/third-party-typescript/index.html @@ -7,15 +7,15 @@ TypeScript | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -28,14 +28,14 @@
// Static options are also supported!
MyFunctionalComponent.options = {
topBar: {
title: {
text: 'Hello functional component',
},
},
};
export default MyFunctionalComponent;

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.

import { Navigation } from 'react-native-navigation';
interface Props {
name: string;
}
Navigation.push<Props>(componentId, {
component: {
name: 'MyComponent',
passProps: {
name: 'Bob',
// @ts-expect-error
color: 'red', // Compilation error! color isn't declared in Props
},
},
});

The following commands accept typed passProps:

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/component/index.html b/7.25.4/api/component/index.html index 7040ac612e..d289cdda3c 100644 --- a/7.25.4/api/component/index.html +++ b/7.25.4/api/component/index.html @@ -7,28 +7,28 @@ Component | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Component

registerComponent#

Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component or React.PureComponent. It can also be a HOC to provide context (or a Redux store) or a functional component. Similar to React Native's AppRegistry.registerComponent.

Parameters#

NameRequiredTypeDescription
componentNameYesstringUnique component name - not to be confused with componentId
componentProviderYesFunctionAnonymous function that returns the React component to register, OR the component wrapped with Providers
concreteComponentProviderNoFunctionAnonymous function that returns the concrete React component. If your component is wrapped with Providers, this must be an instance of the concrete component.

Examples#

Registering a component#
Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
Registering a component wrapped with Providers#
import { Provider } from 'react-redux';
const store = createStore();
Navigation.registerComponent(`navigation.playground.MyScreen`, () => (props) =>
<Provider store={store}>
<MyScreen {...props} />
</Provider>,
() => MyScreen)
);

setLazyComponentRegistrator#

Pass a function that will allow you to register a component lazily. When encountering an unknown component name, this function will be called, giving you a chance to register the component before an error is thrown.

Parameters#

NameRequiredTypeDescription
lazyRegistratorFnYes(lazyComponentRequest: stringnumber) => void

Example#

Navigation.setLazyComponentRegistrator((componentName) => {
if (componentName === 'navigation.playground.LazyScreen') {
Navigation.registerComponent(Screens.LazilyRegisteredScreen, () => LazyScreen);
}
});

updateProps#

Update props of a component registered with registerComponent. Updating props triggers the component lifecycle methods related to updating.

Parameters#

NameRequiredTypeDescription
componentIdYesstringUnique component id
optionsYesobjectProps object to pass to the component
callbackNoFunctionFunction that will be executed once inner setState is completed

Example#

Navigation.updateProps('MY_COMPONENT', {
// props to pass to the component
};
important

updateProps is called with a componentId. This is the same unique id components have in props. Don't confuse it with the componentName we use when registering components with Navigation.registerComponent.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/events/index.html b/7.25.4/api/events/index.html index d303b82f9d..fdbdda1e76 100644 --- a/7.25.4/api/events/index.html +++ b/7.25.4/api/events/index.html @@ -7,15 +7,15 @@ Events | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -44,14 +44,14 @@
searchBarCancelPressed() {}
}

previewCompleted (iOS 11.4+ only)#

Called when preview peek is completed.

class MyComponent extends Component {
componentDidMount() {
this.navigationEventListener = Navigation.events().bindComponent(this);
}
componentWillUnmount() {
// Not mandatory
if (this.navigationEventListener) {
this.navigationEventListener.remove();
}
}
previewCompleted({ previewComponentId }) {}
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/layout-bottomTabs/index.html b/7.25.4/api/layout-bottomTabs/index.html index 0c8dbcea48..8a8f023204 100644 --- a/7.25.4/api/layout-bottomTabs/index.html +++ b/7.25.4/api/layout-bottomTabs/index.html @@ -7,27 +7,27 @@ Bottom Tabs | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Bottom Tabs

A container view for managing a radio-style selection interface, where a selection determines which child view controller to display.

{
id: 'BOTTOM_TABS_LAYOUT',
children: [
{
component: {
id: 'HOME_SCREEN',
name: 'HomeScreen'
}
},
{
stack: {
id: 'PROFILE_TAB',
children: [
{
component: {
id: 'PROFILE_SCREEN',
name: 'ProfileScreen'
}
}
]
}
}
]
}

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation api, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

children#

TypeRequiredDescription
Layout[]YESChild layouts of any kind.

options#

TypeRequiredDescription
OptionsNodynamic options which will apply to all screens in bottomTabs
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/layout-component/index.html b/7.25.4/api/layout-component/index.html index 777c0fa227..0770e4fe22 100644 --- a/7.25.4/api/layout-component/index.html +++ b/7.25.4/api/layout-component/index.html @@ -7,27 +7,27 @@ Component | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Component

{
name: "MyRegisteredComponent";
}

name#

TypeRequiredDescription
stringYesKey used when registering the component with Navigation.registerComponent.

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation api, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

options#

TypeRequiredDescription
OptionsNodynamic options for the component

alignment#

TypeRequiredDescription
enum('center', 'fill')NoThis option is relevant only to title components. fill will make the component stretch and consume all available space in the TopBar while center will center it in the middle of the TopBar. center is the default option in iOS while fill is the default for Android.

waitForRender#

TypeRequiredDescription
booleanNoWait for this component to fully render before showing the screen.

This option is useful for ensuring that both a child screen pushed into the stack and all of the TopBar components (title, background and buttons) are displayed to the user at the same time.

To enable this option, waitForRender in the relevant screen animation option needs to be enabled as well.

caution

This option might introduce delays when pushing screens and should be used with caution.

passProps#

TypeRequiredDescription
objectNoA JavaScript object with props accessible inside the component using this.props.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/layout-layout/index.html b/7.25.4/api/layout-layout/index.html index fa6e823ae8..8f6e1566a5 100644 --- a/7.25.4/api/layout-layout/index.html +++ b/7.25.4/api/layout-layout/index.html @@ -7,27 +7,27 @@ Layout | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Layout

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation API, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

options#

TypeRequiredDescription
OptionsNodynamic options for the layout

children#

TypeRequiredDescription
Layout[]YesChild layouts of any kind.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/layout-sideMenu/index.html b/7.25.4/api/layout-sideMenu/index.html index 2c264878f9..470fa3e8e1 100644 --- a/7.25.4/api/layout-sideMenu/index.html +++ b/7.25.4/api/layout-sideMenu/index.html @@ -7,27 +7,27 @@ Side Menu | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Side Menu

This layout allows implementing sidemenus, which can be opened by swiping from one side towards the other side.

{
left: {
component: {}
},
center: {
stack: {
options: {},
children: [{
component: {}
}]
}
},
right: {
component: {}
}
}

center#

TypeRequiredDescription
LayoutYesCenter component, contains the main application.

left#

TypeRequiredDescription
LayoutNoContains the left component layout.

right#

TypeRequiredDescription
LayoutNoContains the right component layout.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/layout-splitView/index.html b/7.25.4/api/layout-splitView/index.html index 6d80bb84d1..08717ac8b0 100644 --- a/7.25.4/api/layout-splitView/index.html +++ b/7.25.4/api/layout-splitView/index.html @@ -7,28 +7,28 @@ SplitView | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

SplitView

A container view controller implementing a master-detail interface. See UISplitViewController docs. Currently implemented only in iOS.

{
id: 'PROFILE_TAB',
master: {
component: {
id: 'MASTER_SCREEN',
name: 'MasterScreen'
}
},
detail: {
component: {
id: 'DETAIL_SCREEN',
name: 'DetailScreen'
}
}
}

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation api, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

master#

TypeRequiredDescription
LayoutYESSet master layout (the smaller screen, sidebar)

detail#

TypeRequiredDescription
LayoutYESSet detail layout (the larger screen, flexes)

options#

TypeRequiredDescription
OptionsNodynamic options which will apply to all screens
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/layout-stack/index.html b/7.25.4/api/layout-stack/index.html index e07d23c30f..12b128bef7 100644 --- a/7.25.4/api/layout-stack/index.html +++ b/7.25.4/api/layout-stack/index.html @@ -7,27 +7,27 @@ Stack | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Stack

A stack is a container layout promoting a hierarchical navigation. It is used to navigate between screens at consecutive levels of hierarchy, steps in a flow or across an app.

{
id: 'PROFILE_TAB',
children: [
{
component: {
id: 'PROFILE_SCREEN',
name: 'ProfileScreen'
}
}
]
}

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation api, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

children#

TypeRequiredDescription
Layout[]YESChild layouts of any kind.

options#

TypeRequiredDescription
OptionsNoOptions that will apply to all screens in stack
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/modal/index.html b/7.25.4/api/modal/index.html index 63c6b34bd9..869c759af4 100644 --- a/7.25.4/api/modal/index.html +++ b/7.25.4/api/modal/index.html @@ -7,27 +7,27 @@ Modal | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Modal

showModal()#

Show a screen as a modal.

Parameters#

NameRequiredTypeDescription
layoutYesLayoutAny type of layout. BottomTabs, Stack, SideMenu, Component
Navigation.showModal({
stack: {
children: [{
component: {
name: 'example.ModalScreen',
passProps: {
text: 'stack with one child'
},
options: {
topBar: {
title: {
text: 'Modal'
}
}
}
}
}]
}
});

dismissModal()#

Dismiss the current modal.

Parameters#

NameRequiredTypeDescription
componentIdYesstringAny component id presented in the modal
mergeOptionsNoOptionsOptions to be merged before dismissing the Modal.
Navigation.dismissModal(this.props.componentId);

dismissAllModals()#

Dismiss all current modals at the same time.

Parameters#

NameRequiredTypeDescription
mergeOptionsNoOptionsOptions to be merged before dismissing all modals.
Navigation.dismissAllModals();
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-animations/index.html b/7.25.4/api/options-animations/index.html index f461a0b54e..f1982c7130 100644 --- a/7.25.4/api/options-animations/index.html +++ b/7.25.4/api/options-animations/index.html @@ -7,27 +7,27 @@ Animations | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Animations

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-api/index.html b/7.25.4/api/options-api/index.html index 0e59668b5b..92ca276b15 100644 --- a/7.25.4/api/options-api/index.html +++ b/7.25.4/api/options-api/index.html @@ -7,27 +7,27 @@ Options Commands | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Options Commands

setDefaultOptions#

Set default options for all screens. Useful for declaring a consistent style across the app.

Parameters#

NameTypeRequiredDescription
optionsOptionsYesOptions root

Example#

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

mergeOptions#

Change navigation options of a component or layout.

Parameters#

NameTypeRequiredDescription
componentIdstringYesThe component or layout id
optionsOptionsYesOptions root

Example#

Navigation.mergeOptions('componentId', {
bottomTabs: {
visible: false,
},
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-backButton/index.html b/7.25.4/api/options-backButton/index.html index cb4edc9001..e6e083bfaa 100644 --- a/7.25.4/api/options-backButton/index.html +++ b/7.25.4/api/options-backButton/index.html @@ -7,29 +7,29 @@ Back Button Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Back Button Options

Controls the back button styling.

const options = {
topBar: {
backButton: {},
},
};

accessibilityLabel#

Overrides the text that's read by the screen reader when the user interacts with the back button.

TypeRequiredPlatform
stringNoAndroid

id#

Button id for reference press event.

TypeRequiredPlatform
stringNoAndroid

color#

Change the back button color. This will change the text color as well.

TypeRequiredPlatform
colorNoBoth

icon#

Change the default back button icon.

TypeRequiredPlatform
ImageResourceNoBoth

sfSymbol#

SF Symbol to show as the back button

TypeRequiredPlatform
stringNoiOS 13+

showTitle#

Show or hide the text displayed next to the back button.

TypeRequiredPlatform
numberNoiOS

displayMode#

Set display mode of the back button. Currently works for iOS 14+ only. See: UINavigationItem.BackButtonDisplayMode

TypeRequiredPlatform
enum('default', 'generic', 'minimal')NoiOS

title#

Change the text displayed next to the title. Usually the back button shows the title of the previous screen.

TypeRequiredPlatform
stringNoiOS

visible#

Hide or show the back button.

TypeRequiredPlatform
booleanNoBoth

testID#

Used to interact with the back button in e2e tests.

TypeRequiredPlatform
stringNoBoth

enableMenu#

Enables iOS 14 back button menu display.

TypeRequiredPlatformDefault
booleanNoiOStrue

popStackOnPress#

Controls whether the default back button should pop screen or not.

TypeRequiredDefault
booleanNotrue
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-background/index.html b/7.25.4/api/options-background/index.html index f17d20134b..82f4fcf2e2 100644 --- a/7.25.4/api/options-background/index.html +++ b/7.25.4/api/options-background/index.html @@ -7,27 +7,27 @@ Background Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Background Options

Controls the top bar background styling.

const options = {
topBar: {
background: {}
}
};

color#

Set the background color. Ignored if a component is specified.

TypeRequiredPlatform
ColorNoBoth

component#

Set a react component as the background. Useful when you need to show a gradient as background, for instance.

On Android, setting an id to the Component will prevent the component from being recreated each time it's used by a screen. The component will be created once and whenever possible it will be reused.

TypeRequiredPlatform
ComponentNoBoth

clipToBounds#

Clip the top bar background to bounds if set to true.

TypeRequiredPlatform
booleanNoiOS

translucent#

Allows the NavBar to be translucent (blurred).

TypeRequiredPlatform
booleanNoiOS

blur#

Enable background blur.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-bottomTab/index.html b/7.25.4/api/options-bottomTab/index.html index e9cd7fc21a..eb31f3dc64 100644 --- a/7.25.4/api/options-bottomTab/index.html +++ b/7.25.4/api/options-bottomTab/index.html @@ -7,27 +7,27 @@ Bottom Tab Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Bottom Tab Options

const options = {
bottomTab: {},
};

selectTabOnPress#

TypeRequiredPlatform
booleanNoBoth

popToRoot#

Pop to root of stack by tapping on already selected tab.

TypeRequiredPlatform
booleanNoAndroid

badge#

TypeRequiredPlatform
stringNoBoth

badgeColor#

TypeRequiredPlatform
colorNoBoth

animateBadge#

TypeRequiredPlatform
booleanNoAndroid

disableIconTint#

TypeRequiredPlatform
booleanNoBoth

dotIndicator#

TypeRequiredPlatform
DotIndicatorNoBoth

fontFamily#

TypeRequiredPlatform
stringNoBoth

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoBoth

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoBoth

fontSize#

TypeRequiredPlatform
numberNoBoth

icon#

TypeRequiredPlatform
ImageResourceNoBoth

iconWidth#

The width (in dp) of the icon.

TypeRequiredPlatform
numberNoAndroid

iconHeight#

The height (in dp) of the icon.

TypeRequiredPlatform
numberNoAndroid

iconColor#

TypeRequiredPlatform
colorNoBoth

selectedFontSize#

TypeRequiredPlatform
numberNoBoth

selectedIcon#

TypeRequiredPlatform
ImageResourceNoBoth

selectedIconColor#

TypeRequiredPlatform
colorNoBoth

iconInsets#

TypeRequiredPlatform
IconInsetsNoBoth

disableSelectedIconTint#

TypeRequiredPlatform
booleanNoAndroid

disableIconTint#

TypeRequiredPlatform
booleanNoAndroid

selectedTextColor#

TypeRequiredPlatform
colorNoBoth

testID#

TypeRequiredPlatform
stringNoBoth

accessibilityLabel#

Overrides the text that's read by the screen reader when the user interacts with the bottomTab button.

TypeRequiredPlatform
stringNoiOS

text#

TypeRequiredPlatform
stringNoBoth

textColor#

TypeRequiredPlatform
colorNoBoth

sfSymbol#

Set the SF symbol as icon (will be used primarily).

TypeRequiredPlatform
stringNoiOS 13+

sfSelectedSymbol#

Set the SF symbol as selected icon (will be used primarily)

TypeRequiredPlatform
stringNoiOS 13+

DotIndicator#

color?: color#
size?: number#
visible?: boolean#
animate?: boolean#

IconInsets#

top?: number#
left?: number#
right?: number#
bottom?: number#
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-bottomTabs/index.html b/7.25.4/api/options-bottomTabs/index.html index ac7c04d212..c8a3b6607f 100644 --- a/7.25.4/api/options-bottomTabs/index.html +++ b/7.25.4/api/options-bottomTabs/index.html @@ -7,28 +7,28 @@ Bottom Tabs Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Bottom Tabs Options

const options = {
bottomTabs: {},
};

animate#

Controls whether toggling visibility states will be animated.

TypeRequiredPlatform
booleanNoBoth

animateTabSelection#

Controls wether tab selection is animated or not

TypeRequiredPlatform
booleanNoAndroid

backgroundColor#

Change the background color.

TypeRequiredPlatform
colorNoBoth

barStyle#

Controls whether the BottomTabs use dark (black) or light (default) visual style. Requires translucent: true.

TypeRequiredPlatform
enum('default','black')NoBoth

currentTabId#

Select a tab by the id (componentId) of a child contained in it. See Selecting tabs programmatically for a detailed explanation.

TypeRequiredPlatform
numberNoBoth

currentTabIndex#

TypeRequiredPlatform
numberNoBoth

drawBehind#

TypeRequiredPlatform
booleanNoBoth

elevation#

TypeRequiredPlatform
numberNoAndroid

hideShadow#

TypeRequiredPlatform
booleanNoiOS

hideOnScroll#

Hides the BottomTabs on scroll to increase the amount of content visible to the user. The options requires that the scrollable view will be the root view of the screen and that it specifies nestedScrollEnabled: true.

TypeRequiredPlatform
booleanNoAndroid

preferLargeIcons#

TypeRequiredPlatform
booleanNoAndroid

tabsAttachMode#

TypeRequiredPlatform
enum('together','afterInitialTab','onSwitchToTab')NoBoth

testID#

TypeRequiredPlatform
stringNoBoth

titleDisplayMode#

TypeRequiredPlatform
enum('alwaysShow','showWhenActive','alwaysHide')NoBoth

translucent#

A Boolean value that indicates whether the BottomTabs are translucent. For this option to function as expected the screen needs to be drawn behind the BottomTabs; Make sure the list component you're using (FlatList for example) is the root component in the screen and not SafeAreaView. When SafeAreView is the root component it shifts the content above the BottomTabs and the translucent effect isn't visible.

TypeRequiredPlatform
booleanNoiOS

visible#

TypeRequiredPlatform
booleanNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-button/index.html b/7.25.4/api/options-button/index.html index c718c45533..9c3605f35b 100644 --- a/7.25.4/api/options-button/index.html +++ b/7.25.4/api/options-button/index.html @@ -7,27 +7,27 @@ Button Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Button Options

const options = {
topBar: {
leftButtons: [
{
id: 'id',
text: 'Button',
},
],
},
};

allCaps#

This option will set whether characters are all capitalized or not.

TypeRequiredPlatformDefault
booleanNoAndroidtrue

fontSize#

If the button has text, this option is used to set font size in DP.

TypeRequiredPlatform
numberNoBoth

fontFamily#

TypeRequiredPlatform
stringNoBoth

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoBoth

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoBoth

id#

Buttons are identified by their id property. When a button is clicked, a buttonPress event is emitted to js, containing the id of the clicked button.

TypeRequiredPlatform
stringYesBoth

icon#

Button icon. If the button is pushed to the overflow menu, the button text is used instead.

TypeRequiredPlatform
ImageResourceNoBoth

sfSymbol#

SF Symbol to show as the back button

TypeRequiredPlatform
stringNoiOS 13+

text#

Button text. Ignored if an icon is specified, unless the button is displayed in the overflow menu.

TypeRequiredPlatform
stringNoBoth

showAsAction#

TypeRequiredPlatform
enum('always', 'never', 'withText', 'ifRoom')NoAndroid
  • ifRoom - Only add button to the TopBar if there is room for it, otherwise add it to the overflow menu.
  • never - Never place this button in the TopBar. Instead, list the button in the overflow menu.
  • always - Always place this button in the app bar.

component#

Set a react component as this button's view which will be displayed instead of the regular view.

TypeRequiredPlatform
ComponentNoBoth

iconInsets#

IconInsets are applied to the icon to translate its original position on the screen.

TypeRequiredPlatform
IconInsetsNoiOS

systemItem#

System icon; ignored if an icon is specified. For more information, see apple's guidelines.

TypeRequiredPlatform
enum('done', 'cancel', 'edit', 'save', 'add', 'flexibleSpace', 'fixedSpace', 'compose', 'reply', 'action', 'organize', 'bookmarks', 'search', 'refresh', 'stop', 'camera', 'trash', 'play', 'pause', 'rewind', 'fastForward', 'undo', 'redo')NoiOS

iconBackground#

iconBackground is applied to the icon's background.

TypeRequiredPlatform
iconBackgroundNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-fab/index.html b/7.25.4/api/options-fab/index.html index 50cf363824..1e50fe6af9 100644 --- a/7.25.4/api/options-fab/index.html +++ b/7.25.4/api/options-fab/index.html @@ -7,27 +7,27 @@ Fab | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Fab

Controls the FAB button styling on Android.

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

id#

Button id for reference press event.

Note

This option is mandatory when you are initiating the FAB button. However you do not need to pass in id when updating the Fab button options with Navigation.mergeOptions.

TypeRequiredPlatform
stringNoAndroid

icon#

Change the default back button icon.

TypeRequiredPlatform
numberNoAndroid

iconColor#

Change the icon color of the FAB button.

TypeRequiredPlatform
colorNoAndroid

backgroundColor#

Change the background color of the FAB button.

TypeRequiredPlatform
colorNoAndroid

clickColor#

Change the on-clicked background color of the FAB button.

TypeRequiredPlatform
colorNoAndroid

rippleColor#

Change the ripple color of the FAB button.

TypeRequiredPlatform
colorNoAndroid

visible#

Show or hide the FAB button.

TypeRequiredPlatform
booleanNoAndroid

alignHorizontally#

Set the horizontal position of the FAB button on the screen.

TypeRequiredPlatform
'left' or 'right'NoAndroid

hideOnScroll#

Hide the FAB button on scroll.

TypeRequiredPlatform
booleanNoAndroid

size#

Set the size of the FAB button.

TypeRequiredPlatform
'mini' or 'regular'NoAndroid
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-hardwareBackButton/index.html b/7.25.4/api/options-hardwareBackButton/index.html index 458c0dd183..1e09221f81 100644 --- a/7.25.4/api/options-hardwareBackButton/index.html +++ b/7.25.4/api/options-hardwareBackButton/index.html @@ -7,15 +7,15 @@ Hardware Back Button Options | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -23,14 +23,14 @@ first will jump to first tab, previous will do reverse selection, exit (Default) will just exit the bottom tabs.

TypeRequiredDefaultPlatform
enum('exit', 'first', 'previous')No'exit'Android
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-iconBackground/index.html b/7.25.4/api/options-iconBackground/index.html index 669240364b..68e8f5d5e4 100644 --- a/7.25.4/api/options-iconBackground/index.html +++ b/7.25.4/api/options-iconBackground/index.html @@ -7,27 +7,27 @@ iconBackground Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

iconBackground Options

color#

Set the background color.

TypeRequiredPlatform
ColorNoBoth

width#

Set the background width.

TypeRequiredPlatform
numberNoBoth

height#

Set the background height.

TypeRequiredPlatform
numberNoBoth

cornerRadius#

Set the background cornerRadius.

TypeRequiredPlatform
numberNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-iconInsets/index.html b/7.25.4/api/options-iconInsets/index.html index 35e6e90151..314ee55658 100644 --- a/7.25.4/api/options-iconInsets/index.html +++ b/7.25.4/api/options-iconInsets/index.html @@ -7,27 +7,27 @@ IconInsets Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

IconInsets Options

top#

Configure top inset

TypeRequiredPlatform
numberNoBoth

bottom#

Configure bottom inset

TypeRequiredPlatform
numberNoBoth

left#

Configure left inset

TypeRequiredPlatform
numberNoBoth

right#

Configure right inset

TypeRequiredPlatform
numberNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-imageResource/index.html b/7.25.4/api/options-imageResource/index.html index 270289ce89..54b3f39846 100644 --- a/7.25.4/api/options-imageResource/index.html +++ b/7.25.4/api/options-imageResource/index.html @@ -7,27 +7,27 @@ Image Resource | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Image Resource

ImageResource#

const options = {
topBar: {
leftButtons: [
icon: require('./backButton.png')
]
},
};

The following icon types are available:

TypeRequiredPlatform
ImageRequireSourceNoBoth
stringNoBoth
ImageSystemSourceNoiOS

ImageSystemSource#

system#

You can use platform specific system icons for iOS only.

Example:

const options = {
topBar: {
leftButtons: [
icon: {
system: 'calendar',
fallback: require('./calendar.png')
}
]
},
};
TypeRequiredPlatform
stringYesiOS 13+

fallback#

TypeRequiredPlatform
FallbackSourceNoiOS 13+

FallbackSource#

For iOS, SF Symbols is available only for iOS 13 and later. For iOS 12 and earlier you should use a fallback icon.

ImageRequireSource#

TypeRequiredPlatform
numberNoBoth

string#

TypeRequiredPlatform
numberNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-largeTitle/index.html b/7.25.4/api/options-largeTitle/index.html index b1b6786c13..b9d821ec94 100644 --- a/7.25.4/api/options-largeTitle/index.html +++ b/7.25.4/api/options-largeTitle/index.html @@ -7,27 +7,27 @@ Large Title Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Large Title Options

Controls the top bar large title on iOS, available on iOS 11 and above.

const options = {
topBar: {
largeTitle: {},
},
};

visible#

Controls whether the large title is visible or not.

TypeRequiredPlatform
booleanNoiOS

fontSize#

Set the title font size. On Android this value is in sp.

TypeRequiredPlatform
numberNoiOS

color#

Large title text color.

TypeRequiredPlatform
ColorNoiOS

fontFamily#

Set the large title FontFamily.

TypeRequiredPlatform
FontFamilyNoiOS

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoiOS

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-layout/index.html b/7.25.4/api/options-layout/index.html index ede1d6ef4a..81b762ea98 100644 --- a/7.25.4/api/options-layout/index.html +++ b/7.25.4/api/options-layout/index.html @@ -7,27 +7,27 @@ Layout Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Layout Options

const options = {
layout: {},
};

fitSystemWindows#

TypeRequiredPlatform
booleanNoBoth

backgroundColor#

Set the screen background color.

TypeRequiredPlatform
ColorNoBoth

componentBackgroundColor#

Set background color only for components. On Android, using this option instead of backgroundColor helps reduce overdraw.

TypeRequiredPlatform
ColorNoBoth

orientation#

Set the allowed orientations.

TypeRequiredPlatform
['portrait', 'landscape']NoBoth

topMargin#

Set the layout top margin.

TypeRequiredPlatform
numberNoAndroid

direction#

Set language direction, only works with DefaultOptions. locale is an Android specific option which sets the direction according to the device locale.

TypeRequiredPlatform
enum('rtl', 'ltr', 'locale')NoBoth

autoHideHomeIndicator#

Controls the application's preferred home indicator auto-hiding.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-migration/index.html b/7.25.4/api/options-migration/index.html index 03355b390f..c5b4783107 100644 --- a/7.25.4/api/options-migration/index.html +++ b/7.25.4/api/options-migration/index.html @@ -7,27 +7,27 @@ options-migration | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

options-migration

Common Options#

navBarTextColor#

Title text color

topBar: {
title: {
color: 'red'
}
}

navBarTextFontSize#

Title font size

topBar: {
title: {
fontSize: 18
}
}

navBarTextFontFamily#

Title font

topBar: {
title: {
fontFamily: 'Helvetica'
}
}

navBarBackgroundColor#

TopBar background color

topBar: {
background: {
color: 'red'
}
}

navBarCustomView#

Use a react view as the TopBar's background or use a React view instead of the textual title.

topBar: {
background: {
component: {
name: 'example.CustomTopBarBackground'
}
},
title: {
component: {
name: 'example.CustomTopBarTitle'
}
}
}

navBarClipToBounds#

Restrict the navbar background color to the navbar, and do not flow behind the status bar.

topBar: {
background: {
component: {
name: 'example.CustomTopBarBackground',
clipToBounds: true
}
},
}

navBarComponentAlignment#

Align the React view used as the title

topBar: {
title: {
component: {
name: 'example.CustomTopBarTitle',
alignment: 'center' | 'fill'
}
}
}

navBarCustomViewInitialProps#

Initial props passed to the React component

topBar: {
background: {
component: {
name: 'example.CustomTopBarBackground',
passProps: {}
}
},
title: {
component: {
name: 'example.CustomTopBarTitle',
passProps: {}
}
}
}

navBarButtonColor#

TopBar button color

topBar: {
rightButtons: [
{
color: 'red'
}
],
leftButtons: [
{
color: 'red'
}
],
backButton: {
color: 'red'
}
}

navBarHidden#

TopBar visibility. When setting visible: false, you probably want to set drawBehind: true as well. Use animate: false to toggle visibility without animation.

topBar: {
visible: false
}

navBarTransparent#

Transparent TopBar. Set drawBehind: true to draw the screen behind the transparent TopBar.

topBar: {
background: {
color: 'transparent'
}
}

drawUnderNavBar#

Draw the screen behind the TopBar, Useful when the TopBar is toggled or transparent

topBar: {
drawBehind: true
}

drawUnderTabBar#

Draw the screen behind the BottomTabs, Useful when toggling BottomTabs or when the BottomTabs are translucent.

bottomTabs: {
drawBehind: true
}

tabBarHidden#

BottomTabs visibility.

bottomTabs: {
visible: false
}

The BottomTab's visibility can be toggled only on Android using mergeOptions:

Navigation.mergeOptions(this.props.componentId, {
bottomTabs: {
visible: false
}
});

On iOS, BottomTab visibility can be changed only when pushing screens. This means that if you'd like to hide BottomTabs when pushing a screen, You'll need to set the property to false in the options passed to the push command or via the static options(passProps) {} api.

statusBarHidden#

StatusBar visibility. For android, also set drawBehind: true.

statusBar: {
visible: false
}

statusBarTextColorScheme#

Theme of text and icons displayed in the StatusBar

statusBar: {
style: 'light' | 'dark'
}

navBarSubtitleColor#

Subtitle color

topBar: {
subtitle: {
color: 'red'
}
}

navBarSubtitleFontFamily#

Subtitle font

topBar: {
subtitle: {
fontFamily: 'Helvetica'
}
}

navBarSubtitleFontSize#

Subtitle font size

topBar: {
subtitle: {
fontSize: 14
}
}

screenBackgroundColor#

Screen color, visible before the actual React view is rendered

layout: {
backgroundColor: 'red'
}

orientation#

layout: {
orientation: ['portrait', 'landscape'] // An array of supported orientations
}

disabledButtonColor#

Button color when enabled: false is used

topBar: {
rightButtons: [
{
disabledColor: 'grey'
}
]
}

navBarButtonFontSize#

Button font size

topBar: {
rightButtons: [
{
fontSize: 13
}
],
leftButtons: [
{
fontSize: 13
}
]
}

navBarLeftButtonFontSize#

Left button font size

{
topBar: {
leftButtons: [
{
fontSize: 13
}
]
}
}

navBarLeftButtonColor#

Left button color

{
topBar: {
leftButtons: [
{
color: 'red'
}
]
}
}

navBarLeftButtonFontWeight#

Left button font weight

{
topBar: {
leftButtons: [
{
weight: '300'
}
]
}
}

navBarRightButtonFontSize#

Right button font size

topBar: {
leftButtons: [
{
fontSize: 13
}
]
}

navBarRightButtonColor#

Right button color

topBar: {
rightButtons: [
{
color: 'red'
}
]
}

navBarRightButtonFontWeight#

Right button font weight

topBar: {
rightButtons: [
{
weight: '400'
}
]
}

modalPresentationStyle#

Controls the behavior of screens displayed modally.

Options supported on iOS#

  • overCurrentContext - Content is displayed over the previous screen. Useful for transparent modals
  • formSheet - Content is centered in the screen
  • pageSheet -Content partially covers the underlying content
  • overFullScreen - Content covers the screen, without detaching previous content.
  • fullScreen - Content covers the screen, previous content is detached.
  • popover - Content is displayed in a popover view.

More information on the different styles for iOS can be found on https://developer.apple.com/documentation/uikit/uimodalpresentationstyle

Options supported on Android#

  • overCurrentContext - Content is displayed over the previous screen. Useful for transparent modals
  • none - Previous content is detached when the Modal's show animation ends
{
modalPresentationStyle: 'overCurrentContext'
}

navBarButtonFontFamily#

Button font family

topBar: {
rightButtons: [
{
fontFamily: 'Helvetica'
}
]
}

iOS only#

navBarHideOnScroll#

Hide TopBar when list is scrolled

topBar: {
hideOnScroll: true
}

navBarTranslucent#

Translucent TopBar, Setting drawBehind: true is required for this property to work as expected.

topBar: {
drawBehind: true,
background: {
translucent: true
}
}

navBarNoBorder#

Remove TopBar border (hair line)

topBar: {
noBorder: true
}

navBarBlur#

Blur the area behind the TopBar, Setting drawBehind: true and topBar background transparent: true is required for this property to work as expected.

topBar: {
drawBehind: true,
background: {
blur: true,
transparent: true
}
}

rootBackgroundImageName#

  • iOS: name of image in Images.xcassets
  • Android: name of drawable
{
rootBackgroundImage: require('rootBackground.png')
}

screenBackgroundImageName#

name of image in Images.xcassets

{
backgroundImage: require('background.png')
}

statusBarHideWithNavBar#

Hide the StatusBar if the TopBar is also hidden

statusBar: {
hideWithTopBar: true
}

statusBarBlur#

Blur the area behind the StatusBar

statusBar: {
blur: true
}

statusBarAnimate#

Animate between style changes of the StatusBar

statusBar: {
animate: true
}

disabledBackGesture#

Disable the back (swipe) gesture used to pop screens

{
popGesture: false
}

largeTitle#

Use iOS 11 large title

topBar: {
largeTitle: {
visible: true,
fontSize: 30,
color: 'red',
fontFamily: 'Helvetica'
}
}

Android Options#

topBarElevationShadowEnabled#

TopBar elevation in dp. Set this value to 0 to disable the TopBar's shadow.

topBar: {
elevation: 0
}

navBarTitleTextCentered#

Title alignment

topBar: {
title: {
alignment: 'center'|'fill'
}
}

statusBarColor#

StatusBar color

statusBar: {
backgroundColor: 'red'
}

navigationBarColor#

NavigationBar color

navigationBar: {
backgroundColor: 'red'
}

drawUnderStatusBar#

Draw content behind the StatusBar

statusBar: {
drawBehind: true
}

navBarHeight#

TopBar height in dp

topBar: {
height: 70
}

navBarTopPadding#

Content top margin

layout: {
topMargin: 26
}

topTabsHeight#

TopTabs height

topTabs: {
height: 70
}

topBarBorderColor#

TopBar border color

topBar: {
borderColor: 'red'
}

topBarBorderWidth#

TopBar border height

topBar: {
borderHeight: 1.3
}

Unsupported options#

  • disabledSimultaneousGesture
  • statusBarTextColorSchemeSingleScreen
  • navBarButtonFontWeight
  • topBarShadowColor
  • topBarShadowOpacity
  • topBarShadowOffset
  • topBarShadowRadius
  • preferredContentSize
  • navBarSubTitleTextCentered
  • collapsingToolBarImage
  • collapsingToolBarCollapsedColor
  • navBarTextFontBold
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-modal/index.html b/7.25.4/api/options-modal/index.html index 024f182784..1b5d697afe 100644 --- a/7.25.4/api/options-modal/index.html +++ b/7.25.4/api/options-modal/index.html @@ -7,27 +7,27 @@ Modal Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Modal Options

const options = {
swipeToDismiss
};

swipeToDismiss#

Control wether this modal should be dismiss using swipe gesture when the modalPresentationStyle is pageSheet

TypeRequiredPlatformDefault
booleanNoBothtrue
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-navigationBar/index.html b/7.25.4/api/options-navigationBar/index.html index 397f8df943..161e68d689 100644 --- a/7.25.4/api/options-navigationBar/index.html +++ b/7.25.4/api/options-navigationBar/index.html @@ -7,27 +7,27 @@ Navigation Bar Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Navigation Bar Options

The Navigation Bar is the area at the bottom of the screen containing Android's three navigation buttons: Back, Home and Recents.

An example of a dark navigation bar:



const options = {
navigationBar: {}
};

visible#

Set the navigation bar visibility.

TypeRequiredPlatform
booleanNoAndroid

backgroundColor#

Set the navigation bar color. When a light background color is used, the color of the navigation bar icons will adapt to a dark color.

TypeRequiredPlatformDefault
ColorNoAndroid'black'
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-overlay-attach/index.html b/7.25.4/api/options-overlay-attach/index.html index cf347dc3dc..9a7d192a49 100644 --- a/7.25.4/api/options-overlay-attach/index.html +++ b/7.25.4/api/options-overlay-attach/index.html @@ -7,28 +7,28 @@ Overlay Attach (Tooltips) | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Overlay Attach (Tooltips)

Controls overlay attach options

const options = {
overlay: {
attach: {
layoutId: "someLayout",
anchor: {
id: "bottomTab1",
gravity: 'top',
},
},
}
}

layoutId#

Layout id in which the wanted tooltip (attached overlay) will be shown, for example pass bottomTabs id to have the overlay shown at bottom tabs level.

TypeRequiredPlatform
stringYesBoth

anchor.id#

The id of the RNN view to have the overlay anchored to.

TypeRequiredPlatform
stringYesBoth

anchor.gravity#

A side on which the overlay will be anchored.

TypeRequiredPlatform
enum('top','left','right','bottom')YesBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-overlay/index.html b/7.25.4/api/options-overlay/index.html index 1049ccedd3..5bf97eb66f 100644 --- a/7.25.4/api/options-overlay/index.html +++ b/7.25.4/api/options-overlay/index.html @@ -7,28 +7,28 @@ Overlay | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Overlay

Controls overlay options

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.

TypeRequiredPlatform
booleanNoBoth

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.

TypeRequiredPlatform
booleanNoiOS

attach#

Attach the overlay component as a tooltip for a given anchor view id, in a layer id (Z-Axis).

TypeRequiredPlatform
OverlayAttachOptionsNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-preview/index.html b/7.25.4/api/options-preview/index.html index 33b83c081c..2d14641b28 100644 --- a/7.25.4/api/options-preview/index.html +++ b/7.25.4/api/options-preview/index.html @@ -7,27 +7,27 @@ Preview (iOS) | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Preview (iOS)

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-root/index.html b/7.25.4/api/options-root/index.html index e1d1b4460f..26df1ff76d 100644 --- a/7.25.4/api/options-root/index.html +++ b/7.25.4/api/options-root/index.html @@ -7,27 +7,27 @@ The options object | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

The options object

const options = {
bottomTab,
bottomTabs,
topBar,
layout,
sideMenu,
overlay,
modal,
preview,
navigationBar
};

bottomTab#

Controls the bottom tab icon, font, color, and more.

TypeRequiredPlatform
BottomTabOptionsNoBoth

bottomTabs#

Controls the bottom tabs container.

TypeRequiredPlatform
BottomTabsOptionsNoBoth

topBar#

Controls the Stack top bar styling.

TypeRequiredPlatform
TopBarOptionsNo

statusBar#

Controls the system status bar styling.

TypeRequiredPlatform
StatusBarOptionsNoBoth

layout#

TypeRequiredPlatform
LayoutOptionsNoBoth

sideMenu#

TypeRequiredPlatform
SideMenuOptionsNoBoth

overlay#

TypeRequiredPlatform
OverlayOptionsNoBoth

animations#

TypeRequiredPlatform
AnimationsOptionsNoBoth

modal#

TypeRequiredPlatform
ModalOptionsNoBoth

preview#

TypeRequiredPlatform
PreviewOptionsNoiOS

splitView#

TypeRequiredPlatform
SplitViewOptionsNoiOS

fab#

TypeRequiredPlatform
FabNoAndroid

modalPresentationStyle#

Configure the presentation style of the modal.

TypeRequiredPlatform
enum('formSheet', 'pageSheet', 'fullScreen', 'overFullScreen', 'overCurrentContext', 'popOver', 'none')NoBoth

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.

iOSAndroid
  • iOS 12 and below - fullScreen
  • iOS 13 and above - pageSheet
fullScreen

modalTransitionStyle#

Configure the transition style of the modal.

TypeRequiredPlatform
enum('coverVertical', 'crossDissolve', 'flipHorizontal', 'partialCurl')NoBoth

popGesture#

Enable or disable swipe back to pop gesture.

TypeRequiredPlatform
booleanNoiOS

backgroundImage#

Background image of the screen.

TypeRequiredPlatform
ImageNoiOS

rootBackgroundImage#

Background image for the Navigation View.

TypeRequiredPlatform
ImageNoAndroid

blurOnUnmount#

Enable or disable automaticall blur of the focused input, dismissing keyboard on unmount.

TypeRequiredPlatformDefault
booleanNoAndroidfalse

navigationBar#

Enable or disable automaticall blur of the focused input, dismissing keyboard on unmount.

TypeRequiredPlatform
booleanNoAndroid
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-scrollEdgeAppearance/index.html b/7.25.4/api/options-scrollEdgeAppearance/index.html index 20c4277c23..6c24269e9d 100644 --- a/7.25.4/api/options-scrollEdgeAppearance/index.html +++ b/7.25.4/api/options-scrollEdgeAppearance/index.html @@ -7,28 +7,28 @@ Scroll Edge Appearance Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Scroll Edge Appearance Options

Controls the top bar background styling.

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.

TypeRequiredPlatform
booleanNoiOS

color#

Set the background color.

TypeRequiredPlatform
ColorNoiOS

translucent#

Allows the Scroll Edge Appearance to be translucent (blurred).

TypeRequiredPlatform
booleanNoiOS

borderColor#

Change the topBar border color.

TypeRequiredPlatform
ColorNoiOS

noBorder#

Disables border at the bottom of the TopBar.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-sideMenu/index.html b/7.25.4/api/options-sideMenu/index.html index 07f2c31aef..79ff8af357 100644 --- a/7.25.4/api/options-sideMenu/index.html +++ b/7.25.4/api/options-sideMenu/index.html @@ -7,27 +7,27 @@ Side Menu Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Side Menu Options

const options = {
sideMenu: {
left: {},
right: {},
openGestureMode: 'entireScreen',
},
};

left#

Configure the left side menu.

TypeRequiredPlatform
SideMenuSideNoBoth

right#

Configure the right side menu.

TypeRequiredPlatform
SideMenuSideNoBoth

openGestureMode#

Configure how a user is allowed to open a drawer using gestures.

TypeRequiredPlatformDefault
enum('entireScreen', 'bezel')NoiOS'bezel'
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-sideMenuSide/index.html b/7.25.4/api/options-sideMenuSide/index.html index 69375edef8..cff89f4c4b 100644 --- a/7.25.4/api/options-sideMenuSide/index.html +++ b/7.25.4/api/options-sideMenuSide/index.html @@ -7,27 +7,27 @@ Side Menu Side Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Side Menu Side Options

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

visible#

Show or hide the side menu.

TypeRequiredPlatform
booleanNoBoth

enabled#

Enable or disable the side menu.

TypeRequiredPlatform
booleanNoBoth

width#

Set the width of the side menu.

TypeRequiredPlatform
numberNoBoth

height#

Set the height of the side menu.

TypeRequiredPlatform
numberNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-splitView/index.html b/7.25.4/api/options-splitView/index.html index cf0dfab550..56a5cca24f 100644 --- a/7.25.4/api/options-splitView/index.html +++ b/7.25.4/api/options-splitView/index.html @@ -7,29 +7,29 @@ SplitView Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

SplitView Options

displayMode#

Master view display mode.

TypeRequiredDefaultPlatform
enum('auto', 'visible', 'hidden', 'overlay')No'auto'iOS

primaryEdge#

Master view side. Leading is left. Trailing is right.

TypeRequiredDefaultPlatform
enum('leading', 'trailing')No'leading'iOS

minWidth#

Set the minimum width of master view.

TypeRequiredPlatform
numberNoiOS

maxWidth#

Set the maximum width of master view.

TypeRequiredPlatform
numberNoiOS

primaryBackgroundStyle#

Set background style of sidebar. Currently works for Mac Catalyst apps only. See: Optimizing Your iPad App for Mac

TypeRequiredDefaultPlatform
enum('none', 'sidebar')No'none'iOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-stack/index.html b/7.25.4/api/options-stack/index.html index 7c24034e44..68d404c895 100644 --- a/7.25.4/api/options-stack/index.html +++ b/7.25.4/api/options-stack/index.html @@ -7,27 +7,27 @@ Top Bar Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Top Bar Options

TopBar#

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

visible#

Determines if TopBar is visible or not.

TypeRequiredPlatform
booleanNoBoth

animate#

Determines if changing the TopBar visibility will be animated or not.

TypeRequiredPlatform
booleanNoBoth

animateLeftButtons#

Determines if changing the left buttons will be animated.

TypeRequiredPlatformDefault
booleanNoBothFalse

animateRightButtons#

Determines if changing the right buttons will be animated.

TypeRequiredPlatformDefault
booleanNoBothFalse

title#

Controls the top bar title.

TypeRequiredPlatform
TitleNoBoth

subtitle#

Controls the top bar subtitle.

TypeRequiredPlatform
SubitleNoBoth

backButton#

Controls the top bar back button.

TypeRequiredPlatform
BackButtonNoBoth

background#

Controls the top bar background.

TypeRequiredPlatform
BackgroundNoBoth

scrollEdgeAppearance#

Controls the appearance settings when the scrollable content reaches the matching edge of the navigation bar.

TypeRequiredPlatform
Scroll Edge BackgroundNoiOS 13+

barStyle#

Control the TopBar blur style. Requires translucent: true.

TypeRequiredPlatform
enum('default','black')NoiOS

height#

Set TopBar height, in dp units, on Android only. For iOS use largeTitle see Options.

TypeRequiredPlatform
numberNoAndroid

borderColor#

Change the topBar border color.

TypeRequiredPlatform
ColorNoBoth

borderHeight#

Set the border height of the navbar in dp.

TypeRequiredPlatform
numberNoAndroid

drawBehind#

Controls if child should be drawn behind the TopBar or below it.

TypeRequiredPlatform
booleanNoBoth

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.

TypeRequiredPlatform
numberNoAndroid

hideOnScroll#

Hide the TopBar when a scrolling layout is scrolled.

TypeRequiredPlatform
booleanNoBoth
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

hideNavBarOnFocusSearchBar#

Indicates whether the navigation bar should be hidden when searching. True by default.

TypeRequiredPlatform
booleanNoiOS 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 section for more details.

Android support

Android currently only supports a single left button and does not support custom left Buttons.

TypeRequiredPlatform
[Button]NoBoth

leftButtonColor#

Default color for left buttons.

TypeRequiredPlatform
ColorNoBoth

noBorder#

Disables border at the bottom of the TopBar.

important

For disabling the border completely, you also need to disable scrollEdgeAppearance.noBorder

TypeRequiredPlatform
booleanNoiOS

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 section for more details.

TypeRequiredPlatform
[Button]NoBoth

rightButtonColor#

Default color for the right button.

TypeRequiredPlatform
ColorNoBoth

searchBar#

Controls the SearchBar.

TypeRequiredPlatform
OptionsSearchBarNoiOS 11+
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

searchBarHiddenWhenScrolling#

Hides the UISearchBar when scrolling.

TypeRequiredPlatform
booleanNoiOS 11+
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

searchBarPlaceholder#

The placeholder value in the UISearchBar.

TypeRequiredPlatform
stringNoiOS 11+
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

searchBarBackgroundColor#

The background color of the UISearchBar's TextField.

TypeRequiredPlatform
ColorNoiOS 13+
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

searchBarTintColor#

The tint color of the UISearchBar. Affects text selection color, as well as "Cancel" button color.

TypeRequiredPlatform
ColorNoiOS 13+
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-statusBar/index.html b/7.25.4/api/options-statusBar/index.html index 032ec74e66..dda4616f38 100644 --- a/7.25.4/api/options-statusBar/index.html +++ b/7.25.4/api/options-statusBar/index.html @@ -7,27 +7,27 @@ Status Bar Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Status Bar Options

const options = {
statusBar: {},
};

visible#

Set the status bar visibility.

TypeRequiredPlatform
booleanNoBoth

style#

Set the text color of the status bar.

TypeRequiredPlatformDefault
enum('light', 'dark')NoBoth'light'

backgroundColor#

Set the background color of the status bar.

TypeRequiredPlatform
ColorNoAndroid

drawBehind#

Draw screen behind the status bar.

TypeRequiredPlatform
booleanNoAndroid

translucent#

Set the status bar to be translucent.

TypeRequiredPlatform
booleanNoAndroid

animate#

Animate StatusBar style changes.

TypeRequiredPlatform
booleanNoiOS

blur#

Blur content beneath the StatusBar.

TypeRequiredPlatform
booleanNoiOS

hideWithTopBar#

Automatically hide the StatusBar when the TopBar hides.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-subtitle/index.html b/7.25.4/api/options-subtitle/index.html index 8084d11521..e67eae9a51 100644 --- a/7.25.4/api/options-subtitle/index.html +++ b/7.25.4/api/options-subtitle/index.html @@ -7,27 +7,27 @@ Subtitle Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Subtitle Options

Controls the top bar subtitle.

const options = {
topBar: {
subtitle: {},
},
};

text#

Subtitle text.

TypeRequiredPlatform
stringNoBoth

fontSize#

Subtitle fontSize. On Android this value is sp.

TypeRequiredPlatform
numberNoBoth

color#

Subtitle color.

TypeRequiredPlatform
ColorNoBoth

fontFamily#

Subtitle FontFamily.

TypeRequiredPlatform
FontFamilyNoBoth

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoBoth

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoBoth

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.

TypeRequiredPlatform
enum('center', 'fill')NoBoth

testID#

Used to interact with the TopBar in e2e tests.

TypeRequiredPlatform
stringNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/options-title/index.html b/7.25.4/api/options-title/index.html index b09944e4ea..b88ce33038 100644 --- a/7.25.4/api/options-title/index.html +++ b/7.25.4/api/options-title/index.html @@ -7,27 +7,27 @@ Title Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Title Options

Controls the top bar title.

const options = {
topBar: {
title: {},
},
};

text#

Set the title for the TopBar.

TypeRequiredPlatform
stringNoBoth

fontSize#

Set the title font size. On Android this value is in sp.

TypeRequiredPlatform
numberNoBoth

color#

Set the title color.

TypeRequiredPlatform
ColorNoBoth

fontFamily#

Set the title font family.

TypeRequiredPlatform
FontFamilyNoBoth

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoBoth

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoBoth

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.

defaults

center is the default option on iOS while fill is the default for Android.

TypeRequiredPlatform
enum('center','fill')NoBoth

component#

Set a react component as the title. If this option is specified then text is ignored.

TypeRequiredPlatform
ComponentNoBoth

topMargin#

Change to TopBar's top margin.

TypeRequiredPlatform
numberNoAndroid

visible#

Determines whether the TopBar is visible or not.

TypeRequiredPlatform
booleanNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/overlay/index.html b/7.25.4/api/overlay/index.html index 5b6b78abaf..91426803cc 100644 --- a/7.25.4/api/overlay/index.html +++ b/7.25.4/api/overlay/index.html @@ -7,27 +7,27 @@ Overlay | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Overlay

showOverlay()#

Shows a component as an overlay.

NameRequiredTypeDescription
layoutYesLayoutAny type of layout. Typically, Component layout is used in Overlays but it's possible to load any other layout (BottomTabs, Stack, SideMenu, Component)
Navigation.showOverlay({
component: {
name: 'example.Overlay',
options: {
layout: {
componentBackgroundColor: 'transparent',
},
overlay: {
interceptTouchOutside: true
}
}
}
});

dismissOverlay()#

Dismisses an overlay matching the given overlay componentId.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe component id presented in Overlay
Navigation.dismissOverlay(this.props.componentId);

dismissAllOverlays()#

Dismisses all overlays.

Navigation.dismissAllOverlays();
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/root/index.html b/7.25.4/api/root/index.html index c0d739c69a..4702a68a65 100644 --- a/7.25.4/api/root/index.html +++ b/7.25.4/api/root/index.html @@ -7,27 +7,27 @@ Root | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Root

setRoot()#

Used to set the UI of the application. Read more about the root hierarchy level in the docs section.

Parameters#

NameRequiredTypeDescription
layoutYesLayoutAny type of layout. BottomTabs, Stack, SideMenu, Component

Example#

Navigation.setRoot({
root: {
stack: {
children: [{
component: {
name: 'example.FirstTabScreen',
passProps: {
text: 'This is tab 1'
}
}
}],
options: {
bottomTab: {
text: 'Tab 1',
icon: require('../images/one.png'),
testID: 'FIRST_TAB_BAR_BUTTON'
}
}
}
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/sideMenu-api/index.html b/7.25.4/api/sideMenu-api/index.html index 4ac53f5540..9183d20dd4 100644 --- a/7.25.4/api/sideMenu-api/index.html +++ b/7.25.4/api/sideMenu-api/index.html @@ -7,27 +7,27 @@ Side Menu | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Side Menu

This layout allows to implement sidemenus, which can be opened by swiping from one side towards the other side.

{
left: {
component: {}
},
center: {
stack: {
options: {},
children: [{
component: {}
}]
}
},
right: {
component: {}
}
}

center: Layout#

Center component, contains the main application.

left?: Layout#

Contain the left component layout.

right?: Layout#

Contain the right component layout.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/stack/index.html b/7.25.4/api/stack/index.html index b445fcc422..247a8bfc4d 100644 --- a/7.25.4/api/stack/index.html +++ b/7.25.4/api/stack/index.html @@ -7,27 +7,27 @@ Stack | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Stack

push()#

Push a screen into the stack and update the display according to the screen options.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe componentId of a screen pushed into the stack, or the id of the stack.
layoutNoLayoutThe layout being pushed into the stack. Any type of layout (except stack) can be pushed into stacks. Typically, Component layout is pushed into stacks but it's possible to push SideMenu or BottomTabs as well.

Example#

The most common use case - push a single React component.
Navigation.push(this.props.componentId, {
component: {
name: 'example.PushedScreen'
}
});

pop()#

Pop the top screen from the stack.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe componentId of a screen pushed into the stack, or the stack id.
mergeOptionsNoOptionsOptions to be merged before popping the screen (optional).
Navigation.pop(this.props.componentId);

popToRoot()#

Pop all screens pushed into the stack.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe componentId of a screen pushed into the stack, or the stack id.
mergeOptionsNoOptionsOptions to be merged before popping the screen (optional).
Navigation.popToRoot(this.props.componentId);

popTo()#

Pop the stack to a given component.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe destination componentId
mergeOptionsNoOptionsOptions to be merged before popping the screen (optional).
Navigation.popTo(componentId);

setStackRoot()#

Reset the stack to the given layout (accepts multiple children).

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe componentId of a screen pushed into the stack, or the stack id.
layoutYesLayout or Layout[]A single Component or array of components.

Example#

Navigation.setStackRoot(this.props.componentId, {
component: {
name: 'example.NewRootScreen'
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/api/topBar-searchBar/index.html b/7.25.4/api/topBar-searchBar/index.html index f296a1db51..d94ac83ed0 100644 --- a/7.25.4/api/topBar-searchBar/index.html +++ b/7.25.4/api/topBar-searchBar/index.html @@ -7,27 +7,27 @@ SearchBar | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

SearchBar

visible#

TypeRequiredPlatformDescription
booleanNoiOSDetermines if SearchBar is visible or not

focus#

TypeRequiredPlatformDescription
booleanNoiOSAuto focuses search bar

hideOnScroll#

TypeRequiredPlatformDescription
booleanNoiOSHides the UISearchBar when scrolling.

hideTopBarOnFocus#

TypeRequiredPlatformDescription
booleanNoiOSIndicates whether the navigation bar should be hidden when searching. True by default.

obscuresBackgroundDuringPresentation#

TypeRequiredPlatformDescription
booleanNoiOSA Boolean indicating whether the underlying content is obscured during a search.

backgroundColor#

TypeRequiredPlatformDescription
ColorNoiOSThe background color of the UISearchBar's TextField.

tintColor#

TypeRequiredPlatformDescription
ColorNoiOSThe tint color of the UISearchBar. Affects text selection color, as well as "Cancel" button color.

searchBarPlaceholder#

TypeRequiredPlatformDescription
stringNoiOSThe placeholder value in the UISearchBar.

cancelText#

TypeRequiredPlatformDescription
stringNoiOSThe text value of "Cancel" button in the UISearchBar.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/advanced-navigation/index.html b/7.25.4/docs/advanced-navigation/index.html index c4c8d08a81..fffe2805f1 100644 --- a/7.25.4/docs/advanced-navigation/index.html +++ b/7.25.4/docs/advanced-navigation/index.html @@ -7,15 +7,15 @@ Advanced navigation | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -36,14 +36,14 @@
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.

Navigation.events().registerAppLaunchedListener(async () => {
Navigation.setRoot(isLoggedIn() ? mainRoot : loginRoot);
});
function isLoggedIn() {
// TODO: your business logic goes here
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/app-launch/index.html b/7.25.4/docs/app-launch/index.html index db44403753..27ab5e231a 100644 --- a/7.25.4/docs/app-launch/index.html +++ b/7.25.4/docs/app-launch/index.html @@ -7,27 +7,27 @@ Launching the app | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

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.

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
  2. 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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/basic-navigation/index.html b/7.25.4/docs/basic-navigation/index.html index dab96fb90c..a258e19024 100644 --- a/7.25.4/docs/basic-navigation/index.html +++ b/7.25.4/docs/basic-navigation/index.html @@ -7,15 +7,15 @@ Basic navigation | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -35,14 +35,14 @@
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.

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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/before-you-start/index.html b/7.25.4/docs/before-you-start/index.html index b65c6ccbe0..796e6480e8 100644 --- a/7.25.4/docs/before-you-start/index.html +++ b/7.25.4/docs/before-you-start/index.html @@ -7,27 +7,27 @@ Before you start | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Before you start

React Native Navigation is a module, dependent on and intended to be used alongside 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 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 the library. If you're just looking around, we suggest checking out basic navigation first.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/bottomTabs/index.html b/7.25.4/docs/bottomTabs/index.html index 3a6cefdca2..cd42cc9761 100644 --- a/7.25.4/docs/bottomTabs/index.html +++ b/7.25.4/docs/bottomTabs/index.html @@ -7,28 +7,28 @@ Bottom tabs | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Bottom tabs

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

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.

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.

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

Visibility can also be changed when pushing screens.

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:

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.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/community-libraries/index.html b/7.25.4/docs/community-libraries/index.html index 6562f83ce2..68e4beaa82 100644 --- a/7.25.4/docs/community-libraries/index.html +++ b/7.25.4/docs/community-libraries/index.html @@ -7,15 +7,15 @@ Community libraries | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -25,14 +25,14 @@ Drawer API built on top of React Native Navigation for iOS and Android.

React Native Navigation Search Bar : React Native Elements search bar with collapsible header built for React Native Navigation.

React Native Navigation Bottom Sheet Extension : A performant customizable bottom sheet component built on top of React Native Navigation.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/customBackNavigation/index.html b/7.25.4/docs/customBackNavigation/index.html index 6b95d83087..8125c1111b 100644 --- a/7.25.4/docs/customBackNavigation/index.html +++ b/7.25.4/docs/customBackNavigation/index.html @@ -7,27 +7,27 @@ Custom back navigation | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Custom back navigation

Back navigation lets users move backwards through the screens they previously visited.

The most common form of back navigation is done through the back button. The stack layout contains a back button by default, also known as the software back button.

RNN handles the back navigation for you, but there are use cases where you might need to override the default behavior of the back navigation. For example, when editing a blog post, you might want to prompt the user about unsaved changes instead of navigating to the previous destination.

Additional back navigation methods#

  • Android devices include a hardware back button, located at the bottom of the device.
  • Android 11 introduced an opt-in gesture navigation system that hides the NavigationBar. When enabled, the hardware back button is replaced with a back gesture performed with a horizontal swipe across the screen.
  • The stack layout on iOS supports a back gesture by default. Like the android back gesture, it's performed by swiping across the screen.

Handling the software back button#

The software back button is located in the TopBar and is responsible for popping the top most screen in the stack. It's configured in the TopBar options.

To handle the software back button, we must first disable the default behavior which is to pop the top most screen:

options: {
topBar: {
backButton: {
popStackOnPress: false;
}
}
}

Now, when the software back button is pressed, instead of popping the screen RNN will emit a navigationButtonPress event which can be handled in JS.

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

Handling the hardware back button#

Unlike the software back button which affects the stack it's part of, the hardware back button isn't bound to a specific layout. Instead, The hardware back button affects the top most layout that responds to back navigation.

When a stack containing more than one child is focused, pressing the hardware back button will pop the stack. When a modal is displayed and the current stack has exactly one child, pressing the hardware back button will dismiss the modal.

To handle the hardware back button, we must first disable the default behavior for the desired action (pop stack or dismiss modal) through options:

options: {
hardwareBackButton: {
dismissModalOnPress: false,
popStackOnPress: false,
}
}

Once the default behaviors are disabled, RNN will emit a navigationButtonPress with the RNN.hardwareBackButton id.

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

The hardware back button is available on Android only.

Note 2

When gesture navigation is enabled on Android, the back gesture is handled as a hardware back press.

Disabling the iOS pop gesture#

The iOS stack layout can be popped with a swipe gesture. If desired, the swipe gesture can be disabled via options:

options: {
popGesture: false;
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/externalComponent/index.html b/7.25.4/docs/externalComponent/index.html index 49be8d86fa..75cf54f843 100644 --- a/7.25.4/docs/externalComponent/index.html +++ b/7.25.4/docs/externalComponent/index.html @@ -7,15 +7,15 @@ External Component | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -27,14 +27,14 @@
@Override
public View asView() {
return content;
}
}

Registering the component#

public class MainApplication extends NavigationApplication {
@Override
public void onCreate() {
super.onCreate();
registerExternalComponent("MyExternalComponent", new FragmentCreator());
}
}

iOS#

ViewController registration#

[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:

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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/functionalComponents/index.html b/7.25.4/docs/functionalComponents/index.html index d574e86f47..0e01e38d55 100644 --- a/7.25.4/docs/functionalComponents/index.html +++ b/7.25.4/docs/functionalComponents/index.html @@ -7,15 +7,15 @@ Using functional components as screens | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -26,14 +26,14 @@
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 (
<View>
<Text>Screen Component</Text>
</View>
)
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/installing/index.html b/7.25.4/docs/installing/index.html index 816b250fbf..74ee360df3 100644 --- a/7.25.4/docs/installing/index.html +++ b/7.25.4/docs/installing/index.html @@ -7,15 +7,15 @@ Installation | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -36,14 +36,14 @@
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}"
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/meta-contributing/index.html b/7.25.4/docs/meta-contributing/index.html index 21c7ff7f69..45fda8353f 100644 --- a/7.25.4/docs/meta-contributing/index.html +++ b/7.25.4/docs/meta-contributing/index.html @@ -7,28 +7,28 @@ Contributing | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

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 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 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.
  1. 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.

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:

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 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". 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 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.

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 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 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 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 with Prettier 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#

FolderDescription
libThe project itself composed of:
lib/androidandroid sources and unit tests
lib/iosiOS sources and unit tests
lib/srcTypeScript sources and unit tests
lib/distcompiled javascript sources and unit tests
lib/dist/index.jsthe entry point for import Navigation from 'react-native-navigation'
e2edetox e2e tests on both Android and iOS
playgroundThe 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 <root>/lib for faster local development (no need to npm install locally).
integrationmisc javascript integration tests, proving integration with other libraries like redux
scriptsall scripts

Scripts#

CommandDescription
npm installinstalls dependencies
npm run buildcompiles TypeScript sources ./lib/src into javascript ./lib/dist
npm run cleancleans all build directories, stops packager, fixes flakiness by removing watchman cache, etc.
npm run startstarts the react-native packager for local debugging
npm run xcodefor convenience, opens xcode in this project
npm run install-androidbuilds playground debug/release version and installs on running android devices/emulators.
Options: -- --release
npm run uninstall-androiduninstalls playground from running android devices/simulators
npm run test-jsruns javascript tests and coverage report
npm run test-unit-iosruns ios unit tests in debug/release
Options: -- --release
npm run test-unit-androidruns android unit tests in debug/release
Options: -- --release
npm run test-e2e-iosruns the ios e2e tests using detox in debug/release
Options: -- --release
npm run test-e2e-androidruns the android e2e tests using detox in debug/release
Options: -- --release
npm run test-allruns all tests in parallel
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/modal/index.html b/7.25.4/docs/modal/index.html index eab3497e52..3bc7160dea 100644 --- a/7.25.4/docs/modal/index.html +++ b/7.25.4/docs/modal/index.html @@ -7,15 +7,15 @@ Modal | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -28,14 +28,14 @@ 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:

{
hardwareBackButton: {
dismissModalOnPress: false;
}
}

As a result, pressing the hardware back button will not dismiss the modal and will dispatch navigationButtonPress 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 determines the look and feel of a screen displayed as modal.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/overlay/index.html b/7.25.4/docs/overlay/index.html index 3e8b66941e..fb55408afa 100644 --- a/7.25.4/docs/overlay/index.html +++ b/7.25.4/docs/overlay/index.html @@ -7,15 +7,15 @@ Overlay | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -31,14 +31,14 @@
Toast.options = {
layout: {
componentBackgroundColor: 'transparent',
},
overlay: {
interceptTouchOutside: false,
},
};
module.exports = Toast;
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/passing-data-to-components/index.html b/7.25.4/docs/passing-data-to-components/index.html index 0fe364ce09..32e6762e3d 100644 --- a/7.25.4/docs/passing-data-to-components/index.html +++ b/7.25.4/docs/passing-data-to-components/index.html @@ -7,27 +7,27 @@ Passing data to components | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Passing data to components

Initial props#

React components use props to receive data when they are created. When displaying the 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:

Navigation.push(this.props.componentId, {
component: {
name: 'UserProfile',
id: 'PROFILE_SCREEN_ID'
passProps: {
name: 'John Doe',
status: 'online'
}
}
});
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, lets see how to use props passed in the push command to set the TopBar title.

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() command. Updating props triggers the component lifecycle methods related to updating.

Notice that we're using the component id in order to update props of this specific instance of the component.

Navigation.updateProps('PROFILE_SCREEN_ID', {
status: 'offline'
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/playground-app/index.html b/7.25.4/docs/playground-app/index.html index ea2f8b64bf..5a14d9a4fe 100644 --- a/7.25.4/docs/playground-app/index.html +++ b/7.25.4/docs/playground-app/index.html @@ -7,28 +7,28 @@ Playground app | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

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). Before you start changing things, make sure everything works.
    - To easily run all tests in parallel `npm run test-all`
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/root/index.html b/7.25.4/docs/root/index.html index a2ab146047..26a4f67e19 100644 --- a/7.25.4/docs/root/index.html +++ b/7.25.4/docs/root/index.html @@ -7,28 +7,28 @@ Root | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Root

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.

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.

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:
Navigation.setRoot({
root: {
stack: {
children: [
{
component: {
name: 'LOGIN_SCREEN'
}
}
]
}
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/screen-lifecycle/index.html b/7.25.4/docs/screen-lifecycle/index.html index dc388d81a1..1950e080b6 100644 --- a/7.25.4/docs/screen-lifecycle/index.html +++ b/7.25.4/docs/screen-lifecycle/index.html @@ -7,27 +7,27 @@ Screen Lifecycle | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

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, 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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/showcases/index.html b/7.25.4/docs/showcases/index.html index a6e7024e72..8ffada36b7 100644 --- a/7.25.4/docs/showcases/index.html +++ b/7.25.4/docs/showcases/index.html @@ -7,15 +7,15 @@ Showcases | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -23,14 +23,14 @@
# 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
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/sideMenu-disable/index.html b/7.25.4/docs/sideMenu-disable/index.html index 7f11be775d..95e04899ec 100644 --- a/7.25.4/docs/sideMenu-disable/index.html +++ b/7.25.4/docs/sideMenu-disable/index.html @@ -7,15 +7,15 @@ Disable Open and Close gesture | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -24,14 +24,14 @@
constructor(props) {
super(props);
Navigation.events().bindComponent(this);
}
render() {
return (
<View>
<Text>Click the hamburger icon to open the side menu</Text>
</View>
);
}
navigationButtonPressed({ buttonId }) {
if (buttonId === 'sideMenu') {
Navigation.mergeOptions(this, {
sideMenu: {
left: {
visible: true
}
}
});
}
}
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/sideMenu/index.html b/7.25.4/docs/sideMenu/index.html index 95e50673c3..2167561217 100644 --- a/7.25.4/docs/sideMenu/index.html +++ b/7.25.4/docs/sideMenu/index.html @@ -7,15 +7,15 @@ Side Menu | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -24,14 +24,14 @@
constructor(props) {
super(props);
Navigation.events().bindComponent(this);
}
render() {
return (
<View>
<Text>Click the hamburger icon to open the side menu</Text>
</View>
);
}
navigationButtonPressed({ buttonId }) {
if (buttonId === 'sideMenu') {
Navigation.mergeOptions(this.props.componentId, {
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:

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).

Navigation.push('CenterStack', {
component: {
name: Screens.Pushed,
options: {
sideMenu: {
left: {
visible: false
}
}
}
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/stack-backButton/index.html b/7.25.4/docs/stack-backButton/index.html index ec355e6202..14bcf2f415 100644 --- a/7.25.4/docs/stack-backButton/index.html +++ b/7.25.4/docs/stack-backButton/index.html @@ -7,27 +7,27 @@ The Back button | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

The 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.

backButton: {
color: 'red',
icon: require('../../img/customChevron.png')
}

Controling visibility#

The back buttons visbility can be controlled with the visible property.

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.

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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/stack-backNavigation/index.html b/7.25.4/docs/stack-backNavigation/index.html index 034273e685..e51463868b 100644 --- a/7.25.4/docs/stack-backNavigation/index.html +++ b/7.25.4/docs/stack-backNavigation/index.html @@ -7,27 +7,27 @@ Back Navigation | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Back Navigation

Disabling back navigation#

Handling back navigation#

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/stack-buttons/index.html b/7.25.4/docs/stack-buttons/index.html index 9a3e0431a9..346c09693c 100644 --- a/7.25.4/docs/stack-buttons/index.html +++ b/7.25.4/docs/stack-buttons/index.html @@ -7,29 +7,29 @@ TopBar Buttons | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

TopBar Buttons

Buttons can be added to the right and left 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 with the relevant actions when the button is clicked.

On Android, use the 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:

Navigation.registerComponent('ButtonComponent', () => require('./ButtonComponent'));

Now you can create buttons which use the component registered with 'ButtonComponent' as thier custom view:

topBar: {
rightButtons: [
{
component: {
name: '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

// Declare the button and assign it a unique id
topBar: {
rightButtons: [
{
id: 'SomeUniqueId',
component: {
name: '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.

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.

Navigation.mergeOptions(this.props.componentId, {
topBar: {
rightButtons: [],
},
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/stack-programmatically/index.html b/7.25.4/docs/stack-programmatically/index.html index bce601d040..3c514d053d 100644 --- a/7.25.4/docs/stack-programmatically/index.html +++ b/7.25.4/docs/stack-programmatically/index.html @@ -7,15 +7,15 @@ Interact programmatically with the Stack | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -23,14 +23,14 @@ 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.

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.

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'
}
});
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/stack/index.html b/7.25.4/docs/stack/index.html index 4436a35560..0e4d63bc1b 100644 --- a/7.25.4/docs/stack/index.html +++ b/7.25.4/docs/stack/index.html @@ -7,15 +7,15 @@ Stack | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -26,14 +26,14 @@ 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.

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.

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',
},
});
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/style-animations/index.html b/7.25.4/docs/style-animations/index.html index 29cc1e775d..722aa4bb12 100644 --- a/7.25.4/docs/style-animations/index.html +++ b/7.25.4/docs/style-animations/index.html @@ -7,15 +7,15 @@ Animations | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -25,14 +25,14 @@ 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.

Deprecation warning

Consider using enter, exit animations instead.

options: {
animations: {
showModal: {
alpha: {
from: 0,
to: 1,
duration: 300
}
}
}
}
options: {
animations: {
showModal: {
enter :{
enabled:true,
alpha: {
from: 0,
to: 1,
duration: 300
}
},
exit :{
enabled:true,
alpha: {
from: 1,
to: 0,
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 and the Destination screen

Shared Element Transition

Four elements are animated in this example. Let's list the elements involved in the transition and note which properties are being animated.

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.

<Image
source={item.image}
nativeID={`image${item.id}`}
style={styles.image}
resizeMode={'contain'}
/>

Step 2 - set a nativeID prop to elements in the destination screen#

<Image source={this.props.image} nativeID={`image${this.props.id}Dest`} style={styles.image} />

Step 3 - Declare the shared element animation when pushing the screen#

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 types are supported:

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.

<Text nativeID="description" style={styles.description}>
{this.props.description}
</Text>

Step 2 - Declare the element animation when pushing the screen#

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

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 = (
<Navigation.TouchablePreview
touchableComponent={TouchableHighlight}
onPress={handlePress}
onPressIn={handlePress}
>
<Text>My button</Text>
</Navigation.TouchablePreview>
);

All options except for reactTag are optional. Actions trigger the same event as navigation button presses. To react when a preview is committed, listen to the previewCompleted event.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/style-constants/index.html b/7.25.4/docs/style-constants/index.html index c12499ba10..b762a0f903 100644 --- a/7.25.4/docs/style-constants/index.html +++ b/7.25.4/docs/style-constants/index.html @@ -7,27 +7,27 @@ Constants | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

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() or Navigation.constantsSync() 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. There are two methods for accessing constants:

  • Navigation.constants(), which is async and thus returns a promise
  • Navigation.constantsSync(), which returns the constants synchronously, blocking the main thread

Where possible, it is better to use the async method, since this will not block the main thread.

const { Navigation } = require('react-native-navigation');
const {
statusBarHeight,
topBarHeight,
bottomTabsHeight
} = await Navigation.constants();

But, if you need to access the constants synchronously (e.g. within the render() method of a React component), you can do so as follows:

const { Navigation } = require('react-native-navigation');
const {
statusBarHeight,
topBarHeight,
bottomTabsHeight
} = Navigation.constantsSync();
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/style-fonts/index.html b/7.25.4/docs/style-fonts/index.html index dd4e2566ea..386cd752e6 100644 --- a/7.25.4/docs/style-fonts/index.html +++ b/7.25.4/docs/style-fonts/index.html @@ -7,27 +7,27 @@ Changing fonts | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

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

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#

options: {
bottomTab: {
fontFamily: 'helvetica'
}
}

Button font#

options: {
rightButtons: [
{
id: 'SAVE_BUTTON',
text: 'Save',
fontFamily: 'helvetica'
}
],
leftButtons: [
{
id: 'CANCEL_BUTTON',
text: 'Cancel',
fontFamily: 'helvetica'
}
]
}

Title font#

options: {
topBar: {
title: {
fontFamily: 'helvetica'
}
}
}

Subtitle font#

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.

options: {
topBar: {
backButton: {
fontFamily: 'helvetica'
}
}
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/style-options/index.html b/7.25.4/docs/style-options/index.html index b6f6d0d013..0f255414ca 100644 --- a/7.25.4/docs/style-options/index.html +++ b/7.25.4/docs/style-options/index.html @@ -7,15 +7,15 @@ Styling with options | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -32,14 +32,14 @@
class ExperimentScreen extends NavigationComponent {
static options(): Options {
const ExperimentsManager = require('./ExperimentsManager');
const food = ExperimentsManager.isActive('VeganExperiment') ? 'Tofu' : 'Hamburger';
return {
topBar: {
title: {
text: `Hello ${food}!`,
},
},
};
}
}

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.

import { Navigation } from 'react-native-navigation';
Navigation.mergeOptions(componentId, {
topBar: {
background: {
color: 'red',
},
},
});
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).

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.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/style-orientation/index.html b/7.25.4/docs/style-orientation/index.html index 466142f1ce..7515b4f94b 100644 --- a/7.25.4/docs/style-orientation/index.html +++ b/7.25.4/docs/style-orientation/index.html @@ -7,27 +7,27 @@ Orientation | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

Orientation

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.

Navigation.setDefaultOptions({
layout: {
orientation: ['portrait'],
},
});

Changing orientation dynamically#

Changing orientation dynamically through Navigation.mergeOption() is supported only on Android.

Navigation.mergeOptions(this.props.componentId, {
layout: {
orientation: ['landscape'],
},
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/style-statusBar/index.html b/7.25.4/docs/style-statusBar/index.html index 6c854d680e..a00d52fe71 100644 --- a/7.25.4/docs/style-statusBar/index.html +++ b/7.25.4/docs/style-statusBar/index.html @@ -7,27 +7,27 @@ StatusBar | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.25.4

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)

options: {
statusBar: {
backgroundColor: 'white',
style: 'dark'
}
}
Compatibility with StatusBar component

React native's StatusBar 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

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

How to 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.

options: {
statusBar: {
backgroundColor: null
}
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/style-theme/index.html b/7.25.4/docs/style-theme/index.html index e789b704ed..948259aa91 100644 --- a/7.25.4/docs/style-theme/index.html +++ b/7.25.4/docs/style-theme/index.html @@ -7,15 +7,15 @@ Themes | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -32,14 +32,14 @@
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;
});

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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/third-party-mobx/index.html b/7.25.4/docs/third-party-mobx/index.html index d42d76ed54..ad699ee06b 100644 --- a/7.25.4/docs/third-party-mobx/index.html +++ b/7.25.4/docs/third-party-mobx/index.html @@ -7,15 +7,15 @@ MobX | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -47,14 +47,14 @@
// 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.
});
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/third-party-react-context/index.html b/7.25.4/docs/third-party-react-context/index.html index d7d371d096..52172ef788 100644 --- a/7.25.4/docs/third-party-react-context/index.html +++ b/7.25.4/docs/third-party-react-context/index.html @@ -7,15 +7,15 @@ React Context API | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -36,14 +36,14 @@
export const App = () => {
// Using useContext API
const { count, increment, decrement } = React.useContext(CounterContext);
return (
<View>
<Text>{`Clicked ${count} times!`}</Text>
<Button title="Increment" onPress={increment} />
<Button title="Decrement" onPress={decrement} />
</View>
);
};
// App.tsx
import React from 'react';
import { Button, Text, View } from 'react-native';
import { CounterContext } from './CounterContext';
export const App = () => {
// Using Context consumer
return (
<CounterContext.Consumer>
{({ count, increment, decrement }) => (
<View>
<Text>{`Clicked ${count} times!`}</Text>
<Button title="Increment" onPress={increment} />
<Button title="Decrement" onPress={decrement} />
</View>
)}
</CounterContext.Consumer>
);
};
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/third-party-react-native-vector-icons/index.html b/7.25.4/docs/third-party-react-native-vector-icons/index.html index 469c53b494..af7a78afb0 100644 --- a/7.25.4/docs/third-party-react-native-vector-icons/index.html +++ b/7.25.4/docs/third-party-react-native-vector-icons/index.html @@ -7,15 +7,15 @@ react-native-vector-icons | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -35,14 +35,14 @@
function ExampleComponent({ }: Props) {
return (
<View>
<Text>An example component</Text>
</View>
)
}
ExampleComponent.options = () => {
return {
topBar: {
title: {
text: 'Example Component',
},
leftButtons: [{
icon: iconsMap.add,
color: '#888',
accessibilityLabel: 'Add',
}],
},
};
};
export default ExampleComponent;
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.25.4/docs/third-party-typescript/index.html b/7.25.4/docs/third-party-typescript/index.html index 0a86530af6..ab03108117 100644 --- a/7.25.4/docs/third-party-typescript/index.html +++ b/7.25.4/docs/third-party-typescript/index.html @@ -7,15 +7,15 @@ TypeScript | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -28,14 +28,14 @@
// Static options are also supported!
MyFunctionalComponent.options = {
topBar: {
title: {
text: 'Hello functional component',
},
},
};
export default MyFunctionalComponent;

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.

import { Navigation } from 'react-native-navigation';
interface Props {
name: string;
}
Navigation.push<Props>(componentId, {
component: {
name: 'MyComponent',
passProps: {
name: 'Bob',
// @ts-expect-error
color: 'red', // Compilation error! color isn't declared in Props
},
},
});

The following commands accept typed passProps:

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/component/index.html b/7.32.1/api/component/index.html index 8b31073029..764abea51e 100644 --- a/7.32.1/api/component/index.html +++ b/7.32.1/api/component/index.html @@ -7,28 +7,28 @@ Component | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Component

registerComponent#

Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component or React.PureComponent. It can also be a HOC to provide context (or a Redux store) or a functional component. Similar to React Native's AppRegistry.registerComponent.

Parameters#

NameRequiredTypeDescription
componentNameYesstringUnique component name - not to be confused with componentId
componentProviderYesFunctionAnonymous function that returns the React component to register, OR the component wrapped with Providers
concreteComponentProviderNoFunctionAnonymous function that returns the concrete React component. If your component is wrapped with Providers, this must be an instance of the concrete component.

Examples#

Registering a component#
Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
Registering a component wrapped with Providers#
import { Provider } from 'react-redux';
const store = createStore();
Navigation.registerComponent(`navigation.playground.MyScreen`, () => (props) =>
<Provider store={store}>
<MyScreen {...props} />
</Provider>,
() => MyScreen)
);

setLazyComponentRegistrator#

Pass a function that will allow you to register a component lazily. When encountering an unknown component name, this function will be called, giving you a chance to register the component before an error is thrown.

Parameters#

NameRequiredTypeDescription
lazyRegistratorFnYes(lazyComponentRequest: stringnumber) => void

Example#

Navigation.setLazyComponentRegistrator((componentName) => {
if (componentName === 'navigation.playground.LazyScreen') {
Navigation.registerComponent(Screens.LazilyRegisteredScreen, () => LazyScreen);
}
});

updateProps#

Update props of a component registered with registerComponent. Updating props triggers the component lifecycle methods related to updating.

Parameters#

NameRequiredTypeDescription
componentIdYesstringUnique component id
optionsYesobjectProps object to pass to the component
callbackNoFunctionFunction that will be executed once inner setState is completed

Example#

Navigation.updateProps('MY_COMPONENT', {
// props to pass to the component
};
important

updateProps is called with a componentId. This is the same unique id components have in props. Don't confuse it with the componentName we use when registering components with Navigation.registerComponent.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/events/index.html b/7.32.1/api/events/index.html index 6280c341fa..6467eb392f 100644 --- a/7.32.1/api/events/index.html +++ b/7.32.1/api/events/index.html @@ -7,15 +7,15 @@ Events | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -44,14 +44,14 @@
searchBarCancelPressed() {}
}

previewCompleted (iOS 11.4+ only)#

Called when preview peek is completed.

class MyComponent extends Component {
componentDidMount() {
this.navigationEventListener = Navigation.events().bindComponent(this);
}
componentWillUnmount() {
// Not mandatory
if (this.navigationEventListener) {
this.navigationEventListener.remove();
}
}
previewCompleted({ previewComponentId }) {}
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/layout-bottomTabs/index.html b/7.32.1/api/layout-bottomTabs/index.html index 68a8853fa9..edd41213d7 100644 --- a/7.32.1/api/layout-bottomTabs/index.html +++ b/7.32.1/api/layout-bottomTabs/index.html @@ -7,27 +7,27 @@ Bottom Tabs | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Bottom Tabs

A container view for managing a radio-style selection interface, where a selection determines which child view controller to display.

{
id: 'BOTTOM_TABS_LAYOUT',
children: [
{
component: {
id: 'HOME_SCREEN',
name: 'HomeScreen'
}
},
{
stack: {
id: 'PROFILE_TAB',
children: [
{
component: {
id: 'PROFILE_SCREEN',
name: 'ProfileScreen'
}
}
]
}
}
]
}

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation api, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

children#

TypeRequiredDescription
Layout[]YESChild layouts of any kind.

options#

TypeRequiredDescription
OptionsNodynamic options which will apply to all screens in bottomTabs
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/layout-component/index.html b/7.32.1/api/layout-component/index.html index df86559b3d..7da0346d44 100644 --- a/7.32.1/api/layout-component/index.html +++ b/7.32.1/api/layout-component/index.html @@ -7,27 +7,27 @@ Component | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Component

{
name: "MyRegisteredComponent";
}

name#

TypeRequiredDescription
stringYesKey used when registering the component with Navigation.registerComponent.

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation api, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

options#

TypeRequiredDescription
OptionsNodynamic options for the component

alignment#

TypeRequiredDescription
enum('center', 'fill')NoThis option is relevant only to title components. fill will make the component stretch and consume all available space in the TopBar while center will center it in the middle of the TopBar. center is the default option in iOS while fill is the default for Android.

waitForRender#

TypeRequiredDescription
booleanNoWait for this component to fully render before showing the screen.

This option is useful for ensuring that both a child screen pushed into the stack and all of the TopBar components (title, background and buttons) are displayed to the user at the same time.

To enable this option, waitForRender in the relevant screen animation option needs to be enabled as well.

caution

This option might introduce delays when pushing screens and should be used with caution.

passProps#

TypeRequiredDescription
objectNoA JavaScript object with props accessible inside the component using this.props.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/layout-layout/index.html b/7.32.1/api/layout-layout/index.html index 6f1213f56c..f33b81725a 100644 --- a/7.32.1/api/layout-layout/index.html +++ b/7.32.1/api/layout-layout/index.html @@ -7,27 +7,27 @@ Layout | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Layout

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation API, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

options#

TypeRequiredDescription
OptionsNodynamic options for the layout

children#

TypeRequiredDescription
Layout[]YesChild layouts of any kind.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/layout-sideMenu/index.html b/7.32.1/api/layout-sideMenu/index.html index d0f54231c8..91cab9ed3a 100644 --- a/7.32.1/api/layout-sideMenu/index.html +++ b/7.32.1/api/layout-sideMenu/index.html @@ -7,27 +7,27 @@ Side Menu | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Side Menu

This layout allows implementing sidemenus, which can be opened by swiping from one side towards the other side.

{
left: {
component: {}
},
center: {
stack: {
options: {},
children: [{
component: {}
}]
}
},
right: {
component: {}
}
}

center#

TypeRequiredDescription
LayoutYesCenter component, contains the main application.

left#

TypeRequiredDescription
LayoutNoContains the left component layout.

right#

TypeRequiredDescription
LayoutNoContains the right component layout.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/layout-splitView/index.html b/7.32.1/api/layout-splitView/index.html index fb750c4efe..fc1c84cf3b 100644 --- a/7.32.1/api/layout-splitView/index.html +++ b/7.32.1/api/layout-splitView/index.html @@ -7,28 +7,28 @@ SplitView | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

SplitView

A container view controller implementing a master-detail interface. See UISplitViewController docs. Currently implemented only in iOS.

{
id: 'PROFILE_TAB',
master: {
component: {
id: 'MASTER_SCREEN',
name: 'MasterScreen'
}
},
detail: {
component: {
id: 'DETAIL_SCREEN',
name: 'DetailScreen'
}
}
}

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation api, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

master#

TypeRequiredDescription
LayoutYESSet master layout (the smaller screen, sidebar)

detail#

TypeRequiredDescription
LayoutYESSet detail layout (the larger screen, flexes)

options#

TypeRequiredDescription
OptionsNodynamic options which will apply to all screens
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/layout-stack/index.html b/7.32.1/api/layout-stack/index.html index 7ed2e2566b..3422351203 100644 --- a/7.32.1/api/layout-stack/index.html +++ b/7.32.1/api/layout-stack/index.html @@ -7,27 +7,27 @@ Stack | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Stack

A stack is a container layout promoting a hierarchical navigation. It is used to navigate between screens at consecutive levels of hierarchy, steps in a flow or across an app.

{
id: 'PROFILE_TAB',
children: [
{
component: {
id: 'PROFILE_SCREEN',
name: 'ProfileScreen'
}
}
]
}

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation api, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

children#

TypeRequiredDescription
Layout[]YESChild layouts of any kind.

options#

TypeRequiredDescription
OptionsNoOptions that will apply to all screens in stack
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/modal/index.html b/7.32.1/api/modal/index.html index aac4324370..45e1436893 100644 --- a/7.32.1/api/modal/index.html +++ b/7.32.1/api/modal/index.html @@ -7,27 +7,27 @@ Modal | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Modal

showModal()#

Show a screen as a modal.

Parameters#

NameRequiredTypeDescription
layoutYesLayoutAny type of layout. BottomTabs, Stack, SideMenu, Component
Navigation.showModal({
stack: {
children: [{
component: {
name: 'example.ModalScreen',
passProps: {
text: 'stack with one child'
},
options: {
topBar: {
title: {
text: 'Modal'
}
}
}
}
}]
}
});

dismissModal()#

Dismiss the current modal.

Parameters#

NameRequiredTypeDescription
componentIdYesstringAny component id presented in the modal
mergeOptionsNoOptionsOptions to be merged before dismissing the Modal.
Navigation.dismissModal(this.props.componentId);

dismissAllModals()#

Dismiss all current modals at the same time.

Parameters#

NameRequiredTypeDescription
mergeOptionsNoOptionsOptions to be merged before dismissing all modals.
Navigation.dismissAllModals();
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-animations/index.html b/7.32.1/api/options-animations/index.html index 03b9148022..136e3b88aa 100644 --- a/7.32.1/api/options-animations/index.html +++ b/7.32.1/api/options-animations/index.html @@ -7,27 +7,27 @@ Animations | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Animations

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-api/index.html b/7.32.1/api/options-api/index.html index 8dedb0a7d7..d415a78c6b 100644 --- a/7.32.1/api/options-api/index.html +++ b/7.32.1/api/options-api/index.html @@ -7,27 +7,27 @@ Options Commands | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Options Commands

setDefaultOptions#

Set default options for all screens. Useful for declaring a consistent style across the app.

Parameters#

NameTypeRequiredDescription
optionsOptionsYesOptions root

Example#

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

mergeOptions#

Change navigation options of a component or layout.

Parameters#

NameTypeRequiredDescription
componentIdstringYesThe component or layout id
optionsOptionsYesOptions root

Example#

Navigation.mergeOptions('componentId', {
bottomTabs: {
visible: false,
},
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-backButton/index.html b/7.32.1/api/options-backButton/index.html index f8c9f6de94..ef5300f7b3 100644 --- a/7.32.1/api/options-backButton/index.html +++ b/7.32.1/api/options-backButton/index.html @@ -7,29 +7,29 @@ Back Button Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Back Button Options

Controls the back button styling.

const options = {
topBar: {
backButton: {},
},
};

accessibilityLabel#

Overrides the text that's read by the screen reader when the user interacts with the back button.

TypeRequiredPlatform
stringNoAndroid

id#

Button id for reference press event.

TypeRequiredPlatform
stringNoAndroid

color#

Change the back button color. This will change the text color as well.

TypeRequiredPlatform
colorNoBoth

icon#

Change the default back button icon.

TypeRequiredPlatform
ImageResourceNoBoth

sfSymbol#

SF Symbol to show as the back button

TypeRequiredPlatform
stringNoiOS 13+

showTitle#

Show or hide the text displayed next to the back button.

TypeRequiredPlatform
numberNoiOS

displayMode#

Set display mode of the back button. Currently works for iOS 14+ only. See: UINavigationItem.BackButtonDisplayMode

TypeRequiredPlatform
enum('default', 'generic', 'minimal')NoiOS

title#

Change the text displayed next to the title. Usually the back button shows the title of the previous screen.

TypeRequiredPlatform
stringNoiOS

visible#

Hide or show the back button.

TypeRequiredPlatform
booleanNoBoth

testID#

Used to interact with the back button in e2e tests.

TypeRequiredPlatform
stringNoBoth

enableMenu#

Enables iOS 14 back button menu display.

TypeRequiredPlatformDefault
booleanNoiOStrue

popStackOnPress#

Controls whether the default back button should pop screen or not.

TypeRequiredDefault
booleanNotrue
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-background/index.html b/7.32.1/api/options-background/index.html index aa522c39cd..134d1d6b59 100644 --- a/7.32.1/api/options-background/index.html +++ b/7.32.1/api/options-background/index.html @@ -7,27 +7,27 @@ Background Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Background Options

Controls the top bar background styling.

const options = {
topBar: {
background: {}
}
};

color#

Set the background color. Ignored if a component is specified.

TypeRequiredPlatform
ColorNoBoth

component#

Set a react component as the background. Useful when you need to show a gradient as background, for instance.

On Android, setting an id to the Component will prevent the component from being recreated each time it's used by a screen. The component will be created once and whenever possible it will be reused.

TypeRequiredPlatform
ComponentNoBoth

clipToBounds#

Clip the top bar background to bounds if set to true.

TypeRequiredPlatform
booleanNoiOS

translucent#

Allows the NavBar to be translucent (blurred).

TypeRequiredPlatform
booleanNoiOS

blur#

Enable background blur.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-bottomTab/index.html b/7.32.1/api/options-bottomTab/index.html index 5d3ef6b012..3421638a18 100644 --- a/7.32.1/api/options-bottomTab/index.html +++ b/7.32.1/api/options-bottomTab/index.html @@ -7,27 +7,27 @@ Bottom Tab Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Bottom Tab Options

const options = {
bottomTab: {},
};

selectTabOnPress#

TypeRequiredPlatform
booleanNoBoth

popToRoot#

Pop to root of stack by tapping on already selected tab.

TypeRequiredPlatform
booleanNoAndroid

badge#

TypeRequiredPlatform
stringNoBoth

badgeColor#

TypeRequiredPlatform
colorNoBoth

animateBadge#

TypeRequiredPlatform
booleanNoAndroid

disableIconTint#

TypeRequiredPlatform
booleanNoBoth

dotIndicator#

TypeRequiredPlatform
DotIndicatorNoBoth

fontFamily#

TypeRequiredPlatform
stringNoBoth

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoBoth

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoBoth

fontSize#

TypeRequiredPlatform
numberNoBoth

icon#

TypeRequiredPlatform
ImageResourceNoBoth

iconWidth#

The width (in dp) of the icon.

TypeRequiredPlatform
numberNoAndroid

iconHeight#

The height (in dp) of the icon.

TypeRequiredPlatform
numberNoAndroid

iconColor#

TypeRequiredPlatform
colorNoBoth

selectedFontSize#

TypeRequiredPlatform
numberNoBoth

selectedIcon#

TypeRequiredPlatform
ImageResourceNoBoth

selectedIconColor#

TypeRequiredPlatform
colorNoBoth

iconInsets#

TypeRequiredPlatform
IconInsetsNoBoth

disableSelectedIconTint#

TypeRequiredPlatform
booleanNoAndroid

disableIconTint#

TypeRequiredPlatform
booleanNoAndroid

selectedTextColor#

TypeRequiredPlatform
colorNoBoth

testID#

TypeRequiredPlatform
stringNoBoth

accessibilityLabel#

Overrides the text that's read by the screen reader when the user interacts with the bottomTab button.

TypeRequiredPlatform
stringNoiOS

text#

TypeRequiredPlatform
stringNoBoth

textColor#

TypeRequiredPlatform
colorNoBoth

sfSymbol#

Set the SF symbol as icon (will be used primarily).

TypeRequiredPlatform
stringNoiOS 13+

sfSelectedSymbol#

Set the SF symbol as selected icon (will be used primarily)

TypeRequiredPlatform
stringNoiOS 13+

DotIndicator#

color?: color#
size?: number#
visible?: boolean#
animate?: boolean#

IconInsets#

top?: number#
left?: number#
right?: number#
bottom?: number#
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-bottomTabs/index.html b/7.32.1/api/options-bottomTabs/index.html index 87c0c8f1e9..67ab53e10c 100644 --- a/7.32.1/api/options-bottomTabs/index.html +++ b/7.32.1/api/options-bottomTabs/index.html @@ -7,28 +7,28 @@ Bottom Tabs Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Bottom Tabs Options

const options = {
bottomTabs: {},
};

animate#

Controls whether toggling visibility states will be animated.

TypeRequiredPlatform
booleanNoBoth

animateTabSelection#

Controls wether tab selection is animated or not

TypeRequiredPlatform
booleanNoAndroid

backgroundColor#

Change the background color.

TypeRequiredPlatform
colorNoBoth

barStyle#

Controls whether the BottomTabs use dark (black) or light (default) visual style. Requires translucent: true.

TypeRequiredPlatform
enum('default','black')NoBoth

currentTabId#

Select a tab by the id (componentId) of a child contained in it. See Selecting tabs programmatically for a detailed explanation.

TypeRequiredPlatform
numberNoBoth

currentTabIndex#

TypeRequiredPlatform
numberNoBoth

drawBehind#

TypeRequiredPlatform
booleanNoBoth

elevation#

TypeRequiredPlatform
numberNoAndroid

hideShadow#

TypeRequiredPlatform
booleanNoiOS

hideOnScroll#

Hides the BottomTabs on scroll to increase the amount of content visible to the user. The options requires that the scrollable view will be the root view of the screen and that it specifies nestedScrollEnabled: true.

TypeRequiredPlatform
booleanNoAndroid

preferLargeIcons#

TypeRequiredPlatform
booleanNoAndroid

tabsAttachMode#

TypeRequiredPlatform
enum('together','afterInitialTab','onSwitchToTab')NoBoth

testID#

TypeRequiredPlatform
stringNoBoth

titleDisplayMode#

TypeRequiredPlatform
enum('alwaysShow','showWhenActive','alwaysHide')NoBoth

translucent#

A Boolean value that indicates whether the BottomTabs are translucent. For this option to function as expected the screen needs to be drawn behind the BottomTabs; Make sure the list component you're using (FlatList for example) is the root component in the screen and not SafeAreaView. When SafeAreView is the root component it shifts the content above the BottomTabs and the translucent effect isn't visible.

TypeRequiredPlatform
booleanNoiOS

visible#

TypeRequiredPlatform
booleanNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-button/index.html b/7.32.1/api/options-button/index.html index 385697224a..3ad7724689 100644 --- a/7.32.1/api/options-button/index.html +++ b/7.32.1/api/options-button/index.html @@ -7,27 +7,27 @@ Button Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Button Options

const options = {
topBar: {
leftButtons: [
{
id: 'id',
text: 'Button',
},
],
},
};

allCaps#

This option will set whether characters are all capitalized or not.

TypeRequiredPlatformDefault
booleanNoAndroidtrue

fontSize#

If the button has text, this option is used to set font size in DP.

TypeRequiredPlatform
numberNoBoth

fontFamily#

TypeRequiredPlatform
stringNoBoth

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoBoth

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoBoth

id#

Buttons are identified by their id property. When a button is clicked, a buttonPress event is emitted to js, containing the id of the clicked button.

TypeRequiredPlatform
stringYesBoth

icon#

Button icon. If the button is pushed to the overflow menu, the button text is used instead.

TypeRequiredPlatform
ImageResourceNoBoth

sfSymbol#

SF Symbol to show as the back button

TypeRequiredPlatform
stringNoiOS 13+

text#

Button text. Ignored if an icon is specified, unless the button is displayed in the overflow menu.

TypeRequiredPlatform
stringNoBoth

showAsAction#

TypeRequiredPlatform
enum('always', 'never', 'withText', 'ifRoom')NoAndroid
  • ifRoom - Only add button to the TopBar if there is room for it, otherwise add it to the overflow menu.
  • never - Never place this button in the TopBar. Instead, list the button in the overflow menu.
  • always - Always place this button in the app bar.

component#

Set a react component as this button's view which will be displayed instead of the regular view.

TypeRequiredPlatform
ComponentNoBoth

iconInsets#

IconInsets are applied to the icon to translate its original position on the screen.

TypeRequiredPlatform
IconInsetsNoiOS

systemItem#

System icon; ignored if an icon is specified. For more information, see apple's guidelines.

TypeRequiredPlatform
enum('done', 'cancel', 'edit', 'save', 'add', 'flexibleSpace', 'fixedSpace', 'compose', 'reply', 'action', 'organize', 'bookmarks', 'search', 'refresh', 'stop', 'camera', 'trash', 'play', 'pause', 'rewind', 'fastForward', 'undo', 'redo')NoiOS

iconBackground#

iconBackground is applied to the icon's background.

TypeRequiredPlatform
iconBackgroundNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-fab/index.html b/7.32.1/api/options-fab/index.html index 1693d38b09..34448051ec 100644 --- a/7.32.1/api/options-fab/index.html +++ b/7.32.1/api/options-fab/index.html @@ -7,27 +7,27 @@ Fab | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Fab

Controls the FAB button styling on Android.

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

id#

Button id for reference press event.

Note

This option is mandatory when you are initiating the FAB button. However you do not need to pass in id when updating the Fab button options with Navigation.mergeOptions.

TypeRequiredPlatform
stringNoAndroid

icon#

Change the default back button icon.

TypeRequiredPlatform
numberNoAndroid

iconColor#

Change the icon color of the FAB button.

TypeRequiredPlatform
colorNoAndroid

backgroundColor#

Change the background color of the FAB button.

TypeRequiredPlatform
colorNoAndroid

clickColor#

Change the on-clicked background color of the FAB button.

TypeRequiredPlatform
colorNoAndroid

rippleColor#

Change the ripple color of the FAB button.

TypeRequiredPlatform
colorNoAndroid

visible#

Show or hide the FAB button.

TypeRequiredPlatform
booleanNoAndroid

alignHorizontally#

Set the horizontal position of the FAB button on the screen.

TypeRequiredPlatform
'left' or 'right'NoAndroid

hideOnScroll#

Hide the FAB button on scroll.

TypeRequiredPlatform
booleanNoAndroid

size#

Set the size of the FAB button.

TypeRequiredPlatform
'mini' or 'regular'NoAndroid
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-hardwareBackButton/index.html b/7.32.1/api/options-hardwareBackButton/index.html index d8df79ccc5..f0bb5e496e 100644 --- a/7.32.1/api/options-hardwareBackButton/index.html +++ b/7.32.1/api/options-hardwareBackButton/index.html @@ -7,15 +7,15 @@ Hardware Back Button Options | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -23,14 +23,14 @@ first will jump to first tab, previous will do reverse selection, exit (Default) will just exit the bottom tabs.

TypeRequiredDefaultPlatform
enum('exit', 'first', 'previous')No'exit'Android
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-iconBackground/index.html b/7.32.1/api/options-iconBackground/index.html index e9f62a57e4..ba9ff6dfa0 100644 --- a/7.32.1/api/options-iconBackground/index.html +++ b/7.32.1/api/options-iconBackground/index.html @@ -7,27 +7,27 @@ iconBackground Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

iconBackground Options

color#

Set the background color.

TypeRequiredPlatform
ColorNoBoth

width#

Set the background width.

TypeRequiredPlatform
numberNoBoth

height#

Set the background height.

TypeRequiredPlatform
numberNoBoth

cornerRadius#

Set the background cornerRadius.

TypeRequiredPlatform
numberNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-iconInsets/index.html b/7.32.1/api/options-iconInsets/index.html index 80497a37bf..5a6c968040 100644 --- a/7.32.1/api/options-iconInsets/index.html +++ b/7.32.1/api/options-iconInsets/index.html @@ -7,27 +7,27 @@ IconInsets Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

IconInsets Options

top#

Configure top inset

TypeRequiredPlatform
numberNoBoth

bottom#

Configure bottom inset

TypeRequiredPlatform
numberNoBoth

left#

Configure left inset

TypeRequiredPlatform
numberNoBoth

right#

Configure right inset

TypeRequiredPlatform
numberNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-imageResource/index.html b/7.32.1/api/options-imageResource/index.html index 82f5ac93ca..e4ac9788df 100644 --- a/7.32.1/api/options-imageResource/index.html +++ b/7.32.1/api/options-imageResource/index.html @@ -7,27 +7,27 @@ Image Resource | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Image Resource

ImageResource#

const options = {
topBar: {
leftButtons: [
icon: require('./backButton.png')
]
},
};

The following icon types are available:

TypeRequiredPlatform
ImageRequireSourceNoBoth
stringNoBoth
ImageSystemSourceNoiOS

ImageSystemSource#

system#

You can use platform specific system icons for iOS only.

Example:

const options = {
topBar: {
leftButtons: [
icon: {
system: 'calendar',
fallback: require('./calendar.png')
}
]
},
};
TypeRequiredPlatform
stringYesiOS 13+

fallback#

TypeRequiredPlatform
FallbackSourceNoiOS 13+

FallbackSource#

For iOS, SF Symbols is available only for iOS 13 and later. For iOS 12 and earlier you should use a fallback icon.

ImageRequireSource#

TypeRequiredPlatform
numberNoBoth

string#

TypeRequiredPlatform
numberNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-largeTitle/index.html b/7.32.1/api/options-largeTitle/index.html index 8d3387499a..bbbd2efe94 100644 --- a/7.32.1/api/options-largeTitle/index.html +++ b/7.32.1/api/options-largeTitle/index.html @@ -7,27 +7,27 @@ Large Title Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Large Title Options

Controls the top bar large title on iOS, available on iOS 11 and above.

const options = {
topBar: {
largeTitle: {},
},
};

visible#

Controls whether the large title is visible or not.

TypeRequiredPlatform
booleanNoiOS

fontSize#

Set the title font size. On Android this value is in sp.

TypeRequiredPlatform
numberNoiOS

color#

Large title text color.

TypeRequiredPlatform
ColorNoiOS

fontFamily#

Set the large title FontFamily.

TypeRequiredPlatform
FontFamilyNoiOS

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoiOS

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-layout/index.html b/7.32.1/api/options-layout/index.html index 4cb9373a84..6107cedfee 100644 --- a/7.32.1/api/options-layout/index.html +++ b/7.32.1/api/options-layout/index.html @@ -7,27 +7,27 @@ Layout Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Layout Options

const options = {
layout: {},
};

fitSystemWindows#

TypeRequiredPlatform
booleanNoBoth

backgroundColor#

Set the screen background color.

TypeRequiredPlatform
ColorNoBoth

componentBackgroundColor#

Set background color only for components. On Android, using this option instead of backgroundColor helps reduce overdraw.

TypeRequiredPlatform
ColorNoBoth

orientation#

Set the allowed orientations.

TypeRequiredPlatform
['portrait', 'landscape']NoBoth

topMargin#

Set the layout top margin.

TypeRequiredPlatform
numberNoAndroid

direction#

Set language direction, only works with DefaultOptions. locale is an Android specific option which sets the direction according to the device locale.

TypeRequiredPlatform
enum('rtl', 'ltr', 'locale')NoBoth

autoHideHomeIndicator#

Controls the application's preferred home indicator auto-hiding.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-migration/index.html b/7.32.1/api/options-migration/index.html index 7d18a0a404..6671573218 100644 --- a/7.32.1/api/options-migration/index.html +++ b/7.32.1/api/options-migration/index.html @@ -7,27 +7,27 @@ options-migration | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

options-migration

Common Options#

navBarTextColor#

Title text color

topBar: {
title: {
color: 'red'
}
}

navBarTextFontSize#

Title font size

topBar: {
title: {
fontSize: 18
}
}

navBarTextFontFamily#

Title font

topBar: {
title: {
fontFamily: 'Helvetica'
}
}

navBarBackgroundColor#

TopBar background color

topBar: {
background: {
color: 'red'
}
}

navBarCustomView#

Use a react view as the TopBar's background or use a React view instead of the textual title.

topBar: {
background: {
component: {
name: 'example.CustomTopBarBackground'
}
},
title: {
component: {
name: 'example.CustomTopBarTitle'
}
}
}

navBarClipToBounds#

Restrict the navbar background color to the navbar, and do not flow behind the status bar.

topBar: {
background: {
component: {
name: 'example.CustomTopBarBackground',
clipToBounds: true
}
},
}

navBarComponentAlignment#

Align the React view used as the title

topBar: {
title: {
component: {
name: 'example.CustomTopBarTitle',
alignment: 'center' | 'fill'
}
}
}

navBarCustomViewInitialProps#

Initial props passed to the React component

topBar: {
background: {
component: {
name: 'example.CustomTopBarBackground',
passProps: {}
}
},
title: {
component: {
name: 'example.CustomTopBarTitle',
passProps: {}
}
}
}

navBarButtonColor#

TopBar button color

topBar: {
rightButtons: [
{
color: 'red'
}
],
leftButtons: [
{
color: 'red'
}
],
backButton: {
color: 'red'
}
}

navBarHidden#

TopBar visibility. When setting visible: false, you probably want to set drawBehind: true as well. Use animate: false to toggle visibility without animation.

topBar: {
visible: false
}

navBarTransparent#

Transparent TopBar. Set drawBehind: true to draw the screen behind the transparent TopBar.

topBar: {
background: {
color: 'transparent'
}
}

drawUnderNavBar#

Draw the screen behind the TopBar, Useful when the TopBar is toggled or transparent

topBar: {
drawBehind: true
}

drawUnderTabBar#

Draw the screen behind the BottomTabs, Useful when toggling BottomTabs or when the BottomTabs are translucent.

bottomTabs: {
drawBehind: true
}

tabBarHidden#

BottomTabs visibility.

bottomTabs: {
visible: false
}

The BottomTab's visibility can be toggled only on Android using mergeOptions:

Navigation.mergeOptions(this.props.componentId, {
bottomTabs: {
visible: false
}
});

On iOS, BottomTab visibility can be changed only when pushing screens. This means that if you'd like to hide BottomTabs when pushing a screen, You'll need to set the property to false in the options passed to the push command or via the static options(passProps) {} api.

statusBarHidden#

StatusBar visibility. For android, also set drawBehind: true.

statusBar: {
visible: false
}

statusBarTextColorScheme#

Theme of text and icons displayed in the StatusBar

statusBar: {
style: 'light' | 'dark'
}

navBarSubtitleColor#

Subtitle color

topBar: {
subtitle: {
color: 'red'
}
}

navBarSubtitleFontFamily#

Subtitle font

topBar: {
subtitle: {
fontFamily: 'Helvetica'
}
}

navBarSubtitleFontSize#

Subtitle font size

topBar: {
subtitle: {
fontSize: 14
}
}

screenBackgroundColor#

Screen color, visible before the actual React view is rendered

layout: {
backgroundColor: 'red'
}

orientation#

layout: {
orientation: ['portrait', 'landscape'] // An array of supported orientations
}

disabledButtonColor#

Button color when enabled: false is used

topBar: {
rightButtons: [
{
disabledColor: 'grey'
}
]
}

navBarButtonFontSize#

Button font size

topBar: {
rightButtons: [
{
fontSize: 13
}
],
leftButtons: [
{
fontSize: 13
}
]
}

navBarLeftButtonFontSize#

Left button font size

{
topBar: {
leftButtons: [
{
fontSize: 13
}
]
}
}

navBarLeftButtonColor#

Left button color

{
topBar: {
leftButtons: [
{
color: 'red'
}
]
}
}

navBarLeftButtonFontWeight#

Left button font weight

{
topBar: {
leftButtons: [
{
weight: '300'
}
]
}
}

navBarRightButtonFontSize#

Right button font size

topBar: {
leftButtons: [
{
fontSize: 13
}
]
}

navBarRightButtonColor#

Right button color

topBar: {
rightButtons: [
{
color: 'red'
}
]
}

navBarRightButtonFontWeight#

Right button font weight

topBar: {
rightButtons: [
{
weight: '400'
}
]
}

modalPresentationStyle#

Controls the behavior of screens displayed modally.

Options supported on iOS#

  • overCurrentContext - Content is displayed over the previous screen. Useful for transparent modals
  • formSheet - Content is centered in the screen
  • pageSheet -Content partially covers the underlying content
  • overFullScreen - Content covers the screen, without detaching previous content.
  • fullScreen - Content covers the screen, previous content is detached.
  • popover - Content is displayed in a popover view.

More information on the different styles for iOS can be found on https://developer.apple.com/documentation/uikit/uimodalpresentationstyle

Options supported on Android#

  • overCurrentContext - Content is displayed over the previous screen. Useful for transparent modals
  • none - Previous content is detached when the Modal's show animation ends
{
modalPresentationStyle: 'overCurrentContext'
}

navBarButtonFontFamily#

Button font family

topBar: {
rightButtons: [
{
fontFamily: 'Helvetica'
}
]
}

iOS only#

navBarHideOnScroll#

Hide TopBar when list is scrolled

topBar: {
hideOnScroll: true
}

navBarTranslucent#

Translucent TopBar, Setting drawBehind: true is required for this property to work as expected.

topBar: {
drawBehind: true,
background: {
translucent: true
}
}

navBarNoBorder#

Remove TopBar border (hair line)

topBar: {
noBorder: true
}

navBarBlur#

Blur the area behind the TopBar, Setting drawBehind: true and topBar background transparent: true is required for this property to work as expected.

topBar: {
drawBehind: true,
background: {
blur: true,
transparent: true
}
}

rootBackgroundImageName#

  • iOS: name of image in Images.xcassets
  • Android: name of drawable
{
rootBackgroundImage: require('rootBackground.png')
}

screenBackgroundImageName#

name of image in Images.xcassets

{
backgroundImage: require('background.png')
}

statusBarHideWithNavBar#

Hide the StatusBar if the TopBar is also hidden

statusBar: {
hideWithTopBar: true
}

statusBarBlur#

Blur the area behind the StatusBar

statusBar: {
blur: true
}

statusBarAnimate#

Animate between style changes of the StatusBar

statusBar: {
animate: true
}

disabledBackGesture#

Disable the back (swipe) gesture used to pop screens

{
popGesture: false
}

largeTitle#

Use iOS 11 large title

topBar: {
largeTitle: {
visible: true,
fontSize: 30,
color: 'red',
fontFamily: 'Helvetica'
}
}

Android Options#

topBarElevationShadowEnabled#

TopBar elevation in dp. Set this value to 0 to disable the TopBar's shadow.

topBar: {
elevation: 0
}

navBarTitleTextCentered#

Title alignment

topBar: {
title: {
alignment: 'center'|'fill'
}
}

statusBarColor#

StatusBar color

statusBar: {
backgroundColor: 'red'
}

navigationBarColor#

NavigationBar color

navigationBar: {
backgroundColor: 'red'
}

drawUnderStatusBar#

Draw content behind the StatusBar

statusBar: {
drawBehind: true
}

navBarHeight#

TopBar height in dp

topBar: {
height: 70
}

navBarTopPadding#

Content top margin

layout: {
topMargin: 26
}

topTabsHeight#

TopTabs height

topTabs: {
height: 70
}

topBarBorderColor#

TopBar border color

topBar: {
borderColor: 'red'
}

topBarBorderWidth#

TopBar border height

topBar: {
borderHeight: 1.3
}

Unsupported options#

  • disabledSimultaneousGesture
  • statusBarTextColorSchemeSingleScreen
  • navBarButtonFontWeight
  • topBarShadowColor
  • topBarShadowOpacity
  • topBarShadowOffset
  • topBarShadowRadius
  • preferredContentSize
  • navBarSubTitleTextCentered
  • collapsingToolBarImage
  • collapsingToolBarCollapsedColor
  • navBarTextFontBold
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-modal/index.html b/7.32.1/api/options-modal/index.html index fac140c814..3d8add2678 100644 --- a/7.32.1/api/options-modal/index.html +++ b/7.32.1/api/options-modal/index.html @@ -7,27 +7,27 @@ Modal Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Modal Options

const options = {
swipeToDismiss
};

swipeToDismiss#

Control wether this modal should be dismiss using swipe gesture when the modalPresentationStyle is pageSheet

TypeRequiredPlatformDefault
booleanNoBothtrue
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-navigationBar/index.html b/7.32.1/api/options-navigationBar/index.html index 8f733ec18c..95b172fcfc 100644 --- a/7.32.1/api/options-navigationBar/index.html +++ b/7.32.1/api/options-navigationBar/index.html @@ -7,27 +7,27 @@ Navigation Bar Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Navigation Bar Options

The Navigation Bar is the area at the bottom of the screen containing Android's three navigation buttons: Back, Home and Recents.

An example of a dark navigation bar:



const options = {
navigationBar: {}
};

visible#

Set the navigation bar visibility.

TypeRequiredPlatform
booleanNoAndroid

backgroundColor#

Set the navigation bar color. When a light background color is used, the color of the navigation bar icons will adapt to a dark color.

TypeRequiredPlatformDefault
ColorNoAndroid'black'
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-overlay/index.html b/7.32.1/api/options-overlay/index.html index 2e6e86a43b..3fb1d8c6e8 100644 --- a/7.32.1/api/options-overlay/index.html +++ b/7.32.1/api/options-overlay/index.html @@ -7,28 +7,28 @@ Overlay | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Overlay

Controls overlay options

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.

TypeRequiredPlatform
booleanNoBoth

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.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-preview/index.html b/7.32.1/api/options-preview/index.html index 2cd3ee3fa4..4d103212ee 100644 --- a/7.32.1/api/options-preview/index.html +++ b/7.32.1/api/options-preview/index.html @@ -7,27 +7,27 @@ Preview (iOS) | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Preview (iOS)

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-root/index.html b/7.32.1/api/options-root/index.html index 5fd0b1afb4..7250ecc06e 100644 --- a/7.32.1/api/options-root/index.html +++ b/7.32.1/api/options-root/index.html @@ -7,27 +7,27 @@ The options object | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

The options object

const options = {
bottomTab,
bottomTabs,
topBar,
layout,
sideMenu,
overlay,
modal,
preview,
navigationBar
};

bottomTab#

Controls the bottom tab icon, font, color, and more.

TypeRequiredPlatform
BottomTabOptionsNoBoth

bottomTabs#

Controls the bottom tabs container.

TypeRequiredPlatform
BottomTabsOptionsNoBoth

topBar#

Controls the Stack top bar styling.

TypeRequiredPlatform
TopBarOptionsNo

statusBar#

Controls the system status bar styling.

TypeRequiredPlatform
StatusBarOptionsNoBoth

layout#

TypeRequiredPlatform
LayoutOptionsNoBoth

sideMenu#

TypeRequiredPlatform
SideMenuOptionsNoBoth

overlay#

TypeRequiredPlatform
OverlayOptionsNoBoth

animations#

TypeRequiredPlatform
AnimationsOptionsNoBoth

modal#

TypeRequiredPlatform
ModalOptionsNoBoth

preview#

TypeRequiredPlatform
PreviewOptionsNoiOS

splitView#

TypeRequiredPlatform
SplitViewOptionsNoiOS

fab#

TypeRequiredPlatform
FabNoAndroid

modalPresentationStyle#

Configure the presentation style of the modal.

TypeRequiredPlatform
enum('formSheet', 'pageSheet', 'fullScreen', 'overFullScreen', 'overCurrentContext', 'popOver', 'none')NoBoth

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.

iOSAndroid
  • iOS 12 and below - fullScreen
  • iOS 13 and above - pageSheet
fullScreen

modalTransitionStyle#

Configure the transition style of the modal.

TypeRequiredPlatform
enum('coverVertical', 'crossDissolve', 'flipHorizontal', 'partialCurl')NoBoth

popGesture#

Enable or disable swipe back to pop gesture.

TypeRequiredPlatform
booleanNoiOS

backgroundImage#

Background image of the screen.

TypeRequiredPlatform
ImageNoiOS

rootBackgroundImage#

Background image for the Navigation View.

TypeRequiredPlatform
ImageNoAndroid

blurOnUnmount#

Enable or disable automaticall blur of the focused input, dismissing keyboard on unmount.

TypeRequiredPlatformDefault
booleanNoAndroidfalse

navigationBar#

Enable or disable automaticall blur of the focused input, dismissing keyboard on unmount.

TypeRequiredPlatform
booleanNoAndroid
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-scrollEdgeAppearance/index.html b/7.32.1/api/options-scrollEdgeAppearance/index.html index 368d8b2966..161f2c06ef 100644 --- a/7.32.1/api/options-scrollEdgeAppearance/index.html +++ b/7.32.1/api/options-scrollEdgeAppearance/index.html @@ -7,28 +7,28 @@ Scroll Edge Appearance Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Scroll Edge Appearance Options

Controls the top bar background styling.

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.

TypeRequiredPlatform
booleanNoiOS

color#

Set the background color.

TypeRequiredPlatform
ColorNoiOS

translucent#

Allows the Scroll Edge Appearance to be translucent (blurred).

TypeRequiredPlatform
booleanNoiOS

borderColor#

Change the topBar border color.

TypeRequiredPlatform
ColorNoiOS

noBorder#

Disables border at the bottom of the TopBar.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-sideMenu/index.html b/7.32.1/api/options-sideMenu/index.html index f375906589..fb7eb879ef 100644 --- a/7.32.1/api/options-sideMenu/index.html +++ b/7.32.1/api/options-sideMenu/index.html @@ -7,27 +7,27 @@ Side Menu Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Side Menu Options

const options = {
sideMenu: {
left: {},
right: {},
openGestureMode: 'entireScreen',
},
};

left#

Configure the left side menu.

TypeRequiredPlatform
SideMenuSideNoBoth

right#

Configure the right side menu.

TypeRequiredPlatform
SideMenuSideNoBoth

openGestureMode#

Configure how a user is allowed to open a drawer using gestures.

TypeRequiredPlatformDefault
enum('entireScreen', 'bezel')NoiOS'bezel'
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-sideMenuSide/index.html b/7.32.1/api/options-sideMenuSide/index.html index 6d00a5ffa9..a78b6aad0c 100644 --- a/7.32.1/api/options-sideMenuSide/index.html +++ b/7.32.1/api/options-sideMenuSide/index.html @@ -7,27 +7,27 @@ Side Menu Side Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Side Menu Side Options

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

visible#

Show or hide the side menu.

TypeRequiredPlatform
booleanNoBoth

enabled#

Enable or disable the side menu.

TypeRequiredPlatform
booleanNoBoth

width#

Set the width of the side menu.

TypeRequiredPlatform
numberNoBoth

height#

Set the height of the side menu.

TypeRequiredPlatform
numberNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-splitView/index.html b/7.32.1/api/options-splitView/index.html index 05eed896df..90668cea68 100644 --- a/7.32.1/api/options-splitView/index.html +++ b/7.32.1/api/options-splitView/index.html @@ -7,29 +7,29 @@ SplitView Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

SplitView Options

displayMode#

Master view display mode.

TypeRequiredDefaultPlatform
enum('auto', 'visible', 'hidden', 'overlay')No'auto'iOS

primaryEdge#

Master view side. Leading is left. Trailing is right.

TypeRequiredDefaultPlatform
enum('leading', 'trailing')No'leading'iOS

minWidth#

Set the minimum width of master view.

TypeRequiredPlatform
numberNoiOS

maxWidth#

Set the maximum width of master view.

TypeRequiredPlatform
numberNoiOS

primaryBackgroundStyle#

Set background style of sidebar. Currently works for Mac Catalyst apps only. See: Optimizing Your iPad App for Mac

TypeRequiredDefaultPlatform
enum('none', 'sidebar')No'none'iOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-stack/index.html b/7.32.1/api/options-stack/index.html index 73044e6435..e5216ee706 100644 --- a/7.32.1/api/options-stack/index.html +++ b/7.32.1/api/options-stack/index.html @@ -7,27 +7,27 @@ Top Bar Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Top Bar Options

TopBar#

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

visible#

Determines if TopBar is visible or not.

TypeRequiredPlatform
booleanNoBoth

animate#

Determines if changing the TopBar visibility will be animated or not.

TypeRequiredPlatform
booleanNoBoth

animateLeftButtons#

Determines if changing the left buttons will be animated.

TypeRequiredPlatformDefault
booleanNoBothFalse

animateRightButtons#

Determines if changing the right buttons will be animated.

TypeRequiredPlatformDefault
booleanNoBothFalse

title#

Controls the top bar title.

TypeRequiredPlatform
TitleNoBoth

subtitle#

Controls the top bar subtitle.

TypeRequiredPlatform
SubitleNoBoth

backButton#

Controls the top bar back button.

TypeRequiredPlatform
BackButtonNoBoth

background#

Controls the top bar background.

TypeRequiredPlatform
BackgroundNoBoth

scrollEdgeAppearance#

Controls the appearance settings when the scrollable content reaches the matching edge of the navigation bar.

TypeRequiredPlatform
Scroll Edge BackgroundNoiOS 13+

barStyle#

Control the TopBar blur style. Requires translucent: true.

TypeRequiredPlatform
enum('default','black')NoiOS

height#

Set TopBar height, in dp units, on Android only. For iOS use largeTitle see Options.

TypeRequiredPlatform
numberNoAndroid

borderColor#

Change the topBar border color.

TypeRequiredPlatform
ColorNoBoth

borderHeight#

Set the border height of the navbar in dp.

TypeRequiredPlatform
numberNoAndroid

drawBehind#

Controls if child should be drawn behind the TopBar or below it.

TypeRequiredPlatform
booleanNoBoth

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.

TypeRequiredPlatform
numberNoAndroid

hideOnScroll#

Hide the TopBar when a scrolling layout is scrolled.

TypeRequiredPlatform
booleanNoBoth
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

hideNavBarOnFocusSearchBar#

Indicates whether the navigation bar should be hidden when searching. True by default.

TypeRequiredPlatform
booleanNoiOS 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 section for more details.

Android support

Android currently only supports a single left button and does not support custom left Buttons.

TypeRequiredPlatform
[Button]NoBoth

leftButtonColor#

Default color for left buttons.

TypeRequiredPlatform
ColorNoBoth

noBorder#

Disables border at the bottom of the TopBar.

important

For disabling the border completely, you also need to disable scrollEdgeAppearance.noBorder

TypeRequiredPlatform
booleanNoiOS

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 section for more details.

TypeRequiredPlatform
[Button]NoBoth

rightButtonColor#

Default color for the right button.

TypeRequiredPlatform
ColorNoBoth

searchBar#

Controls the SearchBar.

TypeRequiredPlatform
OptionsSearchBarNoiOS 11+
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

searchBarHiddenWhenScrolling#

Hides the UISearchBar when scrolling.

TypeRequiredPlatform
booleanNoiOS 11+
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

searchBarPlaceholder#

The placeholder value in the UISearchBar.

TypeRequiredPlatform
stringNoiOS 11+
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

searchBarBackgroundColor#

The background color of the UISearchBar's TextField.

TypeRequiredPlatform
ColorNoiOS 13+
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

searchBarTintColor#

The tint color of the UISearchBar. Affects text selection color, as well as "Cancel" button color.

TypeRequiredPlatform
ColorNoiOS 13+
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-statusBar/index.html b/7.32.1/api/options-statusBar/index.html index 3e0f83e550..38a3d59638 100644 --- a/7.32.1/api/options-statusBar/index.html +++ b/7.32.1/api/options-statusBar/index.html @@ -7,27 +7,27 @@ Status Bar Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Status Bar Options

const options = {
statusBar: {},
};

visible#

Set the status bar visibility.

TypeRequiredPlatform
booleanNoBoth

style#

Set the text color of the status bar.

TypeRequiredPlatformDefault
enum('light', 'dark')NoBoth'light'

backgroundColor#

Set the background color of the status bar.

TypeRequiredPlatform
ColorNoAndroid

drawBehind#

Draw screen behind the status bar.

TypeRequiredPlatform
booleanNoAndroid

translucent#

Set the status bar to be translucent.

TypeRequiredPlatform
booleanNoAndroid

animate#

Animate StatusBar style changes.

TypeRequiredPlatform
booleanNoiOS

blur#

Blur content beneath the StatusBar.

TypeRequiredPlatform
booleanNoiOS

hideWithTopBar#

Automatically hide the StatusBar when the TopBar hides.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-subtitle/index.html b/7.32.1/api/options-subtitle/index.html index 07a3230c45..5f6d0bbb56 100644 --- a/7.32.1/api/options-subtitle/index.html +++ b/7.32.1/api/options-subtitle/index.html @@ -7,27 +7,27 @@ Subtitle Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Subtitle Options

Controls the top bar subtitle.

const options = {
topBar: {
subtitle: {},
},
};

text#

Subtitle text.

TypeRequiredPlatform
stringNoBoth

fontSize#

Subtitle fontSize. On Android this value is sp.

TypeRequiredPlatform
numberNoBoth

color#

Subtitle color.

TypeRequiredPlatform
ColorNoBoth

fontFamily#

Subtitle FontFamily.

TypeRequiredPlatform
FontFamilyNoBoth

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoBoth

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoBoth

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.

TypeRequiredPlatform
enum('center', 'fill')NoBoth

testID#

Used to interact with the TopBar in e2e tests.

TypeRequiredPlatform
stringNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/options-title/index.html b/7.32.1/api/options-title/index.html index f6c9184576..a566ecb2c0 100644 --- a/7.32.1/api/options-title/index.html +++ b/7.32.1/api/options-title/index.html @@ -7,27 +7,27 @@ Title Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Title Options

Controls the top bar title.

const options = {
topBar: {
title: {},
},
};

text#

Set the title for the TopBar.

TypeRequiredPlatform
stringNoBoth

fontSize#

Set the title font size. On Android this value is in sp.

TypeRequiredPlatform
numberNoBoth

color#

Set the title color.

TypeRequiredPlatform
ColorNoBoth

fontFamily#

Set the title font family.

TypeRequiredPlatform
FontFamilyNoBoth

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoBoth

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoBoth

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.

defaults

center is the default option on iOS while fill is the default for Android.

TypeRequiredPlatform
enum('center','fill')NoBoth

component#

Set a react component as the title. If this option is specified then text is ignored.

TypeRequiredPlatform
ComponentNoBoth

topMargin#

Change to TopBar's top margin.

TypeRequiredPlatform
numberNoAndroid

visible#

Determines whether the TopBar is visible or not.

TypeRequiredPlatform
booleanNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/overlay/index.html b/7.32.1/api/overlay/index.html index 4b7c8909e8..1eb8f8207d 100644 --- a/7.32.1/api/overlay/index.html +++ b/7.32.1/api/overlay/index.html @@ -7,27 +7,27 @@ Overlay | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Overlay

showOverlay()#

Shows a component as an overlay.

NameRequiredTypeDescription
layoutYesLayoutAny type of layout. Typically, Component layout is used in Overlays but it's possible to load any other layout (BottomTabs, Stack, SideMenu, Component)
Navigation.showOverlay({
component: {
name: 'example.Overlay',
options: {
layout: {
componentBackgroundColor: 'transparent',
},
overlay: {
interceptTouchOutside: true
}
}
}
});

dismissOverlay()#

Dismisses an overlay matching the given overlay componentId.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe component id presented in Overlay
Navigation.dismissOverlay(this.props.componentId);

dismissAllOverlays()#

Dismisses all overlays.

Navigation.dismissAllOverlays();
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/root/index.html b/7.32.1/api/root/index.html index aa607af156..9dee8c5871 100644 --- a/7.32.1/api/root/index.html +++ b/7.32.1/api/root/index.html @@ -7,27 +7,27 @@ Root | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Root

setRoot()#

Used to set the UI of the application. Read more about the root hierarchy level in the docs section.

Parameters#

NameRequiredTypeDescription
layoutYesLayoutAny type of layout. BottomTabs, Stack, SideMenu, Component

Example#

Navigation.setRoot({
root: {
stack: {
children: [{
component: {
name: 'example.FirstTabScreen',
passProps: {
text: 'This is tab 1'
}
}
}],
options: {
bottomTab: {
text: 'Tab 1',
icon: require('../images/one.png'),
testID: 'FIRST_TAB_BAR_BUTTON'
}
}
}
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/sideMenu-api/index.html b/7.32.1/api/sideMenu-api/index.html index adcdde6d7e..e6c5919c9a 100644 --- a/7.32.1/api/sideMenu-api/index.html +++ b/7.32.1/api/sideMenu-api/index.html @@ -7,27 +7,27 @@ Side Menu | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Side Menu

This layout allows to implement sidemenus, which can be opened by swiping from one side towards the other side.

{
left: {
component: {}
},
center: {
stack: {
options: {},
children: [{
component: {}
}]
}
},
right: {
component: {}
}
}

center: Layout#

Center component, contains the main application.

left?: Layout#

Contain the left component layout.

right?: Layout#

Contain the right component layout.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/stack/index.html b/7.32.1/api/stack/index.html index ae3b0289e3..bd45d24c72 100644 --- a/7.32.1/api/stack/index.html +++ b/7.32.1/api/stack/index.html @@ -7,27 +7,27 @@ Stack | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Stack

push()#

Push a screen into the stack and update the display according to the screen options.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe componentId of a screen pushed into the stack, or the id of the stack.
layoutNoLayoutThe layout being pushed into the stack. Any type of layout (except stack) can be pushed into stacks. Typically, Component layout is pushed into stacks but it's possible to push SideMenu or BottomTabs as well.

Example#

The most common use case - push a single React component.
Navigation.push(this.props.componentId, {
component: {
name: 'example.PushedScreen'
}
});

pop()#

Pop the top screen from the stack.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe componentId of a screen pushed into the stack, or the stack id.
mergeOptionsNoOptionsOptions to be merged before popping the screen (optional).
Navigation.pop(this.props.componentId);

popToRoot()#

Pop all screens pushed into the stack.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe componentId of a screen pushed into the stack, or the stack id.
mergeOptionsNoOptionsOptions to be merged before popping the screen (optional).
Navigation.popToRoot(this.props.componentId);

popTo()#

Pop the stack to a given component.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe destination componentId
mergeOptionsNoOptionsOptions to be merged before popping the screen (optional).
Navigation.popTo(componentId);

setStackRoot()#

Reset the stack to the given layout (accepts multiple children).

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe componentId of a screen pushed into the stack, or the stack id.
layoutYesLayout or Layout[]A single Component or array of components.

Example#

Navigation.setStackRoot(this.props.componentId, {
component: {
name: 'example.NewRootScreen'
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/api/topBar-searchBar/index.html b/7.32.1/api/topBar-searchBar/index.html index d21ebf8f09..a520dc59a8 100644 --- a/7.32.1/api/topBar-searchBar/index.html +++ b/7.32.1/api/topBar-searchBar/index.html @@ -7,27 +7,27 @@ SearchBar | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

SearchBar

visible#

TypeRequiredPlatformDescription
booleanNoiOSDetermines if SearchBar is visible or not

focus#

TypeRequiredPlatformDescription
booleanNoiOSAuto focuses search bar

hideOnScroll#

TypeRequiredPlatformDescription
booleanNoiOSHides the UISearchBar when scrolling.

hideTopBarOnFocus#

TypeRequiredPlatformDescription
booleanNoiOSIndicates whether the navigation bar should be hidden when searching. True by default.

obscuresBackgroundDuringPresentation#

TypeRequiredPlatformDescription
booleanNoiOSA Boolean indicating whether the underlying content is obscured during a search.

backgroundColor#

TypeRequiredPlatformDescription
ColorNoiOSThe background color of the UISearchBar's TextField.

tintColor#

TypeRequiredPlatformDescription
ColorNoiOSThe tint color of the UISearchBar. Affects text selection color, as well as "Cancel" button color.

searchBarPlaceholder#

TypeRequiredPlatformDescription
stringNoiOSThe placeholder value in the UISearchBar.

cancelText#

TypeRequiredPlatformDescription
stringNoiOSThe text value of "Cancel" button in the UISearchBar.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/advanced-navigation/index.html b/7.32.1/docs/advanced-navigation/index.html index 980c78d3ae..9da14eb688 100644 --- a/7.32.1/docs/advanced-navigation/index.html +++ b/7.32.1/docs/advanced-navigation/index.html @@ -7,15 +7,15 @@ Advanced navigation | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -36,14 +36,14 @@
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.

Navigation.events().registerAppLaunchedListener(async () => {
Navigation.setRoot(isLoggedIn() ? mainRoot : loginRoot);
});
function isLoggedIn() {
// TODO: your business logic goes here
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/app-launch/index.html b/7.32.1/docs/app-launch/index.html index 900797784f..ee2147026b 100644 --- a/7.32.1/docs/app-launch/index.html +++ b/7.32.1/docs/app-launch/index.html @@ -7,27 +7,27 @@ Launching the app | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

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.

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
  2. 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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/basic-navigation/index.html b/7.32.1/docs/basic-navigation/index.html index d0a6eb10e9..f075c16566 100644 --- a/7.32.1/docs/basic-navigation/index.html +++ b/7.32.1/docs/basic-navigation/index.html @@ -7,15 +7,15 @@ Basic navigation | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -35,14 +35,14 @@
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.

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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/before-you-start/index.html b/7.32.1/docs/before-you-start/index.html index f452147a1d..800de94ec6 100644 --- a/7.32.1/docs/before-you-start/index.html +++ b/7.32.1/docs/before-you-start/index.html @@ -7,27 +7,27 @@ Before you start | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Before you start

React Native Navigation is a module, dependent on and intended to be used alongside 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 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 the library. If you're just looking around, we suggest checking out basic navigation first.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/bottomTabs/index.html b/7.32.1/docs/bottomTabs/index.html index bd13e2d805..dadc619bb6 100644 --- a/7.32.1/docs/bottomTabs/index.html +++ b/7.32.1/docs/bottomTabs/index.html @@ -7,28 +7,28 @@ Bottom tabs | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Bottom tabs

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

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.

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.

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

Visibility can also be changed when pushing screens.

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:

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.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/community-libraries/index.html b/7.32.1/docs/community-libraries/index.html index 3aea49e568..367f301ec7 100644 --- a/7.32.1/docs/community-libraries/index.html +++ b/7.32.1/docs/community-libraries/index.html @@ -7,15 +7,15 @@ Community libraries | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -25,14 +25,14 @@ Drawer API built on top of React Native Navigation for iOS and Android.

React Native Navigation Search Bar : React Native Elements search bar with collapsible header built for React Native Navigation.

React Native Navigation Bottom Sheet Extension : A performant customizable bottom sheet component built on top of React Native Navigation.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/customBackNavigation/index.html b/7.32.1/docs/customBackNavigation/index.html index 370c232f50..3aee555d1b 100644 --- a/7.32.1/docs/customBackNavigation/index.html +++ b/7.32.1/docs/customBackNavigation/index.html @@ -7,27 +7,27 @@ Custom back navigation | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Custom back navigation

Back navigation lets users move backwards through the screens they previously visited.

The most common form of back navigation is done through the back button. The stack layout contains a back button by default, also known as the software back button.

RNN handles the back navigation for you, but there are use cases where you might need to override the default behavior of the back navigation. For example, when editing a blog post, you might want to prompt the user about unsaved changes instead of navigating to the previous destination.

Additional back navigation methods#

  • Android devices include a hardware back button, located at the bottom of the device.
  • Android 11 introduced an opt-in gesture navigation system that hides the NavigationBar. When enabled, the hardware back button is replaced with a back gesture performed with a horizontal swipe across the screen.
  • The stack layout on iOS supports a back gesture by default. Like the android back gesture, it's performed by swiping across the screen.

Handling the software back button#

The software back button is located in the TopBar and is responsible for popping the top most screen in the stack. It's configured in the TopBar options.

To handle the software back button, we must first disable the default behavior which is to pop the top most screen:

options: {
topBar: {
backButton: {
popStackOnPress: false;
}
}
}

Now, when the software back button is pressed, instead of popping the screen RNN will emit a navigationButtonPress event which can be handled in JS.

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

Handling the hardware back button#

Unlike the software back button which affects the stack it's part of, the hardware back button isn't bound to a specific layout. Instead, The hardware back button affects the top most layout that responds to back navigation.

When a stack containing more than one child is focused, pressing the hardware back button will pop the stack. When a modal is displayed and the current stack has exactly one child, pressing the hardware back button will dismiss the modal.

To handle the hardware back button, we must first disable the default behavior for the desired action (pop stack or dismiss modal) through options:

options: {
hardwareBackButton: {
dismissModalOnPress: false,
popStackOnPress: false,
}
}

Once the default behaviors are disabled, RNN will emit a navigationButtonPress with the RNN.hardwareBackButton id.

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

The hardware back button is available on Android only.

Note 2

When gesture navigation is enabled on Android, the back gesture is handled as a hardware back press.

Disabling the iOS pop gesture#

The iOS stack layout can be popped with a swipe gesture. If desired, the swipe gesture can be disabled via options:

options: {
popGesture: false;
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/externalComponent/index.html b/7.32.1/docs/externalComponent/index.html index a6570f357d..aea6641cc9 100644 --- a/7.32.1/docs/externalComponent/index.html +++ b/7.32.1/docs/externalComponent/index.html @@ -7,15 +7,15 @@ External Component | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -27,14 +27,14 @@
@Override
public View asView() {
return content;
}
}

Registering the component#

public class MainApplication extends NavigationApplication {
@Override
public void onCreate() {
super.onCreate();
registerExternalComponent("MyExternalComponent", new FragmentCreator());
}
}

iOS#

ViewController registration#

[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:

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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/functionalComponents/index.html b/7.32.1/docs/functionalComponents/index.html index 7b4e1eab4f..9fad18bbcf 100644 --- a/7.32.1/docs/functionalComponents/index.html +++ b/7.32.1/docs/functionalComponents/index.html @@ -7,15 +7,15 @@ Using functional components as screens | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -26,14 +26,14 @@
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 (
<View>
<Text>Screen Component</Text>
</View>
)
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/installing/index.html b/7.32.1/docs/installing/index.html index 960e43a788..15eb1d4e13 100644 --- a/7.32.1/docs/installing/index.html +++ b/7.32.1/docs/installing/index.html @@ -7,15 +7,15 @@ Installation | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -36,14 +36,14 @@
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}"
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/meta-contributing/index.html b/7.32.1/docs/meta-contributing/index.html index ba073e8989..f17ad0a5ea 100644 --- a/7.32.1/docs/meta-contributing/index.html +++ b/7.32.1/docs/meta-contributing/index.html @@ -7,28 +7,28 @@ Contributing | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

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 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 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.
  1. 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.

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:

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 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". 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 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.

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 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 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 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 with Prettier 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#

FolderDescription
libThe project itself composed of:
lib/androidandroid sources and unit tests
lib/iosiOS sources and unit tests
lib/srcTypeScript sources and unit tests
lib/distcompiled javascript sources and unit tests
lib/dist/index.jsthe entry point for import Navigation from 'react-native-navigation'
e2edetox e2e tests on both Android and iOS
playgroundThe 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 <root>/lib for faster local development (no need to npm install locally).
integrationmisc javascript integration tests, proving integration with other libraries like redux
scriptsall scripts

Scripts#

CommandDescription
npm installinstalls dependencies
npm run buildcompiles TypeScript sources ./lib/src into javascript ./lib/dist
npm run cleancleans all build directories, stops packager, fixes flakiness by removing watchman cache, etc.
npm run startstarts the react-native packager for local debugging
npm run xcodefor convenience, opens xcode in this project
npm run install-androidbuilds playground debug/release version and installs on running android devices/emulators.
Options: -- --release
npm run uninstall-androiduninstalls playground from running android devices/simulators
npm run test-jsruns javascript tests and coverage report
npm run test-unit-iosruns ios unit tests in debug/release
Options: -- --release
npm run test-unit-androidruns android unit tests in debug/release
Options: -- --release
npm run test-e2e-iosruns the ios e2e tests using detox in debug/release
Options: -- --release
npm run test-e2e-androidruns the android e2e tests using detox in debug/release
Options: -- --release
npm run test-allruns all tests in parallel
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/modal/index.html b/7.32.1/docs/modal/index.html index 8b082bf69b..bbf518c04f 100644 --- a/7.32.1/docs/modal/index.html +++ b/7.32.1/docs/modal/index.html @@ -7,15 +7,15 @@ Modal | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -28,14 +28,14 @@ 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:

{
hardwareBackButton: {
dismissModalOnPress: false;
}
}

As a result, pressing the hardware back button will not dismiss the modal and will dispatch navigationButtonPress 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 determines the look and feel of a screen displayed as modal.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/overlay/index.html b/7.32.1/docs/overlay/index.html index f0ff056765..dfc844cf0d 100644 --- a/7.32.1/docs/overlay/index.html +++ b/7.32.1/docs/overlay/index.html @@ -7,15 +7,15 @@ Overlay | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -30,14 +30,14 @@
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;
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/passing-data-to-components/index.html b/7.32.1/docs/passing-data-to-components/index.html index beccc4fb0b..12ef563011 100644 --- a/7.32.1/docs/passing-data-to-components/index.html +++ b/7.32.1/docs/passing-data-to-components/index.html @@ -7,27 +7,27 @@ Passing data to components | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Passing data to components

Initial props#

React components use props to receive data when they are created. When displaying the 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:

Navigation.push(this.props.componentId, {
component: {
name: 'UserProfile',
id: 'PROFILE_SCREEN_ID'
passProps: {
name: 'John Doe',
status: 'online'
}
}
});
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, lets see how to use props passed in the push command to set the TopBar title.

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() command. Updating props triggers the component lifecycle methods related to updating.

Notice that we're using the component id in order to update props of this specific instance of the component.

Navigation.updateProps('PROFILE_SCREEN_ID', {
status: 'offline'
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/playground-app/index.html b/7.32.1/docs/playground-app/index.html index ffb20db8c0..4c4b6ba30d 100644 --- a/7.32.1/docs/playground-app/index.html +++ b/7.32.1/docs/playground-app/index.html @@ -7,28 +7,28 @@ Playground app | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

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). Before you start changing things, make sure everything works.
    - To easily run all tests in parallel `npm run test-all`
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/root/index.html b/7.32.1/docs/root/index.html index 5e19174dc2..0a7ef85b3e 100644 --- a/7.32.1/docs/root/index.html +++ b/7.32.1/docs/root/index.html @@ -7,28 +7,28 @@ Root | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Root

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.

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.

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:
Navigation.setRoot({
root: {
stack: {
children: [
{
component: {
name: 'LOGIN_SCREEN'
}
}
]
}
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/screen-lifecycle/index.html b/7.32.1/docs/screen-lifecycle/index.html index 8c9cac46ad..115716af0b 100644 --- a/7.32.1/docs/screen-lifecycle/index.html +++ b/7.32.1/docs/screen-lifecycle/index.html @@ -7,27 +7,27 @@ Screen Lifecycle | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

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, 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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/showcases/index.html b/7.32.1/docs/showcases/index.html index 486207e0b4..1c296cbdc3 100644 --- a/7.32.1/docs/showcases/index.html +++ b/7.32.1/docs/showcases/index.html @@ -7,15 +7,15 @@ Showcases | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -23,14 +23,14 @@
# 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
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/sideMenu-disable/index.html b/7.32.1/docs/sideMenu-disable/index.html index 2e246c837c..11d3a5ed3e 100644 --- a/7.32.1/docs/sideMenu-disable/index.html +++ b/7.32.1/docs/sideMenu-disable/index.html @@ -7,15 +7,15 @@ Disable Open and Close gesture | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -24,14 +24,14 @@
constructor(props) {
super(props);
Navigation.events().bindComponent(this);
}
render() {
return (
<View>
<Text>Click the hamburger icon to open the side menu</Text>
</View>
);
}
navigationButtonPressed({ buttonId }) {
if (buttonId === 'sideMenu') {
Navigation.mergeOptions(this, {
sideMenu: {
left: {
visible: true
}
}
});
}
}
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/sideMenu/index.html b/7.32.1/docs/sideMenu/index.html index 95cf384090..b1a28ee3ce 100644 --- a/7.32.1/docs/sideMenu/index.html +++ b/7.32.1/docs/sideMenu/index.html @@ -7,15 +7,15 @@ Side Menu | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -24,14 +24,14 @@
constructor(props) {
super(props);
Navigation.events().bindComponent(this);
}
render() {
return (
<View>
<Text>Click the hamburger icon to open the side menu</Text>
</View>
);
}
navigationButtonPressed({ buttonId }) {
if (buttonId === 'sideMenu') {
Navigation.mergeOptions(this.props.componentId, {
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:

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).

Navigation.push('CenterStack', {
component: {
name: Screens.Pushed,
options: {
sideMenu: {
left: {
visible: false
}
}
}
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/stack-backButton/index.html b/7.32.1/docs/stack-backButton/index.html index 1e4ff40f8e..18b3eea33a 100644 --- a/7.32.1/docs/stack-backButton/index.html +++ b/7.32.1/docs/stack-backButton/index.html @@ -7,27 +7,27 @@ The Back button | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

The 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.

backButton: {
color: 'red',
icon: require('../../img/customChevron.png')
}

Controling visibility#

The back buttons visbility can be controlled with the visible property.

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.

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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/stack-backNavigation/index.html b/7.32.1/docs/stack-backNavigation/index.html index 48e3a05cff..78cf176d18 100644 --- a/7.32.1/docs/stack-backNavigation/index.html +++ b/7.32.1/docs/stack-backNavigation/index.html @@ -7,27 +7,27 @@ Back Navigation | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Back Navigation

Disabling back navigation#

Handling back navigation#

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/stack-buttons/index.html b/7.32.1/docs/stack-buttons/index.html index e33513088d..8eb4874541 100644 --- a/7.32.1/docs/stack-buttons/index.html +++ b/7.32.1/docs/stack-buttons/index.html @@ -7,29 +7,29 @@ TopBar Buttons | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

TopBar Buttons

Buttons can be added to the right and left 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 with the relevant actions when the button is clicked.

On Android, use the 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:

Navigation.registerComponent('ButtonComponent', () => require('./ButtonComponent'));

Now you can create buttons which use the component registered with 'ButtonComponent' as thier custom view:

topBar: {
rightButtons: [
{
component: {
name: '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

// Declare the button and assign it a unique id
topBar: {
rightButtons: [
{
id: 'SomeUniqueId',
component: {
name: '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.

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.

Navigation.mergeOptions(this.props.componentId, {
topBar: {
rightButtons: [],
},
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/stack-programmatically/index.html b/7.32.1/docs/stack-programmatically/index.html index 55479551ee..07fd8b01d4 100644 --- a/7.32.1/docs/stack-programmatically/index.html +++ b/7.32.1/docs/stack-programmatically/index.html @@ -7,15 +7,15 @@ Interact programmatically with the Stack | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -23,14 +23,14 @@ 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.

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.

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'
}
});
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/stack/index.html b/7.32.1/docs/stack/index.html index e57960c089..6d8c4374be 100644 --- a/7.32.1/docs/stack/index.html +++ b/7.32.1/docs/stack/index.html @@ -7,15 +7,15 @@ Stack | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -26,14 +26,14 @@ 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.

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.

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',
},
});
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/style-animations/index.html b/7.32.1/docs/style-animations/index.html index b0f8bca56a..8954ec8df4 100644 --- a/7.32.1/docs/style-animations/index.html +++ b/7.32.1/docs/style-animations/index.html @@ -7,15 +7,15 @@ Animations | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -25,14 +25,14 @@ 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.

Deprecation warning

Consider using enter, exit animations instead.

options: {
animations: {
showModal: {
alpha: {
from: 0,
to: 1,
duration: 300
}
}
}
}
options: {
animations: {
showModal: {
enter :{
enabled:true,
alpha: {
from: 0,
to: 1,
duration: 300
}
},
exit :{
enabled:true,
alpha: {
from: 1,
to: 0,
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 and the Destination screen

Shared Element Transition

Four elements are animated in this example. Let's list the elements involved in the transition and note which properties are being animated.

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.

<Image
source={item.image}
nativeID={`image${item.id}`}
style={styles.image}
resizeMode={'contain'}
/>

Step 2 - set a nativeID prop to elements in the destination screen#

<Image source={this.props.image} nativeID={`image${this.props.id}Dest`} style={styles.image} />

Step 3 - Declare the shared element animation when pushing the screen#

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 types are supported:

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.

<Text nativeID="description" style={styles.description}>
{this.props.description}
</Text>

Step 2 - Declare the element animation when pushing the screen#

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

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 = (
<Navigation.TouchablePreview
touchableComponent={TouchableHighlight}
onPress={handlePress}
onPressIn={handlePress}
>
<Text>My button</Text>
</Navigation.TouchablePreview>
);

All options except for reactTag are optional. Actions trigger the same event as navigation button presses. To react when a preview is committed, listen to the previewCompleted event.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/style-constants/index.html b/7.32.1/docs/style-constants/index.html index 5d725902d1..a67b4774ea 100644 --- a/7.32.1/docs/style-constants/index.html +++ b/7.32.1/docs/style-constants/index.html @@ -7,27 +7,27 @@ Constants | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

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() or Navigation.constantsSync() 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. There are two methods for accessing constants:

  • Navigation.constants(), which is async and thus returns a promise
  • Navigation.constantsSync(), which returns the constants synchronously, blocking the main thread

Where possible, it is better to use the async method, since this will not block the main thread.

const { Navigation } = require('react-native-navigation');
const {
statusBarHeight,
topBarHeight,
bottomTabsHeight
} = await Navigation.constants();

But, if you need to access the constants synchronously (e.g. within the render() method of a React component), you can do so as follows:

const { Navigation } = require('react-native-navigation');
const {
statusBarHeight,
topBarHeight,
bottomTabsHeight
} = Navigation.constantsSync();
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/style-fonts/index.html b/7.32.1/docs/style-fonts/index.html index 7e0fa35735..46e1e05144 100644 --- a/7.32.1/docs/style-fonts/index.html +++ b/7.32.1/docs/style-fonts/index.html @@ -7,27 +7,27 @@ Changing fonts | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

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

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#

options: {
bottomTab: {
fontFamily: 'helvetica'
}
}

Button font#

options: {
rightButtons: [
{
id: 'SAVE_BUTTON',
text: 'Save',
fontFamily: 'helvetica'
}
],
leftButtons: [
{
id: 'CANCEL_BUTTON',
text: 'Cancel',
fontFamily: 'helvetica'
}
]
}

Title font#

options: {
topBar: {
title: {
fontFamily: 'helvetica'
}
}
}

Subtitle font#

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.

options: {
topBar: {
backButton: {
fontFamily: 'helvetica'
}
}
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/style-options/index.html b/7.32.1/docs/style-options/index.html index 511f987180..515d208619 100644 --- a/7.32.1/docs/style-options/index.html +++ b/7.32.1/docs/style-options/index.html @@ -7,15 +7,15 @@ Styling with options | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -32,14 +32,14 @@
class ExperimentScreen extends NavigationComponent {
static options(): Options {
const ExperimentsManager = require('./ExperimentsManager');
const food = ExperimentsManager.isActive('VeganExperiment') ? 'Tofu' : 'Hamburger';
return {
topBar: {
title: {
text: `Hello ${food}!`,
},
},
};
}
}

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.

import { Navigation } from 'react-native-navigation';
Navigation.mergeOptions(componentId, {
topBar: {
background: {
color: 'red',
},
},
});
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).

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.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/style-orientation/index.html b/7.32.1/docs/style-orientation/index.html index d53c08c480..41b347fb0a 100644 --- a/7.32.1/docs/style-orientation/index.html +++ b/7.32.1/docs/style-orientation/index.html @@ -7,27 +7,27 @@ Orientation | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

Orientation

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.

Navigation.setDefaultOptions({
layout: {
orientation: ['portrait'],
},
});

Changing orientation dynamically#

Changing orientation dynamically through Navigation.mergeOption() is supported only on Android.

Navigation.mergeOptions(this.props.componentId, {
layout: {
orientation: ['landscape'],
},
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/style-statusBar/index.html b/7.32.1/docs/style-statusBar/index.html index e5df551dd7..3116b621ed 100644 --- a/7.32.1/docs/style-statusBar/index.html +++ b/7.32.1/docs/style-statusBar/index.html @@ -7,27 +7,27 @@ StatusBar | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.32.1

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)

options: {
statusBar: {
backgroundColor: 'white',
style: 'dark'
}
}
Compatibility with StatusBar component

React native's StatusBar 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

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

How to 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.

options: {
statusBar: {
backgroundColor: null
}
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/style-theme/index.html b/7.32.1/docs/style-theme/index.html index 7d404f1366..0dc9526c91 100644 --- a/7.32.1/docs/style-theme/index.html +++ b/7.32.1/docs/style-theme/index.html @@ -7,15 +7,15 @@ Themes | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -32,14 +32,14 @@
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;
});

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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/third-party-mobx/index.html b/7.32.1/docs/third-party-mobx/index.html index defa43af2d..3c3a494c71 100644 --- a/7.32.1/docs/third-party-mobx/index.html +++ b/7.32.1/docs/third-party-mobx/index.html @@ -7,15 +7,15 @@ MobX | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -47,14 +47,14 @@
// 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.
});
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/third-party-react-context/index.html b/7.32.1/docs/third-party-react-context/index.html index 734260b186..e67171b441 100644 --- a/7.32.1/docs/third-party-react-context/index.html +++ b/7.32.1/docs/third-party-react-context/index.html @@ -7,15 +7,15 @@ React Context API | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -36,14 +36,14 @@
export const App = () => {
// Using useContext API
const { count, increment, decrement } = React.useContext(CounterContext);
return (
<View>
<Text>{`Clicked ${count} times!`}</Text>
<Button title="Increment" onPress={increment} />
<Button title="Decrement" onPress={decrement} />
</View>
);
};
// App.tsx
import React from 'react';
import { Button, Text, View } from 'react-native';
import { CounterContext } from './CounterContext';
export const App = () => {
// Using Context consumer
return (
<CounterContext.Consumer>
{({ count, increment, decrement }) => (
<View>
<Text>{`Clicked ${count} times!`}</Text>
<Button title="Increment" onPress={increment} />
<Button title="Decrement" onPress={decrement} />
</View>
)}
</CounterContext.Consumer>
);
};
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/third-party-react-native-vector-icons/index.html b/7.32.1/docs/third-party-react-native-vector-icons/index.html index 14e2044dfd..b06de1d0f9 100644 --- a/7.32.1/docs/third-party-react-native-vector-icons/index.html +++ b/7.32.1/docs/third-party-react-native-vector-icons/index.html @@ -7,15 +7,15 @@ react-native-vector-icons | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -35,14 +35,14 @@
function ExampleComponent({ }: Props) {
return (
<View>
<Text>An example component</Text>
</View>
)
}
ExampleComponent.options = () => {
return {
topBar: {
title: {
text: 'Example Component',
},
leftButtons: [{
icon: iconsMap.add,
color: '#888',
accessibilityLabel: 'Add',
}],
},
};
};
export default ExampleComponent;
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.32.1/docs/third-party-typescript/index.html b/7.32.1/docs/third-party-typescript/index.html index d23b14ac62..e86a5456a5 100644 --- a/7.32.1/docs/third-party-typescript/index.html +++ b/7.32.1/docs/third-party-typescript/index.html @@ -7,15 +7,15 @@ TypeScript | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -28,14 +28,14 @@
// Static options are also supported!
MyFunctionalComponent.options = {
topBar: {
title: {
text: 'Hello functional component',
},
},
};
export default MyFunctionalComponent;

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.

import { Navigation } from 'react-native-navigation';
interface Props {
name: string;
}
Navigation.push<Props>(componentId, {
component: {
name: 'MyComponent',
passProps: {
name: 'Bob',
// @ts-expect-error
color: 'red', // Compilation error! color isn't declared in Props
},
},
});

The following commands accept typed passProps:

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/component/index.html b/7.7.0/api/component/index.html index 3e09101662..9ae3fa57c9 100644 --- a/7.7.0/api/component/index.html +++ b/7.7.0/api/component/index.html @@ -7,28 +7,28 @@ Component | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Component

registerComponent#

Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component or React.PureComponent. It can also be a HOC to provide context (or a Redux store) or a functional component. Similar to React Native's AppRegistry.registerComponent.

Parameters#

NameRequiredTypeDescription
componentNameYesstringUnique component name - not to be confused with componentId
componentProviderYesFunctionAnonymous function that returns the React component to register, OR the component wrapped with Providers
concreteComponentProviderNoFunctionAnonymous function that returns the concrete React component. If your component is wrapped with Providers, this must be an instance of the concrete component.

Examples#

Registering a component#
Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
Registering a component wrapped with Providers#
import { Provider } from 'react-redux';
const store = createStore();
Navigation.registerComponent(`navigation.playground.MyScreen`, () => (props) =>
<Provider store={store}>
<MyScreen {...props} />
</Provider>,
() => MyScreen)
);

setLazyComponentRegistrator#

Pass a function that will allow you to register a component lazily. When encountering an unknown component name, this function will be called, giving you a chance to register the component before an error is thrown.

Parameters#

NameRequiredTypeDescription
lazyRegistratorFnYes(lazyComponentRequest: stringnumber) => void

Example#

Navigation.setLazyComponentRegistrator((componentName) => {
if (componentName === 'navigation.playground.LazyScreen') {
Navigation.registerComponent(Screens.LazilyRegisteredScreen, () => LazyScreen);
}
});

updateProps#

Update props of a component registered with registerComponent. Updating props triggers the component lifecycle methods related to updating.

Parameters#

NameRequiredTypeDescription
componentIdYesstringUnique component id
optionsYesobjectprops object to pass to the component

Example#

Navigation.updateProps('MY_COMPONENT', {
// props to pass to the component
};
important

updateProps is called with a componentId. This is the same unique id components have in props. Don't confuse it with the componentName we use when registering components with Navigation.registerComponent.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/events/index.html b/7.7.0/api/events/index.html index c20e6cb1e5..e11e7643f2 100644 --- a/7.7.0/api/events/index.html +++ b/7.7.0/api/events/index.html @@ -7,15 +7,15 @@ Events | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -42,14 +42,14 @@
searchBarCancelPressed() {}
}

previewCompleted (iOS 11.4+ only)#

Called when preview peek is completed.

class MyComponent extends Component {
componentDidMount() {
this.navigationEventListener = Navigation.events().bindComponent(this);
}
componentWillUnmount() {
// Not mandatory
if (this.navigationEventListener) {
this.navigationEventListener.remove();
}
}
previewCompleted({ previewComponentId }) {}
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/layout-bottomTabs/index.html b/7.7.0/api/layout-bottomTabs/index.html index 4fb37d443b..9ca5011a94 100644 --- a/7.7.0/api/layout-bottomTabs/index.html +++ b/7.7.0/api/layout-bottomTabs/index.html @@ -7,27 +7,27 @@ Bottom Tabs | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Bottom Tabs

A container view for managing a radio-style selection interface, where a selection determines which child view controller to display.

{
id: 'BOTTOM_TABS_LAYOUT',
children: [
{
component: {
id: 'HOME_SCREEN',
name: 'HomeScreen'
}
},
{
stack: {
id: 'PROFILE_TAB',
children: [
{
component: {
id: 'PROFILE_SCREEN',
name: 'ProfileScreen'
}
}
]
}
}
]
}

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation api, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

children#

TypeRequiredDescription
Layout[]YESChild layouts of any kind.

options#

TypeRequiredDescription
OptionsNodynamic options which will apply to all screens in bottomTabs
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/layout-component/index.html b/7.7.0/api/layout-component/index.html index 2c7f57ffde..9da9aa1e52 100644 --- a/7.7.0/api/layout-component/index.html +++ b/7.7.0/api/layout-component/index.html @@ -7,27 +7,27 @@ Component | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Component

{
name: "MyRegisteredComponent";
}

name#

TypeRequiredDescription
stringYesKey used when registering the component with Navigation.registerComponent.

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation api, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

options#

TypeRequiredDescription
OptionsNodynamic options for the component

alignment#

TypeRequiredDescription
enum('center', 'fill')NoThis option is relevant only to title components. fill will make the component stretch and consume all available space in the TopBar while center will center it in the middle of the TopBar. center is the default option in iOS while fill is the default for Android.

waitForRender#

TypeRequiredDescription
booleanNoWait for this component to fully render before showing the screen.

This option is useful for ensuring that both a child screen pushed into the stack and all of the TopBar components (title, background and buttons) are displayed to the user at the same time.

To enable this option, waitForRender in the relevant screen animation option needs to be enabled as well.

caution

This option might introduce delays when pushing screens and should be used with caution.

passProps#

TypeRequiredDescription
objectNoA JavaScript object with props accessible inside the component using this.props.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/layout-layout/index.html b/7.7.0/api/layout-layout/index.html index 9f68f665bd..58c3bd24f9 100644 --- a/7.7.0/api/layout-layout/index.html +++ b/7.7.0/api/layout-layout/index.html @@ -7,27 +7,27 @@ Layout | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Layout

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation API, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

options#

TypeRequiredDescription
OptionsNodynamic options for the layout

children#

TypeRequiredDescription
Layout[]YesChild layouts of any kind.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/layout-sideMenu/index.html b/7.7.0/api/layout-sideMenu/index.html index 3668d149c4..b648728d4b 100644 --- a/7.7.0/api/layout-sideMenu/index.html +++ b/7.7.0/api/layout-sideMenu/index.html @@ -7,27 +7,27 @@ Side Menu | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Side Menu

This layout allows implementing sidemenus, which can be opened by swiping from one side towards the other side.

{
left: {
component: {}
},
center: {
stack: {
options: {},
children: [{
component: {}
}]
}
},
right: {
component: {}
}
}

center#

TypeRequiredDescription
LayoutYesCenter component, contains the main application.

left#

TypeRequiredDescription
LayoutNoContains the left component layout.

right#

TypeRequiredDescription
LayoutNoContains the right component layout.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/layout-splitView/index.html b/7.7.0/api/layout-splitView/index.html index f2ab5945fd..1610248f43 100644 --- a/7.7.0/api/layout-splitView/index.html +++ b/7.7.0/api/layout-splitView/index.html @@ -7,28 +7,28 @@ SplitView | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

SplitView

A container view controller implementing a master-detail interface. See UISplitViewController docs. Currently implemented only in iOS.

{
id: 'PROFILE_TAB',
master: {
component: {
id: 'MASTER_SCREEN',
name: 'MasterScreen'
}
},
detail: {
component: {
id: 'DETAIL_SCREEN',
name: 'DetailScreen'
}
}
}

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation api, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

master#

TypeRequiredDescription
LayoutYESSet master layout (the smaller screen, sidebar)

detail#

TypeRequiredDescription
LayoutYESSet detail layout (the larger screen, flexes)

options#

TypeRequiredDescription
OptionsNodynamic options which will apply to all screens
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/layout-stack/index.html b/7.7.0/api/layout-stack/index.html index 14fd1113af..14c86a2f26 100644 --- a/7.7.0/api/layout-stack/index.html +++ b/7.7.0/api/layout-stack/index.html @@ -7,27 +7,27 @@ Stack | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Stack

A stack is a container layout promoting a hierarchical navigation. It is used to navigate between screens at consecutive levels of hierarchy, steps in a flow or across an app.

{
id: 'PROFILE_TAB',
children: [
{
component: {
id: 'PROFILE_SCREEN',
name: 'ProfileScreen'
}
}
]
}

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation api, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

children#

TypeRequiredDescription
Layout[]YESChild layouts of any kind.

options#

TypeRequiredDescription
OptionsNoOptions that will apply to all screens in stack
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/modal/index.html b/7.7.0/api/modal/index.html index e7184a9b2c..9341ce0d62 100644 --- a/7.7.0/api/modal/index.html +++ b/7.7.0/api/modal/index.html @@ -7,27 +7,27 @@ Modal | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Modal

showModal()#

Show a screen as a modal.

Parameters#

NameRequiredTypeDescription
layoutYesLayoutAny type of layout. BottomTabs, Stack, SideMenu, Component
Navigation.showModal({
stack: {
children: [{
component: {
name: 'example.ModalScreen',
passProps: {
text: 'stack with one child'
},
options: {
topBar: {
title: {
text: 'Modal'
}
}
}
}
}]
}
});

dismissModal()#

Dismiss the current modal.

Parameters#

NameRequiredTypeDescription
componentIdYesstringAny component id presented in the modal
mergeOptionsNoOptionsOptions to be merged before dismissing the Modal.
Navigation.dismissModal(this.props.componentId);

dismissAllModals()#

Dismiss all current modals at the same time.

Parameters#

NameRequiredTypeDescription
mergeOptionsNoOptionsOptions to be merged before dismissing all modals.
Navigation.dismissAllModals();
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-animations/index.html b/7.7.0/api/options-animations/index.html index 3e2f6d1e09..8ac52df1e6 100644 --- a/7.7.0/api/options-animations/index.html +++ b/7.7.0/api/options-animations/index.html @@ -7,27 +7,27 @@ Animations | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Animations

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-api/index.html b/7.7.0/api/options-api/index.html index fa2bd7432f..ddc488164d 100644 --- a/7.7.0/api/options-api/index.html +++ b/7.7.0/api/options-api/index.html @@ -7,27 +7,27 @@ Options Commands | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Options Commands

setDefaultOptions#

Set default options for all screens. Useful for declaring a consistent style across the app.

Parameters#

NameTypeRequiredDescription
optionsOptionsYesOptions root

Example#

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

mergeOptions#

Change navigation options of a component or layout.

Parameters#

NameTypeRequiredDescription
componentIdstringYesThe component or layout id
optionsOptionsYesOptions root

Example#

Navigation.mergeOptions('componentId', {
bottomTabs: {
visible: false,
},
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-backButton/index.html b/7.7.0/api/options-backButton/index.html index 4d5e7fe345..1b42e055d8 100644 --- a/7.7.0/api/options-backButton/index.html +++ b/7.7.0/api/options-backButton/index.html @@ -7,27 +7,27 @@ Back Button Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Back Button Options

Controls the back button styling.

const options = {
topBar: {
backButton: {},
},
};

accessibilityLabel#

Overrides the text that's read by the screen reader when the user interacts with the back button.

TypeRequiredPlatform
stringNoAndroid

id#

Button id for reference press event.

TypeRequiredPlatform
stringNoAndroid

color#

Change the back button color. This will change the text color as well.

TypeRequiredPlatform
colorNoBoth

icon#

Change the default back button icon.

TypeRequiredPlatform
ImageResourceNoBoth

showTitle#

Show or hide the text displayed next to the back button.

TypeRequiredPlatform
numberNoiOS

title#

Change the text displayed next to the title. Usually the back button shows the title of the previous screen.

TypeRequiredPlatform
stringNoiOS

visible#

Hide or show the back button.

TypeRequiredPlatform
booleanNoBoth

testID#

Used to interact with the back button in e2e tests.

TypeRequiredPlatform
stringNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-background/index.html b/7.7.0/api/options-background/index.html index e583da4ce9..5531ff7b30 100644 --- a/7.7.0/api/options-background/index.html +++ b/7.7.0/api/options-background/index.html @@ -7,27 +7,27 @@ Background Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Background Options

Controls the top bar background styling.

const options = {
topBar: {
background: {}
}
};

color#

Set the background color. Ignored if a component is specified.

TypeRequiredPlatform
ColorNoBoth

component#

Set a react component as the background. Useful when you need to show a gradient as background, for instance.

On Android, setting an id to the Component will prevent the component from being recreated each time it's used by a screen. The component will be created once and whenever possible it will be reused.

TypeRequiredPlatform
ComponentNoBoth

clipToBounds#

Clip the top bar background to bounds if set to true.

TypeRequiredPlatform
booleanNoiOS

translucent#

Allows the NavBar to be translucent (blurred).

TypeRequiredPlatform
booleanNoiOS

blur#

Enable background blur.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-bottomTab/index.html b/7.7.0/api/options-bottomTab/index.html index 550b2000ee..1ad11b0575 100644 --- a/7.7.0/api/options-bottomTab/index.html +++ b/7.7.0/api/options-bottomTab/index.html @@ -7,27 +7,27 @@ Bottom Tab Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Bottom Tab Options

const options = {
bottomTab: {},
};

badge#

TypeRequiredPlatform
stringNoBoth

badgeColor#

TypeRequiredPlatform
colorNoBoth

animateBadge#

TypeRequiredPlatform
booleanNoAndroid

disableIconTint#

TypeRequiredPlatform
booleanNoBoth

dotIndicator#

TypeRequiredPlatform
DotIndicatorNoBoth

fontFamily#

TypeRequiredPlatform
stringNoBoth

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoBoth

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoBoth

fontSize#

TypeRequiredPlatform
numberNoBoth

icon#

TypeRequiredPlatform
ImageResourceNoBoth

iconWidth#

The width (in dp) of the icon.

TypeRequiredPlatform
numberNoAndroid

iconHeight#

The height (in dp) of the icon.

TypeRequiredPlatform
numberNoAndroid

iconColor#

TypeRequiredPlatform
colorNoBoth

selectedFontSize#

TypeRequiredPlatform
numberNoBoth

selectedIcon#

TypeRequiredPlatform
ImageResourceNoBoth

selectedIconColor#

TypeRequiredPlatform
colorNoBoth

iconInsets#

TypeRequiredPlatform
IconInsetsNoBoth

disableSelectedIconTint#

TypeRequiredPlatform
booleanNoAndroid

disableIconTint#

TypeRequiredPlatform
booleanNoAndroid

selectedTextColor#

TypeRequiredPlatform
colorNoBoth

testID#

TypeRequiredPlatform
stringNoBoth

text#

TypeRequiredPlatform
stringNoBoth

textColor#

TypeRequiredPlatform
colorNoBoth

DotIndicator#

color?: color#
size?: number#
visible?: boolean#
animate?: boolean#

IconInsets#

top?: number#
left?: number#
right?: number#
bottom?: number#
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-bottomTabs/index.html b/7.7.0/api/options-bottomTabs/index.html index 4c670fcb37..5424851296 100644 --- a/7.7.0/api/options-bottomTabs/index.html +++ b/7.7.0/api/options-bottomTabs/index.html @@ -7,28 +7,28 @@ Bottom Tabs Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Bottom Tabs Options

const options = {
bottomTabs: {},
};

animate#

Controls whether toggling visibility states will be animated.

TypeRequiredPlatform
booleanNoBoth

animateTabSelection#

Controls wether tab selection is animated or not

TypeRequiredPlatform
booleanNoAndroid

backgroundColor#

Change the background color.

TypeRequiredPlatform
colorNoBoth

barStyle#

Controls whether the BottomTabs use dark (black) or light (default) visual style. Requires translucent: true.

TypeRequiredPlatform
enum('default','black')NoBoth

currentTabId#

Select a tab by the id (componentId) of a child contained in it. See Selecting tabs programmatically for a detailed explanation.

TypeRequiredPlatform
numberNoBoth

currentTabIndex#

TypeRequiredPlatform
numberNoBoth

drawBehind#

TypeRequiredPlatform
booleanNoBoth

elevation#

TypeRequiredPlatform
numberNoAndroid

hideShadow#

TypeRequiredPlatform
booleanNoiOS

hideOnScroll#

Hides the BottomTabs on scroll to increase the amount of content visible to the user. The options requires that the scrollable view will be the root view of the screen and that it specifies nestedScrollEnabled: true.

TypeRequiredPlatform
booleanNoAndroid

preferLargeIcons#

TypeRequiredPlatform
booleanNoAndroid

tabsAttachMode#

TypeRequiredPlatform
enum('together','afterInitialTab','onSwitchToTab')NoBoth

testID#

TypeRequiredPlatform
stringNoBoth

titleDisplayMode#

TypeRequiredPlatform
enum('alwaysShow','showWhenActive','alwaysHide')NoBoth

translucent#

A Boolean value that indicates whether the BottomTabs are translucent. For this option to function as expected the screen needs to be drawn behind the BottomTabs; Make sure the list component you're using (FlatList for example) is the root component in the screen and not SafeAreaView. When SafeAreView is the root component it shifts the content above the BottomTabs and the translucent effect isn't visible.

TypeRequiredPlatform
booleanNoiOS

visible#

TypeRequiredPlatform
booleanNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-button/index.html b/7.7.0/api/options-button/index.html index e53bb9762c..22e0ace3ee 100644 --- a/7.7.0/api/options-button/index.html +++ b/7.7.0/api/options-button/index.html @@ -7,27 +7,27 @@ Button Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Button Options

const options = {
topBar: {
leftButtons: [
{
id: 'id',
text: 'Button',
},
],
},
};

allCaps#

This option will set whether characters are all capitalized or not.

TypeRequiredPlatformDefault
booleanNoAndroidtrue

fontSize#

If the button has text, this option is used to set font size in DP.

TypeRequiredPlatform
numberNoBoth

fontFamily#

TypeRequiredPlatform
stringNoBoth

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoBoth

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoBoth

id#

Buttons are identified by their id property. When a button is clicked, a buttonPress event is emitted to js, containing the id of the clicked button.

TypeRequiredPlatform
stringYesBoth

icon#

Button icon. If the button is pushed to the overflow menu, the button text is used instead.

TypeRequiredPlatform
ImageResourceNoBoth

text#

Button text. Ignored if an icon is specified, unless the button is displayed in the overflow menu.

TypeRequiredPlatform
stringNoBoth

showAsAction#

TypeRequiredPlatform
enum('always', 'never', 'withText', 'ifRoom')NoAndroid
  • ifRoom - Only add button to the TopBar if there is room for it, otherwise add it to the overflow menu.
  • never - Never place this button in the TopBar. Instead, list the button in the overflow menu.
  • always - Always place this button in the app bar.

component#

Set a react component as this button's view which will be displayed instead of the regular view.

TypeRequiredPlatform
ComponentNoBoth

iconInsets#

IconInsets are applied to the icon to translate its original position on the screen.

TypeRequiredPlatform
IconInsetsNoiOS

systemItem#

System icon; ignored if an icon is specified. For more information, see apple's guidelines.

TypeRequiredPlatform
enum('done', 'cancel', 'edit', 'save', 'add', 'flexibleSpace', 'fixedSpace', 'compose', 'reply', 'action', 'organize', 'bookmarks', 'search', 'refresh', 'stop', 'camera', 'trash', 'play', 'pause', 'rewind', 'fastForward', 'undo', 'redo')NoiOS

iconBackground#

iconBackground is applied to the icon's background.

TypeRequiredPlatform
iconBackgroundNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-fab/index.html b/7.7.0/api/options-fab/index.html index 4934bd7824..81b9255833 100644 --- a/7.7.0/api/options-fab/index.html +++ b/7.7.0/api/options-fab/index.html @@ -7,27 +7,27 @@ Fab | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Fab

Controls the FAB button styling on Android.

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

id#

Button id for reference press event.

Note

This option is mandatory when you are initiating the FAB button. However you do not need to pass in id when updating the Fab button options with Navigation.mergeOptions.

TypeRequiredPlatform
stringNoAndroid

icon#

Change the default back button icon.

TypeRequiredPlatform
numberNoAndroid

iconColor#

Change the icon color of the FAB button.

TypeRequiredPlatform
colorNoAndroid

backgroundColor#

Change the background color of the FAB button.

TypeRequiredPlatform
colorNoAndroid

clickColor#

Change the on-clicked background color of the FAB button.

TypeRequiredPlatform
colorNoAndroid

rippleColor#

Change the ripple color of the FAB button.

TypeRequiredPlatform
colorNoAndroid

visible#

Show or hide the FAB button.

TypeRequiredPlatform
booleanNoAndroid

alignHorizontally#

Set the horizontal position of the FAB button on the screen.

TypeRequiredPlatform
'left' or 'right'NoAndroid

hideOnScroll#

Hide the FAB button on scroll.

TypeRequiredPlatform
booleanNoAndroid

size#

Set the size of the FAB button.

TypeRequiredPlatform
'mini' or 'regular'NoAndroid
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-iconBackground/index.html b/7.7.0/api/options-iconBackground/index.html index 90d4a17824..acd2b3f8a8 100644 --- a/7.7.0/api/options-iconBackground/index.html +++ b/7.7.0/api/options-iconBackground/index.html @@ -7,27 +7,27 @@ iconBackground Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

iconBackground Options

color#

Set the background color.

TypeRequiredPlatform
ColorNoBoth

width#

Set the background width.

TypeRequiredPlatform
numberNoBoth

height#

Set the background height.

TypeRequiredPlatform
numberNoBoth

cornerRadius#

Set the background cornerRadius.

TypeRequiredPlatform
numberNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-iconInsets/index.html b/7.7.0/api/options-iconInsets/index.html index 9a906accca..14719bb654 100644 --- a/7.7.0/api/options-iconInsets/index.html +++ b/7.7.0/api/options-iconInsets/index.html @@ -7,27 +7,27 @@ IconInsets Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

IconInsets Options

top#

Configure top inset

TypeRequiredPlatform
numberNoBoth

bottom#

Configure bottom inset

TypeRequiredPlatform
numberNoBoth

left#

Configure left inset

TypeRequiredPlatform
numberNoBoth

right#

Configure right inset

TypeRequiredPlatform
numberNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-imageResource/index.html b/7.7.0/api/options-imageResource/index.html index 6cd96ae661..048adf3eb0 100644 --- a/7.7.0/api/options-imageResource/index.html +++ b/7.7.0/api/options-imageResource/index.html @@ -7,27 +7,27 @@ Image Resource | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Image Resource

ImageResource#

const options = {
topBar: {
leftButtons: [
icon: require('./backButton.png')
]
},
};

The following icon types are available:

TypeRequiredPlatform
ImageRequireSourceNoBoth
stringNoBoth
ImageSystemSourceNoiOS

ImageSystemSource#

system#

You can use platform specific system icons for iOS only.

Example:

const options = {
topBar: {
leftButtons: [
icon: {
system: 'calendar',
fallback: require('./calendar.png')
}
]
},
};
TypeRequiredPlatform
stringYesiOS 13+

fallback#

TypeRequiredPlatform
FallbackSourceNoiOS 13+

FallbackSource#

For iOS, SF Symbols is available only for iOS 13 and later. For iOS 12 and earlier you should use a fallback icon.

ImageRequireSource#

TypeRequiredPlatform
numberNoBoth

string#

TypeRequiredPlatform
numberNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-largeTitle/index.html b/7.7.0/api/options-largeTitle/index.html index 818c1aebe4..10a76d4a33 100644 --- a/7.7.0/api/options-largeTitle/index.html +++ b/7.7.0/api/options-largeTitle/index.html @@ -7,27 +7,27 @@ Large Title Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Large Title Options

Controls the top bar large title on iOS, available on iOS 11 and above.

const options = {
topBar: {
largeTitle: {},
},
};

visible#

Controls whether the large title is visible or not.

TypeRequiredPlatform
booleanNoiOS

fontSize#

Set the title font size. On Android this value is in sp.

TypeRequiredPlatform
numberNoiOS

color#

Large title text color.

TypeRequiredPlatform
ColorNoiOS

fontFamily#

Set the large title FontFamily.

TypeRequiredPlatform
FontFamilyNoiOS

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoiOS

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-layout/index.html b/7.7.0/api/options-layout/index.html index ea522647e2..4a40550642 100644 --- a/7.7.0/api/options-layout/index.html +++ b/7.7.0/api/options-layout/index.html @@ -7,27 +7,27 @@ Layout Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Layout Options

const options = {
layout: {},
};

fitSystemWindows#

TypeRequiredPlatform
booleanNoBoth

backgroundColor#

Set the screen background color.

TypeRequiredPlatform
ColorNoBoth

componentBackgroundColor#

Set background color only for components. On Android, using this option instead of backgroundColor helps reduce overdraw.

TypeRequiredPlatform
ColorNoBoth

orientation#

Set the allowed orientations.

TypeRequiredPlatform
['portrait', 'landscape']NoBoth

topMargin#

Set the layout top margin.

TypeRequiredPlatform
numberNoAndroid

direction#

Set language direction, only works with DefaultOptions. locale is an Android specific option which sets the direction according to the device locale.

TypeRequiredPlatform
enum('rtl', 'ltr', 'locale')NoBoth

autoHideHomeIndicator#

Controls the application's preferred home indicator auto-hiding.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-migration/index.html b/7.7.0/api/options-migration/index.html index 80ce7751e8..b2e1fe15ff 100644 --- a/7.7.0/api/options-migration/index.html +++ b/7.7.0/api/options-migration/index.html @@ -7,27 +7,27 @@ options-migration | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

options-migration

Common Options#

navBarTextColor#

Title text color

topBar: {
title: {
color: 'red'
}
}

navBarTextFontSize#

Title font size

topBar: {
title: {
fontSize: 18
}
}

navBarTextFontFamily#

Title font

topBar: {
title: {
fontFamily: 'Helvetica'
}
}

navBarBackgroundColor#

TopBar background color

topBar: {
background: {
color: 'red'
}
}

navBarCustomView#

Use a react view as the TopBar's background or use a React view instead of the textual title.

topBar: {
background: {
component: {
name: 'example.CustomTopBarBackground'
}
},
title: {
component: {
name: 'example.CustomTopBarTitle'
}
}
}

navBarClipToBounds#

Restrict the navbar background color to the navbar, and do not flow behind the status bar.

topBar: {
background: {
component: {
name: 'example.CustomTopBarBackground',
clipToBounds: true
}
},
}

navBarComponentAlignment#

Align the React view used as the title

topBar: {
title: {
component: {
name: 'example.CustomTopBarTitle',
alignment: 'center' | 'fill'
}
}
}

navBarCustomViewInitialProps#

Initial props passed to the React component

topBar: {
background: {
component: {
name: 'example.CustomTopBarBackground',
passProps: {}
}
},
title: {
component: {
name: 'example.CustomTopBarTitle',
passProps: {}
}
}
}

navBarButtonColor#

TopBar button color

topBar: {
rightButtons: [
{
color: 'red'
}
],
leftButtons: [
{
color: 'red'
}
],
backButton: {
color: 'red'
}
}

navBarHidden#

TopBar visibility. When setting visible: false, you probably want to set drawBehind: true as well. Use animate: false to toggle visibility without animation.

topBar: {
visible: false
}

navBarTransparent#

Transparent TopBar. Set drawBehind: true to draw the screen behind the transparent TopBar.

topBar: {
background: {
color: 'transparent'
}
}

drawUnderNavBar#

Draw the screen behind the TopBar, Useful when the TopBar is toggled or transparent

topBar: {
drawBehind: true
}

drawUnderTabBar#

Draw the screen behind the BottomTabs, Useful when toggling BottomTabs or when the BottomTabs are translucent.

bottomTabs: {
drawBehind: true
}

tabBarHidden#

BottomTabs visibility.

bottomTabs: {
visible: false
}

The BottomTab's visibility can be toggled only on Android using mergeOptions:

Navigation.mergeOptions(this.props.componentId, {
bottomTabs: {
visible: false
}
});

On iOS, BottomTab visibility can be changed only when pushing screens. This means that if you'd like to hide BottomTabs when pushing a screen, You'll need to set the property to false in the options passed to the push command or via the static options(passProps) {} api.

statusBarHidden#

StatusBar visibility. For android, also set drawBehind: true.

statusBar: {
visible: false
}

statusBarTextColorScheme#

Theme of text and icons displayed in the StatusBar

statusBar: {
style: 'light' | 'dark'
}

navBarSubtitleColor#

Subtitle color

topBar: {
subtitle: {
color: 'red'
}
}

navBarSubtitleFontFamily#

Subtitle font

topBar: {
subtitle: {
fontFamily: 'Helvetica'
}
}

navBarSubtitleFontSize#

Subtitle font size

topBar: {
subtitle: {
fontSize: 14
}
}

screenBackgroundColor#

Screen color, visible before the actual React view is rendered

layout: {
backgroundColor: 'red'
}

orientation#

layout: {
orientation: ['portrait', 'landscape'] // An array of supported orientations
}

disabledButtonColor#

Button color when enabled: false is used

topBar: {
rightButtons: [
{
disabledColor: 'grey'
}
]
}

navBarButtonFontSize#

Button font size

topBar: {
rightButtons: [
{
fontSize: 13
}
],
leftButtons: [
{
fontSize: 13
}
]
}

navBarLeftButtonFontSize#

Left button font size

{
topBar: {
leftButtons: [
{
fontSize: 13
}
]
}
}

navBarLeftButtonColor#

Left button color

{
topBar: {
leftButtons: [
{
color: 'red'
}
]
}
}

navBarLeftButtonFontWeight#

Left button font weight

{
topBar: {
leftButtons: [
{
weight: '300'
}
]
}
}

navBarRightButtonFontSize#

Right button font size

topBar: {
leftButtons: [
{
fontSize: 13
}
]
}

navBarRightButtonColor#

Right button color

topBar: {
rightButtons: [
{
color: 'red'
}
]
}

navBarRightButtonFontWeight#

Right button font weight

topBar: {
rightButtons: [
{
weight: '400'
}
]
}

modalPresentationStyle#

Controls the behavior of screens displayed modally.

Options supported on iOS#

  • overCurrentContext - Content is displayed over the previous screen. Useful for transparent modals
  • formSheet - Content is centered in the screen
  • pageSheet -Content partially covers the underlying content
  • overFullScreen - Content covers the screen, without detaching previous content.
  • fullScreen - Content covers the screen, previous content is detached.
  • popover - Content is displayed in a popover view.

More information on the different styles for iOS can be found on https://developer.apple.com/documentation/uikit/uimodalpresentationstyle

Options supported on Android#

  • overCurrentContext - Content is displayed over the previous screen. Useful for transparent modals
  • none - Previous content is detached when the Modal's show animation ends
{
modalPresentationStyle: 'overCurrentContext'
}

navBarButtonFontFamily#

Button font family

topBar: {
rightButtons: [
{
fontFamily: 'Helvetica'
}
]
}

iOS only#

navBarHideOnScroll#

Hide TopBar when list is scrolled

topBar: {
hideOnScroll: true
}

navBarTranslucent#

Translucent TopBar, Setting drawBehind: true is required for this property to work as expected.

topBar: {
drawBehind: true,
background: {
translucent: true
}
}

navBarNoBorder#

Remove TopBar border (hair line)

topBar: {
noBorder: true
}

navBarBlur#

Blur the area behind the TopBar, Setting drawBehind: true and topBar background transparent: true is required for this property to work as expected.

topBar: {
drawBehind: true,
background: {
blur: true,
transparent: true
}
}

rootBackgroundImageName#

  • iOS: name of image in Images.xcassets
  • Android: name of drawable
{
rootBackgroundImage: require('rootBackground.png')
}

screenBackgroundImageName#

name of image in Images.xcassets

{
backgroundImage: require('background.png')
}

statusBarHideWithNavBar#

Hide the StatusBar if the TopBar is also hidden

statusBar: {
hideWithTopBar: true
}

statusBarBlur#

Blur the area behind the StatusBar

statusBar: {
blur: true
}

statusBarAnimate#

Animate between style changes of the StatusBar

statusBar: {
animate: true
}

disabledBackGesture#

Disable the back (swipe) gesture used to pop screens

{
popGesture: false
}

largeTitle#

Use iOS 11 large title

topBar: {
largeTitle: {
visible: true,
fontSize: 30,
color: 'red',
fontFamily: 'Helvetica'
}
}

Android Options#

topBarElevationShadowEnabled#

TopBar elevation in dp. Set this value to 0 to disable the TopBar's shadow.

topBar: {
elevation: 0
}

navBarTitleTextCentered#

Title alignment

topBar: {
title: {
alignment: 'center'|'fill'
}
}

statusBarColor#

StatusBar color

statusBar: {
backgroundColor: 'red'
}

navigationBarColor#

NavigationBar color

navigationBar: {
backgroundColor: 'red'
}

drawUnderStatusBar#

Draw content behind the StatusBar

statusBar: {
drawBehind: true
}

navBarHeight#

TopBar height in dp

topBar: {
height: 70
}

navBarTopPadding#

Content top margin

layout: {
topMargin: 26
}

topTabsHeight#

TopTabs height

topTabs: {
height: 70
}

topBarBorderColor#

TopBar border color

topBar: {
borderColor: 'red'
}

topBarBorderWidth#

TopBar border height

topBar: {
borderHeight: 1.3
}

Unsupported options#

  • disabledSimultaneousGesture
  • statusBarTextColorSchemeSingleScreen
  • navBarButtonFontWeight
  • topBarShadowColor
  • topBarShadowOpacity
  • topBarShadowOffset
  • topBarShadowRadius
  • preferredContentSize
  • navBarSubTitleTextCentered
  • collapsingToolBarImage
  • collapsingToolBarCollapsedColor
  • navBarTextFontBold
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-modal/index.html b/7.7.0/api/options-modal/index.html index 097931897b..eb776ee6e6 100644 --- a/7.7.0/api/options-modal/index.html +++ b/7.7.0/api/options-modal/index.html @@ -7,27 +7,27 @@ Modal Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Modal Options

const options = {
swipeToDismiss
};

swipeToDismiss#

Control wether this modal should be dismiss using swipe gesture when the modalPresentationStyle is pageSheet

TypeRequiredPlatformDefault
booleanNoBothtrue
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-navigationBar/index.html b/7.7.0/api/options-navigationBar/index.html index 440a13ff8f..355163309d 100644 --- a/7.7.0/api/options-navigationBar/index.html +++ b/7.7.0/api/options-navigationBar/index.html @@ -7,27 +7,27 @@ Navigation Bar Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Navigation Bar Options

The Navigation Bar is the area at the bottom of the screen containing Android's three navigation buttons: Back, Home and Recents.

An example of a dark navigation bar:



const options = {
navigationBar: {}
};

visible#

Set the navigation bar visibility.

TypeRequiredPlatform
booleanNoAndroid

backgroundColor#

Set the navigation bar color. When a light background color is used, the color of the navigation bar icons will adapt to a dark color.

TypeRequiredPlatformDefault
ColorNoAndroid'black'
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-overlay/index.html b/7.7.0/api/options-overlay/index.html index f8762cd1de..65525034de 100644 --- a/7.7.0/api/options-overlay/index.html +++ b/7.7.0/api/options-overlay/index.html @@ -7,28 +7,28 @@ Overlay | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Overlay

Controls overlay options

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.

TypeRequiredPlatform
booleanNoBoth

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.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-preview/index.html b/7.7.0/api/options-preview/index.html index 7297a399bf..87a009c6dd 100644 --- a/7.7.0/api/options-preview/index.html +++ b/7.7.0/api/options-preview/index.html @@ -7,27 +7,27 @@ Preview (iOS) | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Preview (iOS)

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-root/index.html b/7.7.0/api/options-root/index.html index ceee662a15..f954712707 100644 --- a/7.7.0/api/options-root/index.html +++ b/7.7.0/api/options-root/index.html @@ -7,27 +7,27 @@ The options object | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

The options object

const options = {
bottomTab,
bottomTabs,
topBar,
layout,
sideMenu,
overlay,
modal,
preview,
navigationBar
};

bottomTab#

Controls the bottom tab icon, font, color, and more.

TypeRequiredPlatform
BottomTabOptionsNoBoth

bottomTabs#

Controls the bottom tabs container.

TypeRequiredPlatform
BottomTabsOptionsNoBoth

topBar#

Controls the Stack top bar styling.

TypeRequiredPlatform
TopBarOptionsNo

statusBar#

Controls the system status bar styling.

TypeRequiredPlatform
StatusBarOptionsNoBoth

layout#

TypeRequiredPlatform
LayoutOptionsNoBoth

sideMenu#

TypeRequiredPlatform
SideMenuOptionsNoBoth

overlay#

TypeRequiredPlatform
OverlayOptionsNoBoth

animations#

TypeRequiredPlatform
AnimationsOptionsNoBoth

modal#

TypeRequiredPlatform
ModalOptionsNoBoth

preview#

TypeRequiredPlatform
PreviewOptionsNoiOS

splitView#

TypeRequiredPlatform
SplitViewOptionsNoiOS

fab#

TypeRequiredPlatform
FabNoAndroid

modalPresentationStyle#

Configure the presentation style of the modal.

TypeRequiredPlatform
enum('formSheet', 'pageSheet', 'fullScreen', 'overFullScreen', 'overCurrentContext', 'popOver', 'none')NoBoth

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.

iOSAndroid
  • iOS 12 and below - fullScreen
  • iOS 13 and above - pageSheet
fullScreen

modalTransitionStyle#

Configure the transition style of the modal.

TypeRequiredPlatform
enum('coverVertical', 'crossDissolve', 'flipHorizontal', 'partialCurl')NoBoth

popGesture#

Enable or disable swipe back to pop gesture.

TypeRequiredPlatform
booleanNoiOS

backgroundImage#

Background image of the screen.

TypeRequiredPlatform
ImageNoiOS

rootBackgroundImage#

Background image for the Navigation View.

TypeRequiredPlatform
ImageNoAndroid

blurOnUnmount#

Enable or disable automaticall blur of the focused input, dismissing keyboard on unmount.

TypeRequiredPlatformDefault
booleanNoAndroidfalse

navigationBar#

Enable or disable automaticall blur of the focused input, dismissing keyboard on unmount.

TypeRequiredPlatform
booleanNoAndroid
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-scrollEdgeAppearance/index.html b/7.7.0/api/options-scrollEdgeAppearance/index.html index eb6f192b10..d3eb6d0cb2 100644 --- a/7.7.0/api/options-scrollEdgeAppearance/index.html +++ b/7.7.0/api/options-scrollEdgeAppearance/index.html @@ -7,28 +7,28 @@ Scroll Edge Appearance Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Scroll Edge Appearance Options

Controls the top bar background styling.

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.

TypeRequiredPlatform
booleanNoiOS

color#

Set the background color.

TypeRequiredPlatform
ColorNoiOS

translucent#

Allows the Scroll Edge Appearance to be translucent (blurred).

TypeRequiredPlatform
booleanNoiOS

borderColor#

Change the topBar border color.

TypeRequiredPlatform
ColorNoiOS

noBorder#

Disables border at the bottom of the TopBar.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-sideMenu/index.html b/7.7.0/api/options-sideMenu/index.html index d4e639ac1e..c9fd408cb4 100644 --- a/7.7.0/api/options-sideMenu/index.html +++ b/7.7.0/api/options-sideMenu/index.html @@ -7,27 +7,27 @@ Side Menu Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Side Menu Options

const options = {
sideMenu: {
left: {},
right: {},
openGestureMode: 'entireScreen',
},
};

left#

Configure the left side menu.

TypeRequiredPlatform
SideMenuSideNoBoth

right#

Configure the right side menu.

TypeRequiredPlatform
SideMenuSideNoBoth

openGestureMode#

Configure how a user is allowed to open a drawer using gestures.

TypeRequiredPlatformDefault
enum('entireScreen', 'bezel')NoiOS'bezel'
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-sideMenuSide/index.html b/7.7.0/api/options-sideMenuSide/index.html index 16d4db3b82..9df6e7cea6 100644 --- a/7.7.0/api/options-sideMenuSide/index.html +++ b/7.7.0/api/options-sideMenuSide/index.html @@ -7,27 +7,27 @@ Side Menu Side Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Side Menu Side Options

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

visible#

Show or hide the side menu.

TypeRequiredPlatform
booleanNoBoth

enabled#

Enable or disable the side menu.

TypeRequiredPlatform
booleanNoBoth

width#

Set the width of the side menu.

TypeRequiredPlatform
numberNoBoth

height#

Set the height of the side menu.

TypeRequiredPlatform
numberNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-splitView/index.html b/7.7.0/api/options-splitView/index.html index c522e1f102..a04820f024 100644 --- a/7.7.0/api/options-splitView/index.html +++ b/7.7.0/api/options-splitView/index.html @@ -7,29 +7,29 @@ SplitView Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

SplitView Options

displayMode#

Master view display mode.

TypeRequiredDefaultPlatform
enum('auto', 'visible', 'hidden', 'overlay')No'auto'iOS

primaryEdge#

Master view side. Leading is left. Trailing is right.

TypeRequiredDefaultPlatform
enum('leading', 'trailing')No'leading'iOS

minWidth#

Set the minimum width of master view.

TypeRequiredPlatform
numberNoiOS

maxWidth#

Set the maximum width of master view.

TypeRequiredPlatform
numberNoiOS

primaryBackgroundStyle#

Set background style of sidebar. Currently works for Mac Catalyst apps only. See: Optimizing Your iPad App for Mac

TypeRequiredDefaultPlatform
enum('none', 'sidebar')No'none'iOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-stack/index.html b/7.7.0/api/options-stack/index.html index 8ed6f8f299..ca2a682d4f 100644 --- a/7.7.0/api/options-stack/index.html +++ b/7.7.0/api/options-stack/index.html @@ -7,27 +7,27 @@ Top Bar Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Top Bar Options

TopBar#

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

visible#

Determines if TopBar is visible or not.

TypeRequiredPlatform
booleanNoBoth

animate#

Determines if changing the TopBar visibility will be animated or not.

TypeRequiredPlatform
booleanNoBoth

title#

Controls the top bar title.

TypeRequiredPlatform
TitleNoBoth

subtitle#

Controls the top bar subtitle.

TypeRequiredPlatform
SubitleNoBoth

backButton#

Controls the top bar back button.

TypeRequiredPlatform
BackButtonNoBoth

background#

Controls the top bar background.

TypeRequiredPlatform
BackgroundNoBoth

scrollEdgeAppearance#

Controls the appearance settings when the scrollable content reaches the matching edge of the navigation bar.

TypeRequiredPlatform
Scroll Edge BackgroundNoiOS 13+

barStyle#

Control the TopBar blur style. Requires translucent: true.

TypeRequiredPlatform
enum('default','black')NoiOS

borderColor#

Change the topBar border color.

TypeRequiredPlatform
ColorNoBoth

borderHeight#

Set the border height of the navbar in dp.

TypeRequiredPlatform
numberNoAndroid

drawBehind#

Controls if child should be drawn behind the TopBar or below it.

TypeRequiredPlatform
booleanNoBoth

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.

TypeRequiredPlatform
numberNoAndroid

hideOnScroll#

Hide the TopBar when a scrolling layout is scrolled.

TypeRequiredPlatform
booleanNoBoth
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

hideNavBarOnFocusSearchBar#

Indicates whether the navigation bar should be hidden when searching. True by default.

TypeRequiredPlatform
booleanNoiOS 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 section for more details.

Android support

Android currently only supports a single left button and does not support custom left Buttons.

TypeRequiredPlatform
[Button]NoBoth

leftButtonColor#

Default color for left buttons.

TypeRequiredPlatform
ColorNoBoth

noBorder#

Disables border at the bottom of the TopBar.

TypeRequiredPlatform
booleanNoiOS

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 section for more details.

TypeRequiredPlatform
[Button]NoBoth

rightButtonColor#

Default color for the right button.

TypeRequiredPlatform
ColorNoBoth

searchBar#

Controls the SearchBar.

TypeRequiredPlatform
OptionsSearchBarNoiOS 11+
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

searchBarHiddenWhenScrolling#

Hides the UISearchBar when scrolling.

TypeRequiredPlatform
booleanNoiOS 11+
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

searchBarPlaceholder#

The placeholder value in the UISearchBar.

TypeRequiredPlatform
stringNoiOS 11+
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

searchBarBackgroundColor#

The background color of the UISearchBar's TextField.

TypeRequiredPlatform
ColorNoiOS 13+
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

searchBarTintColor#

The tint color of the UISearchBar. Affects text selection color, as well as "Cancel" button color.

TypeRequiredPlatform
ColorNoiOS 13+
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-statusBar/index.html b/7.7.0/api/options-statusBar/index.html index 42ed529d18..01489c369b 100644 --- a/7.7.0/api/options-statusBar/index.html +++ b/7.7.0/api/options-statusBar/index.html @@ -7,27 +7,27 @@ Status Bar Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Status Bar Options

const options = {
statusBar: {},
};

visible#

Set the status bar visibility.

TypeRequiredPlatform
booleanNoBoth

style#

Set the text color of the status bar.

TypeRequiredPlatformDefault
enum('light', 'dark')NoBoth'light'

backgroundColor#

Set the background color of the status bar.

TypeRequiredPlatform
ColorNoAndroid

drawBehind#

Draw screen behind the status bar.

TypeRequiredPlatform
booleanNoAndroid

translucent#

Set the status bar to be translucent.

TypeRequiredPlatform
booleanNoAndroid

animate#

Animate StatusBar style changes.

TypeRequiredPlatform
booleanNoiOS

blur#

Blur content beneath the StatusBar.

TypeRequiredPlatform
booleanNoiOS

hideWithTopBar#

Automatically hide the StatusBar when the TopBar hides.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-subtitle/index.html b/7.7.0/api/options-subtitle/index.html index 395cb464dd..89fc7da59f 100644 --- a/7.7.0/api/options-subtitle/index.html +++ b/7.7.0/api/options-subtitle/index.html @@ -7,27 +7,27 @@ Subtitle Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Subtitle Options

Controls the top bar subtitle.

const options = {
topBar: {
subtitle: {},
},
};

text#

Subtitle text.

TypeRequiredPlatform
stringNoBoth

fontSize#

Subtitle fontSize. On Android this value is sp.

TypeRequiredPlatform
numberNoBoth

color#

Subtitle color.

TypeRequiredPlatform
ColorNoBoth

fontFamily#

Subtitle FontFamily.

TypeRequiredPlatform
FontFamilyNoBoth

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoBoth

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoBoth

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.

TypeRequiredPlatform
enum('center', 'fill')NoBoth

testID#

Used to interact with the TopBar in e2e tests.

TypeRequiredPlatform
stringNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/options-title/index.html b/7.7.0/api/options-title/index.html index 6cc1a42601..0f6ce7838c 100644 --- a/7.7.0/api/options-title/index.html +++ b/7.7.0/api/options-title/index.html @@ -7,27 +7,27 @@ Title Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Title Options

Controls the top bar title.

const options = {
topBar: {
title: {},
},
};

text#

Set the title for the TopBar.

TypeRequiredPlatform
stringNoBoth

fontSize#

Set the title font size. On Android this value is in sp.

TypeRequiredPlatform
numberNoBoth

color#

Set the title color.

TypeRequiredPlatform
ColorNoBoth

fontFamily#

Set the title font family.

TypeRequiredPlatform
FontFamilyNoBoth

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoBoth

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoBoth

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.

defaults

center is the default option on iOS while fill is the default for Android.

TypeRequiredPlatform
enum('center','fill')NoBoth

component#

Set a react component as the title. If this option is specified then text is ignored.

TypeRequiredPlatform
ComponentNoBoth

topMargin#

Change to TopBar's top margin.

TypeRequiredPlatform
numberNoAndroid

visible#

Determines whether the TopBar is visible or not.

TypeRequiredPlatform
booleanNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/overlay/index.html b/7.7.0/api/overlay/index.html index 14f054951f..80e493b645 100644 --- a/7.7.0/api/overlay/index.html +++ b/7.7.0/api/overlay/index.html @@ -7,27 +7,27 @@ Overlay | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Overlay

showOverlay()#

Shows a component as an overlay.

NameRequiredTypeDescription
layoutYesLayoutAny type of layout. Typically, Component layout is used in Overlays but it's possible to load any other layout (BottomTabs, Stack, SideMenu, Component)
Navigation.showOverlay({
component: {
name: 'example.Overlay',
options: {
layout: {
componentBackgroundColor: 'transparent',
},
overlay: {
interceptTouchOutside: true
}
}
}
});

dismissOverlay()#

Dismisses an overlay matching the given overlay componentId.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe component id presented in Overlay
Navigation.dismissOverlay(this.props.componentId);

dismissAllOverlays()#

Dismisses all overlays.

Navigation.dismissAllOverlays();
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/root/index.html b/7.7.0/api/root/index.html index 440857d585..1bd22e9454 100644 --- a/7.7.0/api/root/index.html +++ b/7.7.0/api/root/index.html @@ -7,27 +7,27 @@ Root | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Root

setRoot()#

Used to set the UI of the application. Read more about the root hierarchy level in the docs section.

Parameters#

NameRequiredTypeDescription
layoutYesLayoutAny type of layout. BottomTabs, Stack, SideMenu, Component

Example#

Navigation.setRoot({
root: {
stack: {
children: [{
component: {
name: 'example.FirstTabScreen',
passProps: {
text: 'This is tab 1'
}
}
}],
options: {
bottomTab: {
text: 'Tab 1',
icon: require('../images/one.png'),
testID: 'FIRST_TAB_BAR_BUTTON'
}
}
}
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/sideMenu-api/index.html b/7.7.0/api/sideMenu-api/index.html index f76e36a7cb..9099dfd8fe 100644 --- a/7.7.0/api/sideMenu-api/index.html +++ b/7.7.0/api/sideMenu-api/index.html @@ -7,27 +7,27 @@ Side Menu | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Side Menu

This layout allows to implement sidemenus, which can be opened by swiping from one side towards the other side.

{
left: {
component: {}
},
center: {
stack: {
options: {},
children: [{
component: {}
}]
}
},
right: {
component: {}
}
}

center: Layout#

Center component, contains the main application.

left?: Layout#

Contain the left component layout.

right?: Layout#

Contain the right component layout.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/stack/index.html b/7.7.0/api/stack/index.html index b7784cd6bd..bc29b48a75 100644 --- a/7.7.0/api/stack/index.html +++ b/7.7.0/api/stack/index.html @@ -7,27 +7,27 @@ Stack | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Stack

push()#

Push a screen into the stack and update the display according to the screen options.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe componentId of a screen pushed into the stack, or the id of the stack.
layoutNoLayoutThe layout being pushed into the stack. Any type of layout (except stack) can be pushed into stacks. Typically, Component layout is pushed into stacks but it's possible to push SideMenu or BottomTabs as well.

Example#

The most common use case - push a single React component.
Navigation.push(this.props.componentId, {
component: {
name: 'example.PushedScreen'
}
});

pop()#

Pop the top screen from the stack.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe componentId of a screen pushed into the stack, or the stack id.
mergeOptionsNoOptionsOptions to be merged before popping the screen (optional).
Navigation.pop(this.props.componentId);

popToRoot()#

Pop all screens pushed into the stack.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe componentId of a screen pushed into the stack, or the stack id.
mergeOptionsNoOptionsOptions to be merged before popping the screen (optional).
Navigation.popToRoot(this.props.componentId);

popTo()#

Pop the stack to a given component.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe destination componentId
mergeOptionsNoOptionsOptions to be merged before popping the screen (optional).
Navigation.popTo(componentId);

setStackRoot()#

Reset the stack to the given layout (accepts multiple children).

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe componentId of a screen pushed into the stack, or the stack id.
layoutYesLayout or Layout[]A single Component or array of components.

Example#

Navigation.setStackRoot(this.props.componentId, {
component: {
name: 'example.NewRootScreen'
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/api/topBar-searchBar/index.html b/7.7.0/api/topBar-searchBar/index.html index 947d9569e3..ceb8e943a1 100644 --- a/7.7.0/api/topBar-searchBar/index.html +++ b/7.7.0/api/topBar-searchBar/index.html @@ -7,27 +7,27 @@ SearchBar | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

SearchBar

visible#

TypeRequiredPlatformDescription
booleanNoiOSDetermines if SearchBar is visible or not

focus#

TypeRequiredPlatformDescription
booleanNoiOSAuto focuses search bar

hideOnScroll#

TypeRequiredPlatformDescription
booleanNoiOSHides the UISearchBar when scrolling.

hideTopBarOnFocus#

TypeRequiredPlatformDescription
booleanNoiOSIndicates whether the navigation bar should be hidden when searching. True by default.

obscuresBackgroundDuringPresentation#

TypeRequiredPlatformDescription
booleanNoiOSA Boolean indicating whether the underlying content is obscured during a search.

backgroundColor#

TypeRequiredPlatformDescription
ColorNoiOSThe background color of the UISearchBar's TextField.

tintColor#

TypeRequiredPlatformDescription
ColorNoiOSThe tint color of the UISearchBar. Affects text selection color, as well as "Cancel" button color.

searchBarPlaceholder#

TypeRequiredPlatformDescription
stringNoiOSThe placeholder value in the UISearchBar.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/advanced-navigation/index.html b/7.7.0/docs/advanced-navigation/index.html index 7ebd8a1111..e46f08fe41 100644 --- a/7.7.0/docs/advanced-navigation/index.html +++ b/7.7.0/docs/advanced-navigation/index.html @@ -7,15 +7,15 @@ Advanced navigation | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -36,14 +36,14 @@
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.

Navigation.events().registerAppLaunchedListener(async () => {
Navigation.setRoot(isLoggedIn() ? mainRoot : loginRoot);
});
function isLoggedIn() {
// TODO: your business logic goes here
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/app-launch/index.html b/7.7.0/docs/app-launch/index.html index dbd9bb55e7..854b9bc1ac 100644 --- a/7.7.0/docs/app-launch/index.html +++ b/7.7.0/docs/app-launch/index.html @@ -7,27 +7,27 @@ Launching the app | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

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.

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
  2. 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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/basic-navigation/index.html b/7.7.0/docs/basic-navigation/index.html index fd9f67ef8d..5aefca66d8 100644 --- a/7.7.0/docs/basic-navigation/index.html +++ b/7.7.0/docs/basic-navigation/index.html @@ -7,15 +7,15 @@ Basic navigation | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -35,14 +35,14 @@
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.

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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/before-you-start/index.html b/7.7.0/docs/before-you-start/index.html index d3c3c620dd..1eddb3f903 100644 --- a/7.7.0/docs/before-you-start/index.html +++ b/7.7.0/docs/before-you-start/index.html @@ -7,27 +7,27 @@ Before you start | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Before you start

React Native Navigation is a module, dependent on and intended to be used alongside 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 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 the library. If you're just looking around, we suggest checking out basic navigation first.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/bottomTabs/index.html b/7.7.0/docs/bottomTabs/index.html index 5290cd77d6..99c7fc3eaa 100644 --- a/7.7.0/docs/bottomTabs/index.html +++ b/7.7.0/docs/bottomTabs/index.html @@ -7,28 +7,28 @@ Bottom tabs | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Bottom tabs

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

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.

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.

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

Visibility can also be changed when pushing screens.

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:

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.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/community-libraries/index.html b/7.7.0/docs/community-libraries/index.html index ac88206ddf..e59842812b 100644 --- a/7.7.0/docs/community-libraries/index.html +++ b/7.7.0/docs/community-libraries/index.html @@ -7,15 +7,15 @@ Community libraries | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -24,14 +24,14 @@ Drawer API built on top of React Native Navigation for iOS and Android.

React Native Navigation Search Bar : React Native Elements search bar with collapsible header built for React Native Navigation.

React Native Navigation Register Screens : Utility function to register array of screens instead of calling Navigation.registerComponent multiple times.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/externalComponent/index.html b/7.7.0/docs/externalComponent/index.html index 5a443cc8fc..bee7f1d679 100644 --- a/7.7.0/docs/externalComponent/index.html +++ b/7.7.0/docs/externalComponent/index.html @@ -7,15 +7,15 @@ External Component | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -27,14 +27,14 @@
@Override
public View asView() {
return content;
}
}

Registering the component#

public class MainApplication extends NavigationApplication {
@Override
public void onCreate() {
super.onCreate();
registerExternalComponent("MyExternalComponent", new FragmentCreator());
}
}

iOS#

ViewController registration#

[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:

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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/functionalComponents/index.html b/7.7.0/docs/functionalComponents/index.html index e4379b5e95..e2b1b637e4 100644 --- a/7.7.0/docs/functionalComponents/index.html +++ b/7.7.0/docs/functionalComponents/index.html @@ -7,15 +7,15 @@ Using functional components as screens | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -26,14 +26,14 @@
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 (
<View>
<Text>Screen Component</Text>
</View>
)
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/installing/index.html b/7.7.0/docs/installing/index.html index b3cee59064..d75b13ae62 100644 --- a/7.7.0/docs/installing/index.html +++ b/7.7.0/docs/installing/index.html @@ -7,15 +7,15 @@ Installation | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -36,14 +36,14 @@
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}"
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/meta-contributing/index.html b/7.7.0/docs/meta-contributing/index.html index 2e04a91f2f..4c256bfe61 100644 --- a/7.7.0/docs/meta-contributing/index.html +++ b/7.7.0/docs/meta-contributing/index.html @@ -7,28 +7,28 @@ Contributing | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

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 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 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.
  1. 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.

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:

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 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". 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 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.

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 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 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 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 with Prettier 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#

FolderDescription
libThe project itself composed of:
lib/androidandroid sources and unit tests
lib/iosiOS sources and unit tests
lib/srcTypeScript sources and unit tests
lib/distcompiled javascript sources and unit tests
lib/dist/index.jsthe entry point for import Navigation from 'react-native-navigation'
e2edetox e2e tests on both Android and iOS
playgroundThe 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 <root>/lib for faster local development (no need to npm install locally).
integrationmisc javascript integration tests, proving integration with other libraries like redux
scriptsall scripts

Scripts#

CommandDescription
npm installinstalls dependencies
npm run buildcompiles TypeScript sources ./lib/src into javascript ./lib/dist
npm run cleancleans all build directories, stops packager, fixes flakiness by removing watchman cache, etc.
npm run startstarts the react-native packager for local debugging
npm run xcodefor convenience, opens xcode in this project
npm run install-androidbuilds playground debug/release version and installs on running android devices/emulators.
Options: -- --release
npm run uninstall-androiduninstalls playground from running android devices/simulators
npm run test-jsruns javascript tests and coverage report
npm run test-unit-iosruns ios unit tests in debug/release
Options: -- --release
npm run test-unit-androidruns android unit tests in debug/release
Options: -- --release
npm run test-e2e-iosruns the ios e2e tests using detox in debug/release
Options: -- --release
npm run test-e2e-androidruns the android e2e tests using detox in debug/release
Options: -- --release
npm run test-allruns all tests in parallel
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/modal/index.html b/7.7.0/docs/modal/index.html index 9d9c7b49f6..a98baf7174 100644 --- a/7.7.0/docs/modal/index.html +++ b/7.7.0/docs/modal/index.html @@ -7,15 +7,15 @@ Modal | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -28,14 +28,14 @@ when the button is pressed.

Android#

On Android, modals can be dismissed with the hardware back button. You can handle the back press your self by adding a BackHandler

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 determines the look and feel of a screen displayed as modal.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/overlay/index.html b/7.7.0/docs/overlay/index.html index db12c5d2f3..bb06bb0457 100644 --- a/7.7.0/docs/overlay/index.html +++ b/7.7.0/docs/overlay/index.html @@ -7,15 +7,15 @@ Overlay | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -30,14 +30,14 @@
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;
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/passing-data-to-components/index.html b/7.7.0/docs/passing-data-to-components/index.html index 0955528acc..22fb53e842 100644 --- a/7.7.0/docs/passing-data-to-components/index.html +++ b/7.7.0/docs/passing-data-to-components/index.html @@ -7,27 +7,27 @@ Passing data to components | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Passing data to components

Initial props#

React components use props to receive data when they are created. When displaying the 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:

Navigation.push(this.props.componentId, {
component: {
name: 'UserProfile',
id: 'PROFILE_SCREEN_ID'
passProps: {
name: 'John Doe',
status: 'online'
}
}
});
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, lets see how to use props passed in the push command to set the TopBar title.

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() command. Updating props triggers the component lifecycle methods related to updating.

Notice that we're using the component id in order to update props of this specific instance of the component.

Navigation.updateProps('PROFILE_SCREEN_ID', {
status: 'offline'
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/playground-app/index.html b/7.7.0/docs/playground-app/index.html index 043b4625a3..ca0f302f5d 100644 --- a/7.7.0/docs/playground-app/index.html +++ b/7.7.0/docs/playground-app/index.html @@ -7,28 +7,28 @@ Playground app | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

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). Before you start changing things, make sure everything works.
    - To easily run all tests in parallel `npm run test-all`
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/root/index.html b/7.7.0/docs/root/index.html index 706153d041..f88890d9f8 100644 --- a/7.7.0/docs/root/index.html +++ b/7.7.0/docs/root/index.html @@ -7,28 +7,28 @@ Root | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Root

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.

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.

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:
Navigation.setRoot({
root: {
stack: {
children: [
{
component: {
name: 'LOGIN_SCREEN'
}
}
]
}
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/screen-lifecycle/index.html b/7.7.0/docs/screen-lifecycle/index.html index 6a983590e1..f82a8cfbb2 100644 --- a/7.7.0/docs/screen-lifecycle/index.html +++ b/7.7.0/docs/screen-lifecycle/index.html @@ -7,27 +7,27 @@ Screen Lifecycle | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

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, 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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/showcases/index.html b/7.7.0/docs/showcases/index.html index c04b0a9408..f4460c000c 100644 --- a/7.7.0/docs/showcases/index.html +++ b/7.7.0/docs/showcases/index.html @@ -7,15 +7,15 @@ Showcases | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -23,14 +23,14 @@
# 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
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/sideMenu-disable/index.html b/7.7.0/docs/sideMenu-disable/index.html index 2cb3aac55d..d06ba28670 100644 --- a/7.7.0/docs/sideMenu-disable/index.html +++ b/7.7.0/docs/sideMenu-disable/index.html @@ -7,15 +7,15 @@ Disable Open and Close gesture | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -24,14 +24,14 @@
constructor(props) {
super(props);
Navigation.events().bindComponent(this);
}
render() {
return (
<View>
<Text>Click the hamburger icon to open the side menu</Text>
</View>
);
}
navigationButtonPressed({ buttonId }) {
if (buttonId === 'sideMenu') {
Navigation.mergeOptions(this, {
sideMenu: {
left: {
visible: true
}
}
});
}
}
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/sideMenu/index.html b/7.7.0/docs/sideMenu/index.html index 70568ebc94..a066b9e9ea 100644 --- a/7.7.0/docs/sideMenu/index.html +++ b/7.7.0/docs/sideMenu/index.html @@ -7,15 +7,15 @@ Side Menu | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -24,14 +24,14 @@
constructor(props) {
super(props);
Navigation.events().bindComponent(this);
}
render() {
return (
<View>
<Text>Click the hamburger icon to open the side menu</Text>
</View>
);
}
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:

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).

Navigation.push('CenterStack', {
component: {
name: Screens.Pushed,
options: {
sideMenu: {
left: {
visible: false
}
}
}
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/stack-backButton/index.html b/7.7.0/docs/stack-backButton/index.html index a59f689ab6..267480fd25 100644 --- a/7.7.0/docs/stack-backButton/index.html +++ b/7.7.0/docs/stack-backButton/index.html @@ -7,27 +7,27 @@ The Back button | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

The 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.

backButton: {
color: 'red',
icon: require('../../img/customChevron.png')
}

Controling visibility#

The back buttons visbility can be controlled with the visible property.

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.

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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/stack-backNavigation/index.html b/7.7.0/docs/stack-backNavigation/index.html index f96396281f..c27c97949c 100644 --- a/7.7.0/docs/stack-backNavigation/index.html +++ b/7.7.0/docs/stack-backNavigation/index.html @@ -7,27 +7,27 @@ Back Navigation | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Back Navigation

Disabling back navigation#

Handling back navigation#

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/stack-buttons/index.html b/7.7.0/docs/stack-buttons/index.html index 1c162e46c4..9028712cf6 100644 --- a/7.7.0/docs/stack-buttons/index.html +++ b/7.7.0/docs/stack-buttons/index.html @@ -7,29 +7,29 @@ TopBar Buttons | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

TopBar Buttons

Buttons can be added to the right and left 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 with the relevant actions when the button is clicked.

On Android, use the 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:

Navigation.registerComponent('ButtonComponent', () => require('./ButtonComponent'));

Now you can create buttons which use the component registered with 'ButtonComponent' as thier custom view:

topBar: {
rightButtons: [
{
component: {
name: '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

// Declare the button and assign it a unique id
topBar: {
rightButtons: [
{
id: 'SomeUniqueId',
component: {
name: '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.

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.

Navigation.mergeOptions(this.props.componentId, {
topBar: {
rightButtons: [],
},
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/stack-programmatically/index.html b/7.7.0/docs/stack-programmatically/index.html index 9cf7d87f2e..7c24d048af 100644 --- a/7.7.0/docs/stack-programmatically/index.html +++ b/7.7.0/docs/stack-programmatically/index.html @@ -7,15 +7,15 @@ Interact programmatically with the Stack | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -23,14 +23,14 @@ 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.

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.

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'
}
});
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/stack/index.html b/7.7.0/docs/stack/index.html index 823b467afc..097fefff57 100644 --- a/7.7.0/docs/stack/index.html +++ b/7.7.0/docs/stack/index.html @@ -7,15 +7,15 @@ Stack | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -26,14 +26,14 @@ 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.

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.

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

Disabling back navigation#

Handling back navigation#

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/style-animations/index.html b/7.7.0/docs/style-animations/index.html index 721aeced76..e66fa0d77c 100644 --- a/7.7.0/docs/style-animations/index.html +++ b/7.7.0/docs/style-animations/index.html @@ -7,15 +7,15 @@ Animations | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -24,14 +24,14 @@ your screens during screen transitions.

Animation properties#

The following properties can be animated with our animation framework:

Layout animations#

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.

options: {
animations: {
push: {
content: {
translationX: {
from: require('react-native').Dimensions.get('window').width,
to: 0,
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 following example demonstrates how to show a modal with a fade-in animation.

options: {
animations: {
showModal: {
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 and the Destination screen

Shared Element Transition

Four elements are animated in this example. Let's list the elements involved in the transition and note which properties are being animated.

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.

<Image
source={item.image}
nativeID={`image${item.id}`}
style={styles.image}
resizeMode={'contain'}
/>

Step 2 - set a nativeID prop to elements in the destination screen#

<Image source={this.props.image} nativeID={`image${this.props.id}Dest`} style={styles.image} />

Step 3 - Declare the shared element animation when pushing the screen#

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 types are supported:

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.

<Text nativeID="description" style={styles.description}>
{this.props.description}
</Text>

Step 2 - Declare the element animation when pushing the screen#

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

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 = (
<Navigation.TouchablePreview
touchableComponent={TouchableHighlight}
onPress={handlePress}
onPressIn={handlePress}
>
<Text>My button</Text>
</Navigation.TouchablePreview>
);

All options except for reactTag are optional. Actions trigger the same event as navigation button presses. To react when a preview is committed, listen to the previewCompleted event.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/style-constants/index.html b/7.7.0/docs/style-constants/index.html index 80a9670e2c..bdceec1ae7 100644 --- a/7.7.0/docs/style-constants/index.html +++ b/7.7.0/docs/style-constants/index.html @@ -7,27 +7,27 @@ Constants | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

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:

const { Navigation } = require('react-native-navigation');
const {
statusBarHeight,
topBarHeight,
bottomTabsHeight
} = await Navigation.constants();
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/style-fonts/index.html b/7.7.0/docs/style-fonts/index.html index cdfe9a2728..388908e107 100644 --- a/7.7.0/docs/style-fonts/index.html +++ b/7.7.0/docs/style-fonts/index.html @@ -7,27 +7,27 @@ Changing fonts | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

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

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#

options: {
bottomTab: {
fontFamily: 'helvetica'
}
}

Button font#

options: {
rightButtons: [
{
id: 'SAVE_BUTTON',
text: 'Save',
fontFamily: 'helvetica'
}
],
leftButtons: [
{
id: 'CANCEL_BUTTON',
text: 'Cancel',
fontFamily: 'helvetica'
}
]
}

Title font#

options: {
topBar: {
title: {
fontFamily: 'helvetica'
}
}
}

Subtitle font#

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.

options: {
topBar: {
backButton: {
fontFamily: 'helvetica'
}
}
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/style-options/index.html b/7.7.0/docs/style-options/index.html index 88e4c51197..894d1d560a 100644 --- a/7.7.0/docs/style-options/index.html +++ b/7.7.0/docs/style-options/index.html @@ -7,15 +7,15 @@ Styling with options | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -32,14 +32,14 @@
class ExperimentScreen extends NavigationComponent {
static options(): Options {
const ExperimentsManager = require('./ExperimentsManager');
const food = ExperimentsManager.isActive('VeganExperiment') ? 'Tofu' : 'Hamburger';
return {
topBar: {
title: {
text: `Hello ${food}!`,
},
},
};
}
}

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.

import { Navigation } from 'react-native-navigation';
Navigation.mergeOptions(componentId, {
topBar: {
background: {
color: 'red',
},
},
});
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).

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.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/style-orientation/index.html b/7.7.0/docs/style-orientation/index.html index a606d92003..5d58a19af3 100644 --- a/7.7.0/docs/style-orientation/index.html +++ b/7.7.0/docs/style-orientation/index.html @@ -7,27 +7,27 @@ Orientation | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

Orientation

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.

Navigation.setDefaultOptions({
layout: {
orientation: ['portrait']
}
});

Changing orientation dynamically#

Changing orientation dynamically through Navigation.mergeOption() is supported only on Android.

Navigation.mergeOptions(this.props.componentId, {
layout: {
orientation: ['landscape']
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/style-statusBar/index.html b/7.7.0/docs/style-statusBar/index.html index edf45b1b73..f6bf6a345a 100644 --- a/7.7.0/docs/style-statusBar/index.html +++ b/7.7.0/docs/style-statusBar/index.html @@ -7,27 +7,27 @@ StatusBar | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.7.0

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)

options: {
statusBar: {
backgroundColor: 'white',
style: 'dark'
}
}
Compatibility with StatusBar component

React native's StatusBar 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

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.

options: {
statusBar: {
backgroundColor: null
}
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/style-theme/index.html b/7.7.0/docs/style-theme/index.html index 0c3e2c4ac9..8e5302f95b 100644 --- a/7.7.0/docs/style-theme/index.html +++ b/7.7.0/docs/style-theme/index.html @@ -7,15 +7,15 @@ Themes | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -29,14 +29,14 @@
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;
});

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.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/third-party-mobx/index.html b/7.7.0/docs/third-party-mobx/index.html index ec92e424c7..3f8a923cfb 100644 --- a/7.7.0/docs/third-party-mobx/index.html +++ b/7.7.0/docs/third-party-mobx/index.html @@ -7,15 +7,15 @@ MobX | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -47,14 +47,14 @@
// 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.
});
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/third-party-react-context/index.html b/7.7.0/docs/third-party-react-context/index.html index 5b30ad702c..2c36335461 100644 --- a/7.7.0/docs/third-party-react-context/index.html +++ b/7.7.0/docs/third-party-react-context/index.html @@ -7,15 +7,15 @@ React Context API | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -36,14 +36,14 @@
export const App = () => {
// Using useContext API
const { count, increment, decrement } = React.useContext(CounterContext);
return (
<View>
<Text>{`Clicked ${count} times!`}</Text>
<Button title="Increment" onPress={increment} />
<Button title="Decrement" onPress={decrement} />
</View>
);
};
// App.tsx
import React from 'react';
import { Button, Text, View } from 'react-native';
import { CounterContext } from './CounterContext';
export const App = () => {
// Using Context consumer
return (
<CounterContext.Consumer>
{({ count, increment, decrement }) => (
<View>
<Text>{`Clicked ${count} times!`}</Text>
<Button title="Increment" onPress={increment} />
<Button title="Decrement" onPress={decrement} />
</View>
)}
</CounterContext.Consumer>
);
};
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/7.7.0/docs/third-party-typescript/index.html b/7.7.0/docs/third-party-typescript/index.html index dd3d8395f3..04f55ba4eb 100644 --- a/7.7.0/docs/third-party-typescript/index.html +++ b/7.7.0/docs/third-party-typescript/index.html @@ -7,15 +7,15 @@ TypeScript | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -28,14 +28,14 @@
// Static options are also supported!
MyFunctionalComponent.options = {
topBar: {
title: {
text: 'Hello functional component',
},
},
};
export default MyFunctionalComponent;

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.

import { Navigation } from 'react-native-navigation';
interface Props {
name: string;
}
Navigation.push<Props>(componentId, {
component: {
name: 'MyComponent',
passProps: {
name: 'Bob',
// @ts-expect-error
color: 'red', // Compilation error! color isn't declared in Props
},
},
});

The following commands accept typed passProps:

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/component/index.html b/api/component/index.html index 9e3c514043..dd09bd1d04 100644 --- a/api/component/index.html +++ b/api/component/index.html @@ -7,28 +7,28 @@ Component | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Component

registerComponent#

Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component or React.PureComponent. It can also be a HOC to provide context (or a Redux store) or a functional component. Similar to React Native's AppRegistry.registerComponent.

Parameters#

NameRequiredTypeDescription
componentNameYesstringUnique component name - not to be confused with componentId
componentProviderYesFunctionAnonymous function that returns the React component to register, OR the component wrapped with Providers
concreteComponentProviderNoFunctionAnonymous function that returns the concrete React component. If your component is wrapped with Providers, this must be an instance of the concrete component.

Examples#

Registering a component#
Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
Registering a component wrapped with Providers#
import { Provider } from 'react-redux';
const store = createStore();
Navigation.registerComponent(`navigation.playground.MyScreen`, () => (props) =>
<Provider store={store}>
<MyScreen {...props} />
</Provider>,
() => MyScreen)
);

setLazyComponentRegistrator#

Pass a function that will allow you to register a component lazily. When encountering an unknown component name, this function will be called, giving you a chance to register the component before an error is thrown.

Parameters#

NameRequiredTypeDescription
lazyRegistratorFnYes(lazyComponentRequest: stringnumber) => void

Example#

Navigation.setLazyComponentRegistrator((componentName) => {
if (componentName === 'navigation.playground.LazyScreen') {
Navigation.registerComponent(Screens.LazilyRegisteredScreen, () => LazyScreen);
}
});

updateProps#

Update props of a component registered with registerComponent. Updating props triggers the component lifecycle methods related to updating.

Parameters#

NameRequiredTypeDescription
componentIdYesstringUnique component id
optionsYesobjectProps object to pass to the component
callbackNoFunctionFunction that will be executed once inner setState is completed

Example#

Navigation.updateProps('MY_COMPONENT', {
// props to pass to the component
};
important

updateProps is called with a componentId. This is the same unique id components have in props. Don't confuse it with the componentName we use when registering components with Navigation.registerComponent.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/events/index.html b/api/events/index.html index 1078e0c65f..dbe2e64a4d 100644 --- a/api/events/index.html +++ b/api/events/index.html @@ -7,15 +7,15 @@ Events | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -44,14 +44,14 @@
searchBarCancelPressed() {}
}

previewCompleted (iOS 11.4+ only)#

Called when preview peek is completed.

class MyComponent extends Component {
componentDidMount() {
this.navigationEventListener = Navigation.events().bindComponent(this);
}
componentWillUnmount() {
// Not mandatory
if (this.navigationEventListener) {
this.navigationEventListener.remove();
}
}
previewCompleted({ previewComponentId }) {}
}
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/layout-bottomTabs/index.html b/api/layout-bottomTabs/index.html index 30c842e286..4ffe64623e 100644 --- a/api/layout-bottomTabs/index.html +++ b/api/layout-bottomTabs/index.html @@ -7,27 +7,27 @@ Bottom Tabs | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Bottom Tabs

A container view for managing a radio-style selection interface, where a selection determines which child view controller to display.

{
id: 'BOTTOM_TABS_LAYOUT',
children: [
{
component: {
id: 'HOME_SCREEN',
name: 'HomeScreen'
}
},
{
stack: {
id: 'PROFILE_TAB',
children: [
{
component: {
id: 'PROFILE_SCREEN',
name: 'ProfileScreen'
}
}
]
}
}
]
}

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation api, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

children#

TypeRequiredDescription
Layout[]YESChild layouts of any kind.

options#

TypeRequiredDescription
OptionsNodynamic options which will apply to all screens in bottomTabs
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/layout-component/index.html b/api/layout-component/index.html index 32aff22bc1..161fc7b996 100644 --- a/api/layout-component/index.html +++ b/api/layout-component/index.html @@ -7,27 +7,27 @@ Component | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Component

{
name: "MyRegisteredComponent";
}

name#

TypeRequiredDescription
stringYesKey used when registering the component with Navigation.registerComponent.

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation api, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

options#

TypeRequiredDescription
OptionsNodynamic options for the component

alignment#

TypeRequiredDescription
enum('center', 'fill')NoThis option is relevant only to title components. fill will make the component stretch and consume all available space in the TopBar while center will center it in the middle of the TopBar. center is the default option in iOS while fill is the default for Android.

waitForRender#

TypeRequiredDescription
booleanNoWait for this component to fully render before showing the screen.

This option is useful for ensuring that both a child screen pushed into the stack and all of the TopBar components (title, background and buttons) are displayed to the user at the same time.

To enable this option, waitForRender in the relevant screen animation option needs to be enabled as well.

caution

This option might introduce delays when pushing screens and should be used with caution.

passProps#

TypeRequiredDescription
objectNoA JavaScript object with props accessible inside the component using this.props.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/layout-layout/index.html b/api/layout-layout/index.html index 210711a3ad..962ec0808f 100644 --- a/api/layout-layout/index.html +++ b/api/layout-layout/index.html @@ -7,27 +7,27 @@ Layout | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Layout

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation API, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

options#

TypeRequiredDescription
OptionsNodynamic options for the layout

children#

TypeRequiredDescription
Layout[]YesChild layouts of any kind.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/layout-sideMenu/index.html b/api/layout-sideMenu/index.html index 0b66f2e8eb..d0f0b2d047 100644 --- a/api/layout-sideMenu/index.html +++ b/api/layout-sideMenu/index.html @@ -7,27 +7,27 @@ Side Menu | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Side Menu

This layout allows implementing sidemenus, which can be opened by swiping from one side towards the other side.

{
left: {
component: {}
},
center: {
stack: {
options: {},
children: [{
component: {}
}]
}
},
right: {
component: {}
}
}

center#

TypeRequiredDescription
LayoutYesCenter component, contains the main application.

left#

TypeRequiredDescription
LayoutNoContains the left component layout.

right#

TypeRequiredDescription
LayoutNoContains the right component layout.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/layout-splitView/index.html b/api/layout-splitView/index.html index 842927e44f..3c8561af2c 100644 --- a/api/layout-splitView/index.html +++ b/api/layout-splitView/index.html @@ -7,28 +7,28 @@ SplitView | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

SplitView

A container view controller implementing a master-detail interface. See UISplitViewController docs. Currently implemented only in iOS.

{
id: 'PROFILE_TAB',
master: {
component: {
id: 'MASTER_SCREEN',
name: 'MasterScreen'
}
},
detail: {
component: {
id: 'DETAIL_SCREEN',
name: 'DetailScreen'
}
}
}

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation api, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

master#

TypeRequiredDescription
LayoutYESSet master layout (the smaller screen, sidebar)

detail#

TypeRequiredDescription
LayoutYESSet detail layout (the larger screen, flexes)

options#

TypeRequiredDescription
OptionsNodynamic options which will apply to all screens
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/layout-stack/index.html b/api/layout-stack/index.html index 6b72b2b72e..a5b8c04f8f 100644 --- a/api/layout-stack/index.html +++ b/api/layout-stack/index.html @@ -7,27 +7,27 @@ Stack | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Stack

A stack is a container layout promoting a hierarchical navigation. It is used to navigate between screens at consecutive levels of hierarchy, steps in a flow or across an app.

{
id: 'PROFILE_TAB',
children: [
{
component: {
id: 'PROFILE_SCREEN',
name: 'ProfileScreen'
}
}
]
}

id#

TypeRequiredDescription
stringNoUnique id used to interact with the view via the Navigation api, usually Navigation.mergeOptions which accepts the componentId as it's first argument.

children#

TypeRequiredDescription
Layout[]YESChild layouts of any kind.

options#

TypeRequiredDescription
OptionsNoOptions that will apply to all screens in stack
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/modal/index.html b/api/modal/index.html index ed0bee8db7..44e5018b49 100644 --- a/api/modal/index.html +++ b/api/modal/index.html @@ -7,27 +7,27 @@ Modal | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Modal

showModal()#

Show a screen as a modal.

Parameters#

NameRequiredTypeDescription
layoutYesLayoutAny type of layout. BottomTabs, Stack, SideMenu, Component
Navigation.showModal({
stack: {
children: [{
component: {
name: 'example.ModalScreen',
passProps: {
text: 'stack with one child'
},
options: {
topBar: {
title: {
text: 'Modal'
}
}
}
}
}]
}
});

dismissModal()#

Dismiss the current modal.

Parameters#

NameRequiredTypeDescription
componentIdYesstringAny component id presented in the modal
mergeOptionsNoOptionsOptions to be merged before dismissing the Modal.
Navigation.dismissModal(this.props.componentId);

dismissAllModals()#

Dismiss all current modals at the same time.

Parameters#

NameRequiredTypeDescription
mergeOptionsNoOptionsOptions to be merged before dismissing all modals.
Navigation.dismissAllModals();
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-animations/index.html b/api/options-animations/index.html index 7b2e2236a1..c33efad8a1 100644 --- a/api/options-animations/index.html +++ b/api/options-animations/index.html @@ -7,27 +7,27 @@ Animations | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Animations

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-api/index.html b/api/options-api/index.html index bb0bfab81d..020ea50b74 100644 --- a/api/options-api/index.html +++ b/api/options-api/index.html @@ -7,27 +7,27 @@ Options Commands | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Options Commands

setDefaultOptions#

Set default options for all screens. Useful for declaring a consistent style across the app.

Parameters#

NameTypeRequiredDescription
optionsOptionsYesOptions root

Example#

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

mergeOptions#

Change navigation options of a component or layout.

Parameters#

NameTypeRequiredDescription
componentIdstringYesThe component or layout id
optionsOptionsYesOptions root

Example#

Navigation.mergeOptions('componentId', {
bottomTabs: {
visible: false,
},
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-backButton/index.html b/api/options-backButton/index.html index ed49bd8bf5..315c8f4402 100644 --- a/api/options-backButton/index.html +++ b/api/options-backButton/index.html @@ -7,29 +7,29 @@ Back Button Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Back Button Options

Controls the back button styling.

const options = {
topBar: {
backButton: {},
},
};

accessibilityLabel#

Overrides the text that's read by the screen reader when the user interacts with the back button.

TypeRequiredPlatform
stringNoAndroid

id#

Button id for reference press event.

TypeRequiredPlatform
stringNoAndroid

color#

Change the back button color. This will change the text color as well.

TypeRequiredPlatform
colorNoBoth

icon#

Change the default back button icon.

TypeRequiredPlatform
ImageResourceNoBoth

sfSymbol#

SF Symbol to show as the back button

TypeRequiredPlatform
stringNoiOS 13+

showTitle#

Show or hide the text displayed next to the back button.

TypeRequiredPlatform
numberNoiOS

displayMode#

Set display mode of the back button. Currently works for iOS 14+ only. See: UINavigationItem.BackButtonDisplayMode

TypeRequiredPlatform
enum('default', 'generic', 'minimal')NoiOS

title#

Change the text displayed next to the title. Usually the back button shows the title of the previous screen.

TypeRequiredPlatform
stringNoiOS

visible#

Hide or show the back button.

TypeRequiredPlatform
booleanNoBoth

testID#

Used to interact with the back button in e2e tests.

TypeRequiredPlatform
stringNoBoth

enableMenu#

Enables iOS 14 back button menu display.

TypeRequiredPlatformDefault
booleanNoiOStrue

popStackOnPress#

Controls whether the default back button should pop screen or not.

TypeRequiredDefault
booleanNotrue
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-background/index.html b/api/options-background/index.html index 1dc57d9a1a..a915b5a0a1 100644 --- a/api/options-background/index.html +++ b/api/options-background/index.html @@ -7,27 +7,27 @@ Background Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Background Options

Controls the top bar background styling.

const options = {
topBar: {
background: {}
}
};

color#

Set the background color. Ignored if a component is specified.

TypeRequiredPlatform
ColorNoBoth

component#

Set a react component as the background. Useful when you need to show a gradient as background, for instance.

On Android, setting an id to the Component will prevent the component from being recreated each time it's used by a screen. The component will be created once and whenever possible it will be reused.

TypeRequiredPlatform
ComponentNoBoth

clipToBounds#

Clip the top bar background to bounds if set to true.

TypeRequiredPlatform
booleanNoiOS

translucent#

Allows the NavBar to be translucent (blurred).

TypeRequiredPlatform
booleanNoiOS

blur#

Enable background blur.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-bottomTab/index.html b/api/options-bottomTab/index.html index f1f83d2192..9a4c731ec0 100644 --- a/api/options-bottomTab/index.html +++ b/api/options-bottomTab/index.html @@ -7,27 +7,27 @@ Bottom Tab Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Bottom Tab Options

const options = {
bottomTab: {},
};

selectTabOnPress#

TypeRequiredPlatform
booleanNoBoth

popToRoot#

Pop to root of stack by tapping on already selected tab.

TypeRequiredPlatform
booleanNoAndroid

badge#

TypeRequiredPlatform
stringNoBoth

badgeColor#

TypeRequiredPlatform
colorNoBoth

animateBadge#

TypeRequiredPlatform
booleanNoAndroid

disableIconTint#

TypeRequiredPlatform
booleanNoBoth

dotIndicator#

TypeRequiredPlatform
DotIndicatorNoBoth

fontFamily#

TypeRequiredPlatform
stringNoBoth

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoBoth

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoBoth

fontSize#

TypeRequiredPlatform
numberNoBoth

icon#

TypeRequiredPlatform
ImageResourceNoBoth

iconWidth#

The width (in dp) of the icon.

TypeRequiredPlatform
numberNoAndroid

iconHeight#

The height (in dp) of the icon.

TypeRequiredPlatform
numberNoAndroid

iconColor#

TypeRequiredPlatform
colorNoBoth

selectedFontSize#

TypeRequiredPlatform
numberNoBoth

selectedIcon#

TypeRequiredPlatform
ImageResourceNoBoth

selectedIconColor#

TypeRequiredPlatform
colorNoBoth

iconInsets#

TypeRequiredPlatform
IconInsetsNoBoth

disableSelectedIconTint#

TypeRequiredPlatform
booleanNoAndroid

disableIconTint#

TypeRequiredPlatform
booleanNoAndroid

selectedTextColor#

TypeRequiredPlatform
colorNoBoth

testID#

TypeRequiredPlatform
stringNoBoth

accessibilityLabel#

Overrides the text that's read by the screen reader when the user interacts with the bottomTab button.

TypeRequiredPlatform
stringNoiOS

text#

TypeRequiredPlatform
stringNoBoth

textColor#

TypeRequiredPlatform
colorNoBoth

sfSymbol#

Set the SF symbol as icon (will be used primarily).

TypeRequiredPlatform
stringNoiOS 13+

sfSelectedSymbol#

Set the SF symbol as selected icon (will be used primarily)

TypeRequiredPlatform
stringNoiOS 13+

DotIndicator#

color?: color#
size?: number#
visible?: boolean#
animate?: boolean#

IconInsets#

top?: number#
left?: number#
right?: number#
bottom?: number#
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-bottomTabs/index.html b/api/options-bottomTabs/index.html index fb8a7c0e3f..620a625ee7 100644 --- a/api/options-bottomTabs/index.html +++ b/api/options-bottomTabs/index.html @@ -7,28 +7,28 @@ Bottom Tabs Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Bottom Tabs Options

const options = {
bottomTabs: {},
};

animate#

Controls whether toggling visibility states will be animated.

TypeRequiredPlatform
booleanNoBoth

animateTabSelection#

Controls wether tab selection is animated or not

TypeRequiredPlatform
booleanNoAndroid

backgroundColor#

Change the background color.

TypeRequiredPlatform
colorNoBoth

barStyle#

Controls whether the BottomTabs use dark (black) or light (default) visual style. Requires translucent: true.

TypeRequiredPlatform
enum('default','black')NoBoth

currentTabId#

Select a tab by the id (componentId) of a child contained in it. See Selecting tabs programmatically for a detailed explanation.

TypeRequiredPlatform
numberNoBoth

currentTabIndex#

TypeRequiredPlatform
numberNoBoth

drawBehind#

TypeRequiredPlatform
booleanNoBoth

elevation#

TypeRequiredPlatform
numberNoAndroid

hideShadow#

TypeRequiredPlatform
booleanNoiOS

hideOnScroll#

Hides the BottomTabs on scroll to increase the amount of content visible to the user. The options requires that the scrollable view will be the root view of the screen and that it specifies nestedScrollEnabled: true.

TypeRequiredPlatform
booleanNoAndroid

preferLargeIcons#

TypeRequiredPlatform
booleanNoAndroid

tabsAttachMode#

TypeRequiredPlatform
enum('together','afterInitialTab','onSwitchToTab')NoBoth

testID#

TypeRequiredPlatform
stringNoBoth

titleDisplayMode#

TypeRequiredPlatform
enum('alwaysShow','showWhenActive','alwaysHide')NoBoth

translucent#

A Boolean value that indicates whether the BottomTabs are translucent. For this option to function as expected the screen needs to be drawn behind the BottomTabs; Make sure the list component you're using (FlatList for example) is the root component in the screen and not SafeAreaView. When SafeAreView is the root component it shifts the content above the BottomTabs and the translucent effect isn't visible.

TypeRequiredPlatform
booleanNoiOS

visible#

TypeRequiredPlatform
booleanNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-button/index.html b/api/options-button/index.html index e8abd1c2bf..8f7340b834 100644 --- a/api/options-button/index.html +++ b/api/options-button/index.html @@ -7,27 +7,27 @@ Button Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Button Options

const options = {
topBar: {
leftButtons: [
{
id: 'id',
text: 'Button',
},
],
},
};

allCaps#

This option will set whether characters are all capitalized or not.

TypeRequiredPlatformDefault
booleanNoAndroidtrue

fontSize#

If the button has text, this option is used to set font size in DP.

TypeRequiredPlatform
numberNoBoth

fontFamily#

TypeRequiredPlatform
stringNoBoth

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoBoth

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoBoth

id#

Buttons are identified by their id property. When a button is clicked, a buttonPress event is emitted to js, containing the id of the clicked button.

TypeRequiredPlatform
stringYesBoth

icon#

Button icon. If the button is pushed to the overflow menu, the button text is used instead.

TypeRequiredPlatform
ImageResourceNoBoth

sfSymbol#

SF Symbol to show as the back button

TypeRequiredPlatform
stringNoiOS 13+

text#

Button text. Ignored if an icon is specified, unless the button is displayed in the overflow menu.

TypeRequiredPlatform
stringNoBoth

showAsAction#

TypeRequiredPlatform
enum('always', 'never', 'withText', 'ifRoom')NoAndroid
  • ifRoom - Only add button to the TopBar if there is room for it, otherwise add it to the overflow menu.
  • never - Never place this button in the TopBar. Instead, list the button in the overflow menu.
  • always - Always place this button in the app bar.

component#

Set a react component as this button's view which will be displayed instead of the regular view.

TypeRequiredPlatform
ComponentNoBoth

iconInsets#

IconInsets are applied to the icon to translate its original position on the screen.

TypeRequiredPlatform
IconInsetsNoiOS

systemItem#

System icon; ignored if an icon is specified. For more information, see apple's guidelines.

TypeRequiredPlatform
enum('done', 'cancel', 'edit', 'save', 'add', 'flexibleSpace', 'fixedSpace', 'compose', 'reply', 'action', 'organize', 'bookmarks', 'search', 'refresh', 'stop', 'camera', 'trash', 'play', 'pause', 'rewind', 'fastForward', 'undo', 'redo')NoiOS

iconBackground#

iconBackground is applied to the icon's background.

TypeRequiredPlatform
iconBackgroundNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-fab/index.html b/api/options-fab/index.html index 9b856ca43d..aab45fd6db 100644 --- a/api/options-fab/index.html +++ b/api/options-fab/index.html @@ -7,27 +7,27 @@ Fab | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Fab

Controls the FAB button styling on Android.

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

id#

Button id for reference press event.

Note

This option is mandatory when you are initiating the FAB button. However you do not need to pass in id when updating the Fab button options with Navigation.mergeOptions.

TypeRequiredPlatform
stringNoAndroid

icon#

Change the default back button icon.

TypeRequiredPlatform
numberNoAndroid

iconColor#

Change the icon color of the FAB button.

TypeRequiredPlatform
colorNoAndroid

backgroundColor#

Change the background color of the FAB button.

TypeRequiredPlatform
colorNoAndroid

clickColor#

Change the on-clicked background color of the FAB button.

TypeRequiredPlatform
colorNoAndroid

rippleColor#

Change the ripple color of the FAB button.

TypeRequiredPlatform
colorNoAndroid

visible#

Show or hide the FAB button.

TypeRequiredPlatform
booleanNoAndroid

alignHorizontally#

Set the horizontal position of the FAB button on the screen.

TypeRequiredPlatform
'left' or 'right'NoAndroid

hideOnScroll#

Hide the FAB button on scroll.

TypeRequiredPlatform
booleanNoAndroid

size#

Set the size of the FAB button.

TypeRequiredPlatform
'mini' or 'regular'NoAndroid
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-hardwareBackButton/index.html b/api/options-hardwareBackButton/index.html index 566f44217f..3f3bff739e 100644 --- a/api/options-hardwareBackButton/index.html +++ b/api/options-hardwareBackButton/index.html @@ -7,15 +7,15 @@ Hardware Back Button Options | React Native Navigation - - - - - - - - - + + + + + + + + +
@@ -23,14 +23,14 @@ first will jump to first tab, previous will do reverse selection, exit (Default) will just exit the bottom tabs.

TypeRequiredDefaultPlatform
enum('exit', 'first', 'previous')No'exit'Android
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-iconBackground/index.html b/api/options-iconBackground/index.html index 60fe3c4808..621f1238dc 100644 --- a/api/options-iconBackground/index.html +++ b/api/options-iconBackground/index.html @@ -7,27 +7,27 @@ iconBackground Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

iconBackground Options

color#

Set the background color.

TypeRequiredPlatform
ColorNoBoth

width#

Set the background width.

TypeRequiredPlatform
numberNoBoth

height#

Set the background height.

TypeRequiredPlatform
numberNoBoth

cornerRadius#

Set the background cornerRadius.

TypeRequiredPlatform
numberNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-iconInsets/index.html b/api/options-iconInsets/index.html index f21cb2a712..6de2f518c7 100644 --- a/api/options-iconInsets/index.html +++ b/api/options-iconInsets/index.html @@ -7,27 +7,27 @@ IconInsets Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

IconInsets Options

top#

Configure top inset

TypeRequiredPlatform
numberNoBoth

bottom#

Configure bottom inset

TypeRequiredPlatform
numberNoBoth

left#

Configure left inset

TypeRequiredPlatform
numberNoBoth

right#

Configure right inset

TypeRequiredPlatform
numberNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-imageResource/index.html b/api/options-imageResource/index.html index c18a73fab8..fece380520 100644 --- a/api/options-imageResource/index.html +++ b/api/options-imageResource/index.html @@ -7,27 +7,27 @@ Image Resource | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Image Resource

ImageResource#

const options = {
topBar: {
leftButtons: [
icon: require('./backButton.png')
]
},
};

The following icon types are available:

TypeRequiredPlatform
ImageRequireSourceNoBoth
stringNoBoth
ImageSystemSourceNoiOS

ImageSystemSource#

system#

You can use platform specific system icons for iOS only.

Example:

const options = {
topBar: {
leftButtons: [
icon: {
system: 'calendar',
fallback: require('./calendar.png')
}
]
},
};
TypeRequiredPlatform
stringYesiOS 13+

fallback#

TypeRequiredPlatform
FallbackSourceNoiOS 13+

FallbackSource#

For iOS, SF Symbols is available only for iOS 13 and later. For iOS 12 and earlier you should use a fallback icon.

ImageRequireSource#

TypeRequiredPlatform
numberNoBoth

string#

TypeRequiredPlatform
numberNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-largeTitle/index.html b/api/options-largeTitle/index.html index f72a35755f..9d282361c2 100644 --- a/api/options-largeTitle/index.html +++ b/api/options-largeTitle/index.html @@ -7,27 +7,27 @@ Large Title Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Large Title Options

Controls the top bar large title on iOS, available on iOS 11 and above.

const options = {
topBar: {
largeTitle: {},
},
};

visible#

Controls whether the large title is visible or not.

TypeRequiredPlatform
booleanNoiOS

fontSize#

Set the title font size. On Android this value is in sp.

TypeRequiredPlatform
numberNoiOS

color#

Large title text color.

TypeRequiredPlatform
ColorNoiOS

fontFamily#

Set the large title FontFamily.

TypeRequiredPlatform
FontFamilyNoiOS

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoiOS

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-layout/index.html b/api/options-layout/index.html index e8c4f809a3..b09035dda7 100644 --- a/api/options-layout/index.html +++ b/api/options-layout/index.html @@ -7,27 +7,27 @@ Layout Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Layout Options

const options = {
layout: {},
};

fitSystemWindows#

TypeRequiredPlatform
booleanNoBoth

backgroundColor#

Set the screen background color.

TypeRequiredPlatform
ColorNoBoth

componentBackgroundColor#

Set background color only for components. On Android, using this option instead of backgroundColor helps reduce overdraw.

TypeRequiredPlatform
ColorNoBoth

orientation#

Set the allowed orientations.

TypeRequiredPlatform
['portrait', 'landscape']NoBoth

topMargin#

Set the layout top margin.

TypeRequiredPlatform
numberNoAndroid

direction#

Set language direction, only works with DefaultOptions. locale is an Android specific option which sets the direction according to the device locale.

TypeRequiredPlatform
enum('rtl', 'ltr', 'locale')NoBoth

autoHideHomeIndicator#

Controls the application's preferred home indicator auto-hiding.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-migration/index.html b/api/options-migration/index.html index 7ec6560ef3..f31a0da8d7 100644 --- a/api/options-migration/index.html +++ b/api/options-migration/index.html @@ -7,27 +7,27 @@ options-migration | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

options-migration

Common Options#

navBarTextColor#

Title text color

topBar: {
title: {
color: 'red'
}
}

navBarTextFontSize#

Title font size

topBar: {
title: {
fontSize: 18
}
}

navBarTextFontFamily#

Title font

topBar: {
title: {
fontFamily: 'Helvetica'
}
}

navBarBackgroundColor#

TopBar background color

topBar: {
background: {
color: 'red'
}
}

navBarCustomView#

Use a react view as the TopBar's background or use a React view instead of the textual title.

topBar: {
background: {
component: {
name: 'example.CustomTopBarBackground'
}
},
title: {
component: {
name: 'example.CustomTopBarTitle'
}
}
}

navBarClipToBounds#

Restrict the navbar background color to the navbar, and do not flow behind the status bar.

topBar: {
background: {
component: {
name: 'example.CustomTopBarBackground',
clipToBounds: true
}
},
}

navBarComponentAlignment#

Align the React view used as the title

topBar: {
title: {
component: {
name: 'example.CustomTopBarTitle',
alignment: 'center' | 'fill'
}
}
}

navBarCustomViewInitialProps#

Initial props passed to the React component

topBar: {
background: {
component: {
name: 'example.CustomTopBarBackground',
passProps: {}
}
},
title: {
component: {
name: 'example.CustomTopBarTitle',
passProps: {}
}
}
}

navBarButtonColor#

TopBar button color

topBar: {
rightButtons: [
{
color: 'red'
}
],
leftButtons: [
{
color: 'red'
}
],
backButton: {
color: 'red'
}
}

navBarHidden#

TopBar visibility. When setting visible: false, you probably want to set drawBehind: true as well. Use animate: false to toggle visibility without animation.

topBar: {
visible: false
}

navBarTransparent#

Transparent TopBar. Set drawBehind: true to draw the screen behind the transparent TopBar.

topBar: {
background: {
color: 'transparent'
}
}

drawUnderNavBar#

Draw the screen behind the TopBar, Useful when the TopBar is toggled or transparent

topBar: {
drawBehind: true
}

drawUnderTabBar#

Draw the screen behind the BottomTabs, Useful when toggling BottomTabs or when the BottomTabs are translucent.

bottomTabs: {
drawBehind: true
}

tabBarHidden#

BottomTabs visibility.

bottomTabs: {
visible: false
}

The BottomTab's visibility can be toggled only on Android using mergeOptions:

Navigation.mergeOptions(this.props.componentId, {
bottomTabs: {
visible: false
}
});

On iOS, BottomTab visibility can be changed only when pushing screens. This means that if you'd like to hide BottomTabs when pushing a screen, You'll need to set the property to false in the options passed to the push command or via the static options(passProps) {} api.

statusBarHidden#

StatusBar visibility. For android, also set drawBehind: true.

statusBar: {
visible: false
}

statusBarTextColorScheme#

Theme of text and icons displayed in the StatusBar

statusBar: {
style: 'light' | 'dark'
}

navBarSubtitleColor#

Subtitle color

topBar: {
subtitle: {
color: 'red'
}
}

navBarSubtitleFontFamily#

Subtitle font

topBar: {
subtitle: {
fontFamily: 'Helvetica'
}
}

navBarSubtitleFontSize#

Subtitle font size

topBar: {
subtitle: {
fontSize: 14
}
}

screenBackgroundColor#

Screen color, visible before the actual React view is rendered

layout: {
backgroundColor: 'red'
}

orientation#

layout: {
orientation: ['portrait', 'landscape'] // An array of supported orientations
}

disabledButtonColor#

Button color when enabled: false is used

topBar: {
rightButtons: [
{
disabledColor: 'grey'
}
]
}

navBarButtonFontSize#

Button font size

topBar: {
rightButtons: [
{
fontSize: 13
}
],
leftButtons: [
{
fontSize: 13
}
]
}

navBarLeftButtonFontSize#

Left button font size

{
topBar: {
leftButtons: [
{
fontSize: 13
}
]
}
}

navBarLeftButtonColor#

Left button color

{
topBar: {
leftButtons: [
{
color: 'red'
}
]
}
}

navBarLeftButtonFontWeight#

Left button font weight

{
topBar: {
leftButtons: [
{
weight: '300'
}
]
}
}

navBarRightButtonFontSize#

Right button font size

topBar: {
leftButtons: [
{
fontSize: 13
}
]
}

navBarRightButtonColor#

Right button color

topBar: {
rightButtons: [
{
color: 'red'
}
]
}

navBarRightButtonFontWeight#

Right button font weight

topBar: {
rightButtons: [
{
weight: '400'
}
]
}

modalPresentationStyle#

Controls the behavior of screens displayed modally.

Options supported on iOS#

  • overCurrentContext - Content is displayed over the previous screen. Useful for transparent modals
  • formSheet - Content is centered in the screen
  • pageSheet -Content partially covers the underlying content
  • overFullScreen - Content covers the screen, without detaching previous content.
  • fullScreen - Content covers the screen, previous content is detached.
  • popover - Content is displayed in a popover view.

More information on the different styles for iOS can be found on https://developer.apple.com/documentation/uikit/uimodalpresentationstyle

Options supported on Android#

  • overCurrentContext - Content is displayed over the previous screen. Useful for transparent modals
  • none - Previous content is detached when the Modal's show animation ends
{
modalPresentationStyle: 'overCurrentContext'
}

navBarButtonFontFamily#

Button font family

topBar: {
rightButtons: [
{
fontFamily: 'Helvetica'
}
]
}

iOS only#

navBarHideOnScroll#

Hide TopBar when list is scrolled

topBar: {
hideOnScroll: true
}

navBarTranslucent#

Translucent TopBar, Setting drawBehind: true is required for this property to work as expected.

topBar: {
drawBehind: true,
background: {
translucent: true
}
}

navBarNoBorder#

Remove TopBar border (hair line)

topBar: {
noBorder: true
}

navBarBlur#

Blur the area behind the TopBar, Setting drawBehind: true and topBar background transparent: true is required for this property to work as expected.

topBar: {
drawBehind: true,
background: {
blur: true,
transparent: true
}
}

rootBackgroundImageName#

  • iOS: name of image in Images.xcassets
  • Android: name of drawable
{
rootBackgroundImage: require('rootBackground.png')
}

screenBackgroundImageName#

name of image in Images.xcassets

{
backgroundImage: require('background.png')
}

statusBarHideWithNavBar#

Hide the StatusBar if the TopBar is also hidden

statusBar: {
hideWithTopBar: true
}

statusBarBlur#

Blur the area behind the StatusBar

statusBar: {
blur: true
}

statusBarAnimate#

Animate between style changes of the StatusBar

statusBar: {
animate: true
}

disabledBackGesture#

Disable the back (swipe) gesture used to pop screens

{
popGesture: false
}

largeTitle#

Use iOS 11 large title

topBar: {
largeTitle: {
visible: true,
fontSize: 30,
color: 'red',
fontFamily: 'Helvetica'
}
}

Android Options#

topBarElevationShadowEnabled#

TopBar elevation in dp. Set this value to 0 to disable the TopBar's shadow.

topBar: {
elevation: 0
}

navBarTitleTextCentered#

Title alignment

topBar: {
title: {
alignment: 'center'|'fill'
}
}

statusBarColor#

StatusBar color

statusBar: {
backgroundColor: 'red'
}

navigationBarColor#

NavigationBar color

navigationBar: {
backgroundColor: 'red'
}

drawUnderStatusBar#

Draw content behind the StatusBar

statusBar: {
drawBehind: true
}

navBarHeight#

TopBar height in dp

topBar: {
height: 70
}

navBarTopPadding#

Content top margin

layout: {
topMargin: 26
}

topTabsHeight#

TopTabs height

topTabs: {
height: 70
}

topBarBorderColor#

TopBar border color

topBar: {
borderColor: 'red'
}

topBarBorderWidth#

TopBar border height

topBar: {
borderHeight: 1.3
}

Unsupported options#

  • disabledSimultaneousGesture
  • statusBarTextColorSchemeSingleScreen
  • navBarButtonFontWeight
  • topBarShadowColor
  • topBarShadowOpacity
  • topBarShadowOffset
  • topBarShadowRadius
  • preferredContentSize
  • navBarSubTitleTextCentered
  • collapsingToolBarImage
  • collapsingToolBarCollapsedColor
  • navBarTextFontBold
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-modal/index.html b/api/options-modal/index.html index f913ea178b..004b5b1bbe 100644 --- a/api/options-modal/index.html +++ b/api/options-modal/index.html @@ -7,27 +7,27 @@ Modal Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Modal Options

const options = {
swipeToDismiss
};

swipeToDismiss#

Control wether this modal should be dismiss using swipe gesture when the modalPresentationStyle is pageSheet

TypeRequiredPlatformDefault
booleanNoBothtrue
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-navigationBar/index.html b/api/options-navigationBar/index.html index 5f7affc5b9..be19ceb8bb 100644 --- a/api/options-navigationBar/index.html +++ b/api/options-navigationBar/index.html @@ -7,27 +7,27 @@ Navigation Bar Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Navigation Bar Options

The Navigation Bar is the area at the bottom of the screen containing Android's three navigation buttons: Back, Home and Recents.

An example of a dark navigation bar:



const options = {
navigationBar: {}
};

visible#

Set the navigation bar visibility.

TypeRequiredPlatform
booleanNoAndroid

backgroundColor#

Set the navigation bar color. When a light background color is used, the color of the navigation bar icons will adapt to a dark color.

TypeRequiredPlatformDefault
ColorNoAndroid'black'
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-overlay/index.html b/api/options-overlay/index.html index a67be079f8..e0d8d2c7ba 100644 --- a/api/options-overlay/index.html +++ b/api/options-overlay/index.html @@ -7,28 +7,28 @@ Overlay | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Overlay

Controls overlay options

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.

TypeRequiredPlatform
booleanNoBoth

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.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-preview/index.html b/api/options-preview/index.html index 40391209c6..4fd341d5a7 100644 --- a/api/options-preview/index.html +++ b/api/options-preview/index.html @@ -7,27 +7,27 @@ Preview (iOS) | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Preview (iOS)

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-root/index.html b/api/options-root/index.html index 600d1e92cc..4c7ad06d3c 100644 --- a/api/options-root/index.html +++ b/api/options-root/index.html @@ -7,27 +7,27 @@ The options object | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

The options object

const options = {
bottomTab,
bottomTabs,
topBar,
layout,
sideMenu,
overlay,
modal,
preview,
navigationBar
};

bottomTab#

Controls the bottom tab icon, font, color, and more.

TypeRequiredPlatform
BottomTabOptionsNoBoth

bottomTabs#

Controls the bottom tabs container.

TypeRequiredPlatform
BottomTabsOptionsNoBoth

topBar#

Controls the Stack top bar styling.

TypeRequiredPlatform
TopBarOptionsNo

statusBar#

Controls the system status bar styling.

TypeRequiredPlatform
StatusBarOptionsNoBoth

layout#

TypeRequiredPlatform
LayoutOptionsNoBoth

sideMenu#

TypeRequiredPlatform
SideMenuOptionsNoBoth

overlay#

TypeRequiredPlatform
OverlayOptionsNoBoth

animations#

TypeRequiredPlatform
AnimationsOptionsNoBoth

modal#

TypeRequiredPlatform
ModalOptionsNoBoth

preview#

TypeRequiredPlatform
PreviewOptionsNoiOS

splitView#

TypeRequiredPlatform
SplitViewOptionsNoiOS

fab#

TypeRequiredPlatform
FabNoAndroid

modalPresentationStyle#

Configure the presentation style of the modal.

TypeRequiredPlatform
enum('formSheet', 'pageSheet', 'fullScreen', 'overFullScreen', 'overCurrentContext', 'popOver', 'none')NoBoth

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.

iOSAndroid
  • iOS 12 and below - fullScreen
  • iOS 13 and above - pageSheet
fullScreen

modalTransitionStyle#

Configure the transition style of the modal.

TypeRequiredPlatform
enum('coverVertical', 'crossDissolve', 'flipHorizontal', 'partialCurl')NoBoth

popGesture#

Enable or disable swipe back to pop gesture.

TypeRequiredPlatform
booleanNoiOS

backgroundImage#

Background image of the screen.

TypeRequiredPlatform
ImageNoiOS

rootBackgroundImage#

Background image for the Navigation View.

TypeRequiredPlatform
ImageNoAndroid

blurOnUnmount#

Enable or disable automaticall blur of the focused input, dismissing keyboard on unmount.

TypeRequiredPlatformDefault
booleanNoAndroidfalse

navigationBar#

Enable or disable automaticall blur of the focused input, dismissing keyboard on unmount.

TypeRequiredPlatform
booleanNoAndroid
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-scrollEdgeAppearance/index.html b/api/options-scrollEdgeAppearance/index.html index 838b7560d9..555a03b2ac 100644 --- a/api/options-scrollEdgeAppearance/index.html +++ b/api/options-scrollEdgeAppearance/index.html @@ -7,28 +7,28 @@ Scroll Edge Appearance Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Scroll Edge Appearance Options

Controls the top bar background styling.

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.

TypeRequiredPlatform
booleanNoiOS

color#

Set the background color.

TypeRequiredPlatform
ColorNoiOS

translucent#

Allows the Scroll Edge Appearance to be translucent (blurred).

TypeRequiredPlatform
booleanNoiOS

borderColor#

Change the topBar border color.

TypeRequiredPlatform
ColorNoiOS

noBorder#

Disables border at the bottom of the TopBar.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-sideMenu/index.html b/api/options-sideMenu/index.html index ab59fd2252..6ed33a9894 100644 --- a/api/options-sideMenu/index.html +++ b/api/options-sideMenu/index.html @@ -7,27 +7,27 @@ Side Menu Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Side Menu Options

const options = {
sideMenu: {
left: {},
right: {},
openGestureMode: 'entireScreen',
},
};

left#

Configure the left side menu.

TypeRequiredPlatform
SideMenuSideNoBoth

right#

Configure the right side menu.

TypeRequiredPlatform
SideMenuSideNoBoth

openGestureMode#

Configure how a user is allowed to open a drawer using gestures.

TypeRequiredPlatformDefault
enum('entireScreen', 'bezel')NoiOS'bezel'
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-sideMenuSide/index.html b/api/options-sideMenuSide/index.html index f45f90dc6b..d006968e32 100644 --- a/api/options-sideMenuSide/index.html +++ b/api/options-sideMenuSide/index.html @@ -7,27 +7,27 @@ Side Menu Side Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Side Menu Side Options

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

visible#

Show or hide the side menu.

TypeRequiredPlatform
booleanNoBoth

enabled#

Enable or disable the side menu.

TypeRequiredPlatform
booleanNoBoth

width#

Set the width of the side menu.

TypeRequiredPlatform
numberNoBoth

height#

Set the height of the side menu.

TypeRequiredPlatform
numberNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-splitView/index.html b/api/options-splitView/index.html index 4295989783..9dbccc9e27 100644 --- a/api/options-splitView/index.html +++ b/api/options-splitView/index.html @@ -7,29 +7,29 @@ SplitView Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

SplitView Options

displayMode#

Master view display mode.

TypeRequiredDefaultPlatform
enum('auto', 'visible', 'hidden', 'overlay')No'auto'iOS

primaryEdge#

Master view side. Leading is left. Trailing is right.

TypeRequiredDefaultPlatform
enum('leading', 'trailing')No'leading'iOS

minWidth#

Set the minimum width of master view.

TypeRequiredPlatform
numberNoiOS

maxWidth#

Set the maximum width of master view.

TypeRequiredPlatform
numberNoiOS

primaryBackgroundStyle#

Set background style of sidebar. Currently works for Mac Catalyst apps only. See: Optimizing Your iPad App for Mac

TypeRequiredDefaultPlatform
enum('none', 'sidebar')No'none'iOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-stack/index.html b/api/options-stack/index.html index 4f3dc06141..effdc9b81a 100644 --- a/api/options-stack/index.html +++ b/api/options-stack/index.html @@ -7,27 +7,27 @@ Top Bar Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Top Bar Options

TopBar#

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

visible#

Determines if TopBar is visible or not.

TypeRequiredPlatform
booleanNoBoth

animate#

Determines if changing the TopBar visibility will be animated or not.

TypeRequiredPlatform
booleanNoBoth

animateLeftButtons#

Determines if changing the left buttons will be animated.

TypeRequiredPlatformDefault
booleanNoBothFalse

animateRightButtons#

Determines if changing the right buttons will be animated.

TypeRequiredPlatformDefault
booleanNoBothFalse

title#

Controls the top bar title.

TypeRequiredPlatform
TitleNoBoth

subtitle#

Controls the top bar subtitle.

TypeRequiredPlatform
SubitleNoBoth

backButton#

Controls the top bar back button.

TypeRequiredPlatform
BackButtonNoBoth

background#

Controls the top bar background.

TypeRequiredPlatform
BackgroundNoBoth

scrollEdgeAppearance#

Controls the appearance settings when the scrollable content reaches the matching edge of the navigation bar.

TypeRequiredPlatform
Scroll Edge BackgroundNoiOS 13+

barStyle#

Control the TopBar blur style. Requires translucent: true.

TypeRequiredPlatform
enum('default','black')NoiOS

height#

Set TopBar height, in dp units, on Android only. For iOS use largeTitle see Options.

TypeRequiredPlatform
numberNoAndroid

borderColor#

Change the topBar border color.

TypeRequiredPlatform
ColorNoBoth

borderHeight#

Set the border height of the navbar in dp.

TypeRequiredPlatform
numberNoAndroid

drawBehind#

Controls if child should be drawn behind the TopBar or below it.

TypeRequiredPlatform
booleanNoBoth

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.

TypeRequiredPlatform
numberNoAndroid

hideOnScroll#

Hide the TopBar when a scrolling layout is scrolled.

TypeRequiredPlatform
booleanNoBoth
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

hideNavBarOnFocusSearchBar#

Indicates whether the navigation bar should be hidden when searching. True by default.

TypeRequiredPlatform
booleanNoiOS 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 section for more details.

Android support

Android currently only supports a single left button and does not support custom left Buttons.

TypeRequiredPlatform
[Button]NoBoth

leftButtonColor#

Default color for left buttons.

TypeRequiredPlatform
ColorNoBoth

noBorder#

Disables border at the bottom of the TopBar.

important

For disabling the border completely, you also need to disable scrollEdgeAppearance.noBorder

TypeRequiredPlatform
booleanNoiOS

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 section for more details.

TypeRequiredPlatform
[Button]NoBoth

rightButtonColor#

Default color for the right button.

TypeRequiredPlatform
ColorNoBoth

searchBar#

Controls the SearchBar.

TypeRequiredPlatform
OptionsSearchBarNoiOS 11+
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

searchBarHiddenWhenScrolling#

Hides the UISearchBar when scrolling.

TypeRequiredPlatform
booleanNoiOS 11+
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

searchBarPlaceholder#

The placeholder value in the UISearchBar.

TypeRequiredPlatform
stringNoiOS 11+
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

searchBarBackgroundColor#

The background color of the UISearchBar's TextField.

TypeRequiredPlatform
ColorNoiOS 13+
Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

searchBarTintColor#

The tint color of the UISearchBar. Affects text selection color, as well as "Cancel" button color.

TypeRequiredPlatform
ColorNoiOS 13+
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-statusBar/index.html b/api/options-statusBar/index.html index 21bb2797fe..ca6d3f894a 100644 --- a/api/options-statusBar/index.html +++ b/api/options-statusBar/index.html @@ -7,27 +7,27 @@ Status Bar Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Status Bar Options

const options = {
statusBar: {},
};

visible#

Set the status bar visibility.

TypeRequiredPlatform
booleanNoBoth

style#

Set the text color of the status bar.

TypeRequiredPlatformDefault
enum('light', 'dark')NoBoth'light'

backgroundColor#

Set the background color of the status bar.

TypeRequiredPlatform
ColorNoAndroid

drawBehind#

Draw screen behind the status bar.

TypeRequiredPlatform
booleanNoAndroid

translucent#

Set the status bar to be translucent.

TypeRequiredPlatform
booleanNoAndroid

animate#

Animate StatusBar style changes.

TypeRequiredPlatform
booleanNoiOS

blur#

Blur content beneath the StatusBar.

TypeRequiredPlatform
booleanNoiOS

hideWithTopBar#

Automatically hide the StatusBar when the TopBar hides.

TypeRequiredPlatform
booleanNoiOS
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-subtitle/index.html b/api/options-subtitle/index.html index 9372270e9e..f46a26a96d 100644 --- a/api/options-subtitle/index.html +++ b/api/options-subtitle/index.html @@ -7,27 +7,27 @@ Subtitle Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Subtitle Options

Controls the top bar subtitle.

const options = {
topBar: {
subtitle: {},
},
};

text#

Subtitle text.

TypeRequiredPlatform
stringNoBoth

fontSize#

Subtitle fontSize. On Android this value is sp.

TypeRequiredPlatform
numberNoBoth

color#

Subtitle color.

TypeRequiredPlatform
ColorNoBoth

fontFamily#

Subtitle FontFamily.

TypeRequiredPlatform
FontFamilyNoBoth

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoBoth

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoBoth

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.

TypeRequiredPlatform
enum('center', 'fill')NoBoth

testID#

Used to interact with the TopBar in e2e tests.

TypeRequiredPlatform
stringNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/options-title/index.html b/api/options-title/index.html index bbc165b5bb..19af3c6b72 100644 --- a/api/options-title/index.html +++ b/api/options-title/index.html @@ -7,27 +7,27 @@ Title Options | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Title Options

Controls the top bar title.

const options = {
topBar: {
title: {},
},
};

text#

Set the title for the TopBar.

TypeRequiredPlatform
stringNoBoth

fontSize#

Set the title font size. On Android this value is in sp.

TypeRequiredPlatform
numberNoBoth

color#

Set the title color.

TypeRequiredPlatform
ColorNoBoth

fontFamily#

Set the title font family.

TypeRequiredPlatform
FontFamilyNoBoth

fontStyle#

TypeRequiredPlatform
enum('normal', 'italic')NoBoth

fontWeight#

TypeRequiredPlatform
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')NoBoth

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.

defaults

center is the default option on iOS while fill is the default for Android.

TypeRequiredPlatform
enum('center','fill')NoBoth

component#

Set a react component as the title. If this option is specified then text is ignored.

TypeRequiredPlatform
ComponentNoBoth

topMargin#

Change to TopBar's top margin.

TypeRequiredPlatform
numberNoAndroid

visible#

Determines whether the TopBar is visible or not.

TypeRequiredPlatform
booleanNoBoth
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/overlay/index.html b/api/overlay/index.html index 602ad96f16..044d11d7ca 100644 --- a/api/overlay/index.html +++ b/api/overlay/index.html @@ -7,27 +7,27 @@ Overlay | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Overlay

showOverlay()#

Shows a component as an overlay.

NameRequiredTypeDescription
layoutYesLayoutAny type of layout. Typically, Component layout is used in Overlays but it's possible to load any other layout (BottomTabs, Stack, SideMenu, Component)
Navigation.showOverlay({
component: {
name: 'example.Overlay',
options: {
layout: {
componentBackgroundColor: 'transparent',
},
overlay: {
interceptTouchOutside: true
}
}
}
});

dismissOverlay()#

Dismisses an overlay matching the given overlay componentId.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe component id presented in Overlay
Navigation.dismissOverlay(this.props.componentId);

dismissAllOverlays()#

Dismisses all overlays.

Navigation.dismissAllOverlays();
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/root/index.html b/api/root/index.html index 4283dd64f4..a415b28b75 100644 --- a/api/root/index.html +++ b/api/root/index.html @@ -7,27 +7,27 @@ Root | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Root

setRoot()#

Used to set the UI of the application. Read more about the root hierarchy level in the docs section.

Parameters#

NameRequiredTypeDescription
layoutYesLayoutAny type of layout. BottomTabs, Stack, SideMenu, Component

Example#

Navigation.setRoot({
root: {
stack: {
children: [{
component: {
name: 'example.FirstTabScreen',
passProps: {
text: 'This is tab 1'
}
}
}],
options: {
bottomTab: {
text: 'Tab 1',
icon: require('../images/one.png'),
testID: 'FIRST_TAB_BAR_BUTTON'
}
}
}
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/sideMenu-api/index.html b/api/sideMenu-api/index.html index 6e9f221200..16b31566c6 100644 --- a/api/sideMenu-api/index.html +++ b/api/sideMenu-api/index.html @@ -7,27 +7,27 @@ Side Menu | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Side Menu

This layout allows to implement sidemenus, which can be opened by swiping from one side towards the other side.

{
left: {
component: {}
},
center: {
stack: {
options: {},
children: [{
component: {}
}]
}
},
right: {
component: {}
}
}

center: Layout#

Center component, contains the main application.

left?: Layout#

Contain the left component layout.

right?: Layout#

Contain the right component layout.

Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/stack/index.html b/api/stack/index.html index 41834c546f..5c61dd1c58 100644 --- a/api/stack/index.html +++ b/api/stack/index.html @@ -7,27 +7,27 @@ Stack | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

Stack

push()#

Push a screen into the stack and update the display according to the screen options.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe componentId of a screen pushed into the stack, or the id of the stack.
layoutNoLayoutThe layout being pushed into the stack. Any type of layout (except stack) can be pushed into stacks. Typically, Component layout is pushed into stacks but it's possible to push SideMenu or BottomTabs as well.

Example#

The most common use case - push a single React component.
Navigation.push(this.props.componentId, {
component: {
name: 'example.PushedScreen'
}
});

pop()#

Pop the top screen from the stack.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe componentId of a screen pushed into the stack, or the stack id.
mergeOptionsNoOptionsOptions to be merged before popping the screen (optional).
Navigation.pop(this.props.componentId);

popToRoot()#

Pop all screens pushed into the stack.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe componentId of a screen pushed into the stack, or the stack id.
mergeOptionsNoOptionsOptions to be merged before popping the screen (optional).
Navigation.popToRoot(this.props.componentId);

popTo()#

Pop the stack to a given component.

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe destination componentId
mergeOptionsNoOptionsOptions to be merged before popping the screen (optional).
Navigation.popTo(componentId);

setStackRoot()#

Reset the stack to the given layout (accepts multiple children).

Parameters#

NameRequiredTypeDescription
componentIdYesstringThe componentId of a screen pushed into the stack, or the stack id.
layoutYesLayout or Layout[]A single Component or array of components.

Example#

Navigation.setStackRoot(this.props.componentId, {
component: {
name: 'example.NewRootScreen'
}
});
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/api/topBar-searchBar/index.html b/api/topBar-searchBar/index.html index b05c38a974..f879e8584d 100644 --- a/api/topBar-searchBar/index.html +++ b/api/topBar-searchBar/index.html @@ -7,27 +7,27 @@ SearchBar | React Native Navigation - - - - - - - - - + + + + + + + + +
Skip to main content
Version: 7.37.0

SearchBar

visible#

TypeRequiredPlatformDescription
booleanNoiOSDetermines if SearchBar is visible or not

focus#

TypeRequiredPlatformDescription
booleanNoiOSAuto focuses search bar

hideOnScroll#

TypeRequiredPlatformDescription
booleanNoiOSHides the UISearchBar when scrolling.

hideTopBarOnFocus#

TypeRequiredPlatformDescription
booleanNoiOSIndicates whether the navigation bar should be hidden when searching. True by default.

obscuresBackgroundDuringPresentation#

TypeRequiredPlatformDescription
booleanNoiOSA Boolean indicating whether the underlying content is obscured during a search.

backgroundColor#

TypeRequiredPlatformDescription
ColorNoiOSThe background color of the UISearchBar's TextField.

tintColor#

TypeRequiredPlatformDescription
ColorNoiOSThe tint color of the UISearchBar. Affects text selection color, as well as "Cancel" button color.

searchBarPlaceholder#

TypeRequiredPlatformDescription
stringNoiOSThe placeholder value in the UISearchBar.

cancelText#

TypeRequiredPlatformDescription
stringNoiOSThe text value of "Cancel" button in the UISearchBar.
Edit this page
- - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/assets/js/01236e21.1f2888e0.js b/assets/js/01236e21.a7baae5b.js similarity index 100% rename from assets/js/01236e21.1f2888e0.js rename to assets/js/01236e21.a7baae5b.js diff --git a/assets/js/01766c3c.f449bf46.js b/assets/js/01766c3c.14327df0.js similarity index 100% rename from assets/js/01766c3c.f449bf46.js rename to assets/js/01766c3c.14327df0.js diff --git a/assets/js/0219fded.2941f4f8.js b/assets/js/0219fded.2ea7f517.js similarity index 100% rename from assets/js/0219fded.2941f4f8.js rename to assets/js/0219fded.2ea7f517.js diff --git a/assets/js/02481282.dc985fb2.js b/assets/js/02481282.9b5fcbcb.js similarity index 100% rename from assets/js/02481282.dc985fb2.js rename to assets/js/02481282.9b5fcbcb.js diff --git a/assets/js/033ffa26.3699eed2.js b/assets/js/033ffa26.2c3bf66a.js similarity index 100% rename from assets/js/033ffa26.3699eed2.js rename to assets/js/033ffa26.2c3bf66a.js diff --git a/assets/js/03637775.fcc74b9e.js b/assets/js/03637775.366d9819.js similarity index 100% rename from assets/js/03637775.fcc74b9e.js rename to assets/js/03637775.366d9819.js diff --git a/assets/js/03694375.d1b46d2e.js b/assets/js/03694375.0dc02a10.js similarity index 100% rename from assets/js/03694375.d1b46d2e.js rename to assets/js/03694375.0dc02a10.js diff --git a/assets/js/03936653.75d7199d.js b/assets/js/03936653.bfbfafee.js similarity index 100% rename from assets/js/03936653.75d7199d.js rename to assets/js/03936653.bfbfafee.js diff --git a/assets/js/03a973b6.6200a7ea.js b/assets/js/03a973b6.51bace90.js similarity index 100% rename from assets/js/03a973b6.6200a7ea.js rename to assets/js/03a973b6.51bace90.js diff --git a/assets/js/042403e6.8c5b26d7.js b/assets/js/042403e6.01cac5ae.js similarity index 100% rename from assets/js/042403e6.8c5b26d7.js rename to assets/js/042403e6.01cac5ae.js diff --git a/assets/js/046dea04.6d24fedf.js b/assets/js/046dea04.0a2d30ee.js similarity index 100% rename from assets/js/046dea04.6d24fedf.js rename to assets/js/046dea04.0a2d30ee.js diff --git a/assets/js/04c9bdec.855a2d49.js b/assets/js/04c9bdec.512404b0.js similarity index 100% rename from assets/js/04c9bdec.855a2d49.js rename to assets/js/04c9bdec.512404b0.js diff --git a/assets/js/0504968a.1115befa.js b/assets/js/0504968a.d7fe374b.js similarity index 100% rename from assets/js/0504968a.1115befa.js rename to assets/js/0504968a.d7fe374b.js diff --git a/assets/js/05e7be59.8d41e90b.js b/assets/js/05e7be59.5359bdf6.js similarity index 100% rename from assets/js/05e7be59.8d41e90b.js rename to assets/js/05e7be59.5359bdf6.js diff --git a/assets/js/06428749.36f644fd.js b/assets/js/06428749.84b4779e.js similarity index 100% rename from assets/js/06428749.36f644fd.js rename to assets/js/06428749.84b4779e.js diff --git a/assets/js/0795c4a5.053c70a4.js b/assets/js/0795c4a5.1e229ba9.js similarity index 100% rename from assets/js/0795c4a5.053c70a4.js rename to assets/js/0795c4a5.1e229ba9.js diff --git a/assets/js/07a5a5a7.89578357.js b/assets/js/07a5a5a7.7ee74f02.js similarity index 100% rename from assets/js/07a5a5a7.89578357.js rename to assets/js/07a5a5a7.7ee74f02.js diff --git a/assets/js/07d02486.8faaa425.js b/assets/js/07d02486.aa5a883b.js similarity index 100% rename from assets/js/07d02486.8faaa425.js rename to assets/js/07d02486.aa5a883b.js diff --git a/assets/js/083097f6.ad0fd89e.js b/assets/js/083097f6.efb7fda4.js similarity index 100% rename from assets/js/083097f6.ad0fd89e.js rename to assets/js/083097f6.efb7fda4.js diff --git a/assets/js/08c29a07.84a093ba.js b/assets/js/08c29a07.d6ec6683.js similarity index 100% rename from assets/js/08c29a07.84a093ba.js rename to assets/js/08c29a07.d6ec6683.js diff --git a/assets/js/08f59eb1.3bb98bc3.js b/assets/js/08f59eb1.b7be0d51.js similarity index 100% rename from assets/js/08f59eb1.3bb98bc3.js rename to assets/js/08f59eb1.b7be0d51.js diff --git a/assets/js/0933de78.29cbbd75.js b/assets/js/0933de78.3f7acd19.js similarity index 100% rename from assets/js/0933de78.29cbbd75.js rename to assets/js/0933de78.3f7acd19.js diff --git a/assets/js/0960b525.fa67a67a.js b/assets/js/0960b525.813a4dcc.js similarity index 100% rename from assets/js/0960b525.fa67a67a.js rename to assets/js/0960b525.813a4dcc.js diff --git a/assets/js/09ef251f.f1dd4af9.js b/assets/js/09ef251f.425f1ba3.js similarity index 100% rename from assets/js/09ef251f.f1dd4af9.js rename to assets/js/09ef251f.425f1ba3.js diff --git a/assets/js/0a7ae8c6.6df43412.js b/assets/js/0a7ae8c6.bd02db56.js similarity index 100% rename from assets/js/0a7ae8c6.6df43412.js rename to assets/js/0a7ae8c6.bd02db56.js diff --git a/assets/js/0a9c912f.20001391.js b/assets/js/0a9c912f.02d92eff.js similarity index 100% rename from assets/js/0a9c912f.20001391.js rename to assets/js/0a9c912f.02d92eff.js diff --git a/assets/js/0ac59e0b.aa2c3d0e.js b/assets/js/0ac59e0b.6aebc15c.js similarity index 100% rename from assets/js/0ac59e0b.aa2c3d0e.js rename to assets/js/0ac59e0b.6aebc15c.js diff --git a/assets/js/0af206b1.2c75052f.js b/assets/js/0af206b1.ae68ebb1.js similarity index 100% rename from assets/js/0af206b1.2c75052f.js rename to assets/js/0af206b1.ae68ebb1.js diff --git a/assets/js/0b88b93d.ab4883d6.js b/assets/js/0b88b93d.a4cf6b0f.js similarity index 100% rename from assets/js/0b88b93d.ab4883d6.js rename to assets/js/0b88b93d.a4cf6b0f.js diff --git a/assets/js/0c893413.29601f92.js b/assets/js/0c893413.8e3e004e.js similarity index 100% rename from assets/js/0c893413.29601f92.js rename to assets/js/0c893413.8e3e004e.js diff --git a/assets/js/0d5a540d.8c8f0e66.js b/assets/js/0d5a540d.192bd44f.js similarity index 100% rename from assets/js/0d5a540d.8c8f0e66.js rename to assets/js/0d5a540d.192bd44f.js diff --git a/assets/js/0d9971fc.9df8d8b5.js b/assets/js/0d9971fc.dff47bc7.js similarity index 100% rename from assets/js/0d9971fc.9df8d8b5.js rename to assets/js/0d9971fc.dff47bc7.js diff --git a/assets/js/0da03481.1a5f6267.js b/assets/js/0da03481.72026cff.js similarity index 100% rename from assets/js/0da03481.1a5f6267.js rename to assets/js/0da03481.72026cff.js diff --git a/assets/js/0dd89b11.d93df588.js b/assets/js/0dd89b11.7607fdbe.js similarity index 100% rename from assets/js/0dd89b11.d93df588.js rename to assets/js/0dd89b11.7607fdbe.js diff --git a/assets/js/0deecaa0.d91c444f.js b/assets/js/0deecaa0.e5bc5bdf.js similarity index 100% rename from assets/js/0deecaa0.d91c444f.js rename to assets/js/0deecaa0.e5bc5bdf.js diff --git a/assets/js/0df7ea6e.6e9e45ab.js b/assets/js/0df7ea6e.8c846017.js similarity index 100% rename from assets/js/0df7ea6e.6e9e45ab.js rename to assets/js/0df7ea6e.8c846017.js diff --git a/assets/js/0e403cd5.33d23831.js b/assets/js/0e403cd5.eb9b7387.js similarity index 100% rename from assets/js/0e403cd5.33d23831.js rename to assets/js/0e403cd5.eb9b7387.js diff --git a/assets/js/0e88a1db.91ef93f3.js b/assets/js/0e88a1db.48e6f2d3.js similarity index 100% rename from assets/js/0e88a1db.91ef93f3.js rename to assets/js/0e88a1db.48e6f2d3.js diff --git a/assets/js/0eac805a.4adfa4c3.js b/assets/js/0eac805a.72447236.js similarity index 100% rename from assets/js/0eac805a.4adfa4c3.js rename to assets/js/0eac805a.72447236.js diff --git a/assets/js/0ebf8c0a.b0884590.js b/assets/js/0ebf8c0a.025b0672.js similarity index 100% rename from assets/js/0ebf8c0a.b0884590.js rename to assets/js/0ebf8c0a.025b0672.js diff --git a/assets/js/0f6c7edf.43ec45dd.js b/assets/js/0f6c7edf.ac74a9aa.js similarity index 100% rename from assets/js/0f6c7edf.43ec45dd.js rename to assets/js/0f6c7edf.ac74a9aa.js diff --git a/assets/js/0fa6c028.bbfcef1d.js b/assets/js/0fa6c028.5b52a7d1.js similarity index 100% rename from assets/js/0fa6c028.bbfcef1d.js rename to assets/js/0fa6c028.5b52a7d1.js diff --git a/assets/js/1.656677e0.js b/assets/js/1.c451443f.js similarity index 100% rename from assets/js/1.656677e0.js rename to assets/js/1.c451443f.js diff --git a/assets/js/1064a535.e1153fd8.js b/assets/js/1064a535.f762fbcf.js similarity index 100% rename from assets/js/1064a535.e1153fd8.js rename to assets/js/1064a535.f762fbcf.js diff --git a/assets/js/10f6d5b6.a29a2170.js b/assets/js/10f6d5b6.ec887c4b.js similarity index 100% rename from assets/js/10f6d5b6.a29a2170.js rename to assets/js/10f6d5b6.ec887c4b.js diff --git a/assets/js/110d3381.b4d85636.js b/assets/js/110d3381.e7001bba.js similarity index 100% rename from assets/js/110d3381.b4d85636.js rename to assets/js/110d3381.e7001bba.js diff --git a/assets/js/121d2742.9189f36c.js b/assets/js/121d2742.6fe83609.js similarity index 100% rename from assets/js/121d2742.9189f36c.js rename to assets/js/121d2742.6fe83609.js diff --git a/assets/js/1316cfa0.5a25bb39.js b/assets/js/1316cfa0.3c6528fc.js similarity index 100% rename from assets/js/1316cfa0.5a25bb39.js rename to assets/js/1316cfa0.3c6528fc.js diff --git a/assets/js/137941bc.453b9556.js b/assets/js/137941bc.7a290e9c.js similarity index 100% rename from assets/js/137941bc.453b9556.js rename to assets/js/137941bc.7a290e9c.js diff --git a/assets/js/141d4650.c99e8255.js b/assets/js/141d4650.75c8c318.js similarity index 100% rename from assets/js/141d4650.c99e8255.js rename to assets/js/141d4650.75c8c318.js diff --git a/assets/js/1472bf54.f71182f4.js b/assets/js/1472bf54.181408aa.js similarity index 100% rename from assets/js/1472bf54.f71182f4.js rename to assets/js/1472bf54.181408aa.js diff --git a/assets/js/148da5a8.b2c20952.js b/assets/js/148da5a8.a38de16c.js similarity index 100% rename from assets/js/148da5a8.b2c20952.js rename to assets/js/148da5a8.a38de16c.js diff --git a/assets/js/1568d0d5.8034646f.js b/assets/js/1568d0d5.d1dca29b.js similarity index 100% rename from assets/js/1568d0d5.8034646f.js rename to assets/js/1568d0d5.d1dca29b.js diff --git a/assets/js/168ff25c.7e26a881.js b/assets/js/168ff25c.34406aa0.js similarity index 100% rename from assets/js/168ff25c.7e26a881.js rename to assets/js/168ff25c.34406aa0.js diff --git a/assets/js/16dbfa7d.0283e233.js b/assets/js/16dbfa7d.22c964fb.js similarity index 100% rename from assets/js/16dbfa7d.0283e233.js rename to assets/js/16dbfa7d.22c964fb.js diff --git a/assets/js/16e299d4.1f8de114.js b/assets/js/16e299d4.8963be4a.js similarity index 100% rename from assets/js/16e299d4.1f8de114.js rename to assets/js/16e299d4.8963be4a.js diff --git a/assets/js/17510ebe.c0681f49.js b/assets/js/17510ebe.1488df0a.js similarity index 100% rename from assets/js/17510ebe.c0681f49.js rename to assets/js/17510ebe.1488df0a.js diff --git a/assets/js/17896441.b1764798.js b/assets/js/17896441.367b11f7.js similarity index 100% rename from assets/js/17896441.b1764798.js rename to assets/js/17896441.367b11f7.js diff --git a/assets/js/1809070c.5e35e454.js b/assets/js/1809070c.2b8d0d63.js similarity index 100% rename from assets/js/1809070c.5e35e454.js rename to assets/js/1809070c.2b8d0d63.js diff --git a/assets/js/18ec5a2b.5a351d20.js b/assets/js/18ec5a2b.1a734232.js similarity index 100% rename from assets/js/18ec5a2b.5a351d20.js rename to assets/js/18ec5a2b.1a734232.js diff --git a/assets/js/19174d1e.122dd824.js b/assets/js/19174d1e.b39f5c58.js similarity index 100% rename from assets/js/19174d1e.122dd824.js rename to assets/js/19174d1e.b39f5c58.js diff --git a/assets/js/19286aee.5f68cad7.js b/assets/js/19286aee.b8c10e28.js similarity index 100% rename from assets/js/19286aee.5f68cad7.js rename to assets/js/19286aee.b8c10e28.js diff --git a/assets/js/1ab674d3.7dc492e6.js b/assets/js/1ab674d3.769f4515.js similarity index 100% rename from assets/js/1ab674d3.7dc492e6.js rename to assets/js/1ab674d3.769f4515.js diff --git a/assets/js/1ac20142.598b2446.js b/assets/js/1ac20142.a5c09f8f.js similarity index 100% rename from assets/js/1ac20142.598b2446.js rename to assets/js/1ac20142.a5c09f8f.js diff --git a/assets/js/1bc08b45.81ace5de.js b/assets/js/1bc08b45.c36c85c1.js similarity index 100% rename from assets/js/1bc08b45.81ace5de.js rename to assets/js/1bc08b45.c36c85c1.js diff --git a/assets/js/1bc687dd.f84e3b61.js b/assets/js/1bc687dd.f5565874.js similarity index 100% rename from assets/js/1bc687dd.f84e3b61.js rename to assets/js/1bc687dd.f5565874.js diff --git a/assets/js/1c82c02e.2e7ebabb.js b/assets/js/1c82c02e.c51ecbba.js similarity index 100% rename from assets/js/1c82c02e.2e7ebabb.js rename to assets/js/1c82c02e.c51ecbba.js diff --git a/assets/js/1d268f7b.541f4c50.js b/assets/js/1d268f7b.12ec4d22.js similarity index 100% rename from assets/js/1d268f7b.541f4c50.js rename to assets/js/1d268f7b.12ec4d22.js diff --git a/assets/js/1d6ec27d.b2c831d4.js b/assets/js/1d6ec27d.1f46375a.js similarity index 100% rename from assets/js/1d6ec27d.b2c831d4.js rename to assets/js/1d6ec27d.1f46375a.js diff --git a/assets/js/1e700b69.f7baf26e.js b/assets/js/1e700b69.bf5b03a6.js similarity index 100% rename from assets/js/1e700b69.f7baf26e.js rename to assets/js/1e700b69.bf5b03a6.js diff --git a/assets/js/1f05559d.4094e5bb.js b/assets/js/1f05559d.52af3d62.js similarity index 100% rename from assets/js/1f05559d.4094e5bb.js rename to assets/js/1f05559d.52af3d62.js diff --git a/assets/js/1f96651f.2bd5d92b.js b/assets/js/1f96651f.3fdd3e75.js similarity index 100% rename from assets/js/1f96651f.2bd5d92b.js rename to assets/js/1f96651f.3fdd3e75.js diff --git a/assets/js/2.1804722f.js b/assets/js/2.4f516795.js similarity index 99% rename from assets/js/2.1804722f.js rename to assets/js/2.4f516795.js index d2ce165368..1804818299 100644 --- a/assets/js/2.1804722f.js +++ b/assets/js/2.4f516795.js @@ -1,2 +1,2 @@ -/*! For license information please see 2.1804722f.js.LICENSE.txt */ -(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{629:function(e,t,a){"use strict";var n=a(0),r=a(630);t.a=function(){const e=Object(n.useContext)(r.a);if(null==e)throw new Error("`useUserPreferencesContext` is used outside of `Layout` Component.");return e}},630:function(e,t,a){"use strict";var n=a(0);const r=Object(n.createContext)(void 0);t.a=r},641:function(e,t,a){"use strict";var n=a(3),r=a(0),c=a.n(r),o=a(628),l=a(638),s=a(633),i=a(21),u=a(635);function d(e){let{activeBasePath:t,activeBaseRegex:a,to:r,href:o,label:i,activeClassName:u="navbar__link--active",prependBaseUrlToHref:d,...m}=e;const f=Object(s.a)(r),h=Object(s.a)(t),b=Object(s.a)(o,{forcePrependBaseUrl:!0});return c.a.createElement(l.a,Object(n.a)({},o?{href:d?b:o}:{isNavLink:!0,activeClassName:u,to:f,...t||a?{isActive:(e,t)=>a?new RegExp(a).test(t.pathname):t.pathname.startsWith(h)}:null},m),i)}function m(e){var t;let{items:a,position:l,className:s,...i}=e;const u=Object(r.useRef)(null),m=Object(r.useRef)(null),[f,h]=Object(r.useState)(!1);Object(r.useEffect)((()=>{const e=e=>{u.current&&!u.current.contains(e.target)&&h(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e)}}),[u]);const b=function(e,t){return void 0===t&&(t=!1),Object(o.a)({"navbar__item navbar__link":!t,dropdown__link:t},e)};return a?c.a.createElement("div",{ref:u,className:Object(o.a)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--left":"left"===l,"dropdown--right":"right"===l,"dropdown--show":f})},c.a.createElement(d,Object(n.a)({className:b(s)},i,{onClick:i.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),h(!f))}}),null!==(t=i.children)&&void 0!==t?t:i.label),c.a.createElement("ul",{ref:m,className:"dropdown__menu"},a.map(((e,t)=>{let{className:r,...o}=e;return c.a.createElement("li",{key:t},c.a.createElement(d,Object(n.a)({onKeyDown:e=>{if(t===a.length-1&&"Tab"===e.key){e.preventDefault(),h(!1);const t=u.current.nextElementSibling;t&&t.focus()}},activeClassName:"dropdown__link--active",className:b(r,!0)},o)))})))):c.a.createElement(d,Object(n.a)({className:b(s)},i))}function f(e){var t,a,l;let{items:s,className:m,position:f,...h}=e;const b=Object(r.useRef)(null),{pathname:v}=Object(i.useLocation)(),[p,g]=Object(r.useState)((()=>{var e;return null===(e=!(null!=s&&s.some((e=>Object(u.isSamePath)(e.to,v)))))||void 0===e||e})),E=function(e,t){return void 0===t&&(t=!1),Object(o.a)("menu__link",{"menu__link--sublist":t},e)};if(!s)return c.a.createElement("li",{className:"menu__list-item"},c.a.createElement(d,Object(n.a)({className:E(m)},h)));const O=null!==(t=b.current)&&void 0!==t&&t.scrollHeight?(null===(a=b.current)||void 0===a?void 0:a.scrollHeight)+"px":void 0;return c.a.createElement("li",{className:Object(o.a)("menu__list-item",{"menu__list-item--collapsed":p})},c.a.createElement(d,Object(n.a)({role:"button",className:E(m,!0)},h,{onClick:e=>{e.preventDefault(),g((e=>!e))}}),null!==(l=h.children)&&void 0!==l?l:h.label),c.a.createElement("ul",{className:"menu__list",ref:b,style:{height:p?void 0:O}},s.map(((e,t)=>{let{className:a,...r}=e;return c.a.createElement("li",{className:"menu__list-item",key:t},c.a.createElement(d,Object(n.a)({activeClassName:"menu__link--active",className:E(a)},r,{onClick:h.onClick})))}))))}t.a=function(e){let{mobile:t=!1,...a}=e;const n=t?f:m;return c.a.createElement(n,a)}},642:function(e,t,a){"use strict";var n=a(0),r=a.n(n),c=a(628),o=a(636),l=a(21),s=a(57),i=a.n(s);function u(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}var d=function(){const e=Object(n.useRef)(null),t=Object(l.useLocation)();return Object(n.useEffect)((()=>{t.hash||u(e.current)}),[t.pathname]),r.a.createElement("div",{ref:e},r.a.createElement("a",{href:"#main",className:i.a.skipToContent,onClick:e=>{e.preventDefault();const t=document.querySelector("main:first-of-type")||document.querySelector(".main-wrapper");t&&u(t)}},r.a.createElement(o.a,{id:"theme.common.skipToMainContent",description:"The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation"},"Skip to main content")))},m=a(635),f=a(629),h=a(58),b=a.n(h);var v=function(){const{isAnnouncementBarClosed:e,closeAnnouncementBar:t}=Object(f.a)(),{announcementBar:a}=Object(m.useThemeConfig)();if(!a)return null;const{content:n,backgroundColor:l,textColor:s,isCloseable:i}=a;return!n||i&&e?null:r.a.createElement("div",{className:b.a.announcementBar,style:{backgroundColor:l,color:s},role:"banner"},r.a.createElement("div",{className:Object(c.a)(b.a.announcementBarContent,{[b.a.announcementBarCloseable]:i}),dangerouslySetInnerHTML:{__html:n}}),i?r.a.createElement("button",{type:"button",className:b.a.announcementBarClose,onClick:t,"aria-label":Object(o.b)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"})},r.a.createElement("span",{"aria-hidden":"true"},"\xd7")):null)},p=a(3),g=a(27),E=a(16),O=a(633),k=a(638),y=a(22),j=a(657);function C(){return r.a.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},r.a.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}var w=a(658),_=["translations"];function N(){return N=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var a=0,n=new Array(t);a=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var D="Ctrl";var A=r.a.forwardRef((function(e,t){var a=e.translations,c=void 0===a?{}:a,o=T(e,_),l=c.buttonText,s=void 0===l?"Search":l,i=c.buttonAriaLabel,u=void 0===i?"Search":i,d=S(Object(n.useState)(null),2),m=d[0],f=d[1];return Object(n.useEffect)((function(){"undefined"!=typeof navigator&&(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?f("\u2318"):f(D))}),[]),r.a.createElement("button",N({type:"button",className:"DocSearch DocSearch-Button","aria-label":u},o,{ref:t}),r.a.createElement("span",{className:"DocSearch-Button-Container"},r.a.createElement(w.a,null),r.a.createElement("span",{className:"DocSearch-Button-Placeholder"},s)),r.a.createElement("span",{className:"DocSearch-Button-Keys"},null!==m&&r.a.createElement(r.a.Fragment,null,r.a.createElement(P,{reactsToKey:m===D?D:"Meta"},m===D?r.a.createElement(C,null):m),r.a.createElement(P,{reactsToKey:"k"},"K"))))}));function P(e){var t=e.reactsToKey,a=e.children,c=S(Object(n.useState)(!1),2),o=c[0],l=c[1];return Object(n.useEffect)((function(){if(t)return window.addEventListener("keydown",e),window.addEventListener("keyup",a),function(){window.removeEventListener("keydown",e),window.removeEventListener("keyup",a)};function e(e){e.key===t&&l(!0)}function a(e){e.key!==t&&"Meta"!==e.key||l(!1)}}),[t]),r.a.createElement("kbd",{className:o?"DocSearch-Button-Key DocSearch-Button-Key--pressed":"DocSearch-Button-Key"},a)}var I=a(637);function M(){const{locale:e,tags:t}=function(){const{i18n:e}=Object(E.default)(),t=Object(I.useAllDocsData)(),a=Object(I.useActivePluginAndVersion)(),n=Object(m.useDocsPreferredVersionByPluginId)(),r=[m.DEFAULT_SEARCH_TAG,...Object.keys(t).map((function(e){var r,c;const o=(null==a||null===(r=a.activePlugin)||void 0===r?void 0:r.pluginId)===e?a.activeVersion:void 0,l=n[e],s=t[e].versions.find((e=>e.isLast)),i=null!==(c=null!=o?o:l)&&void 0!==c?c:s;return Object(m.docVersionSearchTag)(e,i.name)}))];return{locale:e.currentLocale,tags:r}}();return["language:"+e,t.map((e=>"docusaurus_tag:"+e))]}let B=null;function x(e){let{hit:t,children:a}=e;return r.a.createElement(k.a,{to:t.url},a)}function V(e){let{state:t,onClose:a}=e;const{generateSearchPageLink:n}=Object(j.a)();return r.a.createElement(k.a,{to:n(t.query),onClick:a},"See all ",t.context.nbHits," results")}function R(e){var t,c;let{contextualSearch:s,...i}=e;const{siteMetadata:u}=Object(E.default)(),d=M(),m=null!==(t=null===(c=i.searchParameters)||void 0===c?void 0:c.facetFilters)&&void 0!==t?t:[],f=s?[...d,...m]:m,h={...i.searchParameters,facetFilters:f},{withBaseUrl:b}=Object(O.b)(),v=Object(l.useHistory)(),k=Object(n.useRef)(null),j=Object(n.useRef)(null),[C,w]=Object(n.useState)(!1),[_,N]=Object(n.useState)(null),S=Object(n.useCallback)((()=>B?Promise.resolve():Promise.all([a.e(555).then(a.bind(null,759)),Promise.all([a.e(0),a.e(556)]).then(a.bind(null,758)),a.e(0).then(a.t.bind(null,626,7))]).then((e=>{let[{DocSearchModal:t}]=e;B=t}))),[]),L=Object(n.useCallback)((()=>{S().then((()=>{k.current=document.createElement("div"),document.body.insertBefore(k.current,document.body.firstChild),w(!0)}))}),[S,w]),T=Object(n.useCallback)((()=>{w(!1),k.current.remove()}),[w]),D=Object(n.useCallback)((e=>{S().then((()=>{w(!0),N(e.key)}))}),[S,w,N]),P=Object(n.useRef)({navigate(e){let{itemUrl:t}=e;v.push(t)}}).current,I=Object(n.useRef)((e=>e.map((e=>{const t=document.createElement("a");return t.href=e.url,{...e,url:b(""+t.pathname+t.hash)}})))).current,R=Object(n.useMemo)((()=>e=>r.a.createElement(V,Object(p.a)({},e,{onClose:T}))),[T]),U=Object(n.useCallback)((e=>(e.addAlgoliaAgent("docusaurus",u.docusaurusVersion),e)),[u.docusaurusVersion]);!function(e){var t=e.isOpen,a=e.onOpen,n=e.onClose,c=e.onInput,o=e.searchButtonRef;r.a.useEffect((function(){function e(e){var r;(27===e.keyCode&&t||"k"===(null===(r=e.key)||void 0===r?void 0:r.toLowerCase())&&(e.metaKey||e.ctrlKey)||!function(e){var t=e.target,a=t.tagName;return t.isContentEditable||"INPUT"===a||"SELECT"===a||"TEXTAREA"===a}(e)&&"/"===e.key&&!t)&&(e.preventDefault(),t?n():document.body.classList.contains("DocSearch--active")||document.body.classList.contains("DocSearch--active")||a()),o&&o.current===document.activeElement&&c&&/[a-zA-Z0-9]/.test(String.fromCharCode(e.keyCode))&&c(e)}return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}}),[t,a,n,c,o])}({isOpen:C,onOpen:L,onClose:T,onInput:D,searchButtonRef:j});const F=Object(o.b)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"});return r.a.createElement(r.a.Fragment,null,r.a.createElement(y.a,null,r.a.createElement("link",{rel:"preconnect",href:"https://"+i.appId+"-dsn.algolia.net",crossOrigin:"anonymous"})),r.a.createElement(A,{onTouchStart:S,onFocus:S,onMouseOver:S,onClick:L,ref:j,translations:{buttonText:F,buttonAriaLabel:F}}),C&&Object(g.createPortal)(r.a.createElement(B,Object(p.a)({onClose:T,initialScrollY:window.scrollY,initialQuery:_,navigator:P,transformItems:I,hitComponent:x,resultsFooterComponent:R,transformSearchClient:U},i,{searchParameters:h})),k.current))}var U=function(){const{siteConfig:e}=Object(E.default)();return r.a.createElement(R,e.themeConfig.algolia)},F=a(686),H=a.n(F),X=a(59),K=a.n(X);const z=e=>{let{icon:t,style:a}=e;return r.a.createElement("span",{className:Object(c.a)(K.a.toggle,K.a.dark),style:a},t)},q=e=>{let{icon:t,style:a}=e;return r.a.createElement("span",{className:Object(c.a)(K.a.toggle,K.a.light),style:a},t)};var G=function(e){const{colorMode:{switchConfig:{darkIcon:t,darkIconStyle:a,lightIcon:n,lightIconStyle:c}}}=Object(m.useThemeConfig)(),{isClient:o}=Object(E.default)();return r.a.createElement(H.a,Object(p.a)({disabled:!o,icons:{checked:r.a.createElement(z,{icon:t,style:a}),unchecked:r.a.createElement(q,{icon:n,style:c})}},e))},Y=a(647),W=a(660);var Q=e=>{const t=Object(l.useLocation)(),[a,r]=Object(n.useState)(e),c=Object(n.useRef)(!1),[o,s]=Object(n.useState)(0),[i,u]=Object(n.useState)(0),d=Object(n.useCallback)((e=>{null!==e&&u(e.getBoundingClientRect().height)}),[]);return Object(W.a)((t=>{let{scrollY:a}=t;if(!e)return;if(a=o?r(!1):a+l{e&&o&&r(!0)}),[t.pathname]),Object(n.useEffect)((()=>{e&&t.hash&&(c.current=!0)}),[t.hash]),{navbarRef:d,isNavbarVisible:a}},J=a(661),Z=a(662),$=a(641);var ee=e=>{let{width:t=20,height:a=20,...n}=e;return r.a.createElement("svg",Object(p.a)({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",width:t,height:a},n),r.a.createElement("path",{fill:"currentColor",d:"M19.753 10.909c-.624-1.707-2.366-2.726-4.661-2.726-.09 0-.176.002-.262.006l-.016-2.063 3.525-.607c.115-.019.133-.119.109-.231-.023-.111-.167-.883-.188-.976-.027-.131-.102-.127-.207-.109-.104.018-3.25.461-3.25.461l-.013-2.078c-.001-.125-.069-.158-.194-.156l-1.025.016c-.105.002-.164.049-.162.148l.033 2.307s-3.061.527-3.144.543c-.084.014-.17.053-.151.143.019.09.19 1.094.208 1.172.018.08.072.129.188.107l2.924-.504.035 2.018c-1.077.281-1.801.824-2.256 1.303-.768.807-1.207 1.887-1.207 2.963 0 1.586.971 2.529 2.328 2.695 3.162.387 5.119-3.06 5.769-4.715 1.097 1.506.256 4.354-2.094 5.98-.043.029-.098.129-.033.207l.619.756c.08.096.206.059.256.023 2.51-1.73 3.661-4.515 2.869-6.683zm-7.386 3.188c-.966-.121-.944-.914-.944-1.453 0-.773.327-1.58.876-2.156a3.21 3.21 0 011.229-.799l.082 4.277a2.773 2.773 0 01-1.243.131zm2.427-.553l.046-4.109c.084-.004.166-.01.252-.01.773 0 1.494.145 1.885.361.391.217-1.023 2.713-2.183 3.758zm-8.95-7.668a.196.196 0 00-.196-.145h-1.95a.194.194 0 00-.194.144L.008 16.916c-.017.051-.011.076.062.076h1.733c.075 0 .099-.023.114-.072l1.008-3.318h3.496l1.008 3.318c.016.049.039.072.113.072h1.734c.072 0 .078-.025.062-.076-.014-.05-3.083-9.741-3.494-11.04zm-2.618 6.318l1.447-5.25 1.447 5.25H3.226z"}))};function te(e){let{mobile:t,dropdownItemsBefore:a,dropdownItemsAfter:n,...c}=e;const{i18n:{currentLocale:o,locales:l,localeConfigs:s}}=Object(E.default)(),i=Object(m.useAlternatePageUtils)();function u(e){return s[e].label}const d=[...a,...l.map((e=>{const t="pathname://"+i.createUrl({locale:e,fullyQualified:!1});return{isNavLink:!0,label:u(e),to:t,target:"_self",autoAddBaseUrl:!1,className:e===o?"dropdown__link--active":""}})),...n],f=t?"Languages":u(o);return r.a.createElement($.a,Object(p.a)({},c,{href:"#",mobile:t,label:r.a.createElement("span",null,r.a.createElement(ee,{style:{verticalAlign:"text-bottom",marginRight:5}}),r.a.createElement("span",null,f)),items:d}))}var ae=a(60),ne=a.n(ae);function re(e){let{mobile:t}=e;return t?null:r.a.createElement("div",{className:ne.a.searchWrapper},r.a.createElement(U,null))}const ce={default:()=>$.a,localeDropdown:()=>te,search:()=>re,docsVersion:()=>a(691).default,docsVersionDropdown:()=>a(692).default,doc:()=>a(693).default},oe=function(e){void 0===e&&(e="default");const t=ce[e];if(!t)throw new Error("No NavbarItem component found for type="+e+".");return t()};function le(e){let{type:t,...a}=e;const n=oe(t);return r.a.createElement(n,a)}var se=a(663),ie=a(665),ue=a(62),de=a.n(ue);const me="right";var fe=function(){const{navbar:{items:e,hideOnScroll:t,style:a},colorMode:{disableSwitch:o}}=Object(m.useThemeConfig)(),[l,s]=Object(n.useState)(!1),{isDarkTheme:i,setLightTheme:u,setDarkTheme:d}=Object(Y.a)(),{navbarRef:f,isNavbarVisible:h}=Q(t);Object(J.a)(l);const b=Object(n.useCallback)((()=>{s(!0)}),[s]),v=Object(n.useCallback)((()=>{s(!1)}),[s]),g=Object(n.useCallback)((e=>e.target.checked?d():u()),[u,d]),E=Object(Z.a)();Object(n.useEffect)((()=>{E===Z.b.desktop&&s(!1)}),[E]);const O=e.some((e=>"search"===e.type)),{leftItems:k,rightItems:y}=function(e){return{leftItems:e.filter((e=>{var t;return"left"===(null!==(t=e.position)&&void 0!==t?t:me)})),rightItems:e.filter((e=>{var t;return"right"===(null!==(t=e.position)&&void 0!==t?t:me)}))}}(e);return r.a.createElement("nav",{ref:f,className:Object(c.a)("navbar","navbar--fixed-top",{"navbar--dark":"dark"===a,"navbar--primary":"primary"===a,"navbar-sidebar--show":l,[de.a.navbarHideable]:t,[de.a.navbarHidden]:t&&!h})},r.a.createElement("div",{className:"navbar__inner"},r.a.createElement("div",{className:"navbar__items"},null!=e&&0!==e.length&&r.a.createElement("button",{"aria-label":"Navigation bar toggle",className:"navbar__toggle",type:"button",tabIndex:0,onClick:b,onKeyDown:b},r.a.createElement(ie.a,null)),r.a.createElement(se.a,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:Object(c.a)("navbar__title")}),k.map(((e,t)=>r.a.createElement(le,Object(p.a)({},e,{key:t}))))),r.a.createElement("div",{className:"navbar__items navbar__items--right"},y.map(((e,t)=>r.a.createElement(le,Object(p.a)({},e,{key:t})))),!o&&r.a.createElement(G,{className:de.a.displayOnlyInLargeViewport,"aria-label":"Dark mode toggle",checked:i,onChange:g}),!O&&r.a.createElement(U,null))),r.a.createElement("div",{role:"presentation",className:"navbar-sidebar__backdrop",onClick:v}),r.a.createElement("div",{className:"navbar-sidebar"},r.a.createElement("div",{className:"navbar-sidebar__brand"},r.a.createElement(se.a,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title",onClick:v}),!o&&l&&r.a.createElement(G,{"aria-label":"Dark mode toggle in sidebar",checked:i,onChange:g})),r.a.createElement("div",{className:"navbar-sidebar__items"},r.a.createElement("div",{className:"menu"},r.a.createElement("ul",{className:"menu__list"},e.map(((e,t)=>r.a.createElement(le,Object(p.a)({mobile:!0},e,{onClick:v,key:t})))))))))},he=a(63),be=a.n(he),ve=a(664);function pe(e){let{to:t,href:a,label:n,prependBaseUrlToHref:c,...o}=e;const l=Object(O.a)(t),s=Object(O.a)(a,{forcePrependBaseUrl:!0});return r.a.createElement(k.a,Object(p.a)({className:"footer__link-item"},a?{href:c?s:a}:{to:l},o),n)}const ge=e=>{let{sources:t,alt:a}=e;return r.a.createElement(ve.a,{className:"footer__logo",alt:a,sources:t})};var Ee=function(){const{footer:e}=Object(m.useThemeConfig)(),{copyright:t,links:a=[],logo:n={}}=e||{},o={light:Object(O.a)(n.src),dark:Object(O.a)(n.srcDark||n.src)};return e?r.a.createElement("footer",{className:Object(c.a)("footer",{"footer--dark":"dark"===e.style})},r.a.createElement("div",{className:"container"},a&&a.length>0&&r.a.createElement("div",{className:"row footer__links"},a.map(((e,t)=>r.a.createElement("div",{key:t,className:"col footer__col"},null!=e.title?r.a.createElement("h4",{className:"footer__title"},e.title):null,null!=e.items&&Array.isArray(e.items)&&e.items.length>0?r.a.createElement("ul",{className:"footer__items"},e.items.map(((e,t)=>e.html?r.a.createElement("li",{key:t,className:"footer__item",dangerouslySetInnerHTML:{__html:e.html}}):r.a.createElement("li",{key:e.href||e.to,className:"footer__item"},r.a.createElement(pe,e))))):null)))),(n||t)&&r.a.createElement("div",{className:"footer__bottom text--center"},n&&(n.src||n.srcDark)&&r.a.createElement("div",{className:"margin-bottom--sm"},n.href?r.a.createElement(k.a,{href:n.href,className:be.a.footerLogoLink},r.a.createElement(ge,{alt:n.alt,sources:o})):r.a.createElement(ge,{alt:n.alt,sources:o})),t?r.a.createElement("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:t}}):null))):null},Oe=a(8);const ke="light",ye="dark",je=e=>e===ye?ye:ke,Ce=e=>{try{localStorage.setItem("theme",je(e))}catch(t){console.error(t)}};var we=()=>{const{colorMode:{defaultMode:e,disableSwitch:t,respectPrefersColorScheme:a}}=Object(m.useThemeConfig)(),[r,c]=Object(n.useState)((e=>Oe.a.canUseDOM?je(document.documentElement.getAttribute("data-theme")):je(e))(e)),o=Object(n.useCallback)((()=>{c(ke),Ce(ke)}),[]),l=Object(n.useCallback)((()=>{c(ye),Ce(ye)}),[]);return Object(n.useEffect)((()=>{document.documentElement.setAttribute("data-theme",je(r))}),[r]),Object(n.useEffect)((()=>{if(!t)try{const e=localStorage.getItem("theme");null!==e&&c(je(e))}catch(e){console.error(e)}}),[c]),Object(n.useEffect)((()=>{t&&!a||window.matchMedia("(prefers-color-scheme: dark)").addListener((e=>{let{matches:t}=e;c(t?ye:ke)}))}),[]),{isDarkTheme:r===ye,setLightTheme:o,setDarkTheme:l}},_e=a(659);var Ne=function(e){const{isDarkTheme:t,setLightTheme:a,setDarkTheme:n}=we();return r.a.createElement(_e.a.Provider,{value:{isDarkTheme:t,setLightTheme:a,setDarkTheme:n}},e.children)};const Se="docusaurus.tab.";var Le=()=>{const[e,t]=Object(n.useState)({}),a=Object(n.useCallback)(((e,t)=>{try{localStorage.setItem(""+Se+e,t)}catch(a){console.error(a)}}),[]);return Object(n.useEffect)((()=>{try{const e={};for(let t=0;t{t((t=>({...t,[e]:n}))),a(e,n)}}};const Te="docusaurus.announcement.dismiss",De="docusaurus.announcement.id";var Ae=()=>{const{announcementBar:e}=Object(m.useThemeConfig)(),[t,a]=Object(n.useState)(!0),r=Object(n.useCallback)((()=>{localStorage.setItem(Te,"true"),a(!0)}),[]);return Object(n.useEffect)((()=>{if(!e)return;const{id:t}=e;let n=localStorage.getItem(De);"annoucement-bar"===n&&(n="announcement-bar");const r=t!==n;localStorage.setItem(De,t),r&&localStorage.setItem(Te,"false"),(r||"false"===localStorage.getItem(Te))&&a(!1)}),[]),{isAnnouncementBarClosed:t,closeAnnouncementBar:r}},Pe=a(630);var Ie=function(e){const{tabGroupChoices:t,setTabGroupChoices:a}=Le(),{isAnnouncementBarClosed:n,closeAnnouncementBar:c}=Ae();return r.a.createElement(Pe.a.Provider,{value:{tabGroupChoices:t,setTabGroupChoices:a,isAnnouncementBarClosed:n,closeAnnouncementBar:c}},e.children)};function Me(e){let{children:t}=e;return r.a.createElement(Ne,null,r.a.createElement(Ie,null,r.a.createElement(m.DocsPreferredVersionContextProvider,null,t)))}function Be(e){let{locale:t,version:a,tag:n}=e;const c=t;return r.a.createElement(y.a,null,c&&r.a.createElement("meta",{name:"docsearch:language",content:c}),a&&r.a.createElement("meta",{name:"docsearch:version",content:a}),n&&r.a.createElement("meta",{name:"docsearch:docusaurus_tag",content:n}))}var xe=a(666);function Ve(){const{i18n:{defaultLocale:e,locales:t}}=Object(E.default)(),a=Object(m.useAlternatePageUtils)();return r.a.createElement(y.a,null,t.map((e=>r.a.createElement("link",{key:e,rel:"alternate",href:a.createUrl({locale:e,fullyQualified:!0}),hrefLang:e}))),r.a.createElement("link",{rel:"alternate",href:a.createUrl({locale:e,fullyQualified:!0}),hrefLang:"x-default"}))}function Re(e){let{permalink:t}=e;const{siteConfig:{url:a}}=Object(E.default)(),n=function(){const{siteConfig:{url:e}}=Object(E.default)(),{pathname:t}=Object(l.useLocation)();return e+Object(O.a)(t)}(),c=t?""+a+t:n;return r.a.createElement(y.a,null,r.a.createElement("meta",{property:"og:url",content:c}),r.a.createElement("link",{rel:"canonical",href:c}))}function Ue(e){const{siteConfig:t,i18n:{currentLocale:a,localeConfigs:n}}=Object(E.default)(),{favicon:c,themeConfig:{image:o,metadatas:l}}=t,{title:s,description:i,image:u,keywords:d,searchMetadatas:f}=e,h=Object(O.a)(c),b=a,v=n[a].direction;return r.a.createElement(r.a.Fragment,null,r.a.createElement(y.a,null,r.a.createElement("html",{lang:b,dir:v}),c&&r.a.createElement("link",{rel:"shortcut icon",href:h})),r.a.createElement(xe.a,{title:s,description:i,keywords:d,image:u||o}),r.a.createElement(Re,null),r.a.createElement(Ve,null),r.a.createElement(Be,Object(p.a)({tag:m.DEFAULT_SEARCH_TAG,locale:a},f)),r.a.createElement(y.a,null,l.map(((e,t)=>r.a.createElement("meta",Object(p.a)({key:"metadata_"+t},e))))))}a(64);var Fe=function(){Object(n.useEffect)((()=>{const e="navigation-with-keyboard";function t(t){"keydown"===t.type&&"Tab"===t.key&&document.body.classList.add(e),"mousedown"===t.type&&document.body.classList.remove(e)}return document.addEventListener("keydown",t),document.addEventListener("mousedown",t),()=>{document.body.classList.remove(e),document.removeEventListener("keydown",t),document.removeEventListener("mousedown",t)}}),[])};a(65);t.a=function(e){const{children:t,noFooter:a,wrapperClassName:n}=e;return Fe(),r.a.createElement(Me,null,r.a.createElement(Ue,e),r.a.createElement(d,null),r.a.createElement(v,null),r.a.createElement(fe,null),r.a.createElement("div",{className:Object(c.a)("main-wrapper",n)},t),!a&&r.a.createElement(Ee,null))}},647:function(e,t,a){"use strict";var n=a(0),r=a(659);t.a=function(){const e=Object(n.useContext)(r.a);if(null==e)throw new Error("`useThemeContext` is used outside of `Layout` Component. See https://v2.docusaurus.io/docs/api/themes/configuration#usethemecontext.");return e}},657:function(e,t,a){"use strict";var n=a(21),r=a(8),c=a(16);t.a=function(){const e=Object(n.useHistory)(),t=Object(n.useLocation)(),{siteConfig:{baseUrl:a}={}}=Object(c.default)();return{searchValue:r.a.canUseDOM&&new URLSearchParams(t.search).get("q")||"",updateSearchPath:a=>{const n=new URLSearchParams(t.search);a?n.set("q",a):n.delete("q"),e.replace({search:n.toString()})},generateSearchPageLink:e=>a+"search?q="+encodeURIComponent(e)}}},658:function(e,t,a){"use strict";a.d(t,"a",(function(){return c}));var n=a(0),r=a.n(n);function c(){return r.a.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20","aria-hidden":"true"},r.a.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}},659:function(e,t,a){"use strict";var n=a(0);const r=a.n(n).a.createContext(void 0);t.a=r},660:function(e,t,a){"use strict";var n=a(0),r=a(8);const c=()=>({scrollX:r.a.canUseDOM?window.pageXOffset:0,scrollY:r.a.canUseDOM?window.pageYOffset:0});t.a=function(e,t){void 0===t&&(t=[]);const[a,r]=Object(n.useState)(c()),o=()=>{const t=c();r(t),e&&e(t)};return Object(n.useEffect)((()=>{const e={passive:!0};return window.addEventListener("scroll",o,e),()=>window.removeEventListener("scroll",o,e)}),t),a}},661:function(e,t,a){"use strict";var n=a(0);t.a=function(e){void 0===e&&(e=!0),Object(n.useEffect)((()=>(document.body.style.overflow=e?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[e])}},662:function(e,t,a){"use strict";a.d(t,"b",(function(){return c}));var n=a(0),r=a(8);const c={desktop:"desktop",mobile:"mobile"};t.a=function(){const e=r.a.canUseDOM;function t(){if(e)return window.innerWidth>996?c.desktop:c.mobile}const[a,o]=Object(n.useState)(t);return Object(n.useEffect)((()=>{if(e)return window.addEventListener("resize",a),()=>window.removeEventListener("resize",a);function a(){o(t())}}),[]),a}},663:function(e,t,a){"use strict";var n=a(3),r=a(0),c=a.n(r),o=a(638),l=a(664),s=a(633),i=a(16),u=a(635);t.a=e=>{const{isClient:t}=Object(i.default)(),{navbar:{title:a,logo:r={src:""}}}=Object(u.useThemeConfig)(),{imageClassName:d,titleClassName:m,...f}=e,h=Object(s.a)(r.href||"/"),b={light:Object(s.a)(r.src),dark:Object(s.a)(r.srcDark||r.src)};return c.a.createElement(o.a,Object(n.a)({to:h},f,r.target&&{target:r.target}),r.src&&c.a.createElement(l.a,{key:t,className:d,sources:b,alt:r.alt||a||"Logo"}),null!=a&&c.a.createElement("strong",{className:m},a))}},664:function(e,t,a){"use strict";var n=a(3),r=a(0),c=a.n(r),o=a(628),l=a(16),s=a(647),i=a(61),u=a.n(i);t.a=e=>{const{isClient:t}=Object(l.default)(),{isDarkTheme:a}=Object(s.a)(),{sources:r,className:i,alt:d="",...m}=e,f=t?a?["dark"]:["light"]:["light","dark"];return c.a.createElement(c.a.Fragment,null,f.map((e=>c.a.createElement("img",Object(n.a)({key:e,src:r[e],alt:d,className:Object(o.a)(u.a.themedImage,u.a["themedImage--"+e],i)},m)))))}},665:function(e,t,a){"use strict";var n=a(3),r=a(0),c=a.n(r);t.a=e=>{let{width:t=30,height:a=30,className:r,...o}=e;return c.a.createElement("svg",Object(n.a)({"aria-label":"Menu",className:r,width:t,height:a,viewBox:"0 0 30 30",role:"img",focusable:"false"},o),c.a.createElement("title",null,"Menu"),c.a.createElement("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"}))}},686:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=Object.assign||function(e){for(var t=1;tthis.startX&&(this.setState({checked:!0}),this.startX=t,this.activated=ta?this.previouslyChecked!==this.state.checked&&(this.setState({checked:!1}),this.previouslyChecked=this.state.checked,t.click()):this.startX-4=0||Object.prototype.hasOwnProperty.call(e,n)&&(a[n]=e[n]);return a}(t,["className","icons"])),c=(0,l.default)("react-toggle",{"react-toggle--checked":this.state.checked,"react-toggle--focus":this.state.hasFocus,"react-toggle--disabled":this.props.disabled},a);return o.default.createElement("div",{className:c,onClick:this.handleClick,onTouchStart:this.handleTouchStart,onTouchMove:this.handleTouchMove,onTouchEnd:this.handleTouchEnd},o.default.createElement("div",{className:"react-toggle-track"},o.default.createElement("div",{className:"react-toggle-track-check"},this.getIcon("checked")),o.default.createElement("div",{className:"react-toggle-track-x"},this.getIcon("unchecked"))),o.default.createElement("div",{className:"react-toggle-thumb"}),o.default.createElement("input",n({},r,{ref:function(t){e.input=t},onFocus:this.handleFocus,onBlur:this.handleBlur,className:"react-toggle-screenreader-only",type:"checkbox"})))}}]),t}(c.PureComponent);t.default=f,f.displayName="Toggle",f.defaultProps={icons:{checked:o.default.createElement(i.default,null),unchecked:o.default.createElement(u.default,null)}},f.propTypes={checked:s.default.bool,disabled:s.default.bool,defaultChecked:s.default.bool,onChange:s.default.func,onFocus:s.default.func,onBlur:s.default.func,className:s.default.string,name:s.default.string,value:s.default.string,id:s.default.string,"aria-labelledby":s.default.string,"aria-label":s.default.string,icons:s.default.oneOfType([s.default.bool,s.default.shape({checked:s.default.node,unchecked:s.default.node})])}},687:function(e,t,a){var n;!function(){"use strict";var a={}.hasOwnProperty;function r(){for(var e="",t=0;t0){var a=t[0];return{x:a.clientX,y:a.clientY}}var n=e.pageX;if(void 0!==n)return{x:n,y:e.pageY}}return{x:0,y:0}}},691:function(e,t,a){"use strict";a.r(t),a.d(t,"default",(function(){return u}));var n=a(3),r=a(0),c=a.n(r),o=a(641),l=a(637),s=a(635);const i=e=>e.docs.find((t=>t.id===e.mainDocId));function u(e){var t;let{label:a,to:r,docsPluginId:u,...d}=e;const m=Object(l.useActiveVersion)(u),{preferredVersion:f}=Object(s.useDocsPreferredVersion)(u),h=Object(l.useLatestVersion)(u),b=null!==(t=null!=m?m:f)&&void 0!==t?t:h,v=null!=a?a:b.label,p=null!=r?r:i(b).path;return c.a.createElement(o.a,Object(n.a)({},d,{label:v,to:p}))}},692:function(e,t,a){"use strict";a.r(t),a.d(t,"default",(function(){return u}));var n=a(3),r=a(0),c=a.n(r),o=a(641),l=a(637),s=a(635);const i=e=>e.docs.find((t=>t.id===e.mainDocId));function u(e){var t,a;let{mobile:r,docsPluginId:u,dropdownActiveClassDisabled:d,dropdownItemsBefore:m,dropdownItemsAfter:f,...h}=e;const b=Object(l.useActiveDocContext)(u),v=Object(l.useVersions)(u),p=Object(l.useLatestVersion)(u),{preferredVersion:g,savePreferredVersionName:E}=Object(s.useDocsPreferredVersion)(u);const O=null!==(t=null!==(a=b.activeVersion)&&void 0!==a?a:g)&&void 0!==t?t:p,k=r?"Versions":O.label,y=r?void 0:i(O).path;return c.a.createElement(o.a,Object(n.a)({},h,{mobile:r,label:k,to:y,items:function(){const e=v.map((e=>{const t=(null==b?void 0:b.alternateDocVersions[e.name])||i(e);return{isNavLink:!0,label:e.label,to:t.path,isActive:()=>e===(null==b?void 0:b.activeVersion),onClick:()=>{E(e.name)}}})),t=[...m,...e,...f];if(!(t.length<=1))return t}(),isActive:d?()=>!1:void 0}))}},693:function(e,t,a){"use strict";a.r(t),a.d(t,"default",(function(){return u}));var n=a(3),r=a(0),c=a.n(r),o=a(641),l=a(637),s=a(628),i=a(635);function u(e){var t;let{docId:a,activeSidebarClassName:r,label:u,docsPluginId:d,...m}=e;const{activeVersion:f,activeDoc:h}=Object(l.useActiveDocContext)(d),{preferredVersion:b}=Object(i.useDocsPreferredVersion)(d),v=Object(l.useLatestVersion)(d),p=null!==(t=null!=f?f:b)&&void 0!==t?t:v,g=p.docs.find((e=>e.id===a));if(!g)throw new Error("DocNavbarItem: couldn't find any doc with id="+a+" in version "+p.name+".\nAvailable docIds=\n- "+p.docs.join("\n- "));return c.a.createElement(o.a,Object(n.a)({exact:!0},m,{className:Object(s.a)(m.className,{[r]:h&&h.sidebar===g.sidebar}),label:null!=u?u:g.id,to:g.path}))}}}]); \ No newline at end of file +/*! For license information please see 2.4f516795.js.LICENSE.txt */ +(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{629:function(e,t,a){"use strict";var n=a(0),r=a(630);t.a=function(){const e=Object(n.useContext)(r.a);if(null==e)throw new Error("`useUserPreferencesContext` is used outside of `Layout` Component.");return e}},630:function(e,t,a){"use strict";var n=a(0);const r=Object(n.createContext)(void 0);t.a=r},641:function(e,t,a){"use strict";var n=a(3),r=a(0),c=a.n(r),o=a(628),l=a(638),s=a(633),i=a(21),u=a(635);function d(e){let{activeBasePath:t,activeBaseRegex:a,to:r,href:o,label:i,activeClassName:u="navbar__link--active",prependBaseUrlToHref:d,...m}=e;const f=Object(s.a)(r),h=Object(s.a)(t),b=Object(s.a)(o,{forcePrependBaseUrl:!0});return c.a.createElement(l.a,Object(n.a)({},o?{href:d?b:o}:{isNavLink:!0,activeClassName:u,to:f,...t||a?{isActive:(e,t)=>a?new RegExp(a).test(t.pathname):t.pathname.startsWith(h)}:null},m),i)}function m(e){var t;let{items:a,position:l,className:s,...i}=e;const u=Object(r.useRef)(null),m=Object(r.useRef)(null),[f,h]=Object(r.useState)(!1);Object(r.useEffect)((()=>{const e=e=>{u.current&&!u.current.contains(e.target)&&h(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e)}}),[u]);const b=function(e,t){return void 0===t&&(t=!1),Object(o.a)({"navbar__item navbar__link":!t,dropdown__link:t},e)};return a?c.a.createElement("div",{ref:u,className:Object(o.a)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--left":"left"===l,"dropdown--right":"right"===l,"dropdown--show":f})},c.a.createElement(d,Object(n.a)({className:b(s)},i,{onClick:i.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),h(!f))}}),null!==(t=i.children)&&void 0!==t?t:i.label),c.a.createElement("ul",{ref:m,className:"dropdown__menu"},a.map(((e,t)=>{let{className:r,...o}=e;return c.a.createElement("li",{key:t},c.a.createElement(d,Object(n.a)({onKeyDown:e=>{if(t===a.length-1&&"Tab"===e.key){e.preventDefault(),h(!1);const t=u.current.nextElementSibling;t&&t.focus()}},activeClassName:"dropdown__link--active",className:b(r,!0)},o)))})))):c.a.createElement(d,Object(n.a)({className:b(s)},i))}function f(e){var t,a,l;let{items:s,className:m,position:f,...h}=e;const b=Object(r.useRef)(null),{pathname:v}=Object(i.useLocation)(),[p,g]=Object(r.useState)((()=>{var e;return null===(e=!(null!=s&&s.some((e=>Object(u.isSamePath)(e.to,v)))))||void 0===e||e})),E=function(e,t){return void 0===t&&(t=!1),Object(o.a)("menu__link",{"menu__link--sublist":t},e)};if(!s)return c.a.createElement("li",{className:"menu__list-item"},c.a.createElement(d,Object(n.a)({className:E(m)},h)));const O=null!==(t=b.current)&&void 0!==t&&t.scrollHeight?(null===(a=b.current)||void 0===a?void 0:a.scrollHeight)+"px":void 0;return c.a.createElement("li",{className:Object(o.a)("menu__list-item",{"menu__list-item--collapsed":p})},c.a.createElement(d,Object(n.a)({role:"button",className:E(m,!0)},h,{onClick:e=>{e.preventDefault(),g((e=>!e))}}),null!==(l=h.children)&&void 0!==l?l:h.label),c.a.createElement("ul",{className:"menu__list",ref:b,style:{height:p?void 0:O}},s.map(((e,t)=>{let{className:a,...r}=e;return c.a.createElement("li",{className:"menu__list-item",key:t},c.a.createElement(d,Object(n.a)({activeClassName:"menu__link--active",className:E(a)},r,{onClick:h.onClick})))}))))}t.a=function(e){let{mobile:t=!1,...a}=e;const n=t?f:m;return c.a.createElement(n,a)}},642:function(e,t,a){"use strict";var n=a(0),r=a.n(n),c=a(628),o=a(636),l=a(21),s=a(57),i=a.n(s);function u(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}var d=function(){const e=Object(n.useRef)(null),t=Object(l.useLocation)();return Object(n.useEffect)((()=>{t.hash||u(e.current)}),[t.pathname]),r.a.createElement("div",{ref:e},r.a.createElement("a",{href:"#main",className:i.a.skipToContent,onClick:e=>{e.preventDefault();const t=document.querySelector("main:first-of-type")||document.querySelector(".main-wrapper");t&&u(t)}},r.a.createElement(o.a,{id:"theme.common.skipToMainContent",description:"The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation"},"Skip to main content")))},m=a(635),f=a(629),h=a(58),b=a.n(h);var v=function(){const{isAnnouncementBarClosed:e,closeAnnouncementBar:t}=Object(f.a)(),{announcementBar:a}=Object(m.useThemeConfig)();if(!a)return null;const{content:n,backgroundColor:l,textColor:s,isCloseable:i}=a;return!n||i&&e?null:r.a.createElement("div",{className:b.a.announcementBar,style:{backgroundColor:l,color:s},role:"banner"},r.a.createElement("div",{className:Object(c.a)(b.a.announcementBarContent,{[b.a.announcementBarCloseable]:i}),dangerouslySetInnerHTML:{__html:n}}),i?r.a.createElement("button",{type:"button",className:b.a.announcementBarClose,onClick:t,"aria-label":Object(o.b)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"})},r.a.createElement("span",{"aria-hidden":"true"},"\xd7")):null)},p=a(3),g=a(27),E=a(16),O=a(633),k=a(638),y=a(22),j=a(657);function C(){return r.a.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},r.a.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}var w=a(658),_=["translations"];function N(){return N=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var a=0,n=new Array(t);a=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var D="Ctrl";var A=r.a.forwardRef((function(e,t){var a=e.translations,c=void 0===a?{}:a,o=T(e,_),l=c.buttonText,s=void 0===l?"Search":l,i=c.buttonAriaLabel,u=void 0===i?"Search":i,d=S(Object(n.useState)(null),2),m=d[0],f=d[1];return Object(n.useEffect)((function(){"undefined"!=typeof navigator&&(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?f("\u2318"):f(D))}),[]),r.a.createElement("button",N({type:"button",className:"DocSearch DocSearch-Button","aria-label":u},o,{ref:t}),r.a.createElement("span",{className:"DocSearch-Button-Container"},r.a.createElement(w.a,null),r.a.createElement("span",{className:"DocSearch-Button-Placeholder"},s)),r.a.createElement("span",{className:"DocSearch-Button-Keys"},null!==m&&r.a.createElement(r.a.Fragment,null,r.a.createElement(P,{reactsToKey:m===D?D:"Meta"},m===D?r.a.createElement(C,null):m),r.a.createElement(P,{reactsToKey:"k"},"K"))))}));function P(e){var t=e.reactsToKey,a=e.children,c=S(Object(n.useState)(!1),2),o=c[0],l=c[1];return Object(n.useEffect)((function(){if(t)return window.addEventListener("keydown",e),window.addEventListener("keyup",a),function(){window.removeEventListener("keydown",e),window.removeEventListener("keyup",a)};function e(e){e.key===t&&l(!0)}function a(e){e.key!==t&&"Meta"!==e.key||l(!1)}}),[t]),r.a.createElement("kbd",{className:o?"DocSearch-Button-Key DocSearch-Button-Key--pressed":"DocSearch-Button-Key"},a)}var I=a(637);function M(){const{locale:e,tags:t}=function(){const{i18n:e}=Object(E.default)(),t=Object(I.useAllDocsData)(),a=Object(I.useActivePluginAndVersion)(),n=Object(m.useDocsPreferredVersionByPluginId)(),r=[m.DEFAULT_SEARCH_TAG,...Object.keys(t).map((function(e){var r,c;const o=(null==a||null===(r=a.activePlugin)||void 0===r?void 0:r.pluginId)===e?a.activeVersion:void 0,l=n[e],s=t[e].versions.find((e=>e.isLast)),i=null!==(c=null!=o?o:l)&&void 0!==c?c:s;return Object(m.docVersionSearchTag)(e,i.name)}))];return{locale:e.currentLocale,tags:r}}();return["language:"+e,t.map((e=>"docusaurus_tag:"+e))]}let B=null;function x(e){let{hit:t,children:a}=e;return r.a.createElement(k.a,{to:t.url},a)}function V(e){let{state:t,onClose:a}=e;const{generateSearchPageLink:n}=Object(j.a)();return r.a.createElement(k.a,{to:n(t.query),onClick:a},"See all ",t.context.nbHits," results")}function R(e){var t,c;let{contextualSearch:s,...i}=e;const{siteMetadata:u}=Object(E.default)(),d=M(),m=null!==(t=null===(c=i.searchParameters)||void 0===c?void 0:c.facetFilters)&&void 0!==t?t:[],f=s?[...d,...m]:m,h={...i.searchParameters,facetFilters:f},{withBaseUrl:b}=Object(O.b)(),v=Object(l.useHistory)(),k=Object(n.useRef)(null),j=Object(n.useRef)(null),[C,w]=Object(n.useState)(!1),[_,N]=Object(n.useState)(null),S=Object(n.useCallback)((()=>B?Promise.resolve():Promise.all([a.e(555).then(a.bind(null,760)),Promise.all([a.e(0),a.e(556)]).then(a.bind(null,759)),a.e(0).then(a.t.bind(null,626,7))]).then((e=>{let[{DocSearchModal:t}]=e;B=t}))),[]),L=Object(n.useCallback)((()=>{S().then((()=>{k.current=document.createElement("div"),document.body.insertBefore(k.current,document.body.firstChild),w(!0)}))}),[S,w]),T=Object(n.useCallback)((()=>{w(!1),k.current.remove()}),[w]),D=Object(n.useCallback)((e=>{S().then((()=>{w(!0),N(e.key)}))}),[S,w,N]),P=Object(n.useRef)({navigate(e){let{itemUrl:t}=e;v.push(t)}}).current,I=Object(n.useRef)((e=>e.map((e=>{const t=document.createElement("a");return t.href=e.url,{...e,url:b(""+t.pathname+t.hash)}})))).current,R=Object(n.useMemo)((()=>e=>r.a.createElement(V,Object(p.a)({},e,{onClose:T}))),[T]),U=Object(n.useCallback)((e=>(e.addAlgoliaAgent("docusaurus",u.docusaurusVersion),e)),[u.docusaurusVersion]);!function(e){var t=e.isOpen,a=e.onOpen,n=e.onClose,c=e.onInput,o=e.searchButtonRef;r.a.useEffect((function(){function e(e){var r;(27===e.keyCode&&t||"k"===(null===(r=e.key)||void 0===r?void 0:r.toLowerCase())&&(e.metaKey||e.ctrlKey)||!function(e){var t=e.target,a=t.tagName;return t.isContentEditable||"INPUT"===a||"SELECT"===a||"TEXTAREA"===a}(e)&&"/"===e.key&&!t)&&(e.preventDefault(),t?n():document.body.classList.contains("DocSearch--active")||document.body.classList.contains("DocSearch--active")||a()),o&&o.current===document.activeElement&&c&&/[a-zA-Z0-9]/.test(String.fromCharCode(e.keyCode))&&c(e)}return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}}),[t,a,n,c,o])}({isOpen:C,onOpen:L,onClose:T,onInput:D,searchButtonRef:j});const F=Object(o.b)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"});return r.a.createElement(r.a.Fragment,null,r.a.createElement(y.a,null,r.a.createElement("link",{rel:"preconnect",href:"https://"+i.appId+"-dsn.algolia.net",crossOrigin:"anonymous"})),r.a.createElement(A,{onTouchStart:S,onFocus:S,onMouseOver:S,onClick:L,ref:j,translations:{buttonText:F,buttonAriaLabel:F}}),C&&Object(g.createPortal)(r.a.createElement(B,Object(p.a)({onClose:T,initialScrollY:window.scrollY,initialQuery:_,navigator:P,transformItems:I,hitComponent:x,resultsFooterComponent:R,transformSearchClient:U},i,{searchParameters:h})),k.current))}var U=function(){const{siteConfig:e}=Object(E.default)();return r.a.createElement(R,e.themeConfig.algolia)},F=a(686),H=a.n(F),X=a(59),K=a.n(X);const z=e=>{let{icon:t,style:a}=e;return r.a.createElement("span",{className:Object(c.a)(K.a.toggle,K.a.dark),style:a},t)},q=e=>{let{icon:t,style:a}=e;return r.a.createElement("span",{className:Object(c.a)(K.a.toggle,K.a.light),style:a},t)};var G=function(e){const{colorMode:{switchConfig:{darkIcon:t,darkIconStyle:a,lightIcon:n,lightIconStyle:c}}}=Object(m.useThemeConfig)(),{isClient:o}=Object(E.default)();return r.a.createElement(H.a,Object(p.a)({disabled:!o,icons:{checked:r.a.createElement(z,{icon:t,style:a}),unchecked:r.a.createElement(q,{icon:n,style:c})}},e))},Y=a(647),W=a(660);var Q=e=>{const t=Object(l.useLocation)(),[a,r]=Object(n.useState)(e),c=Object(n.useRef)(!1),[o,s]=Object(n.useState)(0),[i,u]=Object(n.useState)(0),d=Object(n.useCallback)((e=>{null!==e&&u(e.getBoundingClientRect().height)}),[]);return Object(W.a)((t=>{let{scrollY:a}=t;if(!e)return;if(a=o?r(!1):a+l{e&&o&&r(!0)}),[t.pathname]),Object(n.useEffect)((()=>{e&&t.hash&&(c.current=!0)}),[t.hash]),{navbarRef:d,isNavbarVisible:a}},J=a(661),Z=a(662),$=a(641);var ee=e=>{let{width:t=20,height:a=20,...n}=e;return r.a.createElement("svg",Object(p.a)({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",width:t,height:a},n),r.a.createElement("path",{fill:"currentColor",d:"M19.753 10.909c-.624-1.707-2.366-2.726-4.661-2.726-.09 0-.176.002-.262.006l-.016-2.063 3.525-.607c.115-.019.133-.119.109-.231-.023-.111-.167-.883-.188-.976-.027-.131-.102-.127-.207-.109-.104.018-3.25.461-3.25.461l-.013-2.078c-.001-.125-.069-.158-.194-.156l-1.025.016c-.105.002-.164.049-.162.148l.033 2.307s-3.061.527-3.144.543c-.084.014-.17.053-.151.143.019.09.19 1.094.208 1.172.018.08.072.129.188.107l2.924-.504.035 2.018c-1.077.281-1.801.824-2.256 1.303-.768.807-1.207 1.887-1.207 2.963 0 1.586.971 2.529 2.328 2.695 3.162.387 5.119-3.06 5.769-4.715 1.097 1.506.256 4.354-2.094 5.98-.043.029-.098.129-.033.207l.619.756c.08.096.206.059.256.023 2.51-1.73 3.661-4.515 2.869-6.683zm-7.386 3.188c-.966-.121-.944-.914-.944-1.453 0-.773.327-1.58.876-2.156a3.21 3.21 0 011.229-.799l.082 4.277a2.773 2.773 0 01-1.243.131zm2.427-.553l.046-4.109c.084-.004.166-.01.252-.01.773 0 1.494.145 1.885.361.391.217-1.023 2.713-2.183 3.758zm-8.95-7.668a.196.196 0 00-.196-.145h-1.95a.194.194 0 00-.194.144L.008 16.916c-.017.051-.011.076.062.076h1.733c.075 0 .099-.023.114-.072l1.008-3.318h3.496l1.008 3.318c.016.049.039.072.113.072h1.734c.072 0 .078-.025.062-.076-.014-.05-3.083-9.741-3.494-11.04zm-2.618 6.318l1.447-5.25 1.447 5.25H3.226z"}))};function te(e){let{mobile:t,dropdownItemsBefore:a,dropdownItemsAfter:n,...c}=e;const{i18n:{currentLocale:o,locales:l,localeConfigs:s}}=Object(E.default)(),i=Object(m.useAlternatePageUtils)();function u(e){return s[e].label}const d=[...a,...l.map((e=>{const t="pathname://"+i.createUrl({locale:e,fullyQualified:!1});return{isNavLink:!0,label:u(e),to:t,target:"_self",autoAddBaseUrl:!1,className:e===o?"dropdown__link--active":""}})),...n],f=t?"Languages":u(o);return r.a.createElement($.a,Object(p.a)({},c,{href:"#",mobile:t,label:r.a.createElement("span",null,r.a.createElement(ee,{style:{verticalAlign:"text-bottom",marginRight:5}}),r.a.createElement("span",null,f)),items:d}))}var ae=a(60),ne=a.n(ae);function re(e){let{mobile:t}=e;return t?null:r.a.createElement("div",{className:ne.a.searchWrapper},r.a.createElement(U,null))}const ce={default:()=>$.a,localeDropdown:()=>te,search:()=>re,docsVersion:()=>a(691).default,docsVersionDropdown:()=>a(692).default,doc:()=>a(693).default},oe=function(e){void 0===e&&(e="default");const t=ce[e];if(!t)throw new Error("No NavbarItem component found for type="+e+".");return t()};function le(e){let{type:t,...a}=e;const n=oe(t);return r.a.createElement(n,a)}var se=a(663),ie=a(665),ue=a(62),de=a.n(ue);const me="right";var fe=function(){const{navbar:{items:e,hideOnScroll:t,style:a},colorMode:{disableSwitch:o}}=Object(m.useThemeConfig)(),[l,s]=Object(n.useState)(!1),{isDarkTheme:i,setLightTheme:u,setDarkTheme:d}=Object(Y.a)(),{navbarRef:f,isNavbarVisible:h}=Q(t);Object(J.a)(l);const b=Object(n.useCallback)((()=>{s(!0)}),[s]),v=Object(n.useCallback)((()=>{s(!1)}),[s]),g=Object(n.useCallback)((e=>e.target.checked?d():u()),[u,d]),E=Object(Z.a)();Object(n.useEffect)((()=>{E===Z.b.desktop&&s(!1)}),[E]);const O=e.some((e=>"search"===e.type)),{leftItems:k,rightItems:y}=function(e){return{leftItems:e.filter((e=>{var t;return"left"===(null!==(t=e.position)&&void 0!==t?t:me)})),rightItems:e.filter((e=>{var t;return"right"===(null!==(t=e.position)&&void 0!==t?t:me)}))}}(e);return r.a.createElement("nav",{ref:f,className:Object(c.a)("navbar","navbar--fixed-top",{"navbar--dark":"dark"===a,"navbar--primary":"primary"===a,"navbar-sidebar--show":l,[de.a.navbarHideable]:t,[de.a.navbarHidden]:t&&!h})},r.a.createElement("div",{className:"navbar__inner"},r.a.createElement("div",{className:"navbar__items"},null!=e&&0!==e.length&&r.a.createElement("button",{"aria-label":"Navigation bar toggle",className:"navbar__toggle",type:"button",tabIndex:0,onClick:b,onKeyDown:b},r.a.createElement(ie.a,null)),r.a.createElement(se.a,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:Object(c.a)("navbar__title")}),k.map(((e,t)=>r.a.createElement(le,Object(p.a)({},e,{key:t}))))),r.a.createElement("div",{className:"navbar__items navbar__items--right"},y.map(((e,t)=>r.a.createElement(le,Object(p.a)({},e,{key:t})))),!o&&r.a.createElement(G,{className:de.a.displayOnlyInLargeViewport,"aria-label":"Dark mode toggle",checked:i,onChange:g}),!O&&r.a.createElement(U,null))),r.a.createElement("div",{role:"presentation",className:"navbar-sidebar__backdrop",onClick:v}),r.a.createElement("div",{className:"navbar-sidebar"},r.a.createElement("div",{className:"navbar-sidebar__brand"},r.a.createElement(se.a,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title",onClick:v}),!o&&l&&r.a.createElement(G,{"aria-label":"Dark mode toggle in sidebar",checked:i,onChange:g})),r.a.createElement("div",{className:"navbar-sidebar__items"},r.a.createElement("div",{className:"menu"},r.a.createElement("ul",{className:"menu__list"},e.map(((e,t)=>r.a.createElement(le,Object(p.a)({mobile:!0},e,{onClick:v,key:t})))))))))},he=a(63),be=a.n(he),ve=a(664);function pe(e){let{to:t,href:a,label:n,prependBaseUrlToHref:c,...o}=e;const l=Object(O.a)(t),s=Object(O.a)(a,{forcePrependBaseUrl:!0});return r.a.createElement(k.a,Object(p.a)({className:"footer__link-item"},a?{href:c?s:a}:{to:l},o),n)}const ge=e=>{let{sources:t,alt:a}=e;return r.a.createElement(ve.a,{className:"footer__logo",alt:a,sources:t})};var Ee=function(){const{footer:e}=Object(m.useThemeConfig)(),{copyright:t,links:a=[],logo:n={}}=e||{},o={light:Object(O.a)(n.src),dark:Object(O.a)(n.srcDark||n.src)};return e?r.a.createElement("footer",{className:Object(c.a)("footer",{"footer--dark":"dark"===e.style})},r.a.createElement("div",{className:"container"},a&&a.length>0&&r.a.createElement("div",{className:"row footer__links"},a.map(((e,t)=>r.a.createElement("div",{key:t,className:"col footer__col"},null!=e.title?r.a.createElement("h4",{className:"footer__title"},e.title):null,null!=e.items&&Array.isArray(e.items)&&e.items.length>0?r.a.createElement("ul",{className:"footer__items"},e.items.map(((e,t)=>e.html?r.a.createElement("li",{key:t,className:"footer__item",dangerouslySetInnerHTML:{__html:e.html}}):r.a.createElement("li",{key:e.href||e.to,className:"footer__item"},r.a.createElement(pe,e))))):null)))),(n||t)&&r.a.createElement("div",{className:"footer__bottom text--center"},n&&(n.src||n.srcDark)&&r.a.createElement("div",{className:"margin-bottom--sm"},n.href?r.a.createElement(k.a,{href:n.href,className:be.a.footerLogoLink},r.a.createElement(ge,{alt:n.alt,sources:o})):r.a.createElement(ge,{alt:n.alt,sources:o})),t?r.a.createElement("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:t}}):null))):null},Oe=a(8);const ke="light",ye="dark",je=e=>e===ye?ye:ke,Ce=e=>{try{localStorage.setItem("theme",je(e))}catch(t){console.error(t)}};var we=()=>{const{colorMode:{defaultMode:e,disableSwitch:t,respectPrefersColorScheme:a}}=Object(m.useThemeConfig)(),[r,c]=Object(n.useState)((e=>Oe.a.canUseDOM?je(document.documentElement.getAttribute("data-theme")):je(e))(e)),o=Object(n.useCallback)((()=>{c(ke),Ce(ke)}),[]),l=Object(n.useCallback)((()=>{c(ye),Ce(ye)}),[]);return Object(n.useEffect)((()=>{document.documentElement.setAttribute("data-theme",je(r))}),[r]),Object(n.useEffect)((()=>{if(!t)try{const e=localStorage.getItem("theme");null!==e&&c(je(e))}catch(e){console.error(e)}}),[c]),Object(n.useEffect)((()=>{t&&!a||window.matchMedia("(prefers-color-scheme: dark)").addListener((e=>{let{matches:t}=e;c(t?ye:ke)}))}),[]),{isDarkTheme:r===ye,setLightTheme:o,setDarkTheme:l}},_e=a(659);var Ne=function(e){const{isDarkTheme:t,setLightTheme:a,setDarkTheme:n}=we();return r.a.createElement(_e.a.Provider,{value:{isDarkTheme:t,setLightTheme:a,setDarkTheme:n}},e.children)};const Se="docusaurus.tab.";var Le=()=>{const[e,t]=Object(n.useState)({}),a=Object(n.useCallback)(((e,t)=>{try{localStorage.setItem(""+Se+e,t)}catch(a){console.error(a)}}),[]);return Object(n.useEffect)((()=>{try{const e={};for(let t=0;t{t((t=>({...t,[e]:n}))),a(e,n)}}};const Te="docusaurus.announcement.dismiss",De="docusaurus.announcement.id";var Ae=()=>{const{announcementBar:e}=Object(m.useThemeConfig)(),[t,a]=Object(n.useState)(!0),r=Object(n.useCallback)((()=>{localStorage.setItem(Te,"true"),a(!0)}),[]);return Object(n.useEffect)((()=>{if(!e)return;const{id:t}=e;let n=localStorage.getItem(De);"annoucement-bar"===n&&(n="announcement-bar");const r=t!==n;localStorage.setItem(De,t),r&&localStorage.setItem(Te,"false"),(r||"false"===localStorage.getItem(Te))&&a(!1)}),[]),{isAnnouncementBarClosed:t,closeAnnouncementBar:r}},Pe=a(630);var Ie=function(e){const{tabGroupChoices:t,setTabGroupChoices:a}=Le(),{isAnnouncementBarClosed:n,closeAnnouncementBar:c}=Ae();return r.a.createElement(Pe.a.Provider,{value:{tabGroupChoices:t,setTabGroupChoices:a,isAnnouncementBarClosed:n,closeAnnouncementBar:c}},e.children)};function Me(e){let{children:t}=e;return r.a.createElement(Ne,null,r.a.createElement(Ie,null,r.a.createElement(m.DocsPreferredVersionContextProvider,null,t)))}function Be(e){let{locale:t,version:a,tag:n}=e;const c=t;return r.a.createElement(y.a,null,c&&r.a.createElement("meta",{name:"docsearch:language",content:c}),a&&r.a.createElement("meta",{name:"docsearch:version",content:a}),n&&r.a.createElement("meta",{name:"docsearch:docusaurus_tag",content:n}))}var xe=a(666);function Ve(){const{i18n:{defaultLocale:e,locales:t}}=Object(E.default)(),a=Object(m.useAlternatePageUtils)();return r.a.createElement(y.a,null,t.map((e=>r.a.createElement("link",{key:e,rel:"alternate",href:a.createUrl({locale:e,fullyQualified:!0}),hrefLang:e}))),r.a.createElement("link",{rel:"alternate",href:a.createUrl({locale:e,fullyQualified:!0}),hrefLang:"x-default"}))}function Re(e){let{permalink:t}=e;const{siteConfig:{url:a}}=Object(E.default)(),n=function(){const{siteConfig:{url:e}}=Object(E.default)(),{pathname:t}=Object(l.useLocation)();return e+Object(O.a)(t)}(),c=t?""+a+t:n;return r.a.createElement(y.a,null,r.a.createElement("meta",{property:"og:url",content:c}),r.a.createElement("link",{rel:"canonical",href:c}))}function Ue(e){const{siteConfig:t,i18n:{currentLocale:a,localeConfigs:n}}=Object(E.default)(),{favicon:c,themeConfig:{image:o,metadatas:l}}=t,{title:s,description:i,image:u,keywords:d,searchMetadatas:f}=e,h=Object(O.a)(c),b=a,v=n[a].direction;return r.a.createElement(r.a.Fragment,null,r.a.createElement(y.a,null,r.a.createElement("html",{lang:b,dir:v}),c&&r.a.createElement("link",{rel:"shortcut icon",href:h})),r.a.createElement(xe.a,{title:s,description:i,keywords:d,image:u||o}),r.a.createElement(Re,null),r.a.createElement(Ve,null),r.a.createElement(Be,Object(p.a)({tag:m.DEFAULT_SEARCH_TAG,locale:a},f)),r.a.createElement(y.a,null,l.map(((e,t)=>r.a.createElement("meta",Object(p.a)({key:"metadata_"+t},e))))))}a(64);var Fe=function(){Object(n.useEffect)((()=>{const e="navigation-with-keyboard";function t(t){"keydown"===t.type&&"Tab"===t.key&&document.body.classList.add(e),"mousedown"===t.type&&document.body.classList.remove(e)}return document.addEventListener("keydown",t),document.addEventListener("mousedown",t),()=>{document.body.classList.remove(e),document.removeEventListener("keydown",t),document.removeEventListener("mousedown",t)}}),[])};a(65);t.a=function(e){const{children:t,noFooter:a,wrapperClassName:n}=e;return Fe(),r.a.createElement(Me,null,r.a.createElement(Ue,e),r.a.createElement(d,null),r.a.createElement(v,null),r.a.createElement(fe,null),r.a.createElement("div",{className:Object(c.a)("main-wrapper",n)},t),!a&&r.a.createElement(Ee,null))}},647:function(e,t,a){"use strict";var n=a(0),r=a(659);t.a=function(){const e=Object(n.useContext)(r.a);if(null==e)throw new Error("`useThemeContext` is used outside of `Layout` Component. See https://v2.docusaurus.io/docs/api/themes/configuration#usethemecontext.");return e}},657:function(e,t,a){"use strict";var n=a(21),r=a(8),c=a(16);t.a=function(){const e=Object(n.useHistory)(),t=Object(n.useLocation)(),{siteConfig:{baseUrl:a}={}}=Object(c.default)();return{searchValue:r.a.canUseDOM&&new URLSearchParams(t.search).get("q")||"",updateSearchPath:a=>{const n=new URLSearchParams(t.search);a?n.set("q",a):n.delete("q"),e.replace({search:n.toString()})},generateSearchPageLink:e=>a+"search?q="+encodeURIComponent(e)}}},658:function(e,t,a){"use strict";a.d(t,"a",(function(){return c}));var n=a(0),r=a.n(n);function c(){return r.a.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20","aria-hidden":"true"},r.a.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}},659:function(e,t,a){"use strict";var n=a(0);const r=a.n(n).a.createContext(void 0);t.a=r},660:function(e,t,a){"use strict";var n=a(0),r=a(8);const c=()=>({scrollX:r.a.canUseDOM?window.pageXOffset:0,scrollY:r.a.canUseDOM?window.pageYOffset:0});t.a=function(e,t){void 0===t&&(t=[]);const[a,r]=Object(n.useState)(c()),o=()=>{const t=c();r(t),e&&e(t)};return Object(n.useEffect)((()=>{const e={passive:!0};return window.addEventListener("scroll",o,e),()=>window.removeEventListener("scroll",o,e)}),t),a}},661:function(e,t,a){"use strict";var n=a(0);t.a=function(e){void 0===e&&(e=!0),Object(n.useEffect)((()=>(document.body.style.overflow=e?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[e])}},662:function(e,t,a){"use strict";a.d(t,"b",(function(){return c}));var n=a(0),r=a(8);const c={desktop:"desktop",mobile:"mobile"};t.a=function(){const e=r.a.canUseDOM;function t(){if(e)return window.innerWidth>996?c.desktop:c.mobile}const[a,o]=Object(n.useState)(t);return Object(n.useEffect)((()=>{if(e)return window.addEventListener("resize",a),()=>window.removeEventListener("resize",a);function a(){o(t())}}),[]),a}},663:function(e,t,a){"use strict";var n=a(3),r=a(0),c=a.n(r),o=a(638),l=a(664),s=a(633),i=a(16),u=a(635);t.a=e=>{const{isClient:t}=Object(i.default)(),{navbar:{title:a,logo:r={src:""}}}=Object(u.useThemeConfig)(),{imageClassName:d,titleClassName:m,...f}=e,h=Object(s.a)(r.href||"/"),b={light:Object(s.a)(r.src),dark:Object(s.a)(r.srcDark||r.src)};return c.a.createElement(o.a,Object(n.a)({to:h},f,r.target&&{target:r.target}),r.src&&c.a.createElement(l.a,{key:t,className:d,sources:b,alt:r.alt||a||"Logo"}),null!=a&&c.a.createElement("strong",{className:m},a))}},664:function(e,t,a){"use strict";var n=a(3),r=a(0),c=a.n(r),o=a(628),l=a(16),s=a(647),i=a(61),u=a.n(i);t.a=e=>{const{isClient:t}=Object(l.default)(),{isDarkTheme:a}=Object(s.a)(),{sources:r,className:i,alt:d="",...m}=e,f=t?a?["dark"]:["light"]:["light","dark"];return c.a.createElement(c.a.Fragment,null,f.map((e=>c.a.createElement("img",Object(n.a)({key:e,src:r[e],alt:d,className:Object(o.a)(u.a.themedImage,u.a["themedImage--"+e],i)},m)))))}},665:function(e,t,a){"use strict";var n=a(3),r=a(0),c=a.n(r);t.a=e=>{let{width:t=30,height:a=30,className:r,...o}=e;return c.a.createElement("svg",Object(n.a)({"aria-label":"Menu",className:r,width:t,height:a,viewBox:"0 0 30 30",role:"img",focusable:"false"},o),c.a.createElement("title",null,"Menu"),c.a.createElement("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"}))}},686:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=Object.assign||function(e){for(var t=1;tthis.startX&&(this.setState({checked:!0}),this.startX=t,this.activated=ta?this.previouslyChecked!==this.state.checked&&(this.setState({checked:!1}),this.previouslyChecked=this.state.checked,t.click()):this.startX-4=0||Object.prototype.hasOwnProperty.call(e,n)&&(a[n]=e[n]);return a}(t,["className","icons"])),c=(0,l.default)("react-toggle",{"react-toggle--checked":this.state.checked,"react-toggle--focus":this.state.hasFocus,"react-toggle--disabled":this.props.disabled},a);return o.default.createElement("div",{className:c,onClick:this.handleClick,onTouchStart:this.handleTouchStart,onTouchMove:this.handleTouchMove,onTouchEnd:this.handleTouchEnd},o.default.createElement("div",{className:"react-toggle-track"},o.default.createElement("div",{className:"react-toggle-track-check"},this.getIcon("checked")),o.default.createElement("div",{className:"react-toggle-track-x"},this.getIcon("unchecked"))),o.default.createElement("div",{className:"react-toggle-thumb"}),o.default.createElement("input",n({},r,{ref:function(t){e.input=t},onFocus:this.handleFocus,onBlur:this.handleBlur,className:"react-toggle-screenreader-only",type:"checkbox"})))}}]),t}(c.PureComponent);t.default=f,f.displayName="Toggle",f.defaultProps={icons:{checked:o.default.createElement(i.default,null),unchecked:o.default.createElement(u.default,null)}},f.propTypes={checked:s.default.bool,disabled:s.default.bool,defaultChecked:s.default.bool,onChange:s.default.func,onFocus:s.default.func,onBlur:s.default.func,className:s.default.string,name:s.default.string,value:s.default.string,id:s.default.string,"aria-labelledby":s.default.string,"aria-label":s.default.string,icons:s.default.oneOfType([s.default.bool,s.default.shape({checked:s.default.node,unchecked:s.default.node})])}},687:function(e,t,a){var n;!function(){"use strict";var a={}.hasOwnProperty;function r(){for(var e="",t=0;t0){var a=t[0];return{x:a.clientX,y:a.clientY}}var n=e.pageX;if(void 0!==n)return{x:n,y:e.pageY}}return{x:0,y:0}}},691:function(e,t,a){"use strict";a.r(t),a.d(t,"default",(function(){return u}));var n=a(3),r=a(0),c=a.n(r),o=a(641),l=a(637),s=a(635);const i=e=>e.docs.find((t=>t.id===e.mainDocId));function u(e){var t;let{label:a,to:r,docsPluginId:u,...d}=e;const m=Object(l.useActiveVersion)(u),{preferredVersion:f}=Object(s.useDocsPreferredVersion)(u),h=Object(l.useLatestVersion)(u),b=null!==(t=null!=m?m:f)&&void 0!==t?t:h,v=null!=a?a:b.label,p=null!=r?r:i(b).path;return c.a.createElement(o.a,Object(n.a)({},d,{label:v,to:p}))}},692:function(e,t,a){"use strict";a.r(t),a.d(t,"default",(function(){return u}));var n=a(3),r=a(0),c=a.n(r),o=a(641),l=a(637),s=a(635);const i=e=>e.docs.find((t=>t.id===e.mainDocId));function u(e){var t,a;let{mobile:r,docsPluginId:u,dropdownActiveClassDisabled:d,dropdownItemsBefore:m,dropdownItemsAfter:f,...h}=e;const b=Object(l.useActiveDocContext)(u),v=Object(l.useVersions)(u),p=Object(l.useLatestVersion)(u),{preferredVersion:g,savePreferredVersionName:E}=Object(s.useDocsPreferredVersion)(u);const O=null!==(t=null!==(a=b.activeVersion)&&void 0!==a?a:g)&&void 0!==t?t:p,k=r?"Versions":O.label,y=r?void 0:i(O).path;return c.a.createElement(o.a,Object(n.a)({},h,{mobile:r,label:k,to:y,items:function(){const e=v.map((e=>{const t=(null==b?void 0:b.alternateDocVersions[e.name])||i(e);return{isNavLink:!0,label:e.label,to:t.path,isActive:()=>e===(null==b?void 0:b.activeVersion),onClick:()=>{E(e.name)}}})),t=[...m,...e,...f];if(!(t.length<=1))return t}(),isActive:d?()=>!1:void 0}))}},693:function(e,t,a){"use strict";a.r(t),a.d(t,"default",(function(){return u}));var n=a(3),r=a(0),c=a.n(r),o=a(641),l=a(637),s=a(628),i=a(635);function u(e){var t;let{docId:a,activeSidebarClassName:r,label:u,docsPluginId:d,...m}=e;const{activeVersion:f,activeDoc:h}=Object(l.useActiveDocContext)(d),{preferredVersion:b}=Object(i.useDocsPreferredVersion)(d),v=Object(l.useLatestVersion)(d),p=null!==(t=null!=f?f:b)&&void 0!==t?t:v,g=p.docs.find((e=>e.id===a));if(!g)throw new Error("DocNavbarItem: couldn't find any doc with id="+a+" in version "+p.name+".\nAvailable docIds=\n- "+p.docs.join("\n- "));return c.a.createElement(o.a,Object(n.a)({exact:!0},m,{className:Object(s.a)(m.className,{[r]:h&&h.sidebar===g.sidebar}),label:null!=u?u:g.id,to:g.path}))}}}]); \ No newline at end of file diff --git a/assets/js/2.1804722f.js.LICENSE.txt b/assets/js/2.4f516795.js.LICENSE.txt similarity index 100% rename from assets/js/2.1804722f.js.LICENSE.txt rename to assets/js/2.4f516795.js.LICENSE.txt diff --git a/assets/js/2052c8bf.06ba8078.js b/assets/js/2052c8bf.f96c77e0.js similarity index 100% rename from assets/js/2052c8bf.06ba8078.js rename to assets/js/2052c8bf.f96c77e0.js diff --git a/assets/js/20ba5dc4.75895693.js b/assets/js/20ba5dc4.aa62d454.js similarity index 100% rename from assets/js/20ba5dc4.75895693.js rename to assets/js/20ba5dc4.aa62d454.js diff --git a/assets/js/2174d7ad.eed9a376.js b/assets/js/2174d7ad.6c1c5c17.js similarity index 100% rename from assets/js/2174d7ad.eed9a376.js rename to assets/js/2174d7ad.6c1c5c17.js diff --git a/assets/js/21f705f8.7a7e27d1.js b/assets/js/21f705f8.1d337103.js similarity index 100% rename from assets/js/21f705f8.7a7e27d1.js rename to assets/js/21f705f8.1d337103.js diff --git a/assets/js/224d62cb.957e8d64.js b/assets/js/224d62cb.a52f0338.js similarity index 100% rename from assets/js/224d62cb.957e8d64.js rename to assets/js/224d62cb.a52f0338.js diff --git a/assets/js/225ed1f6.7b9f5f99.js b/assets/js/225ed1f6.4898a27a.js similarity index 100% rename from assets/js/225ed1f6.7b9f5f99.js rename to assets/js/225ed1f6.4898a27a.js diff --git a/assets/js/229cc33d.ce773ebf.js b/assets/js/229cc33d.54e2994e.js similarity index 100% rename from assets/js/229cc33d.ce773ebf.js rename to assets/js/229cc33d.54e2994e.js diff --git a/assets/js/22f62845.9cb568c8.js b/assets/js/22f62845.ce9f8dad.js similarity index 100% rename from assets/js/22f62845.9cb568c8.js rename to assets/js/22f62845.ce9f8dad.js diff --git a/assets/js/230b1eeb.9f774c59.js b/assets/js/230b1eeb.1aeeaa01.js similarity index 100% rename from assets/js/230b1eeb.9f774c59.js rename to assets/js/230b1eeb.1aeeaa01.js diff --git a/assets/js/23364b07.929782a4.js b/assets/js/23364b07.4f5422ff.js similarity index 100% rename from assets/js/23364b07.929782a4.js rename to assets/js/23364b07.4f5422ff.js diff --git a/assets/js/2351c769.df971986.js b/assets/js/2351c769.42a42d93.js similarity index 100% rename from assets/js/2351c769.df971986.js rename to assets/js/2351c769.42a42d93.js diff --git a/assets/js/247738c9.a8eb2a43.js b/assets/js/247738c9.2ec936fd.js similarity index 100% rename from assets/js/247738c9.a8eb2a43.js rename to assets/js/247738c9.2ec936fd.js diff --git a/assets/js/25d8378a.6750faf8.js b/assets/js/25d8378a.228db931.js similarity index 100% rename from assets/js/25d8378a.6750faf8.js rename to assets/js/25d8378a.228db931.js diff --git a/assets/js/26eea951.ed70baf0.js b/assets/js/26eea951.ec85c49f.js similarity index 100% rename from assets/js/26eea951.ed70baf0.js rename to assets/js/26eea951.ec85c49f.js diff --git a/assets/js/27767c4e.daf1f8fd.js b/assets/js/27767c4e.7794244f.js similarity index 100% rename from assets/js/27767c4e.daf1f8fd.js rename to assets/js/27767c4e.7794244f.js diff --git a/assets/js/277f3e44.13921d5f.js b/assets/js/277f3e44.ee1db46c.js similarity index 100% rename from assets/js/277f3e44.13921d5f.js rename to assets/js/277f3e44.ee1db46c.js diff --git a/assets/js/27c72f74.7ba1ae7e.js b/assets/js/27c72f74.02dcedd1.js similarity index 100% rename from assets/js/27c72f74.7ba1ae7e.js rename to assets/js/27c72f74.02dcedd1.js diff --git a/assets/js/27e70a48.d1433326.js b/assets/js/27e70a48.b4d3ea4d.js similarity index 100% rename from assets/js/27e70a48.d1433326.js rename to assets/js/27e70a48.b4d3ea4d.js diff --git a/assets/js/284505a6.59dd2d63.js b/assets/js/284505a6.0e2f98b9.js similarity index 100% rename from assets/js/284505a6.59dd2d63.js rename to assets/js/284505a6.0e2f98b9.js diff --git a/assets/js/29a86ae9.f90bdfe4.js b/assets/js/29a86ae9.90ebcf7f.js similarity index 100% rename from assets/js/29a86ae9.f90bdfe4.js rename to assets/js/29a86ae9.90ebcf7f.js diff --git a/assets/js/2acb663b.53d2d0db.js b/assets/js/2acb663b.0fb49aa8.js similarity index 100% rename from assets/js/2acb663b.53d2d0db.js rename to assets/js/2acb663b.0fb49aa8.js diff --git a/assets/js/2adc064f.02e05185.js b/assets/js/2adc064f.34483ddf.js similarity index 100% rename from assets/js/2adc064f.02e05185.js rename to assets/js/2adc064f.34483ddf.js diff --git a/assets/js/2ba78b99.618317c7.js b/assets/js/2ba78b99.2bb83916.js similarity index 100% rename from assets/js/2ba78b99.618317c7.js rename to assets/js/2ba78b99.2bb83916.js diff --git a/assets/js/2bfdf9e1.02b050be.js b/assets/js/2bfdf9e1.0b2589fc.js similarity index 100% rename from assets/js/2bfdf9e1.02b050be.js rename to assets/js/2bfdf9e1.0b2589fc.js diff --git a/assets/js/2c39de7d.e5a25fd3.js b/assets/js/2c39de7d.c8bb24e6.js similarity index 100% rename from assets/js/2c39de7d.e5a25fd3.js rename to assets/js/2c39de7d.c8bb24e6.js diff --git a/assets/js/2c73c4ce.66a47386.js b/assets/js/2c73c4ce.c80af8db.js similarity index 100% rename from assets/js/2c73c4ce.66a47386.js rename to assets/js/2c73c4ce.c80af8db.js diff --git a/assets/js/2c7836e6.4ae1b4eb.js b/assets/js/2c7836e6.0078cd21.js similarity index 100% rename from assets/js/2c7836e6.4ae1b4eb.js rename to assets/js/2c7836e6.0078cd21.js diff --git a/assets/js/2cd645c9.61937bf3.js b/assets/js/2cd645c9.14a1f0ee.js similarity index 100% rename from assets/js/2cd645c9.61937bf3.js rename to assets/js/2cd645c9.14a1f0ee.js diff --git a/assets/js/2dc37949.dbedaaff.js b/assets/js/2dc37949.dbbb724f.js similarity index 100% rename from assets/js/2dc37949.dbedaaff.js rename to assets/js/2dc37949.dbbb724f.js diff --git a/assets/js/2e38527b.5a03b321.js b/assets/js/2e38527b.07715e4a.js similarity index 100% rename from assets/js/2e38527b.5a03b321.js rename to assets/js/2e38527b.07715e4a.js diff --git a/assets/js/2e6c07ac.0b43933b.js b/assets/js/2e6c07ac.4d301b8f.js similarity index 100% rename from assets/js/2e6c07ac.0b43933b.js rename to assets/js/2e6c07ac.4d301b8f.js diff --git a/assets/js/2e98f0ad.ba2bc631.js b/assets/js/2e98f0ad.86965802.js similarity index 100% rename from assets/js/2e98f0ad.ba2bc631.js rename to assets/js/2e98f0ad.86965802.js diff --git a/assets/js/2eccfab5.25204334.js b/assets/js/2eccfab5.faaae28a.js similarity index 100% rename from assets/js/2eccfab5.25204334.js rename to assets/js/2eccfab5.faaae28a.js diff --git a/assets/js/2ef5a19c.f1e2b515.js b/assets/js/2ef5a19c.1469f7d3.js similarity index 100% rename from assets/js/2ef5a19c.f1e2b515.js rename to assets/js/2ef5a19c.1469f7d3.js diff --git a/assets/js/2efb2482.1aa1e9ed.js b/assets/js/2efb2482.52475bac.js similarity index 100% rename from assets/js/2efb2482.1aa1e9ed.js rename to assets/js/2efb2482.52475bac.js diff --git a/assets/js/2fd4abc7.a9609f3d.js b/assets/js/2fd4abc7.16a539f5.js similarity index 100% rename from assets/js/2fd4abc7.a9609f3d.js rename to assets/js/2fd4abc7.16a539f5.js diff --git a/assets/js/2fded03d.ae01a3ca.js b/assets/js/2fded03d.765ae1df.js similarity index 100% rename from assets/js/2fded03d.ae01a3ca.js rename to assets/js/2fded03d.765ae1df.js diff --git a/assets/js/300bb418.40438612.js b/assets/js/300bb418.c04e29db.js similarity index 100% rename from assets/js/300bb418.40438612.js rename to assets/js/300bb418.c04e29db.js diff --git a/assets/js/30e9c26f.cd830af6.js b/assets/js/30e9c26f.4e53e7ee.js similarity index 100% rename from assets/js/30e9c26f.cd830af6.js rename to assets/js/30e9c26f.4e53e7ee.js diff --git a/assets/js/31a43934.0b124f12.js b/assets/js/31a43934.2179aae4.js similarity index 100% rename from assets/js/31a43934.0b124f12.js rename to assets/js/31a43934.2179aae4.js diff --git a/assets/js/325a1917.a347891e.js b/assets/js/325a1917.a0980f19.js similarity index 100% rename from assets/js/325a1917.a347891e.js rename to assets/js/325a1917.a0980f19.js diff --git a/assets/js/32dd1b94.33d26abc.js b/assets/js/32dd1b94.13a00c9b.js similarity index 100% rename from assets/js/32dd1b94.33d26abc.js rename to assets/js/32dd1b94.13a00c9b.js diff --git a/assets/js/32fb468f.87ca08ca.js b/assets/js/32fb468f.92c02555.js similarity index 100% rename from assets/js/32fb468f.87ca08ca.js rename to assets/js/32fb468f.92c02555.js diff --git a/assets/js/33f38c8c.b76da7c3.js b/assets/js/33f38c8c.23a028fb.js similarity index 100% rename from assets/js/33f38c8c.b76da7c3.js rename to assets/js/33f38c8c.23a028fb.js diff --git a/assets/js/349e8d4a.91efcc6d.js b/assets/js/349e8d4a.ebf8bad1.js similarity index 100% rename from assets/js/349e8d4a.91efcc6d.js rename to assets/js/349e8d4a.ebf8bad1.js diff --git a/assets/js/34dc379b.b2758f0a.js b/assets/js/34dc379b.34505f57.js similarity index 100% rename from assets/js/34dc379b.b2758f0a.js rename to assets/js/34dc379b.34505f57.js diff --git a/assets/js/36283c57.b4394822.js b/assets/js/36283c57.8a3c7d42.js similarity index 100% rename from assets/js/36283c57.b4394822.js rename to assets/js/36283c57.8a3c7d42.js diff --git a/assets/js/365a98ea.80e1cd40.js b/assets/js/365a98ea.8adc909b.js similarity index 100% rename from assets/js/365a98ea.80e1cd40.js rename to assets/js/365a98ea.8adc909b.js diff --git a/assets/js/3668d48f.d05f495e.js b/assets/js/3668d48f.194fa3c5.js similarity index 100% rename from assets/js/3668d48f.d05f495e.js rename to assets/js/3668d48f.194fa3c5.js diff --git a/assets/js/3772e865.2b5d077d.js b/assets/js/3772e865.65e7c8aa.js similarity index 100% rename from assets/js/3772e865.2b5d077d.js rename to assets/js/3772e865.65e7c8aa.js diff --git a/assets/js/386ca56c.7b40952b.js b/assets/js/386ca56c.75580ef4.js similarity index 100% rename from assets/js/386ca56c.7b40952b.js rename to assets/js/386ca56c.75580ef4.js diff --git a/assets/js/3918bdf1.9217e69b.js b/assets/js/3918bdf1.c7ef40de.js similarity index 100% rename from assets/js/3918bdf1.9217e69b.js rename to assets/js/3918bdf1.c7ef40de.js diff --git a/assets/js/3a53bf1a.440c3d72.js b/assets/js/3a53bf1a.2d4969ab.js similarity index 100% rename from assets/js/3a53bf1a.440c3d72.js rename to assets/js/3a53bf1a.2d4969ab.js diff --git a/assets/js/3a69f308.6528d66b.js b/assets/js/3a69f308.20a8759c.js similarity index 100% rename from assets/js/3a69f308.6528d66b.js rename to assets/js/3a69f308.20a8759c.js diff --git a/assets/js/3aa54180.b2d51462.js b/assets/js/3aa54180.9c1766b8.js similarity index 100% rename from assets/js/3aa54180.b2d51462.js rename to assets/js/3aa54180.9c1766b8.js diff --git a/assets/js/3aaae8c2.2b75b599.js b/assets/js/3aaae8c2.5ad80aed.js similarity index 100% rename from assets/js/3aaae8c2.2b75b599.js rename to assets/js/3aaae8c2.5ad80aed.js diff --git a/assets/js/3acffe63.4ac51ffd.js b/assets/js/3acffe63.ee1699f1.js similarity index 100% rename from assets/js/3acffe63.4ac51ffd.js rename to assets/js/3acffe63.ee1699f1.js diff --git a/assets/js/3bcd1d8e.a9367cb2.js b/assets/js/3bcd1d8e.fcabbb01.js similarity index 100% rename from assets/js/3bcd1d8e.a9367cb2.js rename to assets/js/3bcd1d8e.fcabbb01.js diff --git a/assets/js/3c659cae.a88e3502.js b/assets/js/3c659cae.81ba9805.js similarity index 100% rename from assets/js/3c659cae.a88e3502.js rename to assets/js/3c659cae.81ba9805.js diff --git a/assets/js/3c8c2bf8.398966f0.js b/assets/js/3c8c2bf8.09918c22.js similarity index 100% rename from assets/js/3c8c2bf8.398966f0.js rename to assets/js/3c8c2bf8.09918c22.js diff --git a/assets/js/3dec5134.94579d8c.js b/assets/js/3dec5134.580f9d63.js similarity index 100% rename from assets/js/3dec5134.94579d8c.js rename to assets/js/3dec5134.580f9d63.js diff --git a/assets/js/3e3e6ec9.40691f76.js b/assets/js/3e3e6ec9.3719d1ec.js similarity index 100% rename from assets/js/3e3e6ec9.40691f76.js rename to assets/js/3e3e6ec9.3719d1ec.js diff --git a/assets/js/3e84ded7.8e005520.js b/assets/js/3e84ded7.dde3cd4f.js similarity index 100% rename from assets/js/3e84ded7.8e005520.js rename to assets/js/3e84ded7.dde3cd4f.js diff --git a/assets/js/3ed77703.0347073e.js b/assets/js/3ed77703.61f3f867.js similarity index 100% rename from assets/js/3ed77703.0347073e.js rename to assets/js/3ed77703.61f3f867.js diff --git a/assets/js/3ef95f29.3d7928df.js b/assets/js/3ef95f29.2da69c13.js similarity index 100% rename from assets/js/3ef95f29.3d7928df.js rename to assets/js/3ef95f29.2da69c13.js diff --git a/assets/js/40e89655.228994b4.js b/assets/js/40e89655.20ac7a0f.js similarity index 100% rename from assets/js/40e89655.228994b4.js rename to assets/js/40e89655.20ac7a0f.js diff --git a/assets/js/41193e56.b28d716b.js b/assets/js/41193e56.018f10b0.js similarity index 100% rename from assets/js/41193e56.b28d716b.js rename to assets/js/41193e56.018f10b0.js diff --git a/assets/js/4226e2c2.f07b1979.js b/assets/js/4226e2c2.af0b5636.js similarity index 100% rename from assets/js/4226e2c2.f07b1979.js rename to assets/js/4226e2c2.af0b5636.js diff --git a/assets/js/4288bfb7.43589e62.js b/assets/js/4288bfb7.c402dabe.js similarity index 100% rename from assets/js/4288bfb7.43589e62.js rename to assets/js/4288bfb7.c402dabe.js diff --git a/assets/js/43257ae2.8bface50.js b/assets/js/43257ae2.21073438.js similarity index 100% rename from assets/js/43257ae2.8bface50.js rename to assets/js/43257ae2.21073438.js diff --git a/assets/js/43d32eee.4be1ac0e.js b/assets/js/43d32eee.d40ed447.js similarity index 100% rename from assets/js/43d32eee.4be1ac0e.js rename to assets/js/43d32eee.d40ed447.js diff --git a/assets/js/43d660c3.6dba8af1.js b/assets/js/43d660c3.8a51e645.js similarity index 100% rename from assets/js/43d660c3.6dba8af1.js rename to assets/js/43d660c3.8a51e645.js diff --git a/assets/js/449f6c51.6c0158c2.js b/assets/js/449f6c51.196cb524.js similarity index 100% rename from assets/js/449f6c51.6c0158c2.js rename to assets/js/449f6c51.196cb524.js diff --git a/assets/js/44e087e9.33f5fdf1.js b/assets/js/44e087e9.dbb360cc.js similarity index 100% rename from assets/js/44e087e9.33f5fdf1.js rename to assets/js/44e087e9.dbb360cc.js diff --git a/assets/js/4513538c.047a4403.js b/assets/js/4513538c.ccf86a7c.js similarity index 100% rename from assets/js/4513538c.047a4403.js rename to assets/js/4513538c.ccf86a7c.js diff --git a/assets/js/454ed5cc.e4b5dab2.js b/assets/js/454ed5cc.25ab4d0b.js similarity index 100% rename from assets/js/454ed5cc.e4b5dab2.js rename to assets/js/454ed5cc.25ab4d0b.js diff --git a/assets/js/46435fbd.ab241e2f.js b/assets/js/46435fbd.eff6e84f.js similarity index 100% rename from assets/js/46435fbd.ab241e2f.js rename to assets/js/46435fbd.eff6e84f.js diff --git a/assets/js/466a5eab.f4331d9b.js b/assets/js/466a5eab.44d34f1f.js similarity index 100% rename from assets/js/466a5eab.f4331d9b.js rename to assets/js/466a5eab.44d34f1f.js diff --git a/assets/js/46bec9c2.ae9b74e4.js b/assets/js/46bec9c2.71ec3a48.js similarity index 100% rename from assets/js/46bec9c2.ae9b74e4.js rename to assets/js/46bec9c2.71ec3a48.js diff --git a/assets/js/46f83c70.6454683f.js b/assets/js/46f83c70.971b2938.js similarity index 100% rename from assets/js/46f83c70.6454683f.js rename to assets/js/46f83c70.971b2938.js diff --git a/assets/js/471dc5a0.bfc01b30.js b/assets/js/471dc5a0.106f9e3c.js similarity index 100% rename from assets/js/471dc5a0.bfc01b30.js rename to assets/js/471dc5a0.106f9e3c.js diff --git a/assets/js/47b574fd.180a3eba.js b/assets/js/47b574fd.68b4cc17.js similarity index 100% rename from assets/js/47b574fd.180a3eba.js rename to assets/js/47b574fd.68b4cc17.js diff --git a/assets/js/4881a286.5466e862.js b/assets/js/4881a286.3242300b.js similarity index 100% rename from assets/js/4881a286.5466e862.js rename to assets/js/4881a286.3242300b.js diff --git a/assets/js/48fd24b5.d1cba6f0.js b/assets/js/48fd24b5.7bf1f991.js similarity index 100% rename from assets/js/48fd24b5.d1cba6f0.js rename to assets/js/48fd24b5.7bf1f991.js diff --git a/assets/js/495121d7.11ef271e.js b/assets/js/495121d7.8f0ee568.js similarity index 100% rename from assets/js/495121d7.11ef271e.js rename to assets/js/495121d7.8f0ee568.js diff --git a/assets/js/49dbe183.0fb00895.js b/assets/js/49dbe183.77f16ee6.js similarity index 100% rename from assets/js/49dbe183.0fb00895.js rename to assets/js/49dbe183.77f16ee6.js diff --git a/assets/js/4a6001c6.9f3eb30c.js b/assets/js/4a6001c6.0031d077.js similarity index 100% rename from assets/js/4a6001c6.9f3eb30c.js rename to assets/js/4a6001c6.0031d077.js diff --git a/assets/js/4a6249b7.96dca3ed.js b/assets/js/4a6249b7.7e4c810f.js similarity index 100% rename from assets/js/4a6249b7.96dca3ed.js rename to assets/js/4a6249b7.7e4c810f.js diff --git a/assets/js/4aaef72d.1097e4ba.js b/assets/js/4aaef72d.d15be75c.js similarity index 100% rename from assets/js/4aaef72d.1097e4ba.js rename to assets/js/4aaef72d.d15be75c.js diff --git a/assets/js/4af4128a.7319feeb.js b/assets/js/4af4128a.583e8f76.js similarity index 100% rename from assets/js/4af4128a.7319feeb.js rename to assets/js/4af4128a.583e8f76.js diff --git a/assets/js/4af4c56b.5e665d2d.js b/assets/js/4af4c56b.3b075b67.js similarity index 100% rename from assets/js/4af4c56b.5e665d2d.js rename to assets/js/4af4c56b.3b075b67.js diff --git a/assets/js/4b843adc.c2048e26.js b/assets/js/4b843adc.b9599c63.js similarity index 100% rename from assets/js/4b843adc.c2048e26.js rename to assets/js/4b843adc.b9599c63.js diff --git a/assets/js/4c165ffd.dd952e22.js b/assets/js/4c165ffd.d915fd21.js similarity index 100% rename from assets/js/4c165ffd.dd952e22.js rename to assets/js/4c165ffd.d915fd21.js diff --git a/assets/js/4c2b683c.5fc2ebb0.js b/assets/js/4c2b683c.f05ff744.js similarity index 100% rename from assets/js/4c2b683c.5fc2ebb0.js rename to assets/js/4c2b683c.f05ff744.js diff --git a/assets/js/4e290c7d.09a1011f.js b/assets/js/4e290c7d.f961ebfb.js similarity index 100% rename from assets/js/4e290c7d.09a1011f.js rename to assets/js/4e290c7d.f961ebfb.js diff --git a/assets/js/4e57bc4b.2e435aab.js b/assets/js/4e57bc4b.e27bacf8.js similarity index 100% rename from assets/js/4e57bc4b.2e435aab.js rename to assets/js/4e57bc4b.e27bacf8.js diff --git a/assets/js/4e8c4aff.929a6533.js b/assets/js/4e8c4aff.d2e28025.js similarity index 100% rename from assets/js/4e8c4aff.929a6533.js rename to assets/js/4e8c4aff.d2e28025.js diff --git a/assets/js/4e9cf07e.30c0fd0f.js b/assets/js/4e9cf07e.dac127ea.js similarity index 100% rename from assets/js/4e9cf07e.30c0fd0f.js rename to assets/js/4e9cf07e.dac127ea.js diff --git a/assets/js/4f219231.3b3ba770.js b/assets/js/4f219231.422068bd.js similarity index 100% rename from assets/js/4f219231.3b3ba770.js rename to assets/js/4f219231.422068bd.js diff --git a/assets/js/4f53deb4.e0fe7b56.js b/assets/js/4f53deb4.7d5e34fa.js similarity index 100% rename from assets/js/4f53deb4.e0fe7b56.js rename to assets/js/4f53deb4.7d5e34fa.js diff --git a/assets/js/4f95cddb.a2e2de80.js b/assets/js/4f95cddb.ae92a1d7.js similarity index 100% rename from assets/js/4f95cddb.a2e2de80.js rename to assets/js/4f95cddb.ae92a1d7.js diff --git a/assets/js/4f9dda28.d87e50f5.js b/assets/js/4f9dda28.8f727781.js similarity index 100% rename from assets/js/4f9dda28.d87e50f5.js rename to assets/js/4f9dda28.8f727781.js diff --git a/assets/js/514caecc.11dc786b.js b/assets/js/514caecc.a30d7523.js similarity index 100% rename from assets/js/514caecc.11dc786b.js rename to assets/js/514caecc.a30d7523.js diff --git a/assets/js/51a7f34b.fce0b9fe.js b/assets/js/51a7f34b.92d33c13.js similarity index 100% rename from assets/js/51a7f34b.fce0b9fe.js rename to assets/js/51a7f34b.92d33c13.js diff --git a/assets/js/52a0cead.2e98bb53.js b/assets/js/52a0cead.1faf02c1.js similarity index 100% rename from assets/js/52a0cead.2e98bb53.js rename to assets/js/52a0cead.1faf02c1.js diff --git a/assets/js/532c3d82.2038a20f.js b/assets/js/532c3d82.cac49204.js similarity index 100% rename from assets/js/532c3d82.2038a20f.js rename to assets/js/532c3d82.cac49204.js diff --git a/assets/js/532fd2f5.abcf1ec9.js b/assets/js/532fd2f5.e545c284.js similarity index 100% rename from assets/js/532fd2f5.abcf1ec9.js rename to assets/js/532fd2f5.e545c284.js diff --git a/assets/js/535fb627.0a7ecc5b.js b/assets/js/535fb627.657b65d0.js similarity index 100% rename from assets/js/535fb627.0a7ecc5b.js rename to assets/js/535fb627.657b65d0.js diff --git a/assets/js/5369bc20.61c6e04a.js b/assets/js/5369bc20.846be221.js similarity index 100% rename from assets/js/5369bc20.61c6e04a.js rename to assets/js/5369bc20.846be221.js diff --git a/assets/js/54e20c5d.b41df213.js b/assets/js/54e20c5d.ea3d602b.js similarity index 100% rename from assets/js/54e20c5d.b41df213.js rename to assets/js/54e20c5d.ea3d602b.js diff --git a/assets/js/552.4926ecbe.js b/assets/js/552.53b9b813.js similarity index 56% rename from assets/js/552.4926ecbe.js rename to assets/js/552.53b9b813.js index 6be54dc8b7..a17c0e3d6f 100644 --- a/assets/js/552.4926ecbe.js +++ b/assets/js/552.53b9b813.js @@ -1,2 +1,2 @@ -/*! For license information please see 552.4926ecbe.js.LICENSE.txt */ -(window.webpackJsonp=window.webpackJsonp||[]).push([[552],{551:function(e,t,r){"use strict";r.r(t);var n=r(0),i=r.n(n),a=r(753),s=r.n(a),c=r(742),u=r.n(c),o=r(628),h=r(22),f=r(638),l=r(8),m=r(635),d=r(16),p=r(637),v=r(657),g=r(642),y=r(636),R=r(552),F=r.n(R);const b=e=>{let{docsSearchVersionsHelpers:t}=e;const r=Object.entries(t.allDocsData).filter((e=>{let[,t]=e;return t.versions.length>1}));return i.a.createElement("div",{className:Object(o.a)("col","col--3","padding-left--none",F.a.searchVersionColumn)},r.map((e=>{let[n,a]=e;const s=r.length>1?n+": ":"";return i.a.createElement("select",{key:n,onChange:e=>t.setSearchVersion(n,e.target.value),defaultValue:t.searchVersions[n],className:F.a.searchVersionInput},a.versions.map(((e,t)=>i.a.createElement("option",{key:t,label:""+s+e.label,value:e.name}))))})))};t.default=function(){const{siteConfig:{themeConfig:{algolia:{appId:e,apiKey:t,indexName:r}}},i18n:{currentLocale:a}}=Object(d.default)(),c=function(){const{selectMessage:e}=Object(m.usePluralForm)();return t=>e(t,Object(y.b)({id:"theme.SearchPage.documentsFound.plurals",description:'Pluralized label for "{count} documents found". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',message:"One document found|{count} documents found"},{count:t}))}(),R=function(){const e=Object(p.useAllDocsData)(),[t,r]=Object(n.useState)((()=>Object.entries(e).reduce(((e,t)=>{let[r,n]=t;return{...e,[r]:n.versions[0].name}}),{}))),i=Object.values(e).some((e=>e.versions.length>1));return{allDocsData:e,versioningEnabled:i,searchVersions:t,setSearchVersion:(e,t)=>r((r=>({...r,[e]:t})))}}(),{searchValue:j,updateSearchPath:P}=Object(v.a)(),[E,_]=Object(n.useState)(j),x={items:[],query:null,totalResults:null,totalPages:null,lastPage:null,hasMore:null,loading:null},[O,w]=Object(n.useReducer)(((e,t)=>{let{type:r,value:n}=t;switch(r){case"reset":return x;case"loading":return{...e,loading:!0};case"update":return E!==n.query?e:{...n,items:0===n.lastPage?n.items:e.items.concat(n.items)};case"advance":{const t=e.totalPages>e.lastPage+1;return{...e,lastPage:t?e.lastPage+1:e.lastPage,hasMore:t}}default:return e}}),x),N=s()(e,t),A=u()(N,r,{hitsPerPage:15,advancedSyntax:!0,disjunctiveFacets:["language","docusaurus_tag"]});A.on("result",(e=>{let{results:{query:t,hits:r,page:n,nbHits:i,nbPages:a}}=e;if(""===t||!(r instanceof Array))return void w({type:"reset"});const s=e=>e.replace(/algolia-docsearch-suggestion--highlight/g,"search-result-match"),c=r.map((e=>{let{url:t,_highlightResult:{hierarchy:r},_snippetResult:n={}}=e;const{pathname:i,hash:a}=new URL(t),c=Object.keys(r).map((e=>s(r[e].value)));return{title:c.pop(),url:i+a,summary:n.content?s(n.content.value)+"...":"",breadcrumbs:c}}));w({type:"update",value:{items:c,query:t,totalResults:i,totalPages:a,lastPage:n,hasMore:a>n+1,loading:!1}})}));const[H,S]=Object(n.useState)(null),T=Object(n.useRef)(0),Q=Object(n.useRef)(l.a.canUseDOM&&new IntersectionObserver((e=>{const{isIntersecting:t,boundingClientRect:{y:r}}=e[0];t&&T.current>r&&w({type:"advance"}),T.current=r}),{threshold:1})),C=()=>E?Object(y.b)({id:"theme.SearchPage.existingResultsTitle",message:'Search results for "{query}"',description:"The search page title for non-empty query"},{query:E}):Object(y.b)({id:"theme.SearchPage.emptyResultsTitle",message:"Search the documentation",description:"The search page title for empty query"}),D=function(e){void 0===e&&(e=0),A.addDisjunctiveFacetRefinement("docusaurus_tag","default"),A.addDisjunctiveFacetRefinement("language",a),Object.entries(R.searchVersions).forEach((e=>{let[t,r]=e;A.addDisjunctiveFacetRefinement("docusaurus_tag","docs-"+t+"-"+r)})),A.setQuery(E).setPage(e).search()};return Object(n.useEffect)((()=>{if(H)return Q.current.observe(H),()=>{Q.current.unobserve(H)}}),[H]),Object(n.useEffect)((()=>{P(E),w({type:"reset"}),E&&(w({type:"loading"}),setTimeout((()=>{D()}),300))}),[E,R.searchVersions]),Object(n.useEffect)((()=>{O.lastPage&&0!==O.lastPage&&D(O.lastPage)}),[O.lastPage]),Object(n.useEffect)((()=>{j&&j!==E&&_(j)}),[j]),i.a.createElement(g.a,{wrapperClassName:"search-page-wrapper"},i.a.createElement(h.a,null,i.a.createElement("title",null,Object(m.useTitleFormatter)(C())),i.a.createElement("meta",{property:"robots",content:"noindex, follow"})),i.a.createElement("div",{className:"container margin-vert--lg"},i.a.createElement("h1",null,C()),i.a.createElement("form",{className:"row",onSubmit:e=>e.preventDefault()},i.a.createElement("div",{className:Object(o.a)("col",F.a.searchQueryColumn,{"col--9":R.versioningEnabled,"col--12":!R.versioningEnabled})},i.a.createElement("input",{type:"search",name:"q",className:F.a.searchQueryInput,placeholder:Object(y.b)({id:"theme.SearchPage.inputPlaceholder",message:"Type your search here",description:"The placeholder for search page input"}),"aria-label":Object(y.b)({id:"theme.SearchPage.inputLabel",message:"Search",description:"The ARIA label for search page input"}),onChange:e=>_(e.target.value),value:E,autoComplete:"off",autoFocus:!0})),R.versioningEnabled&&i.a.createElement(b,{docsSearchVersionsHelpers:R})),i.a.createElement("div",{className:Object(o.a)("row","margin-vert--sm")},i.a.createElement("div",{className:Object(o.a)("col","col--8",F.a.searchResultsColumn)},!!O.totalResults&&i.a.createElement("strong",null,c(O.totalResults))),i.a.createElement("div",{className:Object(o.a)("col","col--4",F.a.searchLogoColumn)},i.a.createElement("a",{target:"_blank",rel:"noopener noreferrer",href:"https://www.algolia.com/","aria-label":Object(y.b)({id:"theme.SearchPage.algoliaLabel",message:"Search by Algolia",description:"The ARIA label for Algolia mention"})},i.a.createElement("svg",{viewBox:"0 0 168 24",className:F.a.algoliaLogo,xmlns:"http://www.w3.org/2000/svg"},i.a.createElement("g",{fill:"none"},i.a.createElement("path",{className:F.a.algoliaLogoPathFill,d:"M120.925 18.804c-4.386.02-4.386-3.54-4.386-4.106l-.007-13.336 2.675-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-10.846-2.18c.821 0 1.43-.047 1.855-.129v-2.719a6.334 6.334 0 0 0-1.574-.199 5.7 5.7 0 0 0-.897.069 2.699 2.699 0 0 0-.814.24c-.24.116-.439.28-.582.491-.15.212-.219.335-.219.656 0 .628.219.991.616 1.23s.938.362 1.615.362zm-.233-9.7c.883 0 1.629.109 2.231.328.602.218 1.088.525 1.444.915.363.396.609.922.76 1.483.157.56.232 1.175.232 1.85v6.874a32.5 32.5 0 0 1-1.868.314c-.834.123-1.772.185-2.813.185-.69 0-1.327-.069-1.895-.198a4.001 4.001 0 0 1-1.471-.636 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.803 0-.656.13-1.073.384-1.525a3.24 3.24 0 0 1 1.047-1.106c.445-.287.95-.492 1.532-.615a8.8 8.8 0 0 1 1.82-.185 8.404 8.404 0 0 1 1.972.24v-.438c0-.307-.035-.6-.11-.874a1.88 1.88 0 0 0-.384-.73 1.784 1.784 0 0 0-.724-.493 3.164 3.164 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.735 7.735 0 0 0-1.26.307l-.321-2.192c.335-.117.834-.233 1.478-.349a10.98 10.98 0 0 1 2.073-.178zm52.842 9.626c.822 0 1.43-.048 1.854-.13V13.7a6.347 6.347 0 0 0-1.574-.199c-.294 0-.595.021-.896.069a2.7 2.7 0 0 0-.814.24 1.46 1.46 0 0 0-.582.491c-.15.212-.218.335-.218.656 0 .628.218.991.615 1.23.404.245.938.362 1.615.362zm-.226-9.694c.883 0 1.629.108 2.231.327.602.219 1.088.526 1.444.915.355.39.609.923.759 1.483a6.8 6.8 0 0 1 .233 1.852v6.873c-.41.088-1.034.19-1.868.314-.834.123-1.772.184-2.813.184-.69 0-1.327-.068-1.895-.198a4.001 4.001 0 0 1-1.471-.635 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.804 0-.656.13-1.073.384-1.524.26-.45.608-.82 1.047-1.107.445-.286.95-.491 1.532-.614a8.803 8.803 0 0 1 2.751-.13c.329.034.671.096 1.04.185v-.437a3.3 3.3 0 0 0-.109-.875 1.873 1.873 0 0 0-.384-.731 1.784 1.784 0 0 0-.724-.492 3.165 3.165 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.75 7.75 0 0 0-1.26.307l-.321-2.193c.335-.116.834-.232 1.478-.348a11.633 11.633 0 0 1 2.073-.177zm-8.034-1.271a1.626 1.626 0 0 1-1.628-1.62c0-.895.725-1.62 1.628-1.62.904 0 1.63.725 1.63 1.62 0 .895-.733 1.62-1.63 1.62zm1.348 13.22h-2.689V7.27l2.69-.423v11.956zm-4.714 0c-4.386.02-4.386-3.54-4.386-4.107l-.008-13.336 2.676-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-8.698-5.903c0-1.156-.253-2.119-.746-2.788-.493-.677-1.183-1.01-2.067-1.01-.882 0-1.574.333-2.065 1.01-.493.676-.733 1.632-.733 2.788 0 1.168.246 1.953.74 2.63.492.683 1.183 1.018 2.066 1.018.882 0 1.574-.342 2.067-1.019.492-.683.738-1.46.738-2.63zm2.737-.007c0 .902-.13 1.584-.397 2.33a5.52 5.52 0 0 1-1.128 1.906 4.986 4.986 0 0 1-1.752 1.223c-.685.286-1.739.45-2.265.45-.528-.006-1.574-.157-2.252-.45a5.096 5.096 0 0 1-1.744-1.223c-.487-.527-.863-1.162-1.137-1.906a6.345 6.345 0 0 1-.41-2.33c0-.902.123-1.77.397-2.508a5.554 5.554 0 0 1 1.15-1.892 5.133 5.133 0 0 1 1.75-1.216c.679-.287 1.425-.423 2.232-.423.808 0 1.553.142 2.237.423a4.88 4.88 0 0 1 1.753 1.216 5.644 5.644 0 0 1 1.135 1.892c.287.738.431 1.606.431 2.508zm-20.138 0c0 1.12.246 2.363.738 2.882.493.52 1.13.78 1.91.78.424 0 .828-.062 1.204-.178.377-.116.677-.253.917-.417V9.33a10.476 10.476 0 0 0-1.766-.226c-.971-.028-1.71.37-2.23 1.004-.513.636-.773 1.75-.773 2.788zm7.438 5.274c0 1.824-.466 3.156-1.404 4.004-.936.846-2.367 1.27-4.296 1.27-.705 0-2.17-.137-3.34-.396l.431-2.118c.98.205 2.272.26 2.95.26 1.074 0 1.84-.219 2.299-.656.459-.437.684-1.086.684-1.948v-.437a8.07 8.07 0 0 1-1.047.397c-.43.13-.93.198-1.492.198-.739 0-1.41-.116-2.018-.349a4.206 4.206 0 0 1-1.567-1.025c-.431-.45-.774-1.017-1.013-1.694-.24-.677-.363-1.885-.363-2.773 0-.834.13-1.88.384-2.577.26-.696.629-1.298 1.129-1.796.493-.498 1.095-.881 1.8-1.162a6.605 6.605 0 0 1 2.428-.457c.87 0 1.67.109 2.45.24.78.129 1.444.265 1.985.415V18.17zM6.972 6.677v1.627c-.712-.446-1.52-.67-2.425-.67-.585 0-1.045.13-1.38.391a1.24 1.24 0 0 0-.502 1.03c0 .425.164.765.494 1.02.33.256.835.532 1.516.83.447.192.795.356 1.045.495.25.138.537.332.862.582.324.25.563.548.718.894.154.345.23.741.23 1.188 0 .947-.334 1.691-1.004 2.234-.67.542-1.537.814-2.601.814-1.18 0-2.16-.229-2.936-.686v-1.708c.84.628 1.814.942 2.92.942.585 0 1.048-.136 1.388-.407.34-.271.51-.646.51-1.125 0-.287-.1-.55-.302-.79-.203-.24-.42-.42-.655-.542-.234-.123-.585-.29-1.053-.503a61.27 61.27 0 0 1-.582-.271 13.67 13.67 0 0 1-.55-.287 4.275 4.275 0 0 1-.567-.351 6.92 6.92 0 0 1-.455-.4c-.18-.17-.31-.34-.39-.51-.08-.17-.155-.37-.224-.598a2.553 2.553 0 0 1-.104-.742c0-.915.333-1.638.998-2.17.664-.532 1.523-.798 2.576-.798.968 0 1.793.17 2.473.51zm7.468 5.696v-.287c-.022-.607-.187-1.088-.495-1.444-.309-.357-.75-.535-1.324-.535-.532 0-.99.194-1.373.583-.382.388-.622.949-.717 1.683h3.909zm1.005 2.792v1.404c-.596.34-1.383.51-2.362.51-1.255 0-2.255-.377-3-1.132-.744-.755-1.116-1.744-1.116-2.968 0-1.297.34-2.316 1.021-3.055.68-.74 1.548-1.11 2.6-1.11 1.033 0 1.852.323 2.458.966.606.644.91 1.572.91 2.784 0 .33-.033.676-.096 1.038h-5.314c.107.702.405 1.239.894 1.611.49.372 1.106.558 1.85.558.862 0 1.58-.202 2.155-.606zm6.605-1.77h-1.212c-.596 0-1.045.116-1.349.35-.303.234-.454.532-.454.894 0 .372.117.664.35.877.235.213.575.32 1.022.32.51 0 .912-.142 1.204-.424.293-.281.44-.651.44-1.108v-.91zm-4.068-2.554V9.325c.627-.361 1.457-.542 2.489-.542 2.116 0 3.175 1.026 3.175 3.08V17h-1.548v-.957c-.415.68-1.143 1.02-2.186 1.02-.766 0-1.38-.22-1.843-.661-.462-.442-.694-1.003-.694-1.684 0-.776.293-1.38.878-1.81.585-.431 1.404-.647 2.457-.647h1.34V11.8c0-.554-.133-.971-.399-1.253-.266-.282-.707-.423-1.324-.423a4.07 4.07 0 0 0-2.345.718zm9.333-1.93v1.42c.394-1 1.101-1.5 2.123-1.5.148 0 .313.016.494.048v1.531a1.885 1.885 0 0 0-.75-.143c-.542 0-.989.24-1.34.718-.351.479-.527 1.048-.527 1.707V17h-1.563V8.91h1.563zm5.01 4.084c.022.82.272 1.492.75 2.019.479.526 1.15.79 2.01.79.639 0 1.235-.176 1.788-.527v1.404c-.521.319-1.186.479-1.995.479-1.265 0-2.276-.4-3.031-1.197-.755-.798-1.133-1.792-1.133-2.984 0-1.16.38-2.151 1.14-2.975.761-.825 1.79-1.237 3.088-1.237.702 0 1.346.149 1.93.447v1.436a3.242 3.242 0 0 0-1.77-.495c-.84 0-1.513.266-2.019.798-.505.532-.758 1.213-.758 2.042zM40.24 5.72v4.579c.458-1 1.293-1.5 2.505-1.5.787 0 1.42.245 1.899.734.479.49.718 1.17.718 2.042V17h-1.564v-5.106c0-.553-.14-.98-.422-1.284-.282-.303-.652-.455-1.11-.455-.531 0-1.002.202-1.411.606-.41.405-.615 1.022-.615 1.851V17h-1.563V5.72h1.563zm14.966 10.02c.596 0 1.096-.253 1.5-.758.404-.506.606-1.157.606-1.955 0-.915-.202-1.62-.606-2.114-.404-.495-.92-.742-1.548-.742-.553 0-1.05.224-1.491.67-.442.447-.662 1.133-.662 2.058 0 .958.212 1.67.638 2.138.425.469.946.703 1.563.703zM53.004 5.72v4.42c.574-.894 1.388-1.341 2.44-1.341 1.022 0 1.857.383 2.506 1.149.649.766.973 1.781.973 3.047 0 1.138-.309 2.109-.925 2.912-.617.803-1.463 1.205-2.537 1.205-1.075 0-1.894-.447-2.457-1.34V17h-1.58V5.72h1.58zm9.908 11.104l-3.223-7.913h1.739l1.005 2.632 1.26 3.415c.096-.32.48-1.458 1.15-3.415l.909-2.632h1.66l-2.92 7.866c-.777 2.074-1.963 3.11-3.559 3.11a2.92 2.92 0 0 1-.734-.079v-1.34c.17.042.351.064.543.064 1.032 0 1.755-.57 2.17-1.708z"}),i.a.createElement("path",{fill:"#5468FF",d:"M78.988.938h16.594a2.968 2.968 0 0 1 2.966 2.966V20.5a2.967 2.967 0 0 1-2.966 2.964H78.988a2.967 2.967 0 0 1-2.966-2.964V3.897A2.961 2.961 0 0 1 78.988.938z"}),i.a.createElement("path",{fill:"white",d:"M89.632 5.967v-.772a.978.978 0 0 0-.978-.977h-2.28a.978.978 0 0 0-.978.977v.793c0 .088.082.15.171.13a7.127 7.127 0 0 1 1.984-.28c.65 0 1.295.088 1.917.259.082.02.164-.04.164-.13m-6.248 1.01l-.39-.389a.977.977 0 0 0-1.382 0l-.465.465a.973.973 0 0 0 0 1.38l.383.383c.062.061.15.047.205-.014.226-.307.472-.601.746-.874.281-.28.568-.526.883-.751.068-.042.075-.137.02-.2m4.16 2.453v3.341c0 .096.104.165.192.117l2.97-1.537c.068-.034.089-.117.055-.184a3.695 3.695 0 0 0-3.08-1.866c-.068 0-.136.054-.136.13m0 8.048a4.489 4.489 0 0 1-4.49-4.482 4.488 4.488 0 0 1 4.49-4.482 4.488 4.488 0 0 1 4.489 4.482 4.484 4.484 0 0 1-4.49 4.482m0-10.85a6.363 6.363 0 1 0 0 12.729 6.37 6.37 0 0 0 6.372-6.368 6.358 6.358 0 0 0-6.371-6.36"})))))),O.items.length>0?i.a.createElement("section",null,O.items.map(((e,t)=>{let{title:r,url:n,summary:a,breadcrumbs:s}=e;return i.a.createElement("article",{key:t,className:F.a.searchResultItem},i.a.createElement(f.a,{to:n,className:F.a.searchResultItemHeading,dangerouslySetInnerHTML:{__html:r}}),s.length>0&&i.a.createElement("span",{className:F.a.searchResultItemPath},s.map(((e,t)=>i.a.createElement(i.a.Fragment,{key:t},0!==t&&i.a.createElement("span",{className:F.a.searchResultItemPathSeparator},"\u203a"),i.a.createElement("span",{dangerouslySetInnerHTML:{__html:e}}))))),a&&i.a.createElement("p",{className:F.a.searchResultItemSummary,dangerouslySetInnerHTML:{__html:a}}))}))):[E&&!O.loading&&i.a.createElement("p",{key:"no-results"},i.a.createElement(y.a,{id:"theme.SearchPage.noResultsText",description:"The paragraph for empty search result"},"No results were found")),!!O.loading&&i.a.createElement("div",{key:"spinner",className:F.a.loadingSpinner})],O.hasMore&&i.a.createElement("div",{className:F.a.loader,ref:S},i.a.createElement("span",null,i.a.createElement(y.a,{id:"theme.SearchPage.fetchingNewResults",description:"The paragraph for fetching new search results"},"Fetching new results...")))))}},644:function(e,t,r){"use strict";function n(e){return"function"==typeof e||Array.isArray(e)||"[object Object]"===Object.prototype.toString.call(e)}function i(e,t){if(e===t)return e;for(var r in t)if(Object.prototype.hasOwnProperty.call(t,r)&&"__proto__"!==r&&"constructor"!==r){var a=t[r],s=e[r];void 0!==s&&void 0===a||(n(s)&&n(a)?e[r]=i(s,a):e[r]="object"==typeof(c=a)&&null!==c?i(Array.isArray(c)?[]:{},c):c)}var c;return e}e.exports=function(e){n(e)||(e={});for(var t=1,r=arguments.length;t0}},651:function(e,t,r){"use strict";e.exports=function(e,t){if(null===e)return{};var r,n,i={},a=Object.keys(e);for(n=0;n=0||(i[r]=e[r]);return i}},652:function(e,t,r){"use strict";e.exports=function(){return Array.prototype.slice.call(arguments).reduceRight((function(e,t){return Object.keys(Object(t)).forEach((function(r){void 0!==t[r]&&(void 0!==e[r]&&delete e[r],e[r]=t[r])})),e}),{})}},667:function(e,t){function r(){this._events=this._events||{},this._maxListeners=this._maxListeners||void 0}function n(e){return"function"==typeof e}function i(e){return"object"==typeof e&&null!==e}function a(e){return void 0===e}e.exports=r,r.prototype._events=void 0,r.prototype._maxListeners=void 0,r.defaultMaxListeners=10,r.prototype.setMaxListeners=function(e){if("number"!=typeof e||e<0||isNaN(e))throw TypeError("n must be a positive number");return this._maxListeners=e,this},r.prototype.emit=function(e){var t,r,s,c,u,o;if(this._events||(this._events={}),"error"===e&&(!this._events.error||i(this._events.error)&&!this._events.error.length)){if((t=arguments[1])instanceof Error)throw t;var h=new Error('Uncaught, unspecified "error" event. ('+t+")");throw h.context=t,h}if(a(r=this._events[e]))return!1;if(n(r))switch(arguments.length){case 1:r.call(this);break;case 2:r.call(this,arguments[1]);break;case 3:r.call(this,arguments[1],arguments[2]);break;default:c=Array.prototype.slice.call(arguments,1),r.apply(this,c)}else if(i(r))for(c=Array.prototype.slice.call(arguments,1),s=(o=r.slice()).length,u=0;u0&&this._events[e].length>s&&(this._events[e].warned=!0,console.error("(node) warning: possible EventEmitter memory leak detected. %d listeners added. Use emitter.setMaxListeners() to increase limit.",this._events[e].length),"function"==typeof console.trace&&console.trace()),this},r.prototype.on=r.prototype.addListener,r.prototype.once=function(e,t){if(!n(t))throw TypeError("listener must be a function");var r=!1;function i(){this.removeListener(e,i),r||(r=!0,t.apply(this,arguments))}return i.listener=t,this.on(e,i),this},r.prototype.removeListener=function(e,t){var r,a,s,c;if(!n(t))throw TypeError("listener must be a function");if(!this._events||!this._events[e])return this;if(s=(r=this._events[e]).length,a=-1,r===t||n(r.listener)&&r.listener===t)delete this._events[e],this._events.removeListener&&this.emit("removeListener",e,t);else if(i(r)){for(c=s;c-- >0;)if(r[c]===t||r[c].listener&&r[c].listener===t){a=c;break}if(a<0)return this;1===r.length?(r.length=0,delete this._events[e]):r.splice(a,1),this._events.removeListener&&this.emit("removeListener",e,t)}return this},r.prototype.removeAllListeners=function(e){var t,r;if(!this._events)return this;if(!this._events.removeListener)return 0===arguments.length?this._events={}:this._events[e]&&delete this._events[e],this;if(0===arguments.length){for(t in this._events)"removeListener"!==t&&this.removeAllListeners(t);return this.removeAllListeners("removeListener"),this._events={},this}if(n(r=this._events[e]))this.removeListener(e,r);else if(r)for(;r.length;)this.removeListener(e,r[r.length-1]);return delete this._events[e],this},r.prototype.listeners=function(e){return this._events&&this._events[e]?n(this._events[e])?[this._events[e]]:this._events[e].slice():[]},r.prototype.listenerCount=function(e){if(this._events){var t=this._events[e];if(n(t))return 1;if(t)return t.length}return 0},r.listenerCount=function(e,t){return e.listenerCount(t)}},668:function(e,t,r){"use strict";e.exports=function(e,t){e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}})}},669:function(e,t,r){"use strict";var n=r(652),i=r(645),a=r(746),s=r(644),c=r(650),u=r(651),o=r(747),h=r(748),f=r(749);function l(e,t){return Array.isArray(e)&&Array.isArray(t)?e.length===t.length&&e.every((function(e,r){return l(t[r],e)})):e===t}function m(e){var t=e?m._parseNumbers(e):{};void 0===t.userToken||h(t.userToken)||console.warn("[algoliasearch-helper] The `userToken` parameter is invalid. This can lead to wrong analytics.\n - Format: [a-zA-Z0-9_-]{1,64}"),this.facets=t.facets||[],this.disjunctiveFacets=t.disjunctiveFacets||[],this.hierarchicalFacets=t.hierarchicalFacets||[],this.facetsRefinements=t.facetsRefinements||{},this.facetsExcludes=t.facetsExcludes||{},this.disjunctiveFacetsRefinements=t.disjunctiveFacetsRefinements||{},this.numericRefinements=t.numericRefinements||{},this.tagRefinements=t.tagRefinements||[],this.hierarchicalFacetsRefinements=t.hierarchicalFacetsRefinements||{};var r=this;Object.keys(t).forEach((function(e){var n=-1!==m.PARAMETERS.indexOf(e),i=void 0!==t[e];!n&&i&&(r[e]=t[e])}))}m.PARAMETERS=Object.keys(new m),m._parseNumbers=function(e){if(e instanceof m)return e;var t={};if(["aroundPrecision","aroundRadius","getRankingInfo","minWordSizefor2Typos","minWordSizefor1Typo","page","maxValuesPerFacet","distinct","minimumAroundRadius","hitsPerPage","minProximity"].forEach((function(r){var n=e[r];if("string"==typeof n){var i=parseFloat(n);t[r]=isNaN(i)?n:i}})),Array.isArray(e.insideBoundingBox)&&(t.insideBoundingBox=e.insideBoundingBox.map((function(e){return Array.isArray(e)?e.map((function(e){return parseFloat(e)})):e}))),e.numericRefinements){var r={};Object.keys(e.numericRefinements).forEach((function(t){var n=e.numericRefinements[t]||{};r[t]={},Object.keys(n).forEach((function(e){var i=n[e].map((function(e){return Array.isArray(e)?e.map((function(e){return"string"==typeof e?parseFloat(e):e})):"string"==typeof e?parseFloat(e):e}));r[t][e]=i}))})),t.numericRefinements=r}return s(e,t)},m.make=function(e){var t=new m(e);return(e.hierarchicalFacets||[]).forEach((function(e){if(e.rootPath){var r=t.getHierarchicalRefinement(e.name);r.length>0&&0!==r[0].indexOf(e.rootPath)&&(t=t.clearRefinements(e.name)),0===(r=t.getHierarchicalRefinement(e.name)).length&&(t=t.toggleHierarchicalFacetRefinement(e.name,e.rootPath))}})),t},m.validate=function(e,t){var r=t||{};return e.tagFilters&&r.tagRefinements&&r.tagRefinements.length>0?new Error("[Tags] Cannot switch from the managed tag API to the advanced API. It is probably an error, if it is really what you want, you should first clear the tags with clearTags method."):e.tagRefinements.length>0&&r.tagFilters?new Error("[Tags] Cannot switch from the advanced tag API to the managed API. It is probably an error, if it is not, you should first clear the tags with clearTags method."):e.numericFilters&&r.numericRefinements&&c(r.numericRefinements)?new Error("[Numeric filters] Can't switch from the advanced to the managed API. It is probably an error, if this is really what you want, you have to first clear the numeric filters."):c(e.numericRefinements)&&r.numericFilters?new Error("[Numeric filters] Can't switch from the managed API to the advanced. It is probably an error, if this is really what you want, you have to first clear the numeric filters."):null},m.prototype={constructor:m,clearRefinements:function(e){var t={numericRefinements:this._clearNumericRefinements(e),facetsRefinements:f.clearRefinement(this.facetsRefinements,e,"conjunctiveFacet"),facetsExcludes:f.clearRefinement(this.facetsExcludes,e,"exclude"),disjunctiveFacetsRefinements:f.clearRefinement(this.disjunctiveFacetsRefinements,e,"disjunctiveFacet"),hierarchicalFacetsRefinements:f.clearRefinement(this.hierarchicalFacetsRefinements,e,"hierarchicalFacet")};return t.numericRefinements===this.numericRefinements&&t.facetsRefinements===this.facetsRefinements&&t.facetsExcludes===this.facetsExcludes&&t.disjunctiveFacetsRefinements===this.disjunctiveFacetsRefinements&&t.hierarchicalFacetsRefinements===this.hierarchicalFacetsRefinements?this:this.setQueryParameters(t)},clearTags:function(){return void 0===this.tagFilters&&0===this.tagRefinements.length?this:this.setQueryParameters({tagFilters:void 0,tagRefinements:[]})},setIndex:function(e){return e===this.index?this:this.setQueryParameters({index:e})},setQuery:function(e){return e===this.query?this:this.setQueryParameters({query:e})},setPage:function(e){return e===this.page?this:this.setQueryParameters({page:e})},setFacets:function(e){return this.setQueryParameters({facets:e})},setDisjunctiveFacets:function(e){return this.setQueryParameters({disjunctiveFacets:e})},setHitsPerPage:function(e){return this.hitsPerPage===e?this:this.setQueryParameters({hitsPerPage:e})},setTypoTolerance:function(e){return this.typoTolerance===e?this:this.setQueryParameters({typoTolerance:e})},addNumericRefinement:function(e,t,r){var n=o(r);if(this.isNumericRefined(e,t,n))return this;var i=s({},this.numericRefinements);return i[e]=s({},i[e]),i[e][t]?(i[e][t]=i[e][t].slice(),i[e][t].push(n)):i[e][t]=[n],this.setQueryParameters({numericRefinements:i})},getConjunctiveRefinements:function(e){return this.isConjunctiveFacet(e)&&this.facetsRefinements[e]||[]},getDisjunctiveRefinements:function(e){return this.isDisjunctiveFacet(e)&&this.disjunctiveFacetsRefinements[e]||[]},getHierarchicalRefinement:function(e){return this.hierarchicalFacetsRefinements[e]||[]},getExcludeRefinements:function(e){return this.isConjunctiveFacet(e)&&this.facetsExcludes[e]||[]},removeNumericRefinement:function(e,t,r){var n=r;return void 0!==n?this.isNumericRefined(e,t,n)?this.setQueryParameters({numericRefinements:this._clearNumericRefinements((function(r,i){return i===e&&r.op===t&&l(r.val,o(n))}))}):this:void 0!==t?this.isNumericRefined(e,t)?this.setQueryParameters({numericRefinements:this._clearNumericRefinements((function(r,n){return n===e&&r.op===t}))}):this:this.isNumericRefined(e)?this.setQueryParameters({numericRefinements:this._clearNumericRefinements((function(t,r){return r===e}))}):this},getNumericRefinements:function(e){return this.numericRefinements[e]||{}},getNumericRefinement:function(e,t){return this.numericRefinements[e]&&this.numericRefinements[e][t]},_clearNumericRefinements:function(e){if(void 0===e)return c(this.numericRefinements)?{}:this.numericRefinements;if("string"==typeof e)return u(this.numericRefinements,[e]);if("function"==typeof e){var t=!1,r=this.numericRefinements,n=Object.keys(r).reduce((function(n,i){var a=r[i],s={};return a=a||{},Object.keys(a).forEach((function(r){var n=a[r]||[],c=[];n.forEach((function(t){e({val:t,op:r},i,"numeric")||c.push(t)})),c.length!==n.length&&(t=!0),s[r]=c})),n[i]=s,n}),{});return t?n:this.numericRefinements}},addFacet:function(e){return this.isConjunctiveFacet(e)?this:this.setQueryParameters({facets:this.facets.concat([e])})},addDisjunctiveFacet:function(e){return this.isDisjunctiveFacet(e)?this:this.setQueryParameters({disjunctiveFacets:this.disjunctiveFacets.concat([e])})},addHierarchicalFacet:function(e){if(this.isHierarchicalFacet(e.name))throw new Error("Cannot declare two hierarchical facets with the same name: `"+e.name+"`");return this.setQueryParameters({hierarchicalFacets:this.hierarchicalFacets.concat([e])})},addFacetRefinement:function(e,t){if(!this.isConjunctiveFacet(e))throw new Error(e+" is not defined in the facets attribute of the helper configuration");return f.isRefined(this.facetsRefinements,e,t)?this:this.setQueryParameters({facetsRefinements:f.addRefinement(this.facetsRefinements,e,t)})},addExcludeRefinement:function(e,t){if(!this.isConjunctiveFacet(e))throw new Error(e+" is not defined in the facets attribute of the helper configuration");return f.isRefined(this.facetsExcludes,e,t)?this:this.setQueryParameters({facetsExcludes:f.addRefinement(this.facetsExcludes,e,t)})},addDisjunctiveFacetRefinement:function(e,t){if(!this.isDisjunctiveFacet(e))throw new Error(e+" is not defined in the disjunctiveFacets attribute of the helper configuration");return f.isRefined(this.disjunctiveFacetsRefinements,e,t)?this:this.setQueryParameters({disjunctiveFacetsRefinements:f.addRefinement(this.disjunctiveFacetsRefinements,e,t)})},addTagRefinement:function(e){if(this.isTagRefined(e))return this;var t={tagRefinements:this.tagRefinements.concat(e)};return this.setQueryParameters(t)},removeFacet:function(e){return this.isConjunctiveFacet(e)?this.clearRefinements(e).setQueryParameters({facets:this.facets.filter((function(t){return t!==e}))}):this},removeDisjunctiveFacet:function(e){return this.isDisjunctiveFacet(e)?this.clearRefinements(e).setQueryParameters({disjunctiveFacets:this.disjunctiveFacets.filter((function(t){return t!==e}))}):this},removeHierarchicalFacet:function(e){return this.isHierarchicalFacet(e)?this.clearRefinements(e).setQueryParameters({hierarchicalFacets:this.hierarchicalFacets.filter((function(t){return t.name!==e}))}):this},removeFacetRefinement:function(e,t){if(!this.isConjunctiveFacet(e))throw new Error(e+" is not defined in the facets attribute of the helper configuration");return f.isRefined(this.facetsRefinements,e,t)?this.setQueryParameters({facetsRefinements:f.removeRefinement(this.facetsRefinements,e,t)}):this},removeExcludeRefinement:function(e,t){if(!this.isConjunctiveFacet(e))throw new Error(e+" is not defined in the facets attribute of the helper configuration");return f.isRefined(this.facetsExcludes,e,t)?this.setQueryParameters({facetsExcludes:f.removeRefinement(this.facetsExcludes,e,t)}):this},removeDisjunctiveFacetRefinement:function(e,t){if(!this.isDisjunctiveFacet(e))throw new Error(e+" is not defined in the disjunctiveFacets attribute of the helper configuration");return f.isRefined(this.disjunctiveFacetsRefinements,e,t)?this.setQueryParameters({disjunctiveFacetsRefinements:f.removeRefinement(this.disjunctiveFacetsRefinements,e,t)}):this},removeTagRefinement:function(e){if(!this.isTagRefined(e))return this;var t={tagRefinements:this.tagRefinements.filter((function(t){return t!==e}))};return this.setQueryParameters(t)},toggleRefinement:function(e,t){return this.toggleFacetRefinement(e,t)},toggleFacetRefinement:function(e,t){if(this.isHierarchicalFacet(e))return this.toggleHierarchicalFacetRefinement(e,t);if(this.isConjunctiveFacet(e))return this.toggleConjunctiveFacetRefinement(e,t);if(this.isDisjunctiveFacet(e))return this.toggleDisjunctiveFacetRefinement(e,t);throw new Error("Cannot refine the undeclared facet "+e+"; it should be added to the helper options facets, disjunctiveFacets or hierarchicalFacets")},toggleConjunctiveFacetRefinement:function(e,t){if(!this.isConjunctiveFacet(e))throw new Error(e+" is not defined in the facets attribute of the helper configuration");return this.setQueryParameters({facetsRefinements:f.toggleRefinement(this.facetsRefinements,e,t)})},toggleExcludeFacetRefinement:function(e,t){if(!this.isConjunctiveFacet(e))throw new Error(e+" is not defined in the facets attribute of the helper configuration");return this.setQueryParameters({facetsExcludes:f.toggleRefinement(this.facetsExcludes,e,t)})},toggleDisjunctiveFacetRefinement:function(e,t){if(!this.isDisjunctiveFacet(e))throw new Error(e+" is not defined in the disjunctiveFacets attribute of the helper configuration");return this.setQueryParameters({disjunctiveFacetsRefinements:f.toggleRefinement(this.disjunctiveFacetsRefinements,e,t)})},toggleHierarchicalFacetRefinement:function(e,t){if(!this.isHierarchicalFacet(e))throw new Error(e+" is not defined in the hierarchicalFacets attribute of the helper configuration");var r=this._getHierarchicalFacetSeparator(this.getHierarchicalFacetByName(e)),i={};return void 0!==this.hierarchicalFacetsRefinements[e]&&this.hierarchicalFacetsRefinements[e].length>0&&(this.hierarchicalFacetsRefinements[e][0]===t||0===this.hierarchicalFacetsRefinements[e][0].indexOf(t+r))?-1===t.indexOf(r)?i[e]=[]:i[e]=[t.slice(0,t.lastIndexOf(r))]:i[e]=[t],this.setQueryParameters({hierarchicalFacetsRefinements:n({},i,this.hierarchicalFacetsRefinements)})},addHierarchicalFacetRefinement:function(e,t){if(this.isHierarchicalFacetRefined(e))throw new Error(e+" is already refined.");if(!this.isHierarchicalFacet(e))throw new Error(e+" is not defined in the hierarchicalFacets attribute of the helper configuration.");var r={};return r[e]=[t],this.setQueryParameters({hierarchicalFacetsRefinements:n({},r,this.hierarchicalFacetsRefinements)})},removeHierarchicalFacetRefinement:function(e){if(!this.isHierarchicalFacetRefined(e))return this;var t={};return t[e]=[],this.setQueryParameters({hierarchicalFacetsRefinements:n({},t,this.hierarchicalFacetsRefinements)})},toggleTagRefinement:function(e){return this.isTagRefined(e)?this.removeTagRefinement(e):this.addTagRefinement(e)},isDisjunctiveFacet:function(e){return this.disjunctiveFacets.indexOf(e)>-1},isHierarchicalFacet:function(e){return void 0!==this.getHierarchicalFacetByName(e)},isConjunctiveFacet:function(e){return this.facets.indexOf(e)>-1},isFacetRefined:function(e,t){return!!this.isConjunctiveFacet(e)&&f.isRefined(this.facetsRefinements,e,t)},isExcludeRefined:function(e,t){return!!this.isConjunctiveFacet(e)&&f.isRefined(this.facetsExcludes,e,t)},isDisjunctiveFacetRefined:function(e,t){return!!this.isDisjunctiveFacet(e)&&f.isRefined(this.disjunctiveFacetsRefinements,e,t)},isHierarchicalFacetRefined:function(e,t){if(!this.isHierarchicalFacet(e))return!1;var r=this.getHierarchicalRefinement(e);return t?-1!==r.indexOf(t):r.length>0},isNumericRefined:function(e,t,r){if(void 0===r&&void 0===t)return Boolean(this.numericRefinements[e]);var n=this.numericRefinements[e]&&void 0!==this.numericRefinements[e][t];if(void 0===r||!n)return n;var a,s,c=o(r),u=void 0!==(a=this.numericRefinements[e][t],s=c,i(a,(function(e){return l(e,s)})));return n&&u},isTagRefined:function(e){return-1!==this.tagRefinements.indexOf(e)},getRefinedDisjunctiveFacets:function(){var e=this,t=a(Object.keys(this.numericRefinements).filter((function(t){return Object.keys(e.numericRefinements[t]).length>0})),this.disjunctiveFacets);return Object.keys(this.disjunctiveFacetsRefinements).filter((function(t){return e.disjunctiveFacetsRefinements[t].length>0})).concat(t).concat(this.getRefinedHierarchicalFacets()).sort()},getRefinedHierarchicalFacets:function(){var e=this;return a(this.hierarchicalFacets.map((function(e){return e.name})),Object.keys(this.hierarchicalFacetsRefinements).filter((function(t){return e.hierarchicalFacetsRefinements[t].length>0}))).sort()},getUnrefinedDisjunctiveFacets:function(){var e=this.getRefinedDisjunctiveFacets();return this.disjunctiveFacets.filter((function(t){return-1===e.indexOf(t)}))},managedParameters:["index","facets","disjunctiveFacets","facetsRefinements","hierarchicalFacets","facetsExcludes","disjunctiveFacetsRefinements","numericRefinements","tagRefinements","hierarchicalFacetsRefinements"],getQueryParams:function(){var e=this.managedParameters,t={},r=this;return Object.keys(this).forEach((function(n){var i=r[n];-1===e.indexOf(n)&&void 0!==i&&(t[n]=i)})),t},setQueryParameter:function(e,t){if(this[e]===t)return this;var r={};return r[e]=t,this.setQueryParameters(r)},setQueryParameters:function(e){if(!e)return this;var t=m.validate(this,e);if(t)throw t;var r=this,n=m._parseNumbers(e),i=Object.keys(this).reduce((function(e,t){return e[t]=r[t],e}),{}),a=Object.keys(n).reduce((function(e,t){var r=void 0!==e[t],i=void 0!==n[t];return r&&!i?u(e,[t]):(i&&(e[t]=n[t]),e)}),i);return new this.constructor(a)},resetPage:function(){return void 0===this.page?this:this.setPage(0)},_getHierarchicalFacetSortBy:function(e){return e.sortBy||["isRefined:desc","name:asc"]},_getHierarchicalFacetSeparator:function(e){return e.separator||" > "},_getHierarchicalRootPath:function(e){return e.rootPath||null},_getHierarchicalShowParentLevel:function(e){return"boolean"!=typeof e.showParentLevel||e.showParentLevel},getHierarchicalFacetByName:function(e){return i(this.hierarchicalFacets,(function(t){return t.name===e}))},getHierarchicalFacetBreadcrumb:function(e){if(!this.isHierarchicalFacet(e))return[];var t=this.getHierarchicalRefinement(e)[0];if(!t)return[];var r=this._getHierarchicalFacetSeparator(this.getHierarchicalFacetByName(e));return t.split(r).map((function(e){return e.trim()}))},toString:function(){return JSON.stringify(this,null,2)}},e.exports=m},670:function(e,t,r){"use strict";var n=r(750),i=r(652),a=r(649),s=r(645),c=r(751),u=r(671),o=r(644),h=r(672),f=a.escapeFacetValue,l=a.unescapeFacetValue,m=r(752);function d(e){var t={};return e.forEach((function(e,r){t[e]=r})),t}function p(e,t,r){t&&t[r]&&(e.stats=t[r])}function v(e,t,r){var a=t[0];this._rawResults=t;var u=this;Object.keys(a).forEach((function(e){u[e]=a[e]}));var h=o({persistHierarchicalRootCount:!1},r);Object.keys(h).forEach((function(e){u[e]=h[e]})),this.processingTimeMS=t.reduce((function(e,t){return void 0===t.processingTimeMS?e:e+t.processingTimeMS}),0),this.disjunctiveFacets=[],this.hierarchicalFacets=e.hierarchicalFacets.map((function(){return[]})),this.facets=[];var f=e.getRefinedDisjunctiveFacets(),v=d(e.facets),g=d(e.disjunctiveFacets),y=1,R=a.facets||{};Object.keys(R).forEach((function(t){var r,n,i=R[t],o=(r=e.hierarchicalFacets,n=t,s(r,(function(e){return(e.attributes||[]).indexOf(n)>-1})));if(o){var h=o.attributes.indexOf(t),f=c(e.hierarchicalFacets,(function(e){return e.name===o.name}));u.hierarchicalFacets[f][h]={attribute:t,data:i,exhaustive:a.exhaustiveFacetsCount}}else{var l,m=-1!==e.disjunctiveFacets.indexOf(t),d=-1!==e.facets.indexOf(t);m&&(l=g[t],u.disjunctiveFacets[l]={name:t,data:i,exhaustive:a.exhaustiveFacetsCount},p(u.disjunctiveFacets[l],a.facets_stats,t)),d&&(l=v[t],u.facets[l]={name:t,data:i,exhaustive:a.exhaustiveFacetsCount},p(u.facets[l],a.facets_stats,t))}})),this.hierarchicalFacets=n(this.hierarchicalFacets),f.forEach((function(r){var n=t[y],s=n&&n.facets?n.facets:{},h=e.getHierarchicalFacetByName(r);Object.keys(s).forEach((function(t){var r,f=s[t];if(h){r=c(e.hierarchicalFacets,(function(e){return e.name===h.name}));var m=c(u.hierarchicalFacets[r],(function(e){return e.attribute===t}));if(-1===m)return;u.hierarchicalFacets[r][m].data=o({},u.hierarchicalFacets[r][m].data,f)}else{r=g[t];var d=a.facets&&a.facets[t]||{};u.disjunctiveFacets[r]={name:t,data:i({},f,d),exhaustive:n.exhaustiveFacetsCount},p(u.disjunctiveFacets[r],n.facets_stats,t),e.disjunctiveFacetsRefinements[t]&&e.disjunctiveFacetsRefinements[t].forEach((function(n){!u.disjunctiveFacets[r].data[n]&&e.disjunctiveFacetsRefinements[t].indexOf(l(n))>-1&&(u.disjunctiveFacets[r].data[n]=0)}))}})),y++})),e.getRefinedHierarchicalFacets().forEach((function(r){var n=e.getHierarchicalFacetByName(r),a=e._getHierarchicalFacetSeparator(n),s=e.getHierarchicalRefinement(r);0===s.length||s[0].split(a).length<2||t.slice(y).forEach((function(t){var r=t&&t.facets?t.facets:{};Object.keys(r).forEach((function(t){var o=r[t],h=c(e.hierarchicalFacets,(function(e){return e.name===n.name})),f=c(u.hierarchicalFacets[h],(function(e){return e.attribute===t}));if(-1!==f){var l={};if(s.length>0&&!u.persistHierarchicalRootCount){var m=s[0].split(a)[0];l[m]=u.hierarchicalFacets[h][f].data[m]}u.hierarchicalFacets[h][f].data=i(l,o,u.hierarchicalFacets[h][f].data)}})),y++}))})),Object.keys(e.facetsExcludes).forEach((function(t){var r=e.facetsExcludes[t],n=v[t];u.facets[n]={name:t,data:R[t],exhaustive:a.exhaustiveFacetsCount},r.forEach((function(e){u.facets[n]=u.facets[n]||{name:t},u.facets[n].data=u.facets[n].data||{},u.facets[n].data[e]=0}))})),this.hierarchicalFacets=this.hierarchicalFacets.map(m(e)),this.facets=n(this.facets),this.disjunctiveFacets=n(this.disjunctiveFacets),this._state=e}function g(e,t){function r(e){return e.name===t}if(e._state.isConjunctiveFacet(t)){var n=s(e.facets,r);return n?Object.keys(n.data).map((function(r){var i=f(r);return{name:r,escapedValue:i,count:n.data[r],isRefined:e._state.isFacetRefined(t,i),isExcluded:e._state.isExcludeRefined(t,r)}})):[]}if(e._state.isDisjunctiveFacet(t)){var i=s(e.disjunctiveFacets,r);return i?Object.keys(i.data).map((function(r){var n=f(r);return{name:r,escapedValue:n,count:i.data[r],isRefined:e._state.isDisjunctiveFacetRefined(t,n)}})):[]}if(e._state.isHierarchicalFacet(t)){var a=s(e.hierarchicalFacets,r);if(!a)return a;var c=e._state.getHierarchicalFacetByName(t),u=e._state._getHierarchicalFacetSeparator(c),o=l(e._state.getHierarchicalRefinement(t)[0]||"");0===o.indexOf(c.rootPath)&&(o=o.replace(c.rootPath+u,""));var h=o.split(u);return h.unshift(t),y(a,h,0),a}}function y(e,t,r){e.isRefined=e.name===(t[r]&&t[r].trim()),e.data&&e.data.forEach((function(e){y(e,t,r+1)}))}function R(e,t,r,n){if(n=n||0,Array.isArray(t))return e(t,r[n]);if(!t.data||0===t.data.length)return t;var a=t.data.map((function(t){return R(e,t,r,n+1)})),s=e(a,r[n]);return i({data:s},t)}function F(e,t){var r=s(e,(function(e){return e.name===t}));return r&&r.stats}function b(e,t,r,n,i){var a=s(i,(function(e){return e.name===r})),c=a&&a.data&&a.data[n]?a.data[n]:0,u=a&&a.exhaustive||!1;return{type:t,attributeName:r,name:n,count:c,exhaustive:u}}v.prototype.getFacetByName=function(e){function t(t){return t.name===e}return s(this.facets,t)||s(this.disjunctiveFacets,t)||s(this.hierarchicalFacets,t)},v.DEFAULT_SORT=["isRefined:desc","count:desc","name:asc"],v.prototype.getFacetValues=function(e,t){var r=g(this,e);if(r){var n,a=i({},t,{sortBy:v.DEFAULT_SORT,facetOrdering:!(t&&t.sortBy)}),s=this;if(Array.isArray(r))n=[e];else n=s._state.getHierarchicalFacetByName(r.name).attributes;return R((function(e,t){if(a.facetOrdering){var r=function(e,t){return e.renderingContent&&e.renderingContent.facetOrdering&&e.renderingContent.facetOrdering.values&&e.renderingContent.facetOrdering.values[t]}(s,t);if(r)return function(e,t){var r=[],n=[],i=(t.order||[]).reduce((function(e,t,r){return e[t]=r,e}),{});e.forEach((function(e){var t=e.path||e.name;void 0!==i[t]?r[i[t]]=e:n.push(e)})),r=r.filter((function(e){return e}));var a,s=t.sortRemainingBy;return"hidden"===s?r:(a="alpha"===s?[["path","name"],["asc","asc"]]:[["count"],["desc"]],r.concat(h(n,a[0],a[1])))}(e,r)}if(Array.isArray(a.sortBy)){var n=u(a.sortBy,v.DEFAULT_SORT);return h(e,n[0],n[1])}if("function"==typeof a.sortBy)return function(e,t){return t.sort(e)}(a.sortBy,e);throw new Error("options.sortBy is optional but if defined it must be either an array of string (predicates) or a sorting function")}),r,n)}},v.prototype.getFacetStats=function(e){return this._state.isConjunctiveFacet(e)?F(this.facets,e):this._state.isDisjunctiveFacet(e)?F(this.disjunctiveFacets,e):void 0},v.prototype.getRefinements=function(){var e=this._state,t=this,r=[];return Object.keys(e.facetsRefinements).forEach((function(n){e.facetsRefinements[n].forEach((function(i){r.push(b(e,"facet",n,i,t.facets))}))})),Object.keys(e.facetsExcludes).forEach((function(n){e.facetsExcludes[n].forEach((function(i){r.push(b(e,"exclude",n,i,t.facets))}))})),Object.keys(e.disjunctiveFacetsRefinements).forEach((function(n){e.disjunctiveFacetsRefinements[n].forEach((function(i){r.push(b(e,"disjunctive",n,i,t.disjunctiveFacets))}))})),Object.keys(e.hierarchicalFacetsRefinements).forEach((function(n){e.hierarchicalFacetsRefinements[n].forEach((function(i){r.push(function(e,t,r,n){var i=e.getHierarchicalFacetByName(t),a=e._getHierarchicalFacetSeparator(i),c=r.split(a),u=s(n,(function(e){return e.name===t})),o=c.reduce((function(e,t){var r=e&&s(e.data,(function(e){return e.name===t}));return void 0!==r?r:e}),u),h=o&&o.count||0,f=o&&o.exhaustive||!1,l=o&&o.path||"";return{type:"hierarchical",attributeName:t,name:l,count:h,exhaustive:f}}(e,n,i,t.hierarchicalFacets))}))})),Object.keys(e.numericRefinements).forEach((function(t){var n=e.numericRefinements[t];Object.keys(n).forEach((function(e){n[e].forEach((function(n){r.push({type:"numeric",attributeName:t,name:n,numericValue:n,operator:e})}))}))})),e.tagRefinements.forEach((function(e){r.push({type:"tag",attributeName:"_tags",name:e})})),r},e.exports=v},671:function(e,t,r){"use strict";var n=r(645);e.exports=function(e,t){var r=(t||[]).map((function(e){return e.split(":")}));return e.reduce((function(e,t){var i=t.split(":"),a=n(r,(function(e){return e[0]===i[0]}));return i.length>1||!a?(e[0].push(i[0]),e[1].push(i[1]),e):(e[0].push(a[0]),e[1].push(a[1]),e)}),[[],[]])}},672:function(e,t,r){"use strict";function n(e,t){if(e!==t){var r=void 0!==e,n=null===e,i=void 0!==t,a=null===t;if(!a&&e>t||n&&i||!r)return 1;if(!n&&e=r.length?a:"desc"===r[i]?-a:a}return e.index-t.index})),i.map((function(e){return e.value}))}},673:function(e,t,r){"use strict";e.exports="3.16.3"},742:function(e,t,r){"use strict";var n=r(743),i=r(669),a=r(670);function s(e,t,r,i){return new n(e,t,r,i)}s.version=r(673),s.AlgoliaSearchHelper=n,s.SearchParameters=i,s.SearchResults=a,e.exports=s},743:function(e,t,r){"use strict";var n=r(667),i=r(744),a=r(649).escapeFacetValue,s=r(668),c=r(644),u=r(650),o=r(651),h=r(745),f=r(669),l=r(670),m=r(673);function d(e,t,r,n){"function"==typeof e.addAlgoliaAgent&&e.addAlgoliaAgent("JS Helper ("+m+")"),this.setClient(e);var i=r||{};i.index=t,this.state=f.make(i),this.lastResults=null,this._queryId=0,this._lastQueryIdReceived=-1,this.derivedHelpers=[],this._currentNbQueries=0,this._searchResultsOptions=n}function p(e){if(e<0)throw new Error("Page requested below 0.");return this._change({state:this.state.setPage(e),isPageReset:!1}),this}function v(){return this.state.page}s(d,n),d.prototype.search=function(){return this._search({onlyWithDerivedHelpers:!1}),this},d.prototype.searchOnlyWithDerivedHelpers=function(){return this._search({onlyWithDerivedHelpers:!0}),this},d.prototype.getQuery=function(){var e=this.state;return h._getHitsSearchParams(e)},d.prototype.searchOnce=function(e,t){var r=e?this.state.setQueryParameters(e):this.state,n=h._getQueries(r.index,r),i=this;if(this._currentNbQueries++,this.emit("searchOnce",{state:r}),!t)return this.client.search(n).then((function(e){return i._currentNbQueries--,0===i._currentNbQueries&&i.emit("searchQueueEmpty"),{content:new l(r,e.results),state:r,_originalResponse:e}}),(function(e){throw i._currentNbQueries--,0===i._currentNbQueries&&i.emit("searchQueueEmpty"),e}));this.client.search(n).then((function(e){i._currentNbQueries--,0===i._currentNbQueries&&i.emit("searchQueueEmpty"),t(null,new l(r,e.results),r)})).catch((function(e){i._currentNbQueries--,0===i._currentNbQueries&&i.emit("searchQueueEmpty"),t(e,null,r)}))},d.prototype.findAnswers=function(e){console.warn("[algoliasearch-helper] answers is no longer supported");var t=this.state,r=this.derivedHelpers[0];if(!r)return Promise.resolve([]);var n=r.getModifiedState(t),i=c({attributesForPrediction:e.attributesForPrediction,nbHits:e.nbHits},{params:o(h._getHitsSearchParams(n),["attributesToSnippet","hitsPerPage","restrictSearchableAttributes","snippetEllipsisText"])}),a="search for answers was called, but this client does not have a function client.initIndex(index).findAnswers";if("function"!=typeof this.client.initIndex)throw new Error(a);var s=this.client.initIndex(n.index);if("function"!=typeof s.findAnswers)throw new Error(a);return s.findAnswers(n.query,e.queryLanguages,i)},d.prototype.searchForFacetValues=function(e,t,r,n){var i="function"==typeof this.client.searchForFacetValues,s="function"==typeof this.client.initIndex;if(!i&&!s&&"function"!=typeof this.client.search)throw new Error("search for facet values (searchable) was called, but this client does not have a function client.searchForFacetValues or client.initIndex(index).searchForFacetValues");var c=this.state.setQueryParameters(n||{}),u=c.isDisjunctiveFacet(e),o=h.getSearchForFacetQuery(e,t,r,c);this._currentNbQueries++;var f,l=this;return i?f=this.client.searchForFacetValues([{indexName:c.index,params:o}]):s?f=this.client.initIndex(c.index).searchForFacetValues(o):(delete o.facetName,f=this.client.search([{type:"facet",facet:e,indexName:c.index,params:o}]).then((function(e){return e.results[0]}))),this.emit("searchForFacetValues",{state:c,facet:e,query:t}),f.then((function(t){return l._currentNbQueries--,0===l._currentNbQueries&&l.emit("searchQueueEmpty"),(t=Array.isArray(t)?t[0]:t).facetHits.forEach((function(t){t.escapedValue=a(t.value),t.isRefined=u?c.isDisjunctiveFacetRefined(e,t.escapedValue):c.isFacetRefined(e,t.escapedValue)})),t}),(function(e){throw l._currentNbQueries--,0===l._currentNbQueries&&l.emit("searchQueueEmpty"),e}))},d.prototype.setQuery=function(e){return this._change({state:this.state.resetPage().setQuery(e),isPageReset:!0}),this},d.prototype.clearRefinements=function(e){return this._change({state:this.state.resetPage().clearRefinements(e),isPageReset:!0}),this},d.prototype.clearTags=function(){return this._change({state:this.state.resetPage().clearTags(),isPageReset:!0}),this},d.prototype.addDisjunctiveFacetRefinement=function(e,t){return this._change({state:this.state.resetPage().addDisjunctiveFacetRefinement(e,t),isPageReset:!0}),this},d.prototype.addDisjunctiveRefine=function(){return this.addDisjunctiveFacetRefinement.apply(this,arguments)},d.prototype.addHierarchicalFacetRefinement=function(e,t){return this._change({state:this.state.resetPage().addHierarchicalFacetRefinement(e,t),isPageReset:!0}),this},d.prototype.addNumericRefinement=function(e,t,r){return this._change({state:this.state.resetPage().addNumericRefinement(e,t,r),isPageReset:!0}),this},d.prototype.addFacetRefinement=function(e,t){return this._change({state:this.state.resetPage().addFacetRefinement(e,t),isPageReset:!0}),this},d.prototype.addRefine=function(){return this.addFacetRefinement.apply(this,arguments)},d.prototype.addFacetExclusion=function(e,t){return this._change({state:this.state.resetPage().addExcludeRefinement(e,t),isPageReset:!0}),this},d.prototype.addExclude=function(){return this.addFacetExclusion.apply(this,arguments)},d.prototype.addTag=function(e){return this._change({state:this.state.resetPage().addTagRefinement(e),isPageReset:!0}),this},d.prototype.removeNumericRefinement=function(e,t,r){return this._change({state:this.state.resetPage().removeNumericRefinement(e,t,r),isPageReset:!0}),this},d.prototype.removeDisjunctiveFacetRefinement=function(e,t){return this._change({state:this.state.resetPage().removeDisjunctiveFacetRefinement(e,t),isPageReset:!0}),this},d.prototype.removeDisjunctiveRefine=function(){return this.removeDisjunctiveFacetRefinement.apply(this,arguments)},d.prototype.removeHierarchicalFacetRefinement=function(e){return this._change({state:this.state.resetPage().removeHierarchicalFacetRefinement(e),isPageReset:!0}),this},d.prototype.removeFacetRefinement=function(e,t){return this._change({state:this.state.resetPage().removeFacetRefinement(e,t),isPageReset:!0}),this},d.prototype.removeRefine=function(){return this.removeFacetRefinement.apply(this,arguments)},d.prototype.removeFacetExclusion=function(e,t){return this._change({state:this.state.resetPage().removeExcludeRefinement(e,t),isPageReset:!0}),this},d.prototype.removeExclude=function(){return this.removeFacetExclusion.apply(this,arguments)},d.prototype.removeTag=function(e){return this._change({state:this.state.resetPage().removeTagRefinement(e),isPageReset:!0}),this},d.prototype.toggleFacetExclusion=function(e,t){return this._change({state:this.state.resetPage().toggleExcludeFacetRefinement(e,t),isPageReset:!0}),this},d.prototype.toggleExclude=function(){return this.toggleFacetExclusion.apply(this,arguments)},d.prototype.toggleRefinement=function(e,t){return this.toggleFacetRefinement(e,t)},d.prototype.toggleFacetRefinement=function(e,t){return this._change({state:this.state.resetPage().toggleFacetRefinement(e,t),isPageReset:!0}),this},d.prototype.toggleRefine=function(){return this.toggleFacetRefinement.apply(this,arguments)},d.prototype.toggleTag=function(e){return this._change({state:this.state.resetPage().toggleTagRefinement(e),isPageReset:!0}),this},d.prototype.nextPage=function(){var e=this.state.page||0;return this.setPage(e+1)},d.prototype.previousPage=function(){var e=this.state.page||0;return this.setPage(e-1)},d.prototype.setCurrentPage=p,d.prototype.setPage=p,d.prototype.setIndex=function(e){return this._change({state:this.state.resetPage().setIndex(e),isPageReset:!0}),this},d.prototype.setQueryParameter=function(e,t){return this._change({state:this.state.resetPage().setQueryParameter(e,t),isPageReset:!0}),this},d.prototype.setState=function(e){return this._change({state:f.make(e),isPageReset:!1}),this},d.prototype.overrideStateWithoutTriggeringChangeEvent=function(e){return this.state=new f(e),this},d.prototype.hasRefinements=function(e){return!!u(this.state.getNumericRefinements(e))||(this.state.isConjunctiveFacet(e)?this.state.isFacetRefined(e):this.state.isDisjunctiveFacet(e)?this.state.isDisjunctiveFacetRefined(e):!!this.state.isHierarchicalFacet(e)&&this.state.isHierarchicalFacetRefined(e))},d.prototype.isExcluded=function(e,t){return this.state.isExcludeRefined(e,t)},d.prototype.isDisjunctiveRefined=function(e,t){return this.state.isDisjunctiveFacetRefined(e,t)},d.prototype.hasTag=function(e){return this.state.isTagRefined(e)},d.prototype.isTagRefined=function(){return this.hasTagRefinements.apply(this,arguments)},d.prototype.getIndex=function(){return this.state.index},d.prototype.getCurrentPage=v,d.prototype.getPage=v,d.prototype.getTags=function(){return this.state.tagRefinements},d.prototype.getRefinements=function(e){var t=[];if(this.state.isConjunctiveFacet(e))this.state.getConjunctiveRefinements(e).forEach((function(e){t.push({value:e,type:"conjunctive"})})),this.state.getExcludeRefinements(e).forEach((function(e){t.push({value:e,type:"exclude"})}));else if(this.state.isDisjunctiveFacet(e)){this.state.getDisjunctiveRefinements(e).forEach((function(e){t.push({value:e,type:"disjunctive"})}))}var r=this.state.getNumericRefinements(e);return Object.keys(r).forEach((function(e){var n=r[e];t.push({value:n,operator:e,type:"numeric"})})),t},d.prototype.getNumericRefinement=function(e,t){return this.state.getNumericRefinement(e,t)},d.prototype.getHierarchicalFacetBreadcrumb=function(e){return this.state.getHierarchicalFacetBreadcrumb(e)},d.prototype._search=function(e){var t=this.state,r=[],n=[];e.onlyWithDerivedHelpers||(n=h._getQueries(t.index,t),r.push({state:t,queriesCount:n.length,helper:this}),this.emit("search",{state:t,results:this.lastResults}));var i=this.derivedHelpers.map((function(e){var n=e.getModifiedState(t),i=n.index?h._getQueries(n.index,n):[];return r.push({state:n,queriesCount:i.length,helper:e}),e.emit("search",{state:n,results:e.lastResults}),i})),a=Array.prototype.concat.apply(n,i),s=this._queryId++;if(this._currentNbQueries++,!a.length)return Promise.resolve({results:[]}).then(this._dispatchAlgoliaResponse.bind(this,r,s));try{this.client.search(a).then(this._dispatchAlgoliaResponse.bind(this,r,s)).catch(this._dispatchAlgoliaError.bind(this,s))}catch(c){this.emit("error",{error:c})}},d.prototype._dispatchAlgoliaResponse=function(e,t,r){var n=this;if(!(t0},d.prototype._change=function(e){var t=e.state,r=e.isPageReset;t!==this.state&&(this.state=t,this.emit("change",{state:this.state,results:this.lastResults,isPageReset:r}))},d.prototype.clearCache=function(){return this.client.clearCache&&this.client.clearCache(),this},d.prototype.setClient=function(e){return this.client===e||("function"==typeof e.addAlgoliaAgent&&e.addAlgoliaAgent("JS Helper ("+m+")"),this.client=e),this},d.prototype.getClient=function(){return this.client},d.prototype.derive=function(e){var t=new i(this,e);return this.derivedHelpers.push(t),t},d.prototype.detachDerivedHelper=function(e){var t=this.derivedHelpers.indexOf(e);if(-1===t)throw new Error("Derived helper already detached");this.derivedHelpers.splice(t,1)},d.prototype.hasPendingRequests=function(){return this._currentNbQueries>0},e.exports=d},744:function(e,t,r){"use strict";var n=r(667);function i(e,t){this.main=e,this.fn=t,this.lastResults=null}r(668)(i,n),i.prototype.detach=function(){this.removeAllListeners(),this.main.detachDerivedHelper(this)},i.prototype.getModifiedState=function(e){return this.fn(e)},e.exports=i},745:function(e,t,r){"use strict";var n=r(644);function i(e){return Object.keys(e).sort().reduce((function(t,r){return t[r]=e[r],t}),{})}var a={_getQueries:function(e,t){var r=[];return r.push({indexName:e,params:a._getHitsSearchParams(t)}),t.getRefinedDisjunctiveFacets().forEach((function(n){r.push({indexName:e,params:a._getDisjunctiveFacetSearchParams(t,n)})})),t.getRefinedHierarchicalFacets().forEach((function(n){var i=t.getHierarchicalFacetByName(n),s=t.getHierarchicalRefinement(n),c=t._getHierarchicalFacetSeparator(i);if(s.length>0&&s[0].split(c).length>1){var u=s[0].split(c).slice(0,-1).reduce((function(e,t,r){return e.concat({attribute:i.attributes[r],value:0===r?t:[e[e.length-1].value,t].join(c)})}),[]);u.forEach((function(n,s){var c=a._getDisjunctiveFacetSearchParams(t,n.attribute,0===s);function o(e){return i.attributes.some((function(t){return t===e.split(":")[0]}))}var h=(c.facetFilters||[]).reduce((function(e,t){if(Array.isArray(t)){var r=t.filter((function(e){return!o(e)}));r.length>0&&e.push(r)}return"string"!=typeof t||o(t)||e.push(t),e}),[]),f=u[s-1];c.facetFilters=s>0?h.concat(f.attribute+":"+f.value):h.length>0?h:void 0,r.push({indexName:e,params:c})}))}})),r},_getHitsSearchParams:function(e){var t=e.facets.concat(e.disjunctiveFacets).concat(a._getHitsHierarchicalFacetsAttributes(e)).sort(),r=a._getFacetFilters(e),s=a._getNumericFilters(e),c=a._getTagFilters(e),u={facets:t.indexOf("*")>-1?["*"]:t,tagFilters:c};return r.length>0&&(u.facetFilters=r),s.length>0&&(u.numericFilters=s),i(n({},e.getQueryParams(),u))},_getDisjunctiveFacetSearchParams:function(e,t,r){var s=a._getFacetFilters(e,t,r),c=a._getNumericFilters(e,t),u=a._getTagFilters(e),o={hitsPerPage:0,page:0,analytics:!1,clickAnalytics:!1};u.length>0&&(o.tagFilters=u);var h=e.getHierarchicalFacetByName(t);return o.facets=h?a._getDisjunctiveHierarchicalFacetAttribute(e,h,r):t,c.length>0&&(o.numericFilters=c),s.length>0&&(o.facetFilters=s),i(n({},e.getQueryParams(),o))},_getNumericFilters:function(e,t){if(e.numericFilters)return e.numericFilters;var r=[];return Object.keys(e.numericRefinements).forEach((function(n){var i=e.numericRefinements[n]||{};Object.keys(i).forEach((function(e){var a=i[e]||[];t!==n&&a.forEach((function(t){if(Array.isArray(t)){var i=t.map((function(t){return n+e+t}));r.push(i)}else r.push(n+e+t)}))}))})),r},_getTagFilters:function(e){return e.tagFilters?e.tagFilters:e.tagRefinements.join(",")},_getFacetFilters:function(e,t,r){var n=[],i=e.facetsRefinements||{};Object.keys(i).sort().forEach((function(e){(i[e]||[]).slice().sort().forEach((function(t){n.push(e+":"+t)}))}));var a=e.facetsExcludes||{};Object.keys(a).sort().forEach((function(e){(a[e]||[]).sort().forEach((function(t){n.push(e+":-"+t)}))}));var s=e.disjunctiveFacetsRefinements||{};Object.keys(s).sort().forEach((function(e){var r=s[e]||[];if(e!==t&&r&&0!==r.length){var i=[];r.slice().sort().forEach((function(t){i.push(e+":"+t)})),n.push(i)}}));var c=e.hierarchicalFacetsRefinements||{};return Object.keys(c).sort().forEach((function(i){var a=(c[i]||[])[0];if(void 0!==a){var s,u,o=e.getHierarchicalFacetByName(i),h=e._getHierarchicalFacetSeparator(o),f=e._getHierarchicalRootPath(o);if(t===i){if(-1===a.indexOf(h)||!f&&!0===r||f&&f.split(h).length===a.split(h).length)return;f?(u=f.split(h).length-1,a=f):(u=a.split(h).length-2,a=a.slice(0,a.lastIndexOf(h))),s=o.attributes[u]}else u=a.split(h).length-1,s=o.attributes[u];s&&n.push([s+":"+a])}})),n},_getHitsHierarchicalFacetsAttributes:function(e){return e.hierarchicalFacets.reduce((function(t,r){var n=e.getHierarchicalRefinement(r.name)[0];if(!n)return t.push(r.attributes[0]),t;var i=e._getHierarchicalFacetSeparator(r),a=n.split(i).length,s=r.attributes.slice(0,a+1);return t.concat(s)}),[])},_getDisjunctiveHierarchicalFacetAttribute:function(e,t,r){var n=e._getHierarchicalFacetSeparator(t);if(!0===r){var i=e._getHierarchicalRootPath(t),a=0;return i&&(a=i.split(n).length),[t.attributes[a]]}var s=(e.getHierarchicalRefinement(t.name)[0]||"").split(n).length-1;return t.attributes.slice(0,s+1)},getSearchForFacetQuery:function(e,t,r,s){var c=s.isDisjunctiveFacet(e)?s.clearRefinements(e):s,u={facetQuery:t,facetName:e};return"number"==typeof r&&(u.maxFacetHits=r),i(n({},a._getHitsSearchParams(c),u))}};e.exports=a},746:function(e,t,r){"use strict";e.exports=function(e,t){return e.filter((function(r,n){return t.indexOf(r)>-1&&e.indexOf(r)===n}))}},747:function(e,t,r){"use strict";e.exports=function e(t){if("number"==typeof t)return t;if("string"==typeof t)return parseFloat(t);if(Array.isArray(t))return t.map(e);throw new Error("The value should be a number, a parsable string or an array of those.")}},748:function(e,t,r){"use strict";e.exports=function(e){return null!==e&&/^[a-zA-Z0-9_-]{1,64}$/.test(e)}},749:function(e,t,r){"use strict";var n=r(652),i=r(650),a=r(651),s={addRefinement:function(e,t,r){if(s.isRefined(e,t,r))return e;var i=""+r,a=e[t]?e[t].concat(i):[i],c={};return c[t]=a,n({},c,e)},removeRefinement:function(e,t,r){if(void 0===r)return s.clearRefinement(e,(function(e,r){return t===r}));var n=""+r;return s.clearRefinement(e,(function(e,r){return t===r&&n===e}))},toggleRefinement:function(e,t,r){if(void 0===r)throw new Error("toggleRefinement should be used with a value");return s.isRefined(e,t,r)?s.removeRefinement(e,t,r):s.addRefinement(e,t,r)},clearRefinement:function(e,t,r){if(void 0===t)return i(e)?{}:e;if("string"==typeof t)return a(e,[t]);if("function"==typeof t){var n=!1,s=Object.keys(e).reduce((function(i,a){var s=e[a]||[],c=s.filter((function(e){return!t(e,a,r)}));return c.length!==s.length&&(n=!0),i[a]=c,i}),{});return n?s:e}},isRefined:function(e,t,r){var n=Boolean(e[t])&&e[t].length>0;if(void 0===r||!n)return n;var i=""+r;return-1!==e[t].indexOf(i)}};e.exports=s},750:function(e,t,r){"use strict";e.exports=function(e){return Array.isArray(e)?e.filter(Boolean):[]}},751:function(e,t,r){"use strict";e.exports=function(e,t){if(!Array.isArray(e))return-1;for(var r=0;r0){var m=0;for(l=o;m=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)){var r=[],n=!0,i=!1,a=void 0;try{for(var s,c=e[Symbol.iterator]();!(n=(s=c.next()).done)&&(r.push(s.value),!t||r.length!==t);n=!0);}catch(e){i=!0,a=e}finally{try{n||null==c.return||c.return()}finally{if(i)throw a}}return r}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function a(e){return function(e){if(Array.isArray(e)){for(var t=0,r=new Array(e.length);t2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return Promise.resolve().then((function(){c();var t=JSON.stringify(e);return a()[t]})).then((function(e){return Promise.all([e?e.value:t(),void 0!==e])})).then((function(e){var t=i(e,2),n=t[0],a=t[1];return Promise.all([n,a||r.miss(n)])})).then((function(e){return i(e,1)[0]}))},set:function(e,t){return Promise.resolve().then((function(){var i=a();return i[JSON.stringify(e)]={timestamp:(new Date).getTime(),value:t},n().setItem(r,JSON.stringify(i)),t}))},delete:function(e){return Promise.resolve().then((function(){var t=a();delete t[JSON.stringify(e)],n().setItem(r,JSON.stringify(t))}))},clear:function(){return Promise.resolve().then((function(){n().removeItem(r)}))}}}function c(e){var t=a(e.caches),r=t.shift();return void 0===r?{get:function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return t().then((function(e){return Promise.all([e,r.miss(e)])})).then((function(e){return i(e,1)[0]}))},set:function(e,t){return Promise.resolve(t)},delete:function(e){return Promise.resolve()},clear:function(){return Promise.resolve()}}:{get:function(e,n){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return r.get(e,n,i).catch((function(){return c({caches:t}).get(e,n,i)}))},set:function(e,n){return r.set(e,n).catch((function(){return c({caches:t}).set(e,n)}))},delete:function(e){return r.delete(e).catch((function(){return c({caches:t}).delete(e)}))},clear:function(){return r.clear().catch((function(){return c({caches:t}).clear()}))}}}function u(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{serializable:!0},t={};return{get:function(r,n){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}},a=JSON.stringify(r);if(a in t)return Promise.resolve(e.serializable?JSON.parse(t[a]):t[a]);var s=n(),c=i&&i.miss||function(){return Promise.resolve()};return s.then((function(e){return c(e)})).then((function(){return s}))},set:function(r,n){return t[JSON.stringify(r)]=e.serializable?JSON.stringify(n):n,Promise.resolve(n)},delete:function(e){return delete t[JSON.stringify(e)],Promise.resolve()},clear:function(){return t={},Promise.resolve()}}}function o(e){for(var t=e.length-1;t>0;t--){var r=Math.floor(Math.random()*(t+1)),n=e[t];e[t]=e[r],e[r]=n}return e}function h(e,t){return t?(Object.keys(t).forEach((function(r){e[r]=t[r](e)})),e):e}function f(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n0?n:void 0,timeout:r.timeout||t,headers:r.headers||{},queryParameters:r.queryParameters||{},cacheable:r.cacheable}}var d={Read:1,Write:2,Any:3},p=1,v=2,g=3;function y(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:p;return r(r({},e),{},{status:t,lastUpdate:Date.now()})}function R(e){return"string"==typeof e?{protocol:"https",url:e,accept:d.Any}:{protocol:e.protocol||"https",url:e.url,accept:e.accept||d.Any}}var F="GET",b="POST";function j(e,t){return Promise.all(t.map((function(t){return e.get(t,(function(){return Promise.resolve(y(t))}))}))).then((function(e){var r=e.filter((function(e){return function(e){return e.status===p||Date.now()-e.lastUpdate>12e4}(e)})),n=e.filter((function(e){return function(e){return e.status===g&&Date.now()-e.lastUpdate<=12e4}(e)})),i=[].concat(a(r),a(n));return{getTimeout:function(e,t){return(0===n.length&&0===e?1:n.length+3+e)*t},statelessHosts:i.length>0?i.map((function(e){return R(e)})):t}}))}function P(e,t,n,i){var s=[],c=function(e,t){if(e.method!==F&&(void 0!==e.data||void 0!==t.data)){var n=Array.isArray(e.data)?e.data:r(r({},e.data),t.data);return JSON.stringify(n)}}(n,i),u=function(e,t){var n=r(r({},e.headers),t.headers),i={};return Object.keys(n).forEach((function(e){var t=n[e];i[e.toLowerCase()]=t})),i}(e,i),o=n.method,h=n.method!==F?{}:r(r({},n.data),i.data),f=r(r(r({"x-algolia-agent":e.userAgent.value},e.queryParameters),h),i.queryParameters),l=0,m=function t(r,a){var h=r.pop();if(void 0===h)throw{name:"RetryError",message:"Unreachable hosts - your application id may be incorrect. If the error persists, contact support@algolia.com.",transporterStackTrace:O(s)};var m={data:c,headers:u,method:o,url:_(h,n.path,f),connectTimeout:a(l,e.timeouts.connect),responseTimeout:a(l,i.timeout)},d=function(e){var t={request:m,response:e,host:h,triesLeft:r.length};return s.push(t),t},p={onSuccess:function(e){return function(e){try{return JSON.parse(e.content)}catch(t){throw function(e,t){return{name:"DeserializationError",message:e,response:t}}(t.message,e)}}(e)},onRetry:function(n){var i=d(n);return n.isTimedOut&&l++,Promise.all([e.logger.info("Retryable failure",w(i)),e.hostsCache.set(h,y(h,n.isTimedOut?g:v))]).then((function(){return t(r,a)}))},onFail:function(e){throw d(e),function(e,t){var r=e.content,n=e.status,i=r;try{i=JSON.parse(r).message}catch(e){}return function(e,t,r){return{name:"ApiError",message:e,status:t,transporterStackTrace:r}}(i,n,t)}(e,O(s))}};return e.requester.send(m).then((function(e){return function(e,t){return function(e){var t=e.status;return e.isTimedOut||function(e){var t=e.isTimedOut,r=e.status;return!t&&!~~r}(e)||2!=~~(t/100)&&4!=~~(t/100)}(e)?t.onRetry(e):2==~~(e.status/100)?t.onSuccess(e):t.onFail(e)}(e,p)}))};return j(e.hostsCache,t).then((function(e){return m(a(e.statelessHosts).reverse(),e.getTimeout)}))}function E(e){var t={value:"Algolia for JavaScript (".concat(e,")"),add:function(e){var r="; ".concat(e.segment).concat(void 0!==e.version?" (".concat(e.version,")"):"");return-1===t.value.indexOf(r)&&(t.value="".concat(t.value).concat(r)),t}};return t}function _(e,t,r){var n=x(r),i="".concat(e.protocol,"://").concat(e.url,"/").concat("/"===t.charAt(0)?t.substr(1):t);return n.length&&(i+="?".concat(n)),i}function x(e){return Object.keys(e).map((function(t){return f("%s=%s",t,(r=e[t],"[object Object]"===Object.prototype.toString.call(r)||"[object Array]"===Object.prototype.toString.call(r)?JSON.stringify(e[t]):e[t]));var r})).join("&")}function O(e){return e.map((function(e){return w(e)}))}function w(e){var t=e.request.headers["x-algolia-api-key"]?{"x-algolia-api-key":"*****"}:{};return r(r({},e),{},{request:r(r({},e.request),{},{headers:r(r({},e.request.headers),t)})})}var N=function(e){var t=e.appId,n=function(e,t,r){var n={"x-algolia-api-key":r,"x-algolia-application-id":t};return{headers:function(){return e===l.WithinHeaders?n:{}},queryParameters:function(){return e===l.WithinQueryParameters?n:{}}}}(void 0!==e.authMode?e.authMode:l.WithinHeaders,t,e.apiKey),a=function(e){var t=e.hostsCache,r=e.logger,n=e.requester,a=e.requestsCache,s=e.responsesCache,c=e.timeouts,u=e.userAgent,o=e.hosts,h=e.queryParameters,f={hostsCache:t,logger:r,requester:n,requestsCache:a,responsesCache:s,timeouts:c,userAgent:u,headers:e.headers,queryParameters:h,hosts:o.map((function(e){return R(e)})),read:function(e,t){var r=m(t,f.timeouts.read),n=function(){return P(f,f.hosts.filter((function(e){return!!(e.accept&d.Read)})),e,r)};if(!0!==(void 0!==r.cacheable?r.cacheable:e.cacheable))return n();var a={request:e,mappedRequestOptions:r,transporter:{queryParameters:f.queryParameters,headers:f.headers}};return f.responsesCache.get(a,(function(){return f.requestsCache.get(a,(function(){return f.requestsCache.set(a,n()).then((function(e){return Promise.all([f.requestsCache.delete(a),e])}),(function(e){return Promise.all([f.requestsCache.delete(a),Promise.reject(e)])})).then((function(e){var t=i(e,2);return t[0],t[1]}))}))}),{miss:function(e){return f.responsesCache.set(a,e)}})},write:function(e,t){return P(f,f.hosts.filter((function(e){return!!(e.accept&d.Write)})),e,m(t,f.timeouts.write))}};return f}(r(r({hosts:[{url:"".concat(t,"-dsn.algolia.net"),accept:d.Read},{url:"".concat(t,".algolia.net"),accept:d.Write}].concat(o([{url:"".concat(t,"-1.algolianet.com")},{url:"".concat(t,"-2.algolianet.com")},{url:"".concat(t,"-3.algolianet.com")}]))},e),{},{headers:r(r(r({},n.headers()),{"content-type":"application/x-www-form-urlencoded"}),e.headers),queryParameters:r(r({},n.queryParameters()),e.queryParameters)}));return h({transporter:a,appId:t,addAlgoliaAgent:function(e,t){a.userAgent.add({segment:e,version:t})},clearCache:function(){return Promise.all([a.requestsCache.clear(),a.responsesCache.clear()]).then((function(){}))}},e.methods)},A=function(e){return function(t,r){return t.method===F?e.transporter.read(t,r):e.transporter.write(t,r)}},H=function(e){return function(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return h({transporter:e.transporter,appId:e.appId,indexName:t},r.methods)}},S=function(e){return function(t,n){var i=t.map((function(e){return r(r({},e),{},{params:x(e.params||{})})}));return e.transporter.read({method:b,path:"1/indexes/*/queries",data:{requests:i},cacheable:!0},n)}},T=function(e){return function(t,i){return Promise.all(t.map((function(t){var a=t.params,s=a.facetName,c=a.facetQuery,u=n(a,["facetName","facetQuery"]);return H(e)(t.indexName,{methods:{searchForFacetValues:D}}).searchForFacetValues(s,c,r(r({},i),u))})))}},Q=function(e){return function(t,r,n){return e.transporter.read({method:b,path:f("1/answers/%s/prediction",e.indexName),data:{query:t,queryLanguages:r},cacheable:!0},n)}},C=function(e){return function(t,r){return e.transporter.read({method:b,path:f("1/indexes/%s/query",e.indexName),data:{query:t},cacheable:!0},r)}},D=function(e){return function(t,r,n){return e.transporter.read({method:b,path:f("1/indexes/%s/facets/%s/query",e.indexName,t),data:{facetQuery:r},cacheable:!0},n)}},k=1,q=2,I=3,V=function(e){return function(t,n){var i=t.map((function(e){return r(r({},e),{},{threshold:e.threshold||0})}));return e.transporter.read({method:b,path:"1/indexes/*/recommendations",data:{requests:i},cacheable:!0},n)}};function L(e,t,n){var i,a={appId:e,apiKey:t,timeouts:{connect:1,read:2,write:30},requester:{send:function(e){return new Promise((function(t){var r=new XMLHttpRequest;r.open(e.method,e.url,!0),Object.keys(e.headers).forEach((function(t){return r.setRequestHeader(t,e.headers[t])}));var n,i=function(e,n){return setTimeout((function(){r.abort(),t({status:0,content:n,isTimedOut:!0})}),1e3*e)},a=i(e.connectTimeout,"Connection timeout");r.onreadystatechange=function(){r.readyState>r.OPENED&&void 0===n&&(clearTimeout(a),n=i(e.responseTimeout,"Socket timeout"))},r.onerror=function(){0===r.status&&(clearTimeout(a),clearTimeout(n),t({content:r.responseText||"Network request failed",status:r.status,isTimedOut:!1}))},r.onload=function(){clearTimeout(a),clearTimeout(n),t({content:r.responseText,status:r.status,isTimedOut:!1})},r.send(e.data)}))}},logger:(i=I,{debug:function(e,t){return k>=i&&console.debug(e,t),Promise.resolve()},info:function(e,t){return q>=i&&console.info(e,t),Promise.resolve()},error:function(e,t){return console.error(e,t),Promise.resolve()}}),responsesCache:u(),requestsCache:u({serializable:!1}),hostsCache:c({caches:[s({key:"".concat("4.23.2","-").concat(e)}),u()]}),userAgent:E("4.23.2").add({segment:"Browser",version:"lite"}),authMode:l.WithinQueryParameters};return N(r(r(r({},a),n),{},{methods:{search:S,searchForFacetValues:T,multipleQueries:S,multipleSearchForFacetValues:T,customRequest:A,initIndex:function(e){return function(t){return H(e)(t,{methods:{search:C,searchForFacetValues:D,findAnswers:Q}})}},getRecommendations:V}}))}return L.version="4.23.2",L}()}}]); \ No newline at end of file +/*! For license information please see 552.53b9b813.js.LICENSE.txt */ +(window.webpackJsonp=window.webpackJsonp||[]).push([[552],{551:function(e,t,r){"use strict";r.r(t);var n=r(0),i=r.n(n),a=r(754),s=r.n(a),c=r(742),u=r.n(c),o=r(628),h=r(22),f=r(638),l=r(8),m=r(635),d=r(16),p=r(637),v=r(657),g=r(642),y=r(636),R=r(552),F=r.n(R);const b=e=>{let{docsSearchVersionsHelpers:t}=e;const r=Object.entries(t.allDocsData).filter((e=>{let[,t]=e;return t.versions.length>1}));return i.a.createElement("div",{className:Object(o.a)("col","col--3","padding-left--none",F.a.searchVersionColumn)},r.map((e=>{let[n,a]=e;const s=r.length>1?n+": ":"";return i.a.createElement("select",{key:n,onChange:e=>t.setSearchVersion(n,e.target.value),defaultValue:t.searchVersions[n],className:F.a.searchVersionInput},a.versions.map(((e,t)=>i.a.createElement("option",{key:t,label:""+s+e.label,value:e.name}))))})))};t.default=function(){const{siteConfig:{themeConfig:{algolia:{appId:e,apiKey:t,indexName:r}}},i18n:{currentLocale:a}}=Object(d.default)(),c=function(){const{selectMessage:e}=Object(m.usePluralForm)();return t=>e(t,Object(y.b)({id:"theme.SearchPage.documentsFound.plurals",description:'Pluralized label for "{count} documents found". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',message:"One document found|{count} documents found"},{count:t}))}(),R=function(){const e=Object(p.useAllDocsData)(),[t,r]=Object(n.useState)((()=>Object.entries(e).reduce(((e,t)=>{let[r,n]=t;return{...e,[r]:n.versions[0].name}}),{}))),i=Object.values(e).some((e=>e.versions.length>1));return{allDocsData:e,versioningEnabled:i,searchVersions:t,setSearchVersion:(e,t)=>r((r=>({...r,[e]:t})))}}(),{searchValue:j,updateSearchPath:P}=Object(v.a)(),[E,_]=Object(n.useState)(j),x={items:[],query:null,totalResults:null,totalPages:null,lastPage:null,hasMore:null,loading:null},[O,w]=Object(n.useReducer)(((e,t)=>{let{type:r,value:n}=t;switch(r){case"reset":return x;case"loading":return{...e,loading:!0};case"update":return E!==n.query?e:{...n,items:0===n.lastPage?n.items:e.items.concat(n.items)};case"advance":{const t=e.totalPages>e.lastPage+1;return{...e,lastPage:t?e.lastPage+1:e.lastPage,hasMore:t}}default:return e}}),x),N=s()(e,t),A=u()(N,r,{hitsPerPage:15,advancedSyntax:!0,disjunctiveFacets:["language","docusaurus_tag"]});A.on("result",(e=>{let{results:{query:t,hits:r,page:n,nbHits:i,nbPages:a}}=e;if(""===t||!(r instanceof Array))return void w({type:"reset"});const s=e=>e.replace(/algolia-docsearch-suggestion--highlight/g,"search-result-match"),c=r.map((e=>{let{url:t,_highlightResult:{hierarchy:r},_snippetResult:n={}}=e;const{pathname:i,hash:a}=new URL(t),c=Object.keys(r).map((e=>s(r[e].value)));return{title:c.pop(),url:i+a,summary:n.content?s(n.content.value)+"...":"",breadcrumbs:c}}));w({type:"update",value:{items:c,query:t,totalResults:i,totalPages:a,lastPage:n,hasMore:a>n+1,loading:!1}})}));const[S,H]=Object(n.useState)(null),T=Object(n.useRef)(0),Q=Object(n.useRef)(l.a.canUseDOM&&new IntersectionObserver((e=>{const{isIntersecting:t,boundingClientRect:{y:r}}=e[0];t&&T.current>r&&w({type:"advance"}),T.current=r}),{threshold:1})),C=()=>E?Object(y.b)({id:"theme.SearchPage.existingResultsTitle",message:'Search results for "{query}"',description:"The search page title for non-empty query"},{query:E}):Object(y.b)({id:"theme.SearchPage.emptyResultsTitle",message:"Search the documentation",description:"The search page title for empty query"}),D=function(e){void 0===e&&(e=0),A.addDisjunctiveFacetRefinement("docusaurus_tag","default"),A.addDisjunctiveFacetRefinement("language",a),Object.entries(R.searchVersions).forEach((e=>{let[t,r]=e;A.addDisjunctiveFacetRefinement("docusaurus_tag","docs-"+t+"-"+r)})),A.setQuery(E).setPage(e).search()};return Object(n.useEffect)((()=>{if(S)return Q.current.observe(S),()=>{Q.current.unobserve(S)}}),[S]),Object(n.useEffect)((()=>{P(E),w({type:"reset"}),E&&(w({type:"loading"}),setTimeout((()=>{D()}),300))}),[E,R.searchVersions]),Object(n.useEffect)((()=>{O.lastPage&&0!==O.lastPage&&D(O.lastPage)}),[O.lastPage]),Object(n.useEffect)((()=>{j&&j!==E&&_(j)}),[j]),i.a.createElement(g.a,{wrapperClassName:"search-page-wrapper"},i.a.createElement(h.a,null,i.a.createElement("title",null,Object(m.useTitleFormatter)(C())),i.a.createElement("meta",{property:"robots",content:"noindex, follow"})),i.a.createElement("div",{className:"container margin-vert--lg"},i.a.createElement("h1",null,C()),i.a.createElement("form",{className:"row",onSubmit:e=>e.preventDefault()},i.a.createElement("div",{className:Object(o.a)("col",F.a.searchQueryColumn,{"col--9":R.versioningEnabled,"col--12":!R.versioningEnabled})},i.a.createElement("input",{type:"search",name:"q",className:F.a.searchQueryInput,placeholder:Object(y.b)({id:"theme.SearchPage.inputPlaceholder",message:"Type your search here",description:"The placeholder for search page input"}),"aria-label":Object(y.b)({id:"theme.SearchPage.inputLabel",message:"Search",description:"The ARIA label for search page input"}),onChange:e=>_(e.target.value),value:E,autoComplete:"off",autoFocus:!0})),R.versioningEnabled&&i.a.createElement(b,{docsSearchVersionsHelpers:R})),i.a.createElement("div",{className:Object(o.a)("row","margin-vert--sm")},i.a.createElement("div",{className:Object(o.a)("col","col--8",F.a.searchResultsColumn)},!!O.totalResults&&i.a.createElement("strong",null,c(O.totalResults))),i.a.createElement("div",{className:Object(o.a)("col","col--4",F.a.searchLogoColumn)},i.a.createElement("a",{target:"_blank",rel:"noopener noreferrer",href:"https://www.algolia.com/","aria-label":Object(y.b)({id:"theme.SearchPage.algoliaLabel",message:"Search by Algolia",description:"The ARIA label for Algolia mention"})},i.a.createElement("svg",{viewBox:"0 0 168 24",className:F.a.algoliaLogo,xmlns:"http://www.w3.org/2000/svg"},i.a.createElement("g",{fill:"none"},i.a.createElement("path",{className:F.a.algoliaLogoPathFill,d:"M120.925 18.804c-4.386.02-4.386-3.54-4.386-4.106l-.007-13.336 2.675-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-10.846-2.18c.821 0 1.43-.047 1.855-.129v-2.719a6.334 6.334 0 0 0-1.574-.199 5.7 5.7 0 0 0-.897.069 2.699 2.699 0 0 0-.814.24c-.24.116-.439.28-.582.491-.15.212-.219.335-.219.656 0 .628.219.991.616 1.23s.938.362 1.615.362zm-.233-9.7c.883 0 1.629.109 2.231.328.602.218 1.088.525 1.444.915.363.396.609.922.76 1.483.157.56.232 1.175.232 1.85v6.874a32.5 32.5 0 0 1-1.868.314c-.834.123-1.772.185-2.813.185-.69 0-1.327-.069-1.895-.198a4.001 4.001 0 0 1-1.471-.636 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.803 0-.656.13-1.073.384-1.525a3.24 3.24 0 0 1 1.047-1.106c.445-.287.95-.492 1.532-.615a8.8 8.8 0 0 1 1.82-.185 8.404 8.404 0 0 1 1.972.24v-.438c0-.307-.035-.6-.11-.874a1.88 1.88 0 0 0-.384-.73 1.784 1.784 0 0 0-.724-.493 3.164 3.164 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.735 7.735 0 0 0-1.26.307l-.321-2.192c.335-.117.834-.233 1.478-.349a10.98 10.98 0 0 1 2.073-.178zm52.842 9.626c.822 0 1.43-.048 1.854-.13V13.7a6.347 6.347 0 0 0-1.574-.199c-.294 0-.595.021-.896.069a2.7 2.7 0 0 0-.814.24 1.46 1.46 0 0 0-.582.491c-.15.212-.218.335-.218.656 0 .628.218.991.615 1.23.404.245.938.362 1.615.362zm-.226-9.694c.883 0 1.629.108 2.231.327.602.219 1.088.526 1.444.915.355.39.609.923.759 1.483a6.8 6.8 0 0 1 .233 1.852v6.873c-.41.088-1.034.19-1.868.314-.834.123-1.772.184-2.813.184-.69 0-1.327-.068-1.895-.198a4.001 4.001 0 0 1-1.471-.635 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.804 0-.656.13-1.073.384-1.524.26-.45.608-.82 1.047-1.107.445-.286.95-.491 1.532-.614a8.803 8.803 0 0 1 2.751-.13c.329.034.671.096 1.04.185v-.437a3.3 3.3 0 0 0-.109-.875 1.873 1.873 0 0 0-.384-.731 1.784 1.784 0 0 0-.724-.492 3.165 3.165 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.75 7.75 0 0 0-1.26.307l-.321-2.193c.335-.116.834-.232 1.478-.348a11.633 11.633 0 0 1 2.073-.177zm-8.034-1.271a1.626 1.626 0 0 1-1.628-1.62c0-.895.725-1.62 1.628-1.62.904 0 1.63.725 1.63 1.62 0 .895-.733 1.62-1.63 1.62zm1.348 13.22h-2.689V7.27l2.69-.423v11.956zm-4.714 0c-4.386.02-4.386-3.54-4.386-4.107l-.008-13.336 2.676-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-8.698-5.903c0-1.156-.253-2.119-.746-2.788-.493-.677-1.183-1.01-2.067-1.01-.882 0-1.574.333-2.065 1.01-.493.676-.733 1.632-.733 2.788 0 1.168.246 1.953.74 2.63.492.683 1.183 1.018 2.066 1.018.882 0 1.574-.342 2.067-1.019.492-.683.738-1.46.738-2.63zm2.737-.007c0 .902-.13 1.584-.397 2.33a5.52 5.52 0 0 1-1.128 1.906 4.986 4.986 0 0 1-1.752 1.223c-.685.286-1.739.45-2.265.45-.528-.006-1.574-.157-2.252-.45a5.096 5.096 0 0 1-1.744-1.223c-.487-.527-.863-1.162-1.137-1.906a6.345 6.345 0 0 1-.41-2.33c0-.902.123-1.77.397-2.508a5.554 5.554 0 0 1 1.15-1.892 5.133 5.133 0 0 1 1.75-1.216c.679-.287 1.425-.423 2.232-.423.808 0 1.553.142 2.237.423a4.88 4.88 0 0 1 1.753 1.216 5.644 5.644 0 0 1 1.135 1.892c.287.738.431 1.606.431 2.508zm-20.138 0c0 1.12.246 2.363.738 2.882.493.52 1.13.78 1.91.78.424 0 .828-.062 1.204-.178.377-.116.677-.253.917-.417V9.33a10.476 10.476 0 0 0-1.766-.226c-.971-.028-1.71.37-2.23 1.004-.513.636-.773 1.75-.773 2.788zm7.438 5.274c0 1.824-.466 3.156-1.404 4.004-.936.846-2.367 1.27-4.296 1.27-.705 0-2.17-.137-3.34-.396l.431-2.118c.98.205 2.272.26 2.95.26 1.074 0 1.84-.219 2.299-.656.459-.437.684-1.086.684-1.948v-.437a8.07 8.07 0 0 1-1.047.397c-.43.13-.93.198-1.492.198-.739 0-1.41-.116-2.018-.349a4.206 4.206 0 0 1-1.567-1.025c-.431-.45-.774-1.017-1.013-1.694-.24-.677-.363-1.885-.363-2.773 0-.834.13-1.88.384-2.577.26-.696.629-1.298 1.129-1.796.493-.498 1.095-.881 1.8-1.162a6.605 6.605 0 0 1 2.428-.457c.87 0 1.67.109 2.45.24.78.129 1.444.265 1.985.415V18.17zM6.972 6.677v1.627c-.712-.446-1.52-.67-2.425-.67-.585 0-1.045.13-1.38.391a1.24 1.24 0 0 0-.502 1.03c0 .425.164.765.494 1.02.33.256.835.532 1.516.83.447.192.795.356 1.045.495.25.138.537.332.862.582.324.25.563.548.718.894.154.345.23.741.23 1.188 0 .947-.334 1.691-1.004 2.234-.67.542-1.537.814-2.601.814-1.18 0-2.16-.229-2.936-.686v-1.708c.84.628 1.814.942 2.92.942.585 0 1.048-.136 1.388-.407.34-.271.51-.646.51-1.125 0-.287-.1-.55-.302-.79-.203-.24-.42-.42-.655-.542-.234-.123-.585-.29-1.053-.503a61.27 61.27 0 0 1-.582-.271 13.67 13.67 0 0 1-.55-.287 4.275 4.275 0 0 1-.567-.351 6.92 6.92 0 0 1-.455-.4c-.18-.17-.31-.34-.39-.51-.08-.17-.155-.37-.224-.598a2.553 2.553 0 0 1-.104-.742c0-.915.333-1.638.998-2.17.664-.532 1.523-.798 2.576-.798.968 0 1.793.17 2.473.51zm7.468 5.696v-.287c-.022-.607-.187-1.088-.495-1.444-.309-.357-.75-.535-1.324-.535-.532 0-.99.194-1.373.583-.382.388-.622.949-.717 1.683h3.909zm1.005 2.792v1.404c-.596.34-1.383.51-2.362.51-1.255 0-2.255-.377-3-1.132-.744-.755-1.116-1.744-1.116-2.968 0-1.297.34-2.316 1.021-3.055.68-.74 1.548-1.11 2.6-1.11 1.033 0 1.852.323 2.458.966.606.644.91 1.572.91 2.784 0 .33-.033.676-.096 1.038h-5.314c.107.702.405 1.239.894 1.611.49.372 1.106.558 1.85.558.862 0 1.58-.202 2.155-.606zm6.605-1.77h-1.212c-.596 0-1.045.116-1.349.35-.303.234-.454.532-.454.894 0 .372.117.664.35.877.235.213.575.32 1.022.32.51 0 .912-.142 1.204-.424.293-.281.44-.651.44-1.108v-.91zm-4.068-2.554V9.325c.627-.361 1.457-.542 2.489-.542 2.116 0 3.175 1.026 3.175 3.08V17h-1.548v-.957c-.415.68-1.143 1.02-2.186 1.02-.766 0-1.38-.22-1.843-.661-.462-.442-.694-1.003-.694-1.684 0-.776.293-1.38.878-1.81.585-.431 1.404-.647 2.457-.647h1.34V11.8c0-.554-.133-.971-.399-1.253-.266-.282-.707-.423-1.324-.423a4.07 4.07 0 0 0-2.345.718zm9.333-1.93v1.42c.394-1 1.101-1.5 2.123-1.5.148 0 .313.016.494.048v1.531a1.885 1.885 0 0 0-.75-.143c-.542 0-.989.24-1.34.718-.351.479-.527 1.048-.527 1.707V17h-1.563V8.91h1.563zm5.01 4.084c.022.82.272 1.492.75 2.019.479.526 1.15.79 2.01.79.639 0 1.235-.176 1.788-.527v1.404c-.521.319-1.186.479-1.995.479-1.265 0-2.276-.4-3.031-1.197-.755-.798-1.133-1.792-1.133-2.984 0-1.16.38-2.151 1.14-2.975.761-.825 1.79-1.237 3.088-1.237.702 0 1.346.149 1.93.447v1.436a3.242 3.242 0 0 0-1.77-.495c-.84 0-1.513.266-2.019.798-.505.532-.758 1.213-.758 2.042zM40.24 5.72v4.579c.458-1 1.293-1.5 2.505-1.5.787 0 1.42.245 1.899.734.479.49.718 1.17.718 2.042V17h-1.564v-5.106c0-.553-.14-.98-.422-1.284-.282-.303-.652-.455-1.11-.455-.531 0-1.002.202-1.411.606-.41.405-.615 1.022-.615 1.851V17h-1.563V5.72h1.563zm14.966 10.02c.596 0 1.096-.253 1.5-.758.404-.506.606-1.157.606-1.955 0-.915-.202-1.62-.606-2.114-.404-.495-.92-.742-1.548-.742-.553 0-1.05.224-1.491.67-.442.447-.662 1.133-.662 2.058 0 .958.212 1.67.638 2.138.425.469.946.703 1.563.703zM53.004 5.72v4.42c.574-.894 1.388-1.341 2.44-1.341 1.022 0 1.857.383 2.506 1.149.649.766.973 1.781.973 3.047 0 1.138-.309 2.109-.925 2.912-.617.803-1.463 1.205-2.537 1.205-1.075 0-1.894-.447-2.457-1.34V17h-1.58V5.72h1.58zm9.908 11.104l-3.223-7.913h1.739l1.005 2.632 1.26 3.415c.096-.32.48-1.458 1.15-3.415l.909-2.632h1.66l-2.92 7.866c-.777 2.074-1.963 3.11-3.559 3.11a2.92 2.92 0 0 1-.734-.079v-1.34c.17.042.351.064.543.064 1.032 0 1.755-.57 2.17-1.708z"}),i.a.createElement("path",{fill:"#5468FF",d:"M78.988.938h16.594a2.968 2.968 0 0 1 2.966 2.966V20.5a2.967 2.967 0 0 1-2.966 2.964H78.988a2.967 2.967 0 0 1-2.966-2.964V3.897A2.961 2.961 0 0 1 78.988.938z"}),i.a.createElement("path",{fill:"white",d:"M89.632 5.967v-.772a.978.978 0 0 0-.978-.977h-2.28a.978.978 0 0 0-.978.977v.793c0 .088.082.15.171.13a7.127 7.127 0 0 1 1.984-.28c.65 0 1.295.088 1.917.259.082.02.164-.04.164-.13m-6.248 1.01l-.39-.389a.977.977 0 0 0-1.382 0l-.465.465a.973.973 0 0 0 0 1.38l.383.383c.062.061.15.047.205-.014.226-.307.472-.601.746-.874.281-.28.568-.526.883-.751.068-.042.075-.137.02-.2m4.16 2.453v3.341c0 .096.104.165.192.117l2.97-1.537c.068-.034.089-.117.055-.184a3.695 3.695 0 0 0-3.08-1.866c-.068 0-.136.054-.136.13m0 8.048a4.489 4.489 0 0 1-4.49-4.482 4.488 4.488 0 0 1 4.49-4.482 4.488 4.488 0 0 1 4.489 4.482 4.484 4.484 0 0 1-4.49 4.482m0-10.85a6.363 6.363 0 1 0 0 12.729 6.37 6.37 0 0 0 6.372-6.368 6.358 6.358 0 0 0-6.371-6.36"})))))),O.items.length>0?i.a.createElement("section",null,O.items.map(((e,t)=>{let{title:r,url:n,summary:a,breadcrumbs:s}=e;return i.a.createElement("article",{key:t,className:F.a.searchResultItem},i.a.createElement(f.a,{to:n,className:F.a.searchResultItemHeading,dangerouslySetInnerHTML:{__html:r}}),s.length>0&&i.a.createElement("span",{className:F.a.searchResultItemPath},s.map(((e,t)=>i.a.createElement(i.a.Fragment,{key:t},0!==t&&i.a.createElement("span",{className:F.a.searchResultItemPathSeparator},"\u203a"),i.a.createElement("span",{dangerouslySetInnerHTML:{__html:e}}))))),a&&i.a.createElement("p",{className:F.a.searchResultItemSummary,dangerouslySetInnerHTML:{__html:a}}))}))):[E&&!O.loading&&i.a.createElement("p",{key:"no-results"},i.a.createElement(y.a,{id:"theme.SearchPage.noResultsText",description:"The paragraph for empty search result"},"No results were found")),!!O.loading&&i.a.createElement("div",{key:"spinner",className:F.a.loadingSpinner})],O.hasMore&&i.a.createElement("div",{className:F.a.loader,ref:H},i.a.createElement("span",null,i.a.createElement(y.a,{id:"theme.SearchPage.fetchingNewResults",description:"The paragraph for fetching new search results"},"Fetching new results...")))))}},644:function(e,t,r){"use strict";function n(e){return"function"==typeof e||Array.isArray(e)||"[object Object]"===Object.prototype.toString.call(e)}function i(e,t){if(e===t)return e;for(var r in t)if(Object.prototype.hasOwnProperty.call(t,r)&&"__proto__"!==r&&"constructor"!==r){var a=t[r],s=e[r];void 0!==s&&void 0===a||(n(s)&&n(a)?e[r]=i(s,a):e[r]="object"==typeof(c=a)&&null!==c?i(Array.isArray(c)?[]:{},c):c)}var c;return e}e.exports=function(e){n(e)||(e={});for(var t=1,r=arguments.length;t0}},651:function(e,t,r){"use strict";e.exports=function(e,t){if(null===e)return{};var r,n,i={},a=Object.keys(e);for(n=0;n=0||(i[r]=e[r]);return i}},652:function(e,t,r){"use strict";e.exports=function(){return Array.prototype.slice.call(arguments).reduceRight((function(e,t){return Object.keys(Object(t)).forEach((function(r){void 0!==t[r]&&(void 0!==e[r]&&delete e[r],e[r]=t[r])})),e}),{})}},667:function(e,t){function r(){this._events=this._events||{},this._maxListeners=this._maxListeners||void 0}function n(e){return"function"==typeof e}function i(e){return"object"==typeof e&&null!==e}function a(e){return void 0===e}e.exports=r,r.prototype._events=void 0,r.prototype._maxListeners=void 0,r.defaultMaxListeners=10,r.prototype.setMaxListeners=function(e){if("number"!=typeof e||e<0||isNaN(e))throw TypeError("n must be a positive number");return this._maxListeners=e,this},r.prototype.emit=function(e){var t,r,s,c,u,o;if(this._events||(this._events={}),"error"===e&&(!this._events.error||i(this._events.error)&&!this._events.error.length)){if((t=arguments[1])instanceof Error)throw t;var h=new Error('Uncaught, unspecified "error" event. ('+t+")");throw h.context=t,h}if(a(r=this._events[e]))return!1;if(n(r))switch(arguments.length){case 1:r.call(this);break;case 2:r.call(this,arguments[1]);break;case 3:r.call(this,arguments[1],arguments[2]);break;default:c=Array.prototype.slice.call(arguments,1),r.apply(this,c)}else if(i(r))for(c=Array.prototype.slice.call(arguments,1),s=(o=r.slice()).length,u=0;u0&&this._events[e].length>s&&(this._events[e].warned=!0,console.error("(node) warning: possible EventEmitter memory leak detected. %d listeners added. Use emitter.setMaxListeners() to increase limit.",this._events[e].length),"function"==typeof console.trace&&console.trace()),this},r.prototype.on=r.prototype.addListener,r.prototype.once=function(e,t){if(!n(t))throw TypeError("listener must be a function");var r=!1;function i(){this.removeListener(e,i),r||(r=!0,t.apply(this,arguments))}return i.listener=t,this.on(e,i),this},r.prototype.removeListener=function(e,t){var r,a,s,c;if(!n(t))throw TypeError("listener must be a function");if(!this._events||!this._events[e])return this;if(s=(r=this._events[e]).length,a=-1,r===t||n(r.listener)&&r.listener===t)delete this._events[e],this._events.removeListener&&this.emit("removeListener",e,t);else if(i(r)){for(c=s;c-- >0;)if(r[c]===t||r[c].listener&&r[c].listener===t){a=c;break}if(a<0)return this;1===r.length?(r.length=0,delete this._events[e]):r.splice(a,1),this._events.removeListener&&this.emit("removeListener",e,t)}return this},r.prototype.removeAllListeners=function(e){var t,r;if(!this._events)return this;if(!this._events.removeListener)return 0===arguments.length?this._events={}:this._events[e]&&delete this._events[e],this;if(0===arguments.length){for(t in this._events)"removeListener"!==t&&this.removeAllListeners(t);return this.removeAllListeners("removeListener"),this._events={},this}if(n(r=this._events[e]))this.removeListener(e,r);else if(r)for(;r.length;)this.removeListener(e,r[r.length-1]);return delete this._events[e],this},r.prototype.listeners=function(e){return this._events&&this._events[e]?n(this._events[e])?[this._events[e]]:this._events[e].slice():[]},r.prototype.listenerCount=function(e){if(this._events){var t=this._events[e];if(n(t))return 1;if(t)return t.length}return 0},r.listenerCount=function(e,t){return e.listenerCount(t)}},668:function(e,t,r){"use strict";e.exports=function(e,t){e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}})}},669:function(e,t,r){"use strict";var n=r(652),i=r(645),a=r(747),s=r(644),c=r(650),u=r(651),o=r(748),h=r(749),f=r(750);function l(e,t){return Array.isArray(e)&&Array.isArray(t)?e.length===t.length&&e.every((function(e,r){return l(t[r],e)})):e===t}function m(e){var t=e?m._parseNumbers(e):{};void 0===t.userToken||h(t.userToken)||console.warn("[algoliasearch-helper] The `userToken` parameter is invalid. This can lead to wrong analytics.\n - Format: [a-zA-Z0-9_-]{1,64}"),this.facets=t.facets||[],this.disjunctiveFacets=t.disjunctiveFacets||[],this.hierarchicalFacets=t.hierarchicalFacets||[],this.facetsRefinements=t.facetsRefinements||{},this.facetsExcludes=t.facetsExcludes||{},this.disjunctiveFacetsRefinements=t.disjunctiveFacetsRefinements||{},this.numericRefinements=t.numericRefinements||{},this.tagRefinements=t.tagRefinements||[],this.hierarchicalFacetsRefinements=t.hierarchicalFacetsRefinements||{};var r=this;Object.keys(t).forEach((function(e){var n=-1!==m.PARAMETERS.indexOf(e),i=void 0!==t[e];!n&&i&&(r[e]=t[e])}))}m.PARAMETERS=Object.keys(new m),m._parseNumbers=function(e){if(e instanceof m)return e;var t={};if(["aroundPrecision","aroundRadius","getRankingInfo","minWordSizefor2Typos","minWordSizefor1Typo","page","maxValuesPerFacet","distinct","minimumAroundRadius","hitsPerPage","minProximity"].forEach((function(r){var n=e[r];if("string"==typeof n){var i=parseFloat(n);t[r]=isNaN(i)?n:i}})),Array.isArray(e.insideBoundingBox)&&(t.insideBoundingBox=e.insideBoundingBox.map((function(e){return Array.isArray(e)?e.map((function(e){return parseFloat(e)})):e}))),e.numericRefinements){var r={};Object.keys(e.numericRefinements).forEach((function(t){var n=e.numericRefinements[t]||{};r[t]={},Object.keys(n).forEach((function(e){var i=n[e].map((function(e){return Array.isArray(e)?e.map((function(e){return"string"==typeof e?parseFloat(e):e})):"string"==typeof e?parseFloat(e):e}));r[t][e]=i}))})),t.numericRefinements=r}return s(e,t)},m.make=function(e){var t=new m(e);return(e.hierarchicalFacets||[]).forEach((function(e){if(e.rootPath){var r=t.getHierarchicalRefinement(e.name);r.length>0&&0!==r[0].indexOf(e.rootPath)&&(t=t.clearRefinements(e.name)),0===(r=t.getHierarchicalRefinement(e.name)).length&&(t=t.toggleHierarchicalFacetRefinement(e.name,e.rootPath))}})),t},m.validate=function(e,t){var r=t||{};return e.tagFilters&&r.tagRefinements&&r.tagRefinements.length>0?new Error("[Tags] Cannot switch from the managed tag API to the advanced API. It is probably an error, if it is really what you want, you should first clear the tags with clearTags method."):e.tagRefinements.length>0&&r.tagFilters?new Error("[Tags] Cannot switch from the advanced tag API to the managed API. It is probably an error, if it is not, you should first clear the tags with clearTags method."):e.numericFilters&&r.numericRefinements&&c(r.numericRefinements)?new Error("[Numeric filters] Can't switch from the advanced to the managed API. It is probably an error, if this is really what you want, you have to first clear the numeric filters."):c(e.numericRefinements)&&r.numericFilters?new Error("[Numeric filters] Can't switch from the managed API to the advanced. It is probably an error, if this is really what you want, you have to first clear the numeric filters."):null},m.prototype={constructor:m,clearRefinements:function(e){var t={numericRefinements:this._clearNumericRefinements(e),facetsRefinements:f.clearRefinement(this.facetsRefinements,e,"conjunctiveFacet"),facetsExcludes:f.clearRefinement(this.facetsExcludes,e,"exclude"),disjunctiveFacetsRefinements:f.clearRefinement(this.disjunctiveFacetsRefinements,e,"disjunctiveFacet"),hierarchicalFacetsRefinements:f.clearRefinement(this.hierarchicalFacetsRefinements,e,"hierarchicalFacet")};return t.numericRefinements===this.numericRefinements&&t.facetsRefinements===this.facetsRefinements&&t.facetsExcludes===this.facetsExcludes&&t.disjunctiveFacetsRefinements===this.disjunctiveFacetsRefinements&&t.hierarchicalFacetsRefinements===this.hierarchicalFacetsRefinements?this:this.setQueryParameters(t)},clearTags:function(){return void 0===this.tagFilters&&0===this.tagRefinements.length?this:this.setQueryParameters({tagFilters:void 0,tagRefinements:[]})},setIndex:function(e){return e===this.index?this:this.setQueryParameters({index:e})},setQuery:function(e){return e===this.query?this:this.setQueryParameters({query:e})},setPage:function(e){return e===this.page?this:this.setQueryParameters({page:e})},setFacets:function(e){return this.setQueryParameters({facets:e})},setDisjunctiveFacets:function(e){return this.setQueryParameters({disjunctiveFacets:e})},setHitsPerPage:function(e){return this.hitsPerPage===e?this:this.setQueryParameters({hitsPerPage:e})},setTypoTolerance:function(e){return this.typoTolerance===e?this:this.setQueryParameters({typoTolerance:e})},addNumericRefinement:function(e,t,r){var n=o(r);if(this.isNumericRefined(e,t,n))return this;var i=s({},this.numericRefinements);return i[e]=s({},i[e]),i[e][t]?(i[e][t]=i[e][t].slice(),i[e][t].push(n)):i[e][t]=[n],this.setQueryParameters({numericRefinements:i})},getConjunctiveRefinements:function(e){return this.isConjunctiveFacet(e)&&this.facetsRefinements[e]||[]},getDisjunctiveRefinements:function(e){return this.isDisjunctiveFacet(e)&&this.disjunctiveFacetsRefinements[e]||[]},getHierarchicalRefinement:function(e){return this.hierarchicalFacetsRefinements[e]||[]},getExcludeRefinements:function(e){return this.isConjunctiveFacet(e)&&this.facetsExcludes[e]||[]},removeNumericRefinement:function(e,t,r){var n=r;return void 0!==n?this.isNumericRefined(e,t,n)?this.setQueryParameters({numericRefinements:this._clearNumericRefinements((function(r,i){return i===e&&r.op===t&&l(r.val,o(n))}))}):this:void 0!==t?this.isNumericRefined(e,t)?this.setQueryParameters({numericRefinements:this._clearNumericRefinements((function(r,n){return n===e&&r.op===t}))}):this:this.isNumericRefined(e)?this.setQueryParameters({numericRefinements:this._clearNumericRefinements((function(t,r){return r===e}))}):this},getNumericRefinements:function(e){return this.numericRefinements[e]||{}},getNumericRefinement:function(e,t){return this.numericRefinements[e]&&this.numericRefinements[e][t]},_clearNumericRefinements:function(e){if(void 0===e)return c(this.numericRefinements)?{}:this.numericRefinements;if("string"==typeof e)return u(this.numericRefinements,[e]);if("function"==typeof e){var t=!1,r=this.numericRefinements,n=Object.keys(r).reduce((function(n,i){var a=r[i],s={};return a=a||{},Object.keys(a).forEach((function(r){var n=a[r]||[],c=[];n.forEach((function(t){e({val:t,op:r},i,"numeric")||c.push(t)})),c.length!==n.length&&(t=!0),s[r]=c})),n[i]=s,n}),{});return t?n:this.numericRefinements}},addFacet:function(e){return this.isConjunctiveFacet(e)?this:this.setQueryParameters({facets:this.facets.concat([e])})},addDisjunctiveFacet:function(e){return this.isDisjunctiveFacet(e)?this:this.setQueryParameters({disjunctiveFacets:this.disjunctiveFacets.concat([e])})},addHierarchicalFacet:function(e){if(this.isHierarchicalFacet(e.name))throw new Error("Cannot declare two hierarchical facets with the same name: `"+e.name+"`");return this.setQueryParameters({hierarchicalFacets:this.hierarchicalFacets.concat([e])})},addFacetRefinement:function(e,t){if(!this.isConjunctiveFacet(e))throw new Error(e+" is not defined in the facets attribute of the helper configuration");return f.isRefined(this.facetsRefinements,e,t)?this:this.setQueryParameters({facetsRefinements:f.addRefinement(this.facetsRefinements,e,t)})},addExcludeRefinement:function(e,t){if(!this.isConjunctiveFacet(e))throw new Error(e+" is not defined in the facets attribute of the helper configuration");return f.isRefined(this.facetsExcludes,e,t)?this:this.setQueryParameters({facetsExcludes:f.addRefinement(this.facetsExcludes,e,t)})},addDisjunctiveFacetRefinement:function(e,t){if(!this.isDisjunctiveFacet(e))throw new Error(e+" is not defined in the disjunctiveFacets attribute of the helper configuration");return f.isRefined(this.disjunctiveFacetsRefinements,e,t)?this:this.setQueryParameters({disjunctiveFacetsRefinements:f.addRefinement(this.disjunctiveFacetsRefinements,e,t)})},addTagRefinement:function(e){if(this.isTagRefined(e))return this;var t={tagRefinements:this.tagRefinements.concat(e)};return this.setQueryParameters(t)},removeFacet:function(e){return this.isConjunctiveFacet(e)?this.clearRefinements(e).setQueryParameters({facets:this.facets.filter((function(t){return t!==e}))}):this},removeDisjunctiveFacet:function(e){return this.isDisjunctiveFacet(e)?this.clearRefinements(e).setQueryParameters({disjunctiveFacets:this.disjunctiveFacets.filter((function(t){return t!==e}))}):this},removeHierarchicalFacet:function(e){return this.isHierarchicalFacet(e)?this.clearRefinements(e).setQueryParameters({hierarchicalFacets:this.hierarchicalFacets.filter((function(t){return t.name!==e}))}):this},removeFacetRefinement:function(e,t){if(!this.isConjunctiveFacet(e))throw new Error(e+" is not defined in the facets attribute of the helper configuration");return f.isRefined(this.facetsRefinements,e,t)?this.setQueryParameters({facetsRefinements:f.removeRefinement(this.facetsRefinements,e,t)}):this},removeExcludeRefinement:function(e,t){if(!this.isConjunctiveFacet(e))throw new Error(e+" is not defined in the facets attribute of the helper configuration");return f.isRefined(this.facetsExcludes,e,t)?this.setQueryParameters({facetsExcludes:f.removeRefinement(this.facetsExcludes,e,t)}):this},removeDisjunctiveFacetRefinement:function(e,t){if(!this.isDisjunctiveFacet(e))throw new Error(e+" is not defined in the disjunctiveFacets attribute of the helper configuration");return f.isRefined(this.disjunctiveFacetsRefinements,e,t)?this.setQueryParameters({disjunctiveFacetsRefinements:f.removeRefinement(this.disjunctiveFacetsRefinements,e,t)}):this},removeTagRefinement:function(e){if(!this.isTagRefined(e))return this;var t={tagRefinements:this.tagRefinements.filter((function(t){return t!==e}))};return this.setQueryParameters(t)},toggleRefinement:function(e,t){return this.toggleFacetRefinement(e,t)},toggleFacetRefinement:function(e,t){if(this.isHierarchicalFacet(e))return this.toggleHierarchicalFacetRefinement(e,t);if(this.isConjunctiveFacet(e))return this.toggleConjunctiveFacetRefinement(e,t);if(this.isDisjunctiveFacet(e))return this.toggleDisjunctiveFacetRefinement(e,t);throw new Error("Cannot refine the undeclared facet "+e+"; it should be added to the helper options facets, disjunctiveFacets or hierarchicalFacets")},toggleConjunctiveFacetRefinement:function(e,t){if(!this.isConjunctiveFacet(e))throw new Error(e+" is not defined in the facets attribute of the helper configuration");return this.setQueryParameters({facetsRefinements:f.toggleRefinement(this.facetsRefinements,e,t)})},toggleExcludeFacetRefinement:function(e,t){if(!this.isConjunctiveFacet(e))throw new Error(e+" is not defined in the facets attribute of the helper configuration");return this.setQueryParameters({facetsExcludes:f.toggleRefinement(this.facetsExcludes,e,t)})},toggleDisjunctiveFacetRefinement:function(e,t){if(!this.isDisjunctiveFacet(e))throw new Error(e+" is not defined in the disjunctiveFacets attribute of the helper configuration");return this.setQueryParameters({disjunctiveFacetsRefinements:f.toggleRefinement(this.disjunctiveFacetsRefinements,e,t)})},toggleHierarchicalFacetRefinement:function(e,t){if(!this.isHierarchicalFacet(e))throw new Error(e+" is not defined in the hierarchicalFacets attribute of the helper configuration");var r=this._getHierarchicalFacetSeparator(this.getHierarchicalFacetByName(e)),i={};return void 0!==this.hierarchicalFacetsRefinements[e]&&this.hierarchicalFacetsRefinements[e].length>0&&(this.hierarchicalFacetsRefinements[e][0]===t||0===this.hierarchicalFacetsRefinements[e][0].indexOf(t+r))?-1===t.indexOf(r)?i[e]=[]:i[e]=[t.slice(0,t.lastIndexOf(r))]:i[e]=[t],this.setQueryParameters({hierarchicalFacetsRefinements:n({},i,this.hierarchicalFacetsRefinements)})},addHierarchicalFacetRefinement:function(e,t){if(this.isHierarchicalFacetRefined(e))throw new Error(e+" is already refined.");if(!this.isHierarchicalFacet(e))throw new Error(e+" is not defined in the hierarchicalFacets attribute of the helper configuration.");var r={};return r[e]=[t],this.setQueryParameters({hierarchicalFacetsRefinements:n({},r,this.hierarchicalFacetsRefinements)})},removeHierarchicalFacetRefinement:function(e){if(!this.isHierarchicalFacetRefined(e))return this;var t={};return t[e]=[],this.setQueryParameters({hierarchicalFacetsRefinements:n({},t,this.hierarchicalFacetsRefinements)})},toggleTagRefinement:function(e){return this.isTagRefined(e)?this.removeTagRefinement(e):this.addTagRefinement(e)},isDisjunctiveFacet:function(e){return this.disjunctiveFacets.indexOf(e)>-1},isHierarchicalFacet:function(e){return void 0!==this.getHierarchicalFacetByName(e)},isConjunctiveFacet:function(e){return this.facets.indexOf(e)>-1},isFacetRefined:function(e,t){return!!this.isConjunctiveFacet(e)&&f.isRefined(this.facetsRefinements,e,t)},isExcludeRefined:function(e,t){return!!this.isConjunctiveFacet(e)&&f.isRefined(this.facetsExcludes,e,t)},isDisjunctiveFacetRefined:function(e,t){return!!this.isDisjunctiveFacet(e)&&f.isRefined(this.disjunctiveFacetsRefinements,e,t)},isHierarchicalFacetRefined:function(e,t){if(!this.isHierarchicalFacet(e))return!1;var r=this.getHierarchicalRefinement(e);return t?-1!==r.indexOf(t):r.length>0},isNumericRefined:function(e,t,r){if(void 0===r&&void 0===t)return Boolean(this.numericRefinements[e]);var n=this.numericRefinements[e]&&void 0!==this.numericRefinements[e][t];if(void 0===r||!n)return n;var a,s,c=o(r),u=void 0!==(a=this.numericRefinements[e][t],s=c,i(a,(function(e){return l(e,s)})));return n&&u},isTagRefined:function(e){return-1!==this.tagRefinements.indexOf(e)},getRefinedDisjunctiveFacets:function(){var e=this,t=a(Object.keys(this.numericRefinements).filter((function(t){return Object.keys(e.numericRefinements[t]).length>0})),this.disjunctiveFacets);return Object.keys(this.disjunctiveFacetsRefinements).filter((function(t){return e.disjunctiveFacetsRefinements[t].length>0})).concat(t).concat(this.getRefinedHierarchicalFacets()).sort()},getRefinedHierarchicalFacets:function(){var e=this;return a(this.hierarchicalFacets.map((function(e){return e.name})),Object.keys(this.hierarchicalFacetsRefinements).filter((function(t){return e.hierarchicalFacetsRefinements[t].length>0}))).sort()},getUnrefinedDisjunctiveFacets:function(){var e=this.getRefinedDisjunctiveFacets();return this.disjunctiveFacets.filter((function(t){return-1===e.indexOf(t)}))},managedParameters:["index","facets","disjunctiveFacets","facetsRefinements","hierarchicalFacets","facetsExcludes","disjunctiveFacetsRefinements","numericRefinements","tagRefinements","hierarchicalFacetsRefinements"],getQueryParams:function(){var e=this.managedParameters,t={},r=this;return Object.keys(this).forEach((function(n){var i=r[n];-1===e.indexOf(n)&&void 0!==i&&(t[n]=i)})),t},setQueryParameter:function(e,t){if(this[e]===t)return this;var r={};return r[e]=t,this.setQueryParameters(r)},setQueryParameters:function(e){if(!e)return this;var t=m.validate(this,e);if(t)throw t;var r=this,n=m._parseNumbers(e),i=Object.keys(this).reduce((function(e,t){return e[t]=r[t],e}),{}),a=Object.keys(n).reduce((function(e,t){var r=void 0!==e[t],i=void 0!==n[t];return r&&!i?u(e,[t]):(i&&(e[t]=n[t]),e)}),i);return new this.constructor(a)},resetPage:function(){return void 0===this.page?this:this.setPage(0)},_getHierarchicalFacetSortBy:function(e){return e.sortBy||["isRefined:desc","name:asc"]},_getHierarchicalFacetSeparator:function(e){return e.separator||" > "},_getHierarchicalRootPath:function(e){return e.rootPath||null},_getHierarchicalShowParentLevel:function(e){return"boolean"!=typeof e.showParentLevel||e.showParentLevel},getHierarchicalFacetByName:function(e){return i(this.hierarchicalFacets,(function(t){return t.name===e}))},getHierarchicalFacetBreadcrumb:function(e){if(!this.isHierarchicalFacet(e))return[];var t=this.getHierarchicalRefinement(e)[0];if(!t)return[];var r=this._getHierarchicalFacetSeparator(this.getHierarchicalFacetByName(e));return t.split(r).map((function(e){return e.trim()}))},toString:function(){return JSON.stringify(this,null,2)}},e.exports=m},670:function(e,t,r){"use strict";var n=r(751),i=r(652),a=r(649),s=r(645),c=r(752),u=r(671),o=r(644),h=r(672),f=a.escapeFacetValue,l=a.unescapeFacetValue,m=r(753);function d(e){var t={};return e.forEach((function(e,r){t[e]=r})),t}function p(e,t,r){t&&t[r]&&(e.stats=t[r])}function v(e,t,r){var a=t[0];this._rawResults=t;var u=this;Object.keys(a).forEach((function(e){u[e]=a[e]}));var h=o({persistHierarchicalRootCount:!1},r);Object.keys(h).forEach((function(e){u[e]=h[e]})),this.processingTimeMS=t.reduce((function(e,t){return void 0===t.processingTimeMS?e:e+t.processingTimeMS}),0),this.disjunctiveFacets=[],this.hierarchicalFacets=e.hierarchicalFacets.map((function(){return[]})),this.facets=[];var f=e.getRefinedDisjunctiveFacets(),v=d(e.facets),g=d(e.disjunctiveFacets),y=1,R=a.facets||{};Object.keys(R).forEach((function(t){var r,n,i=R[t],o=(r=e.hierarchicalFacets,n=t,s(r,(function(e){return(e.attributes||[]).indexOf(n)>-1})));if(o){var h=o.attributes.indexOf(t),f=c(e.hierarchicalFacets,(function(e){return e.name===o.name}));u.hierarchicalFacets[f][h]={attribute:t,data:i,exhaustive:a.exhaustiveFacetsCount}}else{var l,m=-1!==e.disjunctiveFacets.indexOf(t),d=-1!==e.facets.indexOf(t);m&&(l=g[t],u.disjunctiveFacets[l]={name:t,data:i,exhaustive:a.exhaustiveFacetsCount},p(u.disjunctiveFacets[l],a.facets_stats,t)),d&&(l=v[t],u.facets[l]={name:t,data:i,exhaustive:a.exhaustiveFacetsCount},p(u.facets[l],a.facets_stats,t))}})),this.hierarchicalFacets=n(this.hierarchicalFacets),f.forEach((function(r){var n=t[y],s=n&&n.facets?n.facets:{},h=e.getHierarchicalFacetByName(r);Object.keys(s).forEach((function(t){var r,f=s[t];if(h){r=c(e.hierarchicalFacets,(function(e){return e.name===h.name}));var m=c(u.hierarchicalFacets[r],(function(e){return e.attribute===t}));if(-1===m)return;u.hierarchicalFacets[r][m].data=o({},u.hierarchicalFacets[r][m].data,f)}else{r=g[t];var d=a.facets&&a.facets[t]||{};u.disjunctiveFacets[r]={name:t,data:i({},f,d),exhaustive:n.exhaustiveFacetsCount},p(u.disjunctiveFacets[r],n.facets_stats,t),e.disjunctiveFacetsRefinements[t]&&e.disjunctiveFacetsRefinements[t].forEach((function(n){!u.disjunctiveFacets[r].data[n]&&e.disjunctiveFacetsRefinements[t].indexOf(l(n))>-1&&(u.disjunctiveFacets[r].data[n]=0)}))}})),y++})),e.getRefinedHierarchicalFacets().forEach((function(r){var n=e.getHierarchicalFacetByName(r),a=e._getHierarchicalFacetSeparator(n),s=e.getHierarchicalRefinement(r);0===s.length||s[0].split(a).length<2||t.slice(y).forEach((function(t){var r=t&&t.facets?t.facets:{};Object.keys(r).forEach((function(t){var o=r[t],h=c(e.hierarchicalFacets,(function(e){return e.name===n.name})),f=c(u.hierarchicalFacets[h],(function(e){return e.attribute===t}));if(-1!==f){var l={};if(s.length>0&&!u.persistHierarchicalRootCount){var m=s[0].split(a)[0];l[m]=u.hierarchicalFacets[h][f].data[m]}u.hierarchicalFacets[h][f].data=i(l,o,u.hierarchicalFacets[h][f].data)}})),y++}))})),Object.keys(e.facetsExcludes).forEach((function(t){var r=e.facetsExcludes[t],n=v[t];u.facets[n]={name:t,data:R[t],exhaustive:a.exhaustiveFacetsCount},r.forEach((function(e){u.facets[n]=u.facets[n]||{name:t},u.facets[n].data=u.facets[n].data||{},u.facets[n].data[e]=0}))})),this.hierarchicalFacets=this.hierarchicalFacets.map(m(e)),this.facets=n(this.facets),this.disjunctiveFacets=n(this.disjunctiveFacets),this._state=e}function g(e,t){function r(e){return e.name===t}if(e._state.isConjunctiveFacet(t)){var n=s(e.facets,r);return n?Object.keys(n.data).map((function(r){var i=f(r);return{name:r,escapedValue:i,count:n.data[r],isRefined:e._state.isFacetRefined(t,i),isExcluded:e._state.isExcludeRefined(t,r)}})):[]}if(e._state.isDisjunctiveFacet(t)){var i=s(e.disjunctiveFacets,r);return i?Object.keys(i.data).map((function(r){var n=f(r);return{name:r,escapedValue:n,count:i.data[r],isRefined:e._state.isDisjunctiveFacetRefined(t,n)}})):[]}if(e._state.isHierarchicalFacet(t)){var a=s(e.hierarchicalFacets,r);if(!a)return a;var c=e._state.getHierarchicalFacetByName(t),u=e._state._getHierarchicalFacetSeparator(c),o=l(e._state.getHierarchicalRefinement(t)[0]||"");0===o.indexOf(c.rootPath)&&(o=o.replace(c.rootPath+u,""));var h=o.split(u);return h.unshift(t),y(a,h,0),a}}function y(e,t,r){e.isRefined=e.name===(t[r]&&t[r].trim()),e.data&&e.data.forEach((function(e){y(e,t,r+1)}))}function R(e,t,r,n){if(n=n||0,Array.isArray(t))return e(t,r[n]);if(!t.data||0===t.data.length)return t;var a=t.data.map((function(t){return R(e,t,r,n+1)})),s=e(a,r[n]);return i({data:s},t)}function F(e,t){var r=s(e,(function(e){return e.name===t}));return r&&r.stats}function b(e,t,r,n,i){var a=s(i,(function(e){return e.name===r})),c=a&&a.data&&a.data[n]?a.data[n]:0,u=a&&a.exhaustive||!1;return{type:t,attributeName:r,name:n,count:c,exhaustive:u}}v.prototype.getFacetByName=function(e){function t(t){return t.name===e}return s(this.facets,t)||s(this.disjunctiveFacets,t)||s(this.hierarchicalFacets,t)},v.DEFAULT_SORT=["isRefined:desc","count:desc","name:asc"],v.prototype.getFacetValues=function(e,t){var r=g(this,e);if(r){var n,a=i({},t,{sortBy:v.DEFAULT_SORT,facetOrdering:!(t&&t.sortBy)}),s=this;if(Array.isArray(r))n=[e];else n=s._state.getHierarchicalFacetByName(r.name).attributes;return R((function(e,t){if(a.facetOrdering){var r=function(e,t){return e.renderingContent&&e.renderingContent.facetOrdering&&e.renderingContent.facetOrdering.values&&e.renderingContent.facetOrdering.values[t]}(s,t);if(r)return function(e,t){var r=[],n=[],i=(t.order||[]).reduce((function(e,t,r){return e[t]=r,e}),{});e.forEach((function(e){var t=e.path||e.name;void 0!==i[t]?r[i[t]]=e:n.push(e)})),r=r.filter((function(e){return e}));var a,s=t.sortRemainingBy;return"hidden"===s?r:(a="alpha"===s?[["path","name"],["asc","asc"]]:[["count"],["desc"]],r.concat(h(n,a[0],a[1])))}(e,r)}if(Array.isArray(a.sortBy)){var n=u(a.sortBy,v.DEFAULT_SORT);return h(e,n[0],n[1])}if("function"==typeof a.sortBy)return function(e,t){return t.sort(e)}(a.sortBy,e);throw new Error("options.sortBy is optional but if defined it must be either an array of string (predicates) or a sorting function")}),r,n)}},v.prototype.getFacetStats=function(e){return this._state.isConjunctiveFacet(e)?F(this.facets,e):this._state.isDisjunctiveFacet(e)?F(this.disjunctiveFacets,e):void 0},v.prototype.getRefinements=function(){var e=this._state,t=this,r=[];return Object.keys(e.facetsRefinements).forEach((function(n){e.facetsRefinements[n].forEach((function(i){r.push(b(e,"facet",n,i,t.facets))}))})),Object.keys(e.facetsExcludes).forEach((function(n){e.facetsExcludes[n].forEach((function(i){r.push(b(e,"exclude",n,i,t.facets))}))})),Object.keys(e.disjunctiveFacetsRefinements).forEach((function(n){e.disjunctiveFacetsRefinements[n].forEach((function(i){r.push(b(e,"disjunctive",n,i,t.disjunctiveFacets))}))})),Object.keys(e.hierarchicalFacetsRefinements).forEach((function(n){e.hierarchicalFacetsRefinements[n].forEach((function(i){r.push(function(e,t,r,n){var i=e.getHierarchicalFacetByName(t),a=e._getHierarchicalFacetSeparator(i),c=r.split(a),u=s(n,(function(e){return e.name===t})),o=c.reduce((function(e,t){var r=e&&s(e.data,(function(e){return e.name===t}));return void 0!==r?r:e}),u),h=o&&o.count||0,f=o&&o.exhaustive||!1,l=o&&o.path||"";return{type:"hierarchical",attributeName:t,name:l,count:h,exhaustive:f}}(e,n,i,t.hierarchicalFacets))}))})),Object.keys(e.numericRefinements).forEach((function(t){var n=e.numericRefinements[t];Object.keys(n).forEach((function(e){n[e].forEach((function(n){r.push({type:"numeric",attributeName:t,name:n,numericValue:n,operator:e})}))}))})),e.tagRefinements.forEach((function(e){r.push({type:"tag",attributeName:"_tags",name:e})})),r},e.exports=v},671:function(e,t,r){"use strict";var n=r(645);e.exports=function(e,t){var r=(t||[]).map((function(e){return e.split(":")}));return e.reduce((function(e,t){var i=t.split(":"),a=n(r,(function(e){return e[0]===i[0]}));return i.length>1||!a?(e[0].push(i[0]),e[1].push(i[1]),e):(e[0].push(a[0]),e[1].push(a[1]),e)}),[[],[]])}},672:function(e,t,r){"use strict";function n(e,t){if(e!==t){var r=void 0!==e,n=null===e,i=void 0!==t,a=null===t;if(!a&&e>t||n&&i||!r)return 1;if(!n&&e=r.length?a:"desc"===r[i]?-a:a}return e.index-t.index})),i.map((function(e){return e.value}))}},673:function(e,t,r){"use strict";e.exports="3.17.0"},742:function(e,t,r){"use strict";var n=r(743),i=r(669),a=r(670);function s(e,t,r,i){return new n(e,t,r,i)}s.version=r(673),s.AlgoliaSearchHelper=n,s.SearchParameters=i,s.SearchResults=a,e.exports=s},743:function(e,t,r){"use strict";var n=r(667),i=r(744),a=r(649).escapeFacetValue,s=r(668),c=r(644),u=r(650),o=r(651),h=r(745),f=r(746),l=r(669),m=r(670),d=r(673);function p(e,t,r,n){"function"==typeof e.addAlgoliaAgent&&e.addAlgoliaAgent("JS Helper ("+d+")"),this.setClient(e);var i=r||{};i.index=t,this.state=l.make(i),this.recommendState=new h({params:i.recommendState}),this.lastResults=null,this._queryId=0,this._lastQueryIdReceived=-1,this.derivedHelpers=[],this._currentNbQueries=0,this._searchResultsOptions=n}function v(e){if(e<0)throw new Error("Page requested below 0.");return this._change({state:this.state.setPage(e),isPageReset:!1}),this}function g(){return this.state.page}s(p,n),p.prototype.search=function(){return this._search({onlyWithDerivedHelpers:!1}),this},p.prototype.searchOnlyWithDerivedHelpers=function(){return this._search({onlyWithDerivedHelpers:!0}),this},p.prototype.getQuery=function(){var e=this.state;return f._getHitsSearchParams(e)},p.prototype.searchOnce=function(e,t){var r=e?this.state.setQueryParameters(e):this.state,n=f._getQueries(r.index,r),i=this;if(this._currentNbQueries++,this.emit("searchOnce",{state:r}),!t)return this.client.search(n).then((function(e){return i._currentNbQueries--,0===i._currentNbQueries&&i.emit("searchQueueEmpty"),{content:new m(r,e.results),state:r,_originalResponse:e}}),(function(e){throw i._currentNbQueries--,0===i._currentNbQueries&&i.emit("searchQueueEmpty"),e}));this.client.search(n).then((function(e){i._currentNbQueries--,0===i._currentNbQueries&&i.emit("searchQueueEmpty"),t(null,new m(r,e.results),r)})).catch((function(e){i._currentNbQueries--,0===i._currentNbQueries&&i.emit("searchQueueEmpty"),t(e,null,r)}))},p.prototype.findAnswers=function(e){console.warn("[algoliasearch-helper] answers is no longer supported");var t=this.state,r=this.derivedHelpers[0];if(!r)return Promise.resolve([]);var n=r.getModifiedState(t),i=c({attributesForPrediction:e.attributesForPrediction,nbHits:e.nbHits},{params:o(f._getHitsSearchParams(n),["attributesToSnippet","hitsPerPage","restrictSearchableAttributes","snippetEllipsisText"])}),a="search for answers was called, but this client does not have a function client.initIndex(index).findAnswers";if("function"!=typeof this.client.initIndex)throw new Error(a);var s=this.client.initIndex(n.index);if("function"!=typeof s.findAnswers)throw new Error(a);return s.findAnswers(n.query,e.queryLanguages,i)},p.prototype.searchForFacetValues=function(e,t,r,n){var i="function"==typeof this.client.searchForFacetValues,s="function"==typeof this.client.initIndex;if(!i&&!s&&"function"!=typeof this.client.search)throw new Error("search for facet values (searchable) was called, but this client does not have a function client.searchForFacetValues or client.initIndex(index).searchForFacetValues");var c=this.state.setQueryParameters(n||{}),u=c.isDisjunctiveFacet(e),o=f.getSearchForFacetQuery(e,t,r,c);this._currentNbQueries++;var h,l=this;return i?h=this.client.searchForFacetValues([{indexName:c.index,params:o}]):s?h=this.client.initIndex(c.index).searchForFacetValues(o):(delete o.facetName,h=this.client.search([{type:"facet",facet:e,indexName:c.index,params:o}]).then((function(e){return e.results[0]}))),this.emit("searchForFacetValues",{state:c,facet:e,query:t}),h.then((function(t){return l._currentNbQueries--,0===l._currentNbQueries&&l.emit("searchQueueEmpty"),(t=Array.isArray(t)?t[0]:t).facetHits.forEach((function(t){t.escapedValue=a(t.value),t.isRefined=u?c.isDisjunctiveFacetRefined(e,t.escapedValue):c.isFacetRefined(e,t.escapedValue)})),t}),(function(e){throw l._currentNbQueries--,0===l._currentNbQueries&&l.emit("searchQueueEmpty"),e}))},p.prototype.setQuery=function(e){return this._change({state:this.state.resetPage().setQuery(e),isPageReset:!0}),this},p.prototype.clearRefinements=function(e){return this._change({state:this.state.resetPage().clearRefinements(e),isPageReset:!0}),this},p.prototype.clearTags=function(){return this._change({state:this.state.resetPage().clearTags(),isPageReset:!0}),this},p.prototype.addDisjunctiveFacetRefinement=function(e,t){return this._change({state:this.state.resetPage().addDisjunctiveFacetRefinement(e,t),isPageReset:!0}),this},p.prototype.addDisjunctiveRefine=function(){return this.addDisjunctiveFacetRefinement.apply(this,arguments)},p.prototype.addHierarchicalFacetRefinement=function(e,t){return this._change({state:this.state.resetPage().addHierarchicalFacetRefinement(e,t),isPageReset:!0}),this},p.prototype.addNumericRefinement=function(e,t,r){return this._change({state:this.state.resetPage().addNumericRefinement(e,t,r),isPageReset:!0}),this},p.prototype.addFacetRefinement=function(e,t){return this._change({state:this.state.resetPage().addFacetRefinement(e,t),isPageReset:!0}),this},p.prototype.addRefine=function(){return this.addFacetRefinement.apply(this,arguments)},p.prototype.addFacetExclusion=function(e,t){return this._change({state:this.state.resetPage().addExcludeRefinement(e,t),isPageReset:!0}),this},p.prototype.addExclude=function(){return this.addFacetExclusion.apply(this,arguments)},p.prototype.addTag=function(e){return this._change({state:this.state.resetPage().addTagRefinement(e),isPageReset:!0}),this},p.prototype.removeNumericRefinement=function(e,t,r){return this._change({state:this.state.resetPage().removeNumericRefinement(e,t,r),isPageReset:!0}),this},p.prototype.removeDisjunctiveFacetRefinement=function(e,t){return this._change({state:this.state.resetPage().removeDisjunctiveFacetRefinement(e,t),isPageReset:!0}),this},p.prototype.removeDisjunctiveRefine=function(){return this.removeDisjunctiveFacetRefinement.apply(this,arguments)},p.prototype.removeHierarchicalFacetRefinement=function(e){return this._change({state:this.state.resetPage().removeHierarchicalFacetRefinement(e),isPageReset:!0}),this},p.prototype.removeFacetRefinement=function(e,t){return this._change({state:this.state.resetPage().removeFacetRefinement(e,t),isPageReset:!0}),this},p.prototype.removeRefine=function(){return this.removeFacetRefinement.apply(this,arguments)},p.prototype.removeFacetExclusion=function(e,t){return this._change({state:this.state.resetPage().removeExcludeRefinement(e,t),isPageReset:!0}),this},p.prototype.removeExclude=function(){return this.removeFacetExclusion.apply(this,arguments)},p.prototype.removeTag=function(e){return this._change({state:this.state.resetPage().removeTagRefinement(e),isPageReset:!0}),this},p.prototype.toggleFacetExclusion=function(e,t){return this._change({state:this.state.resetPage().toggleExcludeFacetRefinement(e,t),isPageReset:!0}),this},p.prototype.toggleExclude=function(){return this.toggleFacetExclusion.apply(this,arguments)},p.prototype.toggleRefinement=function(e,t){return this.toggleFacetRefinement(e,t)},p.prototype.toggleFacetRefinement=function(e,t){return this._change({state:this.state.resetPage().toggleFacetRefinement(e,t),isPageReset:!0}),this},p.prototype.toggleRefine=function(){return this.toggleFacetRefinement.apply(this,arguments)},p.prototype.toggleTag=function(e){return this._change({state:this.state.resetPage().toggleTagRefinement(e),isPageReset:!0}),this},p.prototype.nextPage=function(){var e=this.state.page||0;return this.setPage(e+1)},p.prototype.previousPage=function(){var e=this.state.page||0;return this.setPage(e-1)},p.prototype.setCurrentPage=v,p.prototype.setPage=v,p.prototype.setIndex=function(e){return this._change({state:this.state.resetPage().setIndex(e),isPageReset:!0}),this},p.prototype.setQueryParameter=function(e,t){return this._change({state:this.state.resetPage().setQueryParameter(e,t),isPageReset:!0}),this},p.prototype.setState=function(e){return this._change({state:l.make(e),isPageReset:!1}),this},p.prototype.overrideStateWithoutTriggeringChangeEvent=function(e){return this.state=new l(e),this},p.prototype.hasRefinements=function(e){return!!u(this.state.getNumericRefinements(e))||(this.state.isConjunctiveFacet(e)?this.state.isFacetRefined(e):this.state.isDisjunctiveFacet(e)?this.state.isDisjunctiveFacetRefined(e):!!this.state.isHierarchicalFacet(e)&&this.state.isHierarchicalFacetRefined(e))},p.prototype.isExcluded=function(e,t){return this.state.isExcludeRefined(e,t)},p.prototype.isDisjunctiveRefined=function(e,t){return this.state.isDisjunctiveFacetRefined(e,t)},p.prototype.hasTag=function(e){return this.state.isTagRefined(e)},p.prototype.isTagRefined=function(){return this.hasTagRefinements.apply(this,arguments)},p.prototype.getIndex=function(){return this.state.index},p.prototype.getCurrentPage=g,p.prototype.getPage=g,p.prototype.getTags=function(){return this.state.tagRefinements},p.prototype.getRefinements=function(e){var t=[];if(this.state.isConjunctiveFacet(e))this.state.getConjunctiveRefinements(e).forEach((function(e){t.push({value:e,type:"conjunctive"})})),this.state.getExcludeRefinements(e).forEach((function(e){t.push({value:e,type:"exclude"})}));else if(this.state.isDisjunctiveFacet(e)){this.state.getDisjunctiveRefinements(e).forEach((function(e){t.push({value:e,type:"disjunctive"})}))}var r=this.state.getNumericRefinements(e);return Object.keys(r).forEach((function(e){var n=r[e];t.push({value:n,operator:e,type:"numeric"})})),t},p.prototype.getNumericRefinement=function(e,t){return this.state.getNumericRefinement(e,t)},p.prototype.getHierarchicalFacetBreadcrumb=function(e){return this.state.getHierarchicalFacetBreadcrumb(e)},p.prototype._search=function(e){var t=this.state,r=[],n=[];e.onlyWithDerivedHelpers||(n=f._getQueries(t.index,t),r.push({state:t,queriesCount:n.length,helper:this}),this.emit("search",{state:t,results:this.lastResults}));var i=this.derivedHelpers.map((function(e){var n=e.getModifiedState(t),i=n.index?f._getQueries(n.index,n):[];return r.push({state:n,queriesCount:i.length,helper:e}),e.emit("search",{state:n,results:e.lastResults}),i})),a=Array.prototype.concat.apply(n,i),s=this._queryId++;if(this._currentNbQueries++,!a.length)return Promise.resolve({results:[]}).then(this._dispatchAlgoliaResponse.bind(this,r,s));try{this.client.search(a).then(this._dispatchAlgoliaResponse.bind(this,r,s)).catch(this._dispatchAlgoliaError.bind(this,s))}catch(c){this.emit("error",{error:c})}},p.prototype._dispatchAlgoliaResponse=function(e,t,r){var n=this;if(!(t0},p.prototype._change=function(e){var t=e.state,r=e.isPageReset;t!==this.state&&(this.state=t,this.emit("change",{state:this.state,results:this.lastResults,isPageReset:r}))},p.prototype._recommendChange=function(e){var t=e.state;t!==this.recommendState&&(this.recommendState=t)},p.prototype.clearCache=function(){return this.client.clearCache&&this.client.clearCache(),this},p.prototype.setClient=function(e){return this.client===e||("function"==typeof e.addAlgoliaAgent&&e.addAlgoliaAgent("JS Helper ("+d+")"),this.client=e),this},p.prototype.getClient=function(){return this.client},p.prototype.derive=function(e){var t=new i(this,e);return this.derivedHelpers.push(t),t},p.prototype.detachDerivedHelper=function(e){var t=this.derivedHelpers.indexOf(e);if(-1===t)throw new Error("Derived helper already detached");this.derivedHelpers.splice(t,1)},p.prototype.hasPendingRequests=function(){return this._currentNbQueries>0},e.exports=p},744:function(e,t,r){"use strict";var n=r(667);function i(e,t){this.main=e,this.fn=t,this.lastResults=null}r(668)(i,n),i.prototype.detach=function(){this.removeAllListeners(),this.main.detachDerivedHelper(this)},i.prototype.getModifiedState=function(e){return this.fn(e)},e.exports=i},745:function(e,t,r){"use strict";function n(e){e=e||{},this.params=e.params||[]}n.prototype={constructor:n,addParams:function(e){return new n({params:this.params.concat(e)})},removeParams:function(e){return new n({params:this.params.filter((function(t){return t.$$id!==e}))})}},e.exports=n},746:function(e,t,r){"use strict";var n=r(644);function i(e){return Object.keys(e).sort().reduce((function(t,r){return t[r]=e[r],t}),{})}var a={_getQueries:function(e,t){var r=[];return r.push({indexName:e,params:a._getHitsSearchParams(t)}),t.getRefinedDisjunctiveFacets().forEach((function(n){r.push({indexName:e,params:a._getDisjunctiveFacetSearchParams(t,n)})})),t.getRefinedHierarchicalFacets().forEach((function(n){var i=t.getHierarchicalFacetByName(n),s=t.getHierarchicalRefinement(n),c=t._getHierarchicalFacetSeparator(i);if(s.length>0&&s[0].split(c).length>1){var u=s[0].split(c).slice(0,-1).reduce((function(e,t,r){return e.concat({attribute:i.attributes[r],value:0===r?t:[e[e.length-1].value,t].join(c)})}),[]);u.forEach((function(n,s){var c=a._getDisjunctiveFacetSearchParams(t,n.attribute,0===s);function o(e){return i.attributes.some((function(t){return t===e.split(":")[0]}))}var h=(c.facetFilters||[]).reduce((function(e,t){if(Array.isArray(t)){var r=t.filter((function(e){return!o(e)}));r.length>0&&e.push(r)}return"string"!=typeof t||o(t)||e.push(t),e}),[]),f=u[s-1];c.facetFilters=s>0?h.concat(f.attribute+":"+f.value):h.length>0?h:void 0,r.push({indexName:e,params:c})}))}})),r},_getHitsSearchParams:function(e){var t=e.facets.concat(e.disjunctiveFacets).concat(a._getHitsHierarchicalFacetsAttributes(e)).sort(),r=a._getFacetFilters(e),s=a._getNumericFilters(e),c=a._getTagFilters(e),u={facets:t.indexOf("*")>-1?["*"]:t,tagFilters:c};return r.length>0&&(u.facetFilters=r),s.length>0&&(u.numericFilters=s),i(n({},e.getQueryParams(),u))},_getDisjunctiveFacetSearchParams:function(e,t,r){var s=a._getFacetFilters(e,t,r),c=a._getNumericFilters(e,t),u=a._getTagFilters(e),o={hitsPerPage:0,page:0,analytics:!1,clickAnalytics:!1};u.length>0&&(o.tagFilters=u);var h=e.getHierarchicalFacetByName(t);return o.facets=h?a._getDisjunctiveHierarchicalFacetAttribute(e,h,r):t,c.length>0&&(o.numericFilters=c),s.length>0&&(o.facetFilters=s),i(n({},e.getQueryParams(),o))},_getNumericFilters:function(e,t){if(e.numericFilters)return e.numericFilters;var r=[];return Object.keys(e.numericRefinements).forEach((function(n){var i=e.numericRefinements[n]||{};Object.keys(i).forEach((function(e){var a=i[e]||[];t!==n&&a.forEach((function(t){if(Array.isArray(t)){var i=t.map((function(t){return n+e+t}));r.push(i)}else r.push(n+e+t)}))}))})),r},_getTagFilters:function(e){return e.tagFilters?e.tagFilters:e.tagRefinements.join(",")},_getFacetFilters:function(e,t,r){var n=[],i=e.facetsRefinements||{};Object.keys(i).sort().forEach((function(e){(i[e]||[]).slice().sort().forEach((function(t){n.push(e+":"+t)}))}));var a=e.facetsExcludes||{};Object.keys(a).sort().forEach((function(e){(a[e]||[]).sort().forEach((function(t){n.push(e+":-"+t)}))}));var s=e.disjunctiveFacetsRefinements||{};Object.keys(s).sort().forEach((function(e){var r=s[e]||[];if(e!==t&&r&&0!==r.length){var i=[];r.slice().sort().forEach((function(t){i.push(e+":"+t)})),n.push(i)}}));var c=e.hierarchicalFacetsRefinements||{};return Object.keys(c).sort().forEach((function(i){var a=(c[i]||[])[0];if(void 0!==a){var s,u,o=e.getHierarchicalFacetByName(i),h=e._getHierarchicalFacetSeparator(o),f=e._getHierarchicalRootPath(o);if(t===i){if(-1===a.indexOf(h)||!f&&!0===r||f&&f.split(h).length===a.split(h).length)return;f?(u=f.split(h).length-1,a=f):(u=a.split(h).length-2,a=a.slice(0,a.lastIndexOf(h))),s=o.attributes[u]}else u=a.split(h).length-1,s=o.attributes[u];s&&n.push([s+":"+a])}})),n},_getHitsHierarchicalFacetsAttributes:function(e){return e.hierarchicalFacets.reduce((function(t,r){var n=e.getHierarchicalRefinement(r.name)[0];if(!n)return t.push(r.attributes[0]),t;var i=e._getHierarchicalFacetSeparator(r),a=n.split(i).length,s=r.attributes.slice(0,a+1);return t.concat(s)}),[])},_getDisjunctiveHierarchicalFacetAttribute:function(e,t,r){var n=e._getHierarchicalFacetSeparator(t);if(!0===r){var i=e._getHierarchicalRootPath(t),a=0;return i&&(a=i.split(n).length),[t.attributes[a]]}var s=(e.getHierarchicalRefinement(t.name)[0]||"").split(n).length-1;return t.attributes.slice(0,s+1)},getSearchForFacetQuery:function(e,t,r,s){var c=s.isDisjunctiveFacet(e)?s.clearRefinements(e):s,u={facetQuery:t,facetName:e};return"number"==typeof r&&(u.maxFacetHits=r),i(n({},a._getHitsSearchParams(c),u))}};e.exports=a},747:function(e,t,r){"use strict";e.exports=function(e,t){return e.filter((function(r,n){return t.indexOf(r)>-1&&e.indexOf(r)===n}))}},748:function(e,t,r){"use strict";e.exports=function e(t){if("number"==typeof t)return t;if("string"==typeof t)return parseFloat(t);if(Array.isArray(t))return t.map(e);throw new Error("The value should be a number, a parsable string or an array of those.")}},749:function(e,t,r){"use strict";e.exports=function(e){return null!==e&&/^[a-zA-Z0-9_-]{1,64}$/.test(e)}},750:function(e,t,r){"use strict";var n=r(652),i=r(650),a=r(651),s={addRefinement:function(e,t,r){if(s.isRefined(e,t,r))return e;var i=""+r,a=e[t]?e[t].concat(i):[i],c={};return c[t]=a,n({},c,e)},removeRefinement:function(e,t,r){if(void 0===r)return s.clearRefinement(e,(function(e,r){return t===r}));var n=""+r;return s.clearRefinement(e,(function(e,r){return t===r&&n===e}))},toggleRefinement:function(e,t,r){if(void 0===r)throw new Error("toggleRefinement should be used with a value");return s.isRefined(e,t,r)?s.removeRefinement(e,t,r):s.addRefinement(e,t,r)},clearRefinement:function(e,t,r){if(void 0===t)return i(e)?{}:e;if("string"==typeof t)return a(e,[t]);if("function"==typeof t){var n=!1,s=Object.keys(e).reduce((function(i,a){var s=e[a]||[],c=s.filter((function(e){return!t(e,a,r)}));return c.length!==s.length&&(n=!0),i[a]=c,i}),{});return n?s:e}},isRefined:function(e,t,r){var n=Boolean(e[t])&&e[t].length>0;if(void 0===r||!n)return n;var i=""+r;return-1!==e[t].indexOf(i)}};e.exports=s},751:function(e,t,r){"use strict";e.exports=function(e){return Array.isArray(e)?e.filter(Boolean):[]}},752:function(e,t,r){"use strict";e.exports=function(e,t){if(!Array.isArray(e))return-1;for(var r=0;r0){var m=0;for(l=o;m=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)){var r=[],n=!0,i=!1,a=void 0;try{for(var s,c=e[Symbol.iterator]();!(n=(s=c.next()).done)&&(r.push(s.value),!t||r.length!==t);n=!0);}catch(e){i=!0,a=e}finally{try{n||null==c.return||c.return()}finally{if(i)throw a}}return r}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function a(e){return function(e){if(Array.isArray(e)){for(var t=0,r=new Array(e.length);t2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return Promise.resolve().then((function(){c();var t=JSON.stringify(e);return a()[t]})).then((function(e){return Promise.all([e?e.value:t(),void 0!==e])})).then((function(e){var t=i(e,2),n=t[0],a=t[1];return Promise.all([n,a||r.miss(n)])})).then((function(e){return i(e,1)[0]}))},set:function(e,t){return Promise.resolve().then((function(){var i=a();return i[JSON.stringify(e)]={timestamp:(new Date).getTime(),value:t},n().setItem(r,JSON.stringify(i)),t}))},delete:function(e){return Promise.resolve().then((function(){var t=a();delete t[JSON.stringify(e)],n().setItem(r,JSON.stringify(t))}))},clear:function(){return Promise.resolve().then((function(){n().removeItem(r)}))}}}function c(e){var t=a(e.caches),r=t.shift();return void 0===r?{get:function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return t().then((function(e){return Promise.all([e,r.miss(e)])})).then((function(e){return i(e,1)[0]}))},set:function(e,t){return Promise.resolve(t)},delete:function(e){return Promise.resolve()},clear:function(){return Promise.resolve()}}:{get:function(e,n){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return r.get(e,n,i).catch((function(){return c({caches:t}).get(e,n,i)}))},set:function(e,n){return r.set(e,n).catch((function(){return c({caches:t}).set(e,n)}))},delete:function(e){return r.delete(e).catch((function(){return c({caches:t}).delete(e)}))},clear:function(){return r.clear().catch((function(){return c({caches:t}).clear()}))}}}function u(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{serializable:!0},t={};return{get:function(r,n){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}},a=JSON.stringify(r);if(a in t)return Promise.resolve(e.serializable?JSON.parse(t[a]):t[a]);var s=n(),c=i&&i.miss||function(){return Promise.resolve()};return s.then((function(e){return c(e)})).then((function(){return s}))},set:function(r,n){return t[JSON.stringify(r)]=e.serializable?JSON.stringify(n):n,Promise.resolve(n)},delete:function(e){return delete t[JSON.stringify(e)],Promise.resolve()},clear:function(){return t={},Promise.resolve()}}}function o(e){for(var t=e.length-1;t>0;t--){var r=Math.floor(Math.random()*(t+1)),n=e[t];e[t]=e[r],e[r]=n}return e}function h(e,t){return t?(Object.keys(t).forEach((function(r){e[r]=t[r](e)})),e):e}function f(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n0?n:void 0,timeout:r.timeout||t,headers:r.headers||{},queryParameters:r.queryParameters||{},cacheable:r.cacheable}}var d={Read:1,Write:2,Any:3},p=1,v=2,g=3;function y(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:p;return r(r({},e),{},{status:t,lastUpdate:Date.now()})}function R(e){return"string"==typeof e?{protocol:"https",url:e,accept:d.Any}:{protocol:e.protocol||"https",url:e.url,accept:e.accept||d.Any}}var F="GET",b="POST";function j(e,t){return Promise.all(t.map((function(t){return e.get(t,(function(){return Promise.resolve(y(t))}))}))).then((function(e){var r=e.filter((function(e){return function(e){return e.status===p||Date.now()-e.lastUpdate>12e4}(e)})),n=e.filter((function(e){return function(e){return e.status===g&&Date.now()-e.lastUpdate<=12e4}(e)})),i=[].concat(a(r),a(n));return{getTimeout:function(e,t){return(0===n.length&&0===e?1:n.length+3+e)*t},statelessHosts:i.length>0?i.map((function(e){return R(e)})):t}}))}function P(e,t,n,i){var s=[],c=function(e,t){if(e.method!==F&&(void 0!==e.data||void 0!==t.data)){var n=Array.isArray(e.data)?e.data:r(r({},e.data),t.data);return JSON.stringify(n)}}(n,i),u=function(e,t){var n=r(r({},e.headers),t.headers),i={};return Object.keys(n).forEach((function(e){var t=n[e];i[e.toLowerCase()]=t})),i}(e,i),o=n.method,h=n.method!==F?{}:r(r({},n.data),i.data),f=r(r(r({"x-algolia-agent":e.userAgent.value},e.queryParameters),h),i.queryParameters),l=0,m=function t(r,a){var h=r.pop();if(void 0===h)throw{name:"RetryError",message:"Unreachable hosts - your application id may be incorrect. If the error persists, contact support@algolia.com.",transporterStackTrace:O(s)};var m={data:c,headers:u,method:o,url:_(h,n.path,f),connectTimeout:a(l,e.timeouts.connect),responseTimeout:a(l,i.timeout)},d=function(e){var t={request:m,response:e,host:h,triesLeft:r.length};return s.push(t),t},p={onSuccess:function(e){return function(e){try{return JSON.parse(e.content)}catch(t){throw function(e,t){return{name:"DeserializationError",message:e,response:t}}(t.message,e)}}(e)},onRetry:function(n){var i=d(n);return n.isTimedOut&&l++,Promise.all([e.logger.info("Retryable failure",w(i)),e.hostsCache.set(h,y(h,n.isTimedOut?g:v))]).then((function(){return t(r,a)}))},onFail:function(e){throw d(e),function(e,t){var r=e.content,n=e.status,i=r;try{i=JSON.parse(r).message}catch(e){}return function(e,t,r){return{name:"ApiError",message:e,status:t,transporterStackTrace:r}}(i,n,t)}(e,O(s))}};return e.requester.send(m).then((function(e){return function(e,t){return function(e){var t=e.status;return e.isTimedOut||function(e){var t=e.isTimedOut,r=e.status;return!t&&!~~r}(e)||2!=~~(t/100)&&4!=~~(t/100)}(e)?t.onRetry(e):2==~~(e.status/100)?t.onSuccess(e):t.onFail(e)}(e,p)}))};return j(e.hostsCache,t).then((function(e){return m(a(e.statelessHosts).reverse(),e.getTimeout)}))}function E(e){var t={value:"Algolia for JavaScript (".concat(e,")"),add:function(e){var r="; ".concat(e.segment).concat(void 0!==e.version?" (".concat(e.version,")"):"");return-1===t.value.indexOf(r)&&(t.value="".concat(t.value).concat(r)),t}};return t}function _(e,t,r){var n=x(r),i="".concat(e.protocol,"://").concat(e.url,"/").concat("/"===t.charAt(0)?t.substr(1):t);return n.length&&(i+="?".concat(n)),i}function x(e){return Object.keys(e).map((function(t){return f("%s=%s",t,(r=e[t],"[object Object]"===Object.prototype.toString.call(r)||"[object Array]"===Object.prototype.toString.call(r)?JSON.stringify(e[t]):e[t]));var r})).join("&")}function O(e){return e.map((function(e){return w(e)}))}function w(e){var t=e.request.headers["x-algolia-api-key"]?{"x-algolia-api-key":"*****"}:{};return r(r({},e),{},{request:r(r({},e.request),{},{headers:r(r({},e.request.headers),t)})})}var N=function(e){var t=e.appId,n=function(e,t,r){var n={"x-algolia-api-key":r,"x-algolia-application-id":t};return{headers:function(){return e===l.WithinHeaders?n:{}},queryParameters:function(){return e===l.WithinQueryParameters?n:{}}}}(void 0!==e.authMode?e.authMode:l.WithinHeaders,t,e.apiKey),a=function(e){var t=e.hostsCache,r=e.logger,n=e.requester,a=e.requestsCache,s=e.responsesCache,c=e.timeouts,u=e.userAgent,o=e.hosts,h=e.queryParameters,f={hostsCache:t,logger:r,requester:n,requestsCache:a,responsesCache:s,timeouts:c,userAgent:u,headers:e.headers,queryParameters:h,hosts:o.map((function(e){return R(e)})),read:function(e,t){var r=m(t,f.timeouts.read),n=function(){return P(f,f.hosts.filter((function(e){return!!(e.accept&d.Read)})),e,r)};if(!0!==(void 0!==r.cacheable?r.cacheable:e.cacheable))return n();var a={request:e,mappedRequestOptions:r,transporter:{queryParameters:f.queryParameters,headers:f.headers}};return f.responsesCache.get(a,(function(){return f.requestsCache.get(a,(function(){return f.requestsCache.set(a,n()).then((function(e){return Promise.all([f.requestsCache.delete(a),e])}),(function(e){return Promise.all([f.requestsCache.delete(a),Promise.reject(e)])})).then((function(e){var t=i(e,2);return t[0],t[1]}))}))}),{miss:function(e){return f.responsesCache.set(a,e)}})},write:function(e,t){return P(f,f.hosts.filter((function(e){return!!(e.accept&d.Write)})),e,m(t,f.timeouts.write))}};return f}(r(r({hosts:[{url:"".concat(t,"-dsn.algolia.net"),accept:d.Read},{url:"".concat(t,".algolia.net"),accept:d.Write}].concat(o([{url:"".concat(t,"-1.algolianet.com")},{url:"".concat(t,"-2.algolianet.com")},{url:"".concat(t,"-3.algolianet.com")}]))},e),{},{headers:r(r(r({},n.headers()),{"content-type":"application/x-www-form-urlencoded"}),e.headers),queryParameters:r(r({},n.queryParameters()),e.queryParameters)}));return h({transporter:a,appId:t,addAlgoliaAgent:function(e,t){a.userAgent.add({segment:e,version:t})},clearCache:function(){return Promise.all([a.requestsCache.clear(),a.responsesCache.clear()]).then((function(){}))}},e.methods)},A=function(e){return function(t,r){return t.method===F?e.transporter.read(t,r):e.transporter.write(t,r)}},S=function(e){return function(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return h({transporter:e.transporter,appId:e.appId,indexName:t},r.methods)}},H=function(e){return function(t,n){var i=t.map((function(e){return r(r({},e),{},{params:x(e.params||{})})}));return e.transporter.read({method:b,path:"1/indexes/*/queries",data:{requests:i},cacheable:!0},n)}},T=function(e){return function(t,i){return Promise.all(t.map((function(t){var a=t.params,s=a.facetName,c=a.facetQuery,u=n(a,["facetName","facetQuery"]);return S(e)(t.indexName,{methods:{searchForFacetValues:D}}).searchForFacetValues(s,c,r(r({},i),u))})))}},Q=function(e){return function(t,r,n){return e.transporter.read({method:b,path:f("1/answers/%s/prediction",e.indexName),data:{query:t,queryLanguages:r},cacheable:!0},n)}},C=function(e){return function(t,r){return e.transporter.read({method:b,path:f("1/indexes/%s/query",e.indexName),data:{query:t},cacheable:!0},r)}},D=function(e){return function(t,r,n){return e.transporter.read({method:b,path:f("1/indexes/%s/facets/%s/query",e.indexName,t),data:{facetQuery:r},cacheable:!0},n)}},k=1,q=2,I=3,V=function(e){return function(t,n){var i=t.map((function(e){return r(r({},e),{},{threshold:e.threshold||0})}));return e.transporter.read({method:b,path:"1/indexes/*/recommendations",data:{requests:i},cacheable:!0},n)}};function L(e,t,n){var i,a={appId:e,apiKey:t,timeouts:{connect:1,read:2,write:30},requester:{send:function(e){return new Promise((function(t){var r=new XMLHttpRequest;r.open(e.method,e.url,!0),Object.keys(e.headers).forEach((function(t){return r.setRequestHeader(t,e.headers[t])}));var n,i=function(e,n){return setTimeout((function(){r.abort(),t({status:0,content:n,isTimedOut:!0})}),1e3*e)},a=i(e.connectTimeout,"Connection timeout");r.onreadystatechange=function(){r.readyState>r.OPENED&&void 0===n&&(clearTimeout(a),n=i(e.responseTimeout,"Socket timeout"))},r.onerror=function(){0===r.status&&(clearTimeout(a),clearTimeout(n),t({content:r.responseText||"Network request failed",status:r.status,isTimedOut:!1}))},r.onload=function(){clearTimeout(a),clearTimeout(n),t({content:r.responseText,status:r.status,isTimedOut:!1})},r.send(e.data)}))}},logger:(i=I,{debug:function(e,t){return k>=i&&console.debug(e,t),Promise.resolve()},info:function(e,t){return q>=i&&console.info(e,t),Promise.resolve()},error:function(e,t){return console.error(e,t),Promise.resolve()}}),responsesCache:u(),requestsCache:u({serializable:!1}),hostsCache:c({caches:[s({key:"".concat("4.23.2","-").concat(e)}),u()]}),userAgent:E("4.23.2").add({segment:"Browser",version:"lite"}),authMode:l.WithinQueryParameters};return N(r(r(r({},a),n),{},{methods:{search:H,searchForFacetValues:T,multipleQueries:H,multipleSearchForFacetValues:T,customRequest:A,initIndex:function(e){return function(t){return S(e)(t,{methods:{search:C,searchForFacetValues:D,findAnswers:Q}})}},getRecommendations:V}}))}return L.version="4.23.2",L}()}}]); \ No newline at end of file diff --git a/assets/js/552.4926ecbe.js.LICENSE.txt b/assets/js/552.53b9b813.js.LICENSE.txt similarity index 100% rename from assets/js/552.4926ecbe.js.LICENSE.txt rename to assets/js/552.53b9b813.js.LICENSE.txt diff --git a/assets/js/553.ca472ff3.js b/assets/js/553.a7bd52c6.js similarity index 100% rename from assets/js/553.ca472ff3.js rename to assets/js/553.a7bd52c6.js diff --git a/assets/js/554.3736eb11.js b/assets/js/554.b8e96bc3.js similarity index 99% rename from assets/js/554.3736eb11.js rename to assets/js/554.b8e96bc3.js index 8374d8d9b4..06ea62d5e6 100644 --- a/assets/js/554.3736eb11.js +++ b/assets/js/554.b8e96bc3.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[554,557],{627:function(e,t,a){"use strict";a.d(t,"a",(function(){return d})),a.d(t,"b",(function(){return h}));var n=a(0),r=a.n(n);function o(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function l(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function c(e){for(var t=1;t=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var s=r.a.createContext({}),u=function(e){var t=r.a.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},d=function(e){var t=u(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},p="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},b=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,l=e.parentName,s=i(e,["components","mdxType","originalType","parentName"]),d=u(a),p=n,b=d["".concat(l,".").concat(p)]||d[p]||m[p]||o;return a?r.a.createElement(b,c(c({ref:t},s),{},{components:a})):r.a.createElement(b,c({ref:t},s))}));function h(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,l=new Array(o);l[0]=b;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c[p]="string"==typeof e?e:n,l[1]=c;for(var s=2;se.trim())))if(/^-?\d+$/.test(n))a.push(parseInt(n,10));else if(t=n.match(/^(-?\d+)(-|\.\.\.?|\u2025|\u2026|\u22EF)(-?\d+)$/)){let[e,n,r,o]=t;if(n&&o){n=parseInt(n),o=parseInt(o);const e=nr.a.createElement("svg",Object(s.a)({width:"20",height:"20",role:"img"},e),r.a.createElement("g",{fill:"#7a7a7a"},r.a.createElement("path",{d:"M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"}),r.a.createElement("path",{d:"M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"}))),j=a(665),k=a(636),O=a(432),E=a.n(O);const N=(e,t)=>"link"===e.type?Object(d.isSamePath)(e.href,t):"category"===e.type&&e.items.some((e=>N(e,t)));function C(e){let{item:t,onItemClick:a,collapsible:o,activePath:l,...c}=e;const{items:i,label:d}=t,p=N(t,l),m=function(e){const t=Object(n.useRef)(e);return Object(n.useEffect)((()=>{t.current=e}),[e]),t.current}(p),[b,h]=Object(n.useState)((()=>!!o&&(!p&&t.collapsed))),y=Object(n.useRef)(null),[f,g]=Object(n.useState)(void 0),v=function(e){var t;void 0===e&&(e=!0),g(e?(null===(t=y.current)||void 0===t?void 0:t.scrollHeight)+"px":void 0)};Object(n.useEffect)((()=>{p&&!m&&b&&h(!1)}),[p,m,b]);const j=Object(n.useCallback)((e=>{e.preventDefault(),f||v(),setTimeout((()=>h((e=>!e))),100)}),[f]);return 0===i.length?null:r.a.createElement("li",{className:Object(u.a)("menu__list-item",{"menu__list-item--collapsed":b}),key:d},r.a.createElement("a",Object(s.a)({className:Object(u.a)("menu__link",{"menu__link--sublist":o,"menu__link--active":o&&p,[E.a.menuLinkText]:!o}),onClick:o?j:void 0,href:o?"#!":void 0},c),d),r.a.createElement("ul",{className:"menu__list",ref:y,style:{height:f},onTransitionEnd:()=>{b||v(!1)}},i.map((e=>r.a.createElement(x,{tabIndex:b?"-1":"0",key:e.label,item:e,onItemClick:a,collapsible:o,activePath:l})))))}function T(e){let{item:t,onItemClick:a,activePath:n,collapsible:o,...l}=e;const{href:c,label:i}=t,d=N(t,n);return r.a.createElement("li",{className:"menu__list-item",key:i},r.a.createElement(y.a,Object(s.a)({className:Object(u.a)("menu__link",{"menu__link--active":d,[E.a.menuLinkExternal]:!Object(f.a)(c)}),to:c},Object(f.a)(c)&&{isNavLink:!0,exact:!0,onClick:a},l),i))}function x(e){return"category"===e.item.type?r.a.createElement(C,e):r.a.createElement(T,e)}var w=function(e){let{path:t,sidebar:a,sidebarCollapsible:o=!0,onCollapse:l,isHidden:c}=e;const[i,s]=Object(n.useState)(!1),{navbar:{hideOnScroll:y},hideableSidebar:f}=Object(d.useThemeConfig)(),{isAnnouncementBarClosed:O}=Object(p.a)(),{scrollY:N}=Object(h.a)();Object(m.a)(i);const C=Object(b.a)();return Object(n.useEffect)((()=>{C===b.b.desktop&&s(!1)}),[C]),r.a.createElement("div",{className:Object(u.a)(E.a.sidebar,{[E.a.sidebarWithHideableNavbar]:y,[E.a.sidebarHidden]:c})},y&&r.a.createElement(g.a,{tabIndex:-1,className:E.a.sidebarLogo}),r.a.createElement("div",{className:Object(u.a)("menu","menu--responsive","thin-scrollbar",E.a.menu,{"menu--show":i,[E.a.menuWithAnnouncementBar]:!O&&0===N})},r.a.createElement("button",{"aria-label":i?Object(k.b)({id:"theme.docs.sidebar.responsiveCloseButtonLabel",message:"Close menu",description:"The ARIA label for close button of mobile doc sidebar"}):Object(k.b)({id:"theme.docs.sidebar.responsiveOpenButtonLabel",message:"Open menu",description:"The ARIA label for open button of mobile doc sidebar"}),"aria-haspopup":"true",className:"button button--secondary button--sm menu__button",type:"button",onClick:()=>{s(!i)}},i?r.a.createElement("span",{className:Object(u.a)(E.a.sidebarMenuIcon,E.a.sidebarMenuCloseIcon)},"\xd7"):r.a.createElement(j.a,{className:E.a.sidebarMenuIcon,height:24,width:24})),r.a.createElement("ul",{className:"menu__list"},a.map((e=>r.a.createElement(x,{key:e.label,item:e,onItemClick:e=>{e.target.blur(),s(!1)},collapsible:o,activePath:t}))))),f&&r.a.createElement("button",{type:"button",title:Object(k.b)({id:"theme.docs.sidebar.collapseButtonTitle",message:"Collapse sidebar",description:"The title attribute for collapse button of doc sidebar"}),"aria-label":Object(k.b)({id:"theme.docs.sidebar.collapseButtonAriaLabel",message:"Collapse sidebar",description:"The title attribute for collapse button of doc sidebar"}),className:Object(u.a)("button button--secondary button--outline",E.a.collapseSidebarButton),onClick:l},r.a.createElement(v,{className:E.a.collapseSidebarButtonIcon})))},P={plain:{backgroundColor:"#2a2734",color:"#9a86fd"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#6c6783"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#e09142"}},{types:["property","function"],style:{color:"#9a86fd"}},{types:["tag-id","selector","atrule-id"],style:{color:"#eeebff"}},{types:["attr-name"],style:{color:"#c4b9fe"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","atrule","placeholder","variable"],style:{color:"#ffcc99"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#c4b9fe"}}]},S={Prism:a(23).a,theme:P};function _(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function B(){return B=Object.assign||function(e){for(var t=1;t0&&e[a-1]===t?e:e.concat(t)};function D(e,t){var a={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&-1===t.indexOf(n)&&(a[n]=e[n]);return a}var R=function(e){function t(){for(var t=this,a=[],n=arguments.length;n--;)a[n]=arguments[n];e.apply(this,a),_(this,"getThemeDict",(function(e){if(void 0!==t.themeDict&&e.theme===t.prevTheme&&e.language===t.prevLanguage)return t.themeDict;t.prevTheme=e.theme,t.prevLanguage=e.language;var a=e.theme?function(e,t){var a=e.plain,n=Object.create(null),r=e.styles.reduce((function(e,a){var n=a.languages,r=a.style;return n&&!n.includes(t)||a.types.forEach((function(t){var a=B({},e[t],r);e[t]=a})),e}),n);return r.root=a,r.plain=B({},a,{backgroundColor:null}),r}(e.theme,e.language):void 0;return t.themeDict=a})),_(this,"getLineProps",(function(e){var a=e.key,n=e.className,r=e.style,o=B({},D(e,["key","className","style","line"]),{className:"token-line",style:void 0,key:void 0}),l=t.getThemeDict(t.props);return void 0!==l&&(o.style=l.plain),void 0!==r&&(o.style=void 0!==o.style?B({},o.style,r):r),void 0!==a&&(o.key=a),n&&(o.className+=" "+n),o})),_(this,"getStyleForToken",(function(e){var a=e.types,n=e.empty,r=a.length,o=t.getThemeDict(t.props);if(void 0!==o){if(1===r&&"plain"===a[0])return n?{display:"inline-block"}:void 0;if(1===r&&!n)return o[a[0]];var l=n?{display:"inline-block"}:{},c=a.map((function(e){return o[e]}));return Object.assign.apply(Object,[l].concat(c))}})),_(this,"getTokenProps",(function(e){var a=e.key,n=e.className,r=e.style,o=e.token,l=B({},D(e,["key","className","style","token"]),{className:"token "+o.types.join(" "),children:o.content,style:t.getStyleForToken(o),key:void 0});return void 0!==r&&(l.style=void 0!==l.style?B({},l.style,r):r),void 0!==a&&(l.key=a),n&&(l.className+=" "+n),l})),_(this,"tokenize",(function(e,t,a,n){var r={code:t,grammar:a,language:n,tokens:[]};e.hooks.run("before-tokenize",r);var o=r.tokens=e.tokenize(r.code,r.grammar,r.language);return e.hooks.run("after-tokenize",r),o}))}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.render=function(){var e=this.props,t=e.Prism,a=e.language,n=e.code,r=e.children,o=this.getThemeDict(this.props),l=t.languages[a];return r({tokens:function(e){for(var t=[[]],a=[e],n=[0],r=[e.length],o=0,l=0,c=[],i=[c];l>-1;){for(;(o=n[l]++)0?u:["plain"],s=d):(u=A(u,d.type),d.alias&&(u=A(u,d.alias)),s=d.content),"string"==typeof s){var p=s.split(I),m=p.length;c.push({types:u,content:p[0]});for(var b=1;b{const{prism:e}=Object(d.useThemeConfig)(),{isDarkTheme:t}=Object(W.a)(),a=e.theme||H,n=e.darkTheme||a;return t?n:a},J=a(433),V=a.n(J);const K=/{([\d,-]+)}/,U=function(e){void 0===e&&(e=["js","jsBlock","jsx","python","html"]);const t={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},python:{start:"#",end:""},html:{start:"\x3c!--",end:"--\x3e"}},a=["highlight-next-line","highlight-start","highlight-end"].join("|"),n=e.map((e=>"(?:"+t[e].start+"\\s*("+a+")\\s*"+t[e].end+")")).join("|");return new RegExp("^\\s*(?:"+n+")\\s*$")},X=/(?:title=")(.*)(?:")/;function Y(e){let{children:t,className:a,metastring:o}=e;const{prism:l}=Object(d.useThemeConfig)(),[c,i]=Object(n.useState)(!1),[p,m]=Object(n.useState)(!1);Object(n.useEffect)((()=>{m(!0)}),[]);const b=Object(n.useRef)(null);let h=[],y="";const f=$(),g=Array.isArray(t)?t.join(""):t;if(o&&K.test(o)){const e=o.match(K)[1];h=z()(e).filter((e=>e>0))}o&&X.test(o)&&(y=o.match(X)[1]);let v=a&&a.replace(/language-/,"");!v&&l.defaultLanguage&&(v=l.defaultLanguage);let j=g.replace(/\n$/,"");if(0===h.length&&void 0!==v){let e="";const t=(e=>{switch(e){case"js":case"javascript":case"ts":case"typescript":return U(["js","jsBlock"]);case"jsx":case"tsx":return U(["js","jsBlock","jsx"]);case"html":return U(["js","jsBlock","html"]);case"python":case"py":return U(["python"]);default:return U()}})(v),a=g.replace(/\n$/,"").split("\n");let n;for(let r=0;re||t),void 0)){case"highlight-next-line":e+=o+",";break;case"highlight-start":n=o;break;case"highlight-end":e+=n+"-"+(o-1)+","}a.splice(r,1)}else r+=1}h=z()(e),j=a.join("\n")}const O=()=>{!function(e,{target:t=document.body}={}){if("string"!=typeof e)throw new TypeError(`Expected parameter \`text\` to be a \`string\`, got \`${typeof e}\`.`);const a=document.createElement("textarea"),n=document.activeElement;a.value=e,a.setAttribute("readonly",""),a.style.contain="strict",a.style.position="absolute",a.style.left="-9999px",a.style.fontSize="12pt";const r=document.getSelection(),o=r.rangeCount>0&&r.getRangeAt(0);t.append(a),a.select(),a.selectionStart=0,a.selectionEnd=e.length;let l=!1;try{l=document.execCommand("copy")}catch{}a.remove(),o&&(r.removeAllRanges(),r.addRange(o)),n&&n.focus()}(j),i(!0),setTimeout((()=>i(!1)),2e3)};return r.a.createElement(M,Object(s.a)({},S,{key:String(p),theme:f,code:j,language:v}),(e=>{let{className:t,style:a,tokens:n,getLineProps:o,getTokenProps:l}=e;return r.a.createElement("div",{className:V.a.codeBlockContainer},y&&r.a.createElement("div",{style:a,className:V.a.codeBlockTitle},y),r.a.createElement("div",{className:Object(u.a)(V.a.codeBlockContent,v)},r.a.createElement("div",{tabIndex:0,className:Object(u.a)(t,V.a.codeBlock,"thin-scrollbar",{[V.a.codeBlockWithTitle]:y})},r.a.createElement("div",{className:V.a.codeBlockLines,style:a},n.map(((e,t)=>{1===e.length&&""===e[0].content&&(e[0].content="\n");const a=o({line:e,key:t});return h.includes(t+1)&&(a.className=a.className+" docusaurus-highlight-code-line"),r.a.createElement("div",Object(s.a)({key:t},a),e.map(((e,t)=>r.a.createElement("span",Object(s.a)({key:t},l({token:e,key:t}))))))})))),r.a.createElement("button",{ref:b,type:"button","aria-label":Object(k.b)({id:"theme.CodeBlock.copyButtonAriaLabel",message:"Copy code to clipboard",description:"The ARIA label for copy code blocks button"}),className:Object(u.a)(V.a.copyButton),onClick:O},c?r.a.createElement(k.a,{id:"theme.CodeBlock.copied",description:"The copied button label on code blocks"},"Copied"):r.a.createElement(k.a,{id:"theme.CodeBlock.copy",description:"The copy button label on code blocks"},"Copy"))))}))}a(434);var q=a(435),G=a.n(q);var Q=e=>function(t){let{id:a,...n}=t;const{navbar:{hideOnScroll:o}}=Object(d.useThemeConfig)();return a?r.a.createElement(e,n,r.a.createElement("a",{"aria-hidden":"true",tabIndex:-1,className:Object(u.a)("anchor",{[G.a.enhancedAnchor]:!o}),id:a}),n.children,r.a.createElement("a",{className:"hash-link",href:"#"+a,title:Object(k.b)({id:"theme.common.headingLinkTitle",message:"Direct link to heading",description:"Title for link to heading"})},"#")):r.a.createElement(e,n)};var Z={code:e=>{const{children:t}=e;return"string"==typeof t?t.includes("\n")?r.a.createElement(Y,e):r.a.createElement("code",e):t},a:e=>r.a.createElement(y.a,e),pre:e=>{const{children:t}=e;return r.a.createElement(Y,Object(n.isValidElement)(t)?null==t?void 0:t.props:{children:t})},h1:Q("h1"),h2:Q("h2"),h3:Q("h3"),h4:Q("h4"),h5:Q("h5"),h6:Q("h6")},ee=a(653),te=a(21),ae=a(436),ne=a.n(ae);function re(e){var t,a;let{currentDocRoute:c,versionMetadata:s,children:p}=e;const{siteConfig:m,isClient:b}=Object(l.default)(),{pluginId:h,permalinkToSidebar:y,docsSidebars:f,version:g}=s,j=y[c.path],O=f[j],[E,N]=Object(n.useState)(!1),[C,T]=Object(n.useState)(!1),x=Object(n.useCallback)((()=>{C&&T(!1),N(!E)}),[C]);return r.a.createElement(i.a,{key:b,wrapperClassName:"main-docs-wrapper",searchMetadatas:{version:g,tag:Object(d.docVersionSearchTag)(h,g)}},r.a.createElement("div",{className:ne.a.docPage},O&&r.a.createElement("div",{className:Object(u.a)(ne.a.docSidebarContainer,{[ne.a.docSidebarContainerHidden]:E}),onTransitionEnd:e=>{e.currentTarget.classList.contains(ne.a.docSidebarContainer)&&E&&T(!0)},role:"complementary"},r.a.createElement(w,{key:j,sidebar:O,path:c.path,sidebarCollapsible:null===(t=null===(a=m.themeConfig)||void 0===a?void 0:a.sidebarCollapsible)||void 0===t||t,onCollapse:x,isHidden:C}),C&&r.a.createElement("div",{className:ne.a.collapsedDocSidebar,title:Object(k.b)({id:"theme.docs.sidebar.expandButtonTitle",message:"Expand sidebar",description:"The ARIA label and title attribute for expand button of doc sidebar"}),"aria-label":Object(k.b)({id:"theme.docs.sidebar.expandButtonAriaLabel",message:"Expand sidebar",description:"The ARIA label and title attribute for expand button of doc sidebar"}),tabIndex:0,role:"button",onKeyDown:x,onClick:x},r.a.createElement(v,{className:ne.a.expandSidebarButtonIcon}))),r.a.createElement("main",{className:Object(u.a)(ne.a.docMainContainer,{[ne.a.docMainContainerEnhanced]:E})},r.a.createElement("div",{className:Object(u.a)("container padding-vert--lg",ne.a.docItemWrapper,{[ne.a.docItemWrapperEnhanced]:E})},r.a.createElement(o.a,{components:Z},p)))))}t.a=function(e){const{route:{routes:t},versionMetadata:a,location:n}=e,o=t.find((e=>Object(te.matchPath)(n.pathname,e)));return o?r.a.createElement(re,{currentDocRoute:o,versionMetadata:a},Object(c.a)(t)):r.a.createElement(ee.default,e)}}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[554,557],{627:function(e,t,a){"use strict";a.d(t,"a",(function(){return d})),a.d(t,"b",(function(){return h}));var n=a(0),r=a.n(n);function o(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function l(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function c(e){for(var t=1;t=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var s=r.a.createContext({}),u=function(e){var t=r.a.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},d=function(e){var t=u(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},p="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},b=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,l=e.parentName,s=i(e,["components","mdxType","originalType","parentName"]),d=u(a),p=n,b=d["".concat(l,".").concat(p)]||d[p]||m[p]||o;return a?r.a.createElement(b,c(c({ref:t},s),{},{components:a})):r.a.createElement(b,c({ref:t},s))}));function h(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,l=new Array(o);l[0]=b;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c[p]="string"==typeof e?e:n,l[1]=c;for(var s=2;se.trim())))if(/^-?\d+$/.test(n))a.push(parseInt(n,10));else if(t=n.match(/^(-?\d+)(-|\.\.\.?|\u2025|\u2026|\u22EF)(-?\d+)$/)){let[e,n,r,o]=t;if(n&&o){n=parseInt(n),o=parseInt(o);const e=nr.a.createElement("svg",Object(s.a)({width:"20",height:"20",role:"img"},e),r.a.createElement("g",{fill:"#7a7a7a"},r.a.createElement("path",{d:"M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"}),r.a.createElement("path",{d:"M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"}))),j=a(665),k=a(636),O=a(432),E=a.n(O);const N=(e,t)=>"link"===e.type?Object(d.isSamePath)(e.href,t):"category"===e.type&&e.items.some((e=>N(e,t)));function C(e){let{item:t,onItemClick:a,collapsible:o,activePath:l,...c}=e;const{items:i,label:d}=t,p=N(t,l),m=function(e){const t=Object(n.useRef)(e);return Object(n.useEffect)((()=>{t.current=e}),[e]),t.current}(p),[b,h]=Object(n.useState)((()=>!!o&&(!p&&t.collapsed))),y=Object(n.useRef)(null),[f,g]=Object(n.useState)(void 0),v=function(e){var t;void 0===e&&(e=!0),g(e?(null===(t=y.current)||void 0===t?void 0:t.scrollHeight)+"px":void 0)};Object(n.useEffect)((()=>{p&&!m&&b&&h(!1)}),[p,m,b]);const j=Object(n.useCallback)((e=>{e.preventDefault(),f||v(),setTimeout((()=>h((e=>!e))),100)}),[f]);return 0===i.length?null:r.a.createElement("li",{className:Object(u.a)("menu__list-item",{"menu__list-item--collapsed":b}),key:d},r.a.createElement("a",Object(s.a)({className:Object(u.a)("menu__link",{"menu__link--sublist":o,"menu__link--active":o&&p,[E.a.menuLinkText]:!o}),onClick:o?j:void 0,href:o?"#!":void 0},c),d),r.a.createElement("ul",{className:"menu__list",ref:y,style:{height:f},onTransitionEnd:()=>{b||v(!1)}},i.map((e=>r.a.createElement(x,{tabIndex:b?"-1":"0",key:e.label,item:e,onItemClick:a,collapsible:o,activePath:l})))))}function T(e){let{item:t,onItemClick:a,activePath:n,collapsible:o,...l}=e;const{href:c,label:i}=t,d=N(t,n);return r.a.createElement("li",{className:"menu__list-item",key:i},r.a.createElement(y.a,Object(s.a)({className:Object(u.a)("menu__link",{"menu__link--active":d,[E.a.menuLinkExternal]:!Object(f.a)(c)}),to:c},Object(f.a)(c)&&{isNavLink:!0,exact:!0,onClick:a},l),i))}function x(e){return"category"===e.item.type?r.a.createElement(C,e):r.a.createElement(T,e)}var w=function(e){let{path:t,sidebar:a,sidebarCollapsible:o=!0,onCollapse:l,isHidden:c}=e;const[i,s]=Object(n.useState)(!1),{navbar:{hideOnScroll:y},hideableSidebar:f}=Object(d.useThemeConfig)(),{isAnnouncementBarClosed:O}=Object(p.a)(),{scrollY:N}=Object(h.a)();Object(m.a)(i);const C=Object(b.a)();return Object(n.useEffect)((()=>{C===b.b.desktop&&s(!1)}),[C]),r.a.createElement("div",{className:Object(u.a)(E.a.sidebar,{[E.a.sidebarWithHideableNavbar]:y,[E.a.sidebarHidden]:c})},y&&r.a.createElement(g.a,{tabIndex:-1,className:E.a.sidebarLogo}),r.a.createElement("div",{className:Object(u.a)("menu","menu--responsive","thin-scrollbar",E.a.menu,{"menu--show":i,[E.a.menuWithAnnouncementBar]:!O&&0===N})},r.a.createElement("button",{"aria-label":i?Object(k.b)({id:"theme.docs.sidebar.responsiveCloseButtonLabel",message:"Close menu",description:"The ARIA label for close button of mobile doc sidebar"}):Object(k.b)({id:"theme.docs.sidebar.responsiveOpenButtonLabel",message:"Open menu",description:"The ARIA label for open button of mobile doc sidebar"}),"aria-haspopup":"true",className:"button button--secondary button--sm menu__button",type:"button",onClick:()=>{s(!i)}},i?r.a.createElement("span",{className:Object(u.a)(E.a.sidebarMenuIcon,E.a.sidebarMenuCloseIcon)},"\xd7"):r.a.createElement(j.a,{className:E.a.sidebarMenuIcon,height:24,width:24})),r.a.createElement("ul",{className:"menu__list"},a.map((e=>r.a.createElement(x,{key:e.label,item:e,onItemClick:e=>{e.target.blur(),s(!1)},collapsible:o,activePath:t}))))),f&&r.a.createElement("button",{type:"button",title:Object(k.b)({id:"theme.docs.sidebar.collapseButtonTitle",message:"Collapse sidebar",description:"The title attribute for collapse button of doc sidebar"}),"aria-label":Object(k.b)({id:"theme.docs.sidebar.collapseButtonAriaLabel",message:"Collapse sidebar",description:"The title attribute for collapse button of doc sidebar"}),className:Object(u.a)("button button--secondary button--outline",E.a.collapseSidebarButton),onClick:l},r.a.createElement(v,{className:E.a.collapseSidebarButtonIcon})))},P={plain:{backgroundColor:"#2a2734",color:"#9a86fd"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#6c6783"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#e09142"}},{types:["property","function"],style:{color:"#9a86fd"}},{types:["tag-id","selector","atrule-id"],style:{color:"#eeebff"}},{types:["attr-name"],style:{color:"#c4b9fe"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","atrule","placeholder","variable"],style:{color:"#ffcc99"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#c4b9fe"}}]},S={Prism:a(23).a,theme:P};function _(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function B(){return B=Object.assign||function(e){for(var t=1;t0&&e[a-1]===t?e:e.concat(t)};function D(e,t){var a={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&-1===t.indexOf(n)&&(a[n]=e[n]);return a}var R=function(e){function t(){for(var t=this,a=[],n=arguments.length;n--;)a[n]=arguments[n];e.apply(this,a),_(this,"getThemeDict",(function(e){if(void 0!==t.themeDict&&e.theme===t.prevTheme&&e.language===t.prevLanguage)return t.themeDict;t.prevTheme=e.theme,t.prevLanguage=e.language;var a=e.theme?function(e,t){var a=e.plain,n=Object.create(null),r=e.styles.reduce((function(e,a){var n=a.languages,r=a.style;return n&&!n.includes(t)||a.types.forEach((function(t){var a=B({},e[t],r);e[t]=a})),e}),n);return r.root=a,r.plain=B({},a,{backgroundColor:null}),r}(e.theme,e.language):void 0;return t.themeDict=a})),_(this,"getLineProps",(function(e){var a=e.key,n=e.className,r=e.style,o=B({},D(e,["key","className","style","line"]),{className:"token-line",style:void 0,key:void 0}),l=t.getThemeDict(t.props);return void 0!==l&&(o.style=l.plain),void 0!==r&&(o.style=void 0!==o.style?B({},o.style,r):r),void 0!==a&&(o.key=a),n&&(o.className+=" "+n),o})),_(this,"getStyleForToken",(function(e){var a=e.types,n=e.empty,r=a.length,o=t.getThemeDict(t.props);if(void 0!==o){if(1===r&&"plain"===a[0])return n?{display:"inline-block"}:void 0;if(1===r&&!n)return o[a[0]];var l=n?{display:"inline-block"}:{},c=a.map((function(e){return o[e]}));return Object.assign.apply(Object,[l].concat(c))}})),_(this,"getTokenProps",(function(e){var a=e.key,n=e.className,r=e.style,o=e.token,l=B({},D(e,["key","className","style","token"]),{className:"token "+o.types.join(" "),children:o.content,style:t.getStyleForToken(o),key:void 0});return void 0!==r&&(l.style=void 0!==l.style?B({},l.style,r):r),void 0!==a&&(l.key=a),n&&(l.className+=" "+n),l})),_(this,"tokenize",(function(e,t,a,n){var r={code:t,grammar:a,language:n,tokens:[]};e.hooks.run("before-tokenize",r);var o=r.tokens=e.tokenize(r.code,r.grammar,r.language);return e.hooks.run("after-tokenize",r),o}))}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.render=function(){var e=this.props,t=e.Prism,a=e.language,n=e.code,r=e.children,o=this.getThemeDict(this.props),l=t.languages[a];return r({tokens:function(e){for(var t=[[]],a=[e],n=[0],r=[e.length],o=0,l=0,c=[],i=[c];l>-1;){for(;(o=n[l]++)0?u:["plain"],s=d):(u=A(u,d.type),d.alias&&(u=A(u,d.alias)),s=d.content),"string"==typeof s){var p=s.split(I),m=p.length;c.push({types:u,content:p[0]});for(var b=1;b{const{prism:e}=Object(d.useThemeConfig)(),{isDarkTheme:t}=Object(W.a)(),a=e.theme||H,n=e.darkTheme||a;return t?n:a},J=a(433),V=a.n(J);const K=/{([\d,-]+)}/,U=function(e){void 0===e&&(e=["js","jsBlock","jsx","python","html"]);const t={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},python:{start:"#",end:""},html:{start:"\x3c!--",end:"--\x3e"}},a=["highlight-next-line","highlight-start","highlight-end"].join("|"),n=e.map((e=>"(?:"+t[e].start+"\\s*("+a+")\\s*"+t[e].end+")")).join("|");return new RegExp("^\\s*(?:"+n+")\\s*$")},X=/(?:title=")(.*)(?:")/;function Y(e){let{children:t,className:a,metastring:o}=e;const{prism:l}=Object(d.useThemeConfig)(),[c,i]=Object(n.useState)(!1),[p,m]=Object(n.useState)(!1);Object(n.useEffect)((()=>{m(!0)}),[]);const b=Object(n.useRef)(null);let h=[],y="";const f=$(),g=Array.isArray(t)?t.join(""):t;if(o&&K.test(o)){const e=o.match(K)[1];h=z()(e).filter((e=>e>0))}o&&X.test(o)&&(y=o.match(X)[1]);let v=a&&a.replace(/language-/,"");!v&&l.defaultLanguage&&(v=l.defaultLanguage);let j=g.replace(/\n$/,"");if(0===h.length&&void 0!==v){let e="";const t=(e=>{switch(e){case"js":case"javascript":case"ts":case"typescript":return U(["js","jsBlock"]);case"jsx":case"tsx":return U(["js","jsBlock","jsx"]);case"html":return U(["js","jsBlock","html"]);case"python":case"py":return U(["python"]);default:return U()}})(v),a=g.replace(/\n$/,"").split("\n");let n;for(let r=0;re||t),void 0)){case"highlight-next-line":e+=o+",";break;case"highlight-start":n=o;break;case"highlight-end":e+=n+"-"+(o-1)+","}a.splice(r,1)}else r+=1}h=z()(e),j=a.join("\n")}const O=()=>{!function(e,{target:t=document.body}={}){if("string"!=typeof e)throw new TypeError(`Expected parameter \`text\` to be a \`string\`, got \`${typeof e}\`.`);const a=document.createElement("textarea"),n=document.activeElement;a.value=e,a.setAttribute("readonly",""),a.style.contain="strict",a.style.position="absolute",a.style.left="-9999px",a.style.fontSize="12pt";const r=document.getSelection(),o=r.rangeCount>0&&r.getRangeAt(0);t.append(a),a.select(),a.selectionStart=0,a.selectionEnd=e.length;let l=!1;try{l=document.execCommand("copy")}catch{}a.remove(),o&&(r.removeAllRanges(),r.addRange(o)),n&&n.focus()}(j),i(!0),setTimeout((()=>i(!1)),2e3)};return r.a.createElement(M,Object(s.a)({},S,{key:String(p),theme:f,code:j,language:v}),(e=>{let{className:t,style:a,tokens:n,getLineProps:o,getTokenProps:l}=e;return r.a.createElement("div",{className:V.a.codeBlockContainer},y&&r.a.createElement("div",{style:a,className:V.a.codeBlockTitle},y),r.a.createElement("div",{className:Object(u.a)(V.a.codeBlockContent,v)},r.a.createElement("div",{tabIndex:0,className:Object(u.a)(t,V.a.codeBlock,"thin-scrollbar",{[V.a.codeBlockWithTitle]:y})},r.a.createElement("div",{className:V.a.codeBlockLines,style:a},n.map(((e,t)=>{1===e.length&&""===e[0].content&&(e[0].content="\n");const a=o({line:e,key:t});return h.includes(t+1)&&(a.className=a.className+" docusaurus-highlight-code-line"),r.a.createElement("div",Object(s.a)({key:t},a),e.map(((e,t)=>r.a.createElement("span",Object(s.a)({key:t},l({token:e,key:t}))))))})))),r.a.createElement("button",{ref:b,type:"button","aria-label":Object(k.b)({id:"theme.CodeBlock.copyButtonAriaLabel",message:"Copy code to clipboard",description:"The ARIA label for copy code blocks button"}),className:Object(u.a)(V.a.copyButton),onClick:O},c?r.a.createElement(k.a,{id:"theme.CodeBlock.copied",description:"The copied button label on code blocks"},"Copied"):r.a.createElement(k.a,{id:"theme.CodeBlock.copy",description:"The copy button label on code blocks"},"Copy"))))}))}a(434);var q=a(435),G=a.n(q);var Q=e=>function(t){let{id:a,...n}=t;const{navbar:{hideOnScroll:o}}=Object(d.useThemeConfig)();return a?r.a.createElement(e,n,r.a.createElement("a",{"aria-hidden":"true",tabIndex:-1,className:Object(u.a)("anchor",{[G.a.enhancedAnchor]:!o}),id:a}),n.children,r.a.createElement("a",{className:"hash-link",href:"#"+a,title:Object(k.b)({id:"theme.common.headingLinkTitle",message:"Direct link to heading",description:"Title for link to heading"})},"#")):r.a.createElement(e,n)};var Z={code:e=>{const{children:t}=e;return"string"==typeof t?t.includes("\n")?r.a.createElement(Y,e):r.a.createElement("code",e):t},a:e=>r.a.createElement(y.a,e),pre:e=>{const{children:t}=e;return r.a.createElement(Y,Object(n.isValidElement)(t)?null==t?void 0:t.props:{children:t})},h1:Q("h1"),h2:Q("h2"),h3:Q("h3"),h4:Q("h4"),h5:Q("h5"),h6:Q("h6")},ee=a(653),te=a(21),ae=a(436),ne=a.n(ae);function re(e){var t,a;let{currentDocRoute:c,versionMetadata:s,children:p}=e;const{siteConfig:m,isClient:b}=Object(l.default)(),{pluginId:h,permalinkToSidebar:y,docsSidebars:f,version:g}=s,j=y[c.path],O=f[j],[E,N]=Object(n.useState)(!1),[C,T]=Object(n.useState)(!1),x=Object(n.useCallback)((()=>{C&&T(!1),N(!E)}),[C]);return r.a.createElement(i.a,{key:b,wrapperClassName:"main-docs-wrapper",searchMetadatas:{version:g,tag:Object(d.docVersionSearchTag)(h,g)}},r.a.createElement("div",{className:ne.a.docPage},O&&r.a.createElement("div",{className:Object(u.a)(ne.a.docSidebarContainer,{[ne.a.docSidebarContainerHidden]:E}),onTransitionEnd:e=>{e.currentTarget.classList.contains(ne.a.docSidebarContainer)&&E&&T(!0)},role:"complementary"},r.a.createElement(w,{key:j,sidebar:O,path:c.path,sidebarCollapsible:null===(t=null===(a=m.themeConfig)||void 0===a?void 0:a.sidebarCollapsible)||void 0===t||t,onCollapse:x,isHidden:C}),C&&r.a.createElement("div",{className:ne.a.collapsedDocSidebar,title:Object(k.b)({id:"theme.docs.sidebar.expandButtonTitle",message:"Expand sidebar",description:"The ARIA label and title attribute for expand button of doc sidebar"}),"aria-label":Object(k.b)({id:"theme.docs.sidebar.expandButtonAriaLabel",message:"Expand sidebar",description:"The ARIA label and title attribute for expand button of doc sidebar"}),tabIndex:0,role:"button",onKeyDown:x,onClick:x},r.a.createElement(v,{className:ne.a.expandSidebarButtonIcon}))),r.a.createElement("main",{className:Object(u.a)(ne.a.docMainContainer,{[ne.a.docMainContainerEnhanced]:E})},r.a.createElement("div",{className:Object(u.a)("container padding-vert--lg",ne.a.docItemWrapper,{[ne.a.docItemWrapperEnhanced]:E})},r.a.createElement(o.a,{components:Z},p)))))}t.a=function(e){const{route:{routes:t},versionMetadata:a,location:n}=e,o=t.find((e=>Object(te.matchPath)(n.pathname,e)));return o?r.a.createElement(re,{currentDocRoute:o,versionMetadata:a},Object(c.a)(t)):r.a.createElement(ee.default,e)}}}]); \ No newline at end of file diff --git a/assets/js/555.e6c08ce7.js b/assets/js/555.8c84b074.js similarity index 99% rename from assets/js/555.e6c08ce7.js rename to assets/js/555.8c84b074.js index 5fe2bd751a..30c62996a2 100644 --- a/assets/js/555.e6c08ce7.js +++ b/assets/js/555.8c84b074.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[555],{759:function(e,t,r){"use strict";function n(e,t){var r=void 0;return function(){for(var n=arguments.length,o=new Array(n),a=0;ae.length)&&(t=e.length);for(var r=0,n=new Array(t);re.length)&&(t=e.length);for(var r=0,n=new Array(t);r=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function y(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function h(e){for(var t=1;t=3||2===r&&n>=4||1===r&&n>=10);function a(t,r,n){if(o&&void 0!==n){var a=n[0].__autocomplete_algoliaCredentials,i={"X-Algolia-Application-Id":a.appId,"X-Algolia-API-Key":a.apiKey};e.apply(void 0,[t].concat(p(r),[{headers:i}]))}else e.apply(void 0,[t].concat(p(r)))}return{init:function(t,r){e("init",{appId:t,apiKey:r})},setUserToken:function(t){e("setUserToken",t)},clickedObjectIDsAfterSearch:function(){for(var e=arguments.length,t=new Array(e),r=0;r0&&a("clickedObjectIDsAfterSearch",g(t),t[0].items)},clickedObjectIDs:function(){for(var e=arguments.length,t=new Array(e),r=0;r0&&a("clickedObjectIDs",g(t),t[0].items)},clickedFilters:function(){for(var t=arguments.length,r=new Array(t),n=0;n0&&e.apply(void 0,["clickedFilters"].concat(r))},convertedObjectIDsAfterSearch:function(){for(var e=arguments.length,t=new Array(e),r=0;r0&&a("convertedObjectIDsAfterSearch",g(t),t[0].items)},convertedObjectIDs:function(){for(var e=arguments.length,t=new Array(e),r=0;r0&&a("convertedObjectIDs",g(t),t[0].items)},convertedFilters:function(){for(var t=arguments.length,r=new Array(t),n=0;n0&&e.apply(void 0,["convertedFilters"].concat(r))},viewedObjectIDs:function(){for(var e=arguments.length,t=new Array(e),r=0;r0&&t.reduce((function(e,t){var r=t.items,n=d(t,f);return[].concat(p(e),p(function(e){for(var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:20,r=[],n=0;n0&&e.apply(void 0,["viewedFilters"].concat(r))}}}function S(e){var t=e.items.reduce((function(e,t){var r;return e[t.__autocomplete_indexName]=(null!==(r=e[t.__autocomplete_indexName])&&void 0!==r?r:[]).concat(t),e}),{});return Object.keys(t).map((function(e){return{index:e,items:t[e],algoliaSource:["autocomplete"]}}))}function j(e){return e.objectID&&e.__autocomplete_indexName&&e.__autocomplete_queryID}function w(e){return w="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},w(e)}function E(e){return function(e){if(Array.isArray(e))return P(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return P(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return P(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function P(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r0&&C({onItemsChange:o,items:r,insights:f,state:t}))}}),0);return{name:"aa.algoliaInsightsPlugin",subscribe:function(e){var t=e.setContext,r=e.onSelect,n=e.onActive;s("addAlgoliaAgent","insights-plugin"),t({algoliaInsightsPlugin:{__algoliaSearchParameters:{clickAnalytics:!0},insights:f}}),r((function(e){var t=e.item,r=e.state,n=e.event;j(t)&&l({state:r,event:n,insights:f,item:t,insightsEvents:[D({eventName:"Item Selected"},c({item:t,items:m.current}))]})})),n((function(e){var t=e.item,r=e.state,n=e.event;j(t)&&u({state:r,event:n,insights:f,item:t,insightsEvents:[D({eventName:"Item Active"},c({item:t,items:m.current}))]})}))},onStateChange:function(e){var t=e.state;p({state:t})},__autocomplete_pluginOptions:e}}function _(e){return _="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},_(e)}function T(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function q(e,t,r){return(t=function(e){var t=function(e,t){if("object"!==_(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==_(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"===_(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function R(e,t,r){var n,o=t.initialState;return{getState:function(){return o},dispatch:function(n,a){var i=function(e){for(var t=1;te.length)&&(t=e.length);for(var r=0,n=new Array(t);r0},reshape:function(e){return e.sources}},e),{},{id:null!==(r=e.id)&&void 0!==r?r:"autocomplete-".concat(V++),plugins:o,initialState:X({activeItemId:null,query:"",completion:null,collections:[],isOpen:!1,status:"idle",context:{}},e.initialState),onStateChange:function(t){var r;null===(r=e.onStateChange)||void 0===r||r.call(e,t),o.forEach((function(e){var r;return null===(r=e.onStateChange)||void 0===r?void 0:r.call(e,t)}))},onSubmit:function(t){var r;null===(r=e.onSubmit)||void 0===r||r.call(e,t),o.forEach((function(e){var r;return null===(r=e.onSubmit)||void 0===r?void 0:r.call(e,t)}))},onReset:function(t){var r;null===(r=e.onReset)||void 0===r||r.call(e,t),o.forEach((function(e){var r;return null===(r=e.onReset)||void 0===r?void 0:r.call(e,t)}))},getSources:function(r){return Promise.all([].concat(W(o.map((function(e){return e.getSources}))),[e.getSources]).filter(Boolean).map((function(e){return function(e,t){var r=[];return Promise.resolve(e(t)).then((function(e){return Array.isArray(e),Promise.all(e.filter((function(e){return Boolean(e)})).map((function(e){if(e.sourceId,r.includes(e.sourceId))throw new Error("[Autocomplete] The `sourceId` ".concat(JSON.stringify(e.sourceId)," is not unique."));r.push(e.sourceId);var t={getItemInputValue:function(e){return e.state.query},getItemUrl:function(){},onSelect:function(e){(0,e.setIsOpen)(!1)},onActive:i,onResolve:i};Object.keys(t).forEach((function(e){t[e].__default=!0}));var n=$($({},t),e);return Promise.resolve(n)})))}))}(e,r)}))).then((function(e){return L(e)})).then((function(e){return e.map((function(e){return X(X({},e),{},{onSelect:function(r){e.onSelect(r),t.forEach((function(e){var t;return null===(t=e.onSelect)||void 0===t?void 0:t.call(e,r)}))},onActive:function(r){e.onActive(r),t.forEach((function(e){var t;return null===(t=e.onActive)||void 0===t?void 0:t.call(e,r)}))},onResolve:function(r){e.onResolve(r),t.forEach((function(e){var t;return null===(t=e.onResolve)||void 0===t?void 0:t.call(e,r)}))}})}))}))},navigator:X({navigate:function(e){var t=e.itemUrl;n.location.assign(t)},navigateNewTab:function(e){var t=e.itemUrl,r=n.open(t,"_blank","noopener");null==r||r.focus()},navigateNewWindow:function(e){var t=e.itemUrl;n.open(t,"_blank","noopener")}},e.navigator)})}function te(e){return te="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},te(e)}function re(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function ne(e){for(var t=1;te.length)&&(t=e.length);for(var r=0,n=new Array(t);r=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var Ie,De,Ae,ke=null,xe=(Ie=-1,De=-1,Ae=void 0,function(e){var t=++Ie;return Promise.resolve(e).then((function(e){return Ae&&t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var Me=/((gt|sm)-|galaxy nexus)|samsung[- ]|samsungbrowser/i;function He(e){return He="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},He(e)}var Fe=["props","refresh","store"],Ue=["inputElement","formElement","panelElement"],Be=["inputElement"],Ve=["inputElement","maxLength"],Ke=["sourceIndex"],$e=["sourceIndex"],Je=["item","source","sourceIndex"];function ze(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function Qe(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function Ge(e){var t=e.props,r=e.refresh,n=e.store,o=Ze(e,Fe),a=function(e,t){return void 0!==t?"".concat(e,"-").concat(t):e};return{getEnvironmentProps:function(e){var r=e.inputElement,o=e.formElement,a=e.panelElement;function i(e){!n.getState().isOpen&&n.pendingRequests.isEmpty()||e.target===r||!1===[o,a].some((function(t){return r=t,n=e.target,r===n||r.contains(n);var r,n}))&&(n.dispatch("blur",null),t.debug||n.pendingRequests.cancelAll())}return Qe({onTouchStart:i,onMouseDown:i,onTouchMove:function(e){!1!==n.getState().isOpen&&r===t.environment.document.activeElement&&e.target!==r&&r.blur()}},Ze(e,Ue))},getRootProps:function(e){return Qe({role:"combobox","aria-expanded":n.getState().isOpen,"aria-haspopup":"listbox","aria-owns":n.getState().isOpen?"".concat(t.id,"-list"):void 0,"aria-labelledby":"".concat(t.id,"-label")},e)},getFormProps:function(e){e.inputElement;return Qe({action:"",noValidate:!0,role:"search",onSubmit:function(a){var i;a.preventDefault(),t.onSubmit(Qe({event:a,refresh:r,state:n.getState()},o)),n.dispatch("submit",null),null===(i=e.inputElement)||void 0===i||i.blur()},onReset:function(a){var i;a.preventDefault(),t.onReset(Qe({event:a,refresh:r,state:n.getState()},o)),n.dispatch("reset",null),null===(i=e.inputElement)||void 0===i||i.focus()}},Ze(e,Be))},getLabelProps:function(e){var r=e||{},n=r.sourceIndex,o=Ze(r,Ke);return Qe({htmlFor:"".concat(a(t.id,n),"-input"),id:"".concat(a(t.id,n),"-label")},o)},getInputProps:function(e){var a;function c(e){(t.openOnFocus||Boolean(n.getState().query))&&Ce(Qe({event:e,props:t,query:n.getState().completion||n.getState().query,refresh:r,store:n},o)),n.dispatch("focus",null)}var l=e||{},u=(l.inputElement,l.maxLength),s=void 0===u?512:u,f=Ze(l,Ve),m=ge(n.getState()),p=function(e){return Boolean(e&&e.match(Me))}((null===(a=t.environment.navigator)||void 0===a?void 0:a.userAgent)||""),v=null!=m&&m.itemUrl&&!p?"go":"search";return Qe({"aria-autocomplete":"both","aria-activedescendant":n.getState().isOpen&&null!==n.getState().activeItemId?"".concat(t.id,"-item-").concat(n.getState().activeItemId):void 0,"aria-controls":n.getState().isOpen?"".concat(t.id,"-list"):void 0,"aria-labelledby":"".concat(t.id,"-label"),value:n.getState().completion||n.getState().query,id:"".concat(t.id,"-input"),autoComplete:"off",autoCorrect:"off",autoCapitalize:"off",enterKeyHint:v,spellCheck:"false",autoFocus:t.autoFocus,placeholder:t.placeholder,maxLength:s,type:"search",onChange:function(e){Ce(Qe({event:e,props:t,query:e.currentTarget.value.slice(0,s),refresh:r,store:n},o))},onKeyDown:function(e){!function(e){var t=e.event,r=e.props,n=e.refresh,o=e.store,a=Le(e,_e);if("ArrowUp"===t.key||"ArrowDown"===t.key){var i=function(){var e=r.environment.document.getElementById("".concat(r.id,"-item-").concat(o.getState().activeItemId));e&&(e.scrollIntoViewIfNeeded?e.scrollIntoViewIfNeeded(!1):e.scrollIntoView(!1))},c=function(){var e=ge(o.getState());if(null!==o.getState().activeItemId&&e){var r=e.item,i=e.itemInputValue,c=e.itemUrl,l=e.source;l.onActive(qe({event:t,item:r,itemInputValue:i,itemUrl:c,refresh:n,source:l,state:o.getState()},a))}};t.preventDefault(),!1===o.getState().isOpen&&(r.openOnFocus||Boolean(o.getState().query))?Ce(qe({event:t,props:r,query:o.getState().query,refresh:n,store:o},a)).then((function(){o.dispatch(t.key,{nextActiveItemId:r.defaultActiveItemId}),c(),setTimeout(i,0)})):(o.dispatch(t.key,{}),c(),i())}else if("Escape"===t.key)t.preventDefault(),o.dispatch(t.key,null),o.pendingRequests.cancelAll();else if("Tab"===t.key)o.dispatch("blur",null),o.pendingRequests.cancelAll();else if("Enter"===t.key){if(null===o.getState().activeItemId||o.getState().collections.every((function(e){return 0===e.items.length})))return void(r.debug||o.pendingRequests.cancelAll());t.preventDefault();var l=ge(o.getState()),u=l.item,s=l.itemInputValue,f=l.itemUrl,m=l.source;if(t.metaKey||t.ctrlKey)void 0!==f&&(m.onSelect(qe({event:t,item:u,itemInputValue:s,itemUrl:f,refresh:n,source:m,state:o.getState()},a)),r.navigator.navigateNewTab({itemUrl:f,item:u,state:o.getState()}));else if(t.shiftKey)void 0!==f&&(m.onSelect(qe({event:t,item:u,itemInputValue:s,itemUrl:f,refresh:n,source:m,state:o.getState()},a)),r.navigator.navigateNewWindow({itemUrl:f,item:u,state:o.getState()}));else if(t.altKey);else{if(void 0!==f)return m.onSelect(qe({event:t,item:u,itemInputValue:s,itemUrl:f,refresh:n,source:m,state:o.getState()},a)),void r.navigator.navigate({itemUrl:f,item:u,state:o.getState()});Ce(qe({event:t,nextState:{isOpen:!1},props:r,query:s,refresh:n,store:o},a)).then((function(){m.onSelect(qe({event:t,item:u,itemInputValue:s,itemUrl:f,refresh:n,source:m,state:o.getState()},a))}))}}}(Qe({event:e,props:t,refresh:r,store:n},o))},onFocus:c,onBlur:i,onClick:function(r){e.inputElement!==t.environment.document.activeElement||n.getState().isOpen||c(r)}},f)},getPanelProps:function(e){return Qe({onMouseDown:function(e){e.preventDefault()},onMouseLeave:function(){n.dispatch("mouseleave",null)}},e)},getListProps:function(e){var r=e||{},n=r.sourceIndex,o=Ze(r,$e);return Qe({role:"listbox","aria-labelledby":"".concat(a(t.id,n),"-label"),id:"".concat(a(t.id,n),"-list")},o)},getItemProps:function(e){var i=e.item,c=e.source,l=e.sourceIndex,u=Ze(e,Je);return Qe({id:"".concat(a(t.id,l),"-item-").concat(i.__autocomplete_id),role:"option","aria-selected":n.getState().activeItemId===i.__autocomplete_id,onMouseMove:function(e){if(i.__autocomplete_id!==n.getState().activeItemId){n.dispatch("mousemove",i.__autocomplete_id);var t=ge(n.getState());if(null!==n.getState().activeItemId&&t){var a=t.item,c=t.itemInputValue,l=t.itemUrl,u=t.source;u.onActive(Qe({event:e,item:a,itemInputValue:c,itemUrl:l,refresh:r,source:u,state:n.getState()},o))}}},onMouseDown:function(e){e.preventDefault()},onClick:function(e){var a=c.getItemInputValue({item:i,state:n.getState()}),l=c.getItemUrl({item:i,state:n.getState()});(l?Promise.resolve():Ce(Qe({event:e,nextState:{isOpen:!1},props:t,query:a,refresh:r,store:n},o))).then((function(){c.onSelect(Qe({event:e,item:i,itemInputValue:a,itemUrl:l,refresh:r,source:c,state:n.getState()},o))}))}},u)}}}var Xe=[{segment:"autocomplete-core",version:"1.9.3"}];function Ye(e){return Ye="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},Ye(e)}function et(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function tt(e){for(var t=1;t=r?null===n?null:0:o}function it(e){return it="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},it(e)}function ct(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function lt(e){for(var t=1;te.length)&&(t=e.length);for(var r=0,n=new Array(t);r=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function xt(e){var t=e.translations,r=void 0===t?{}:t,n=kt(e,It),o=r.noResultsText,a=void 0===o?"No results for":o,i=r.suggestedQueryText,c=void 0===i?"Try searching for":i,l=r.reportMissingResultsText,u=void 0===l?"Believe this query should return results?":l,s=r.reportMissingResultsLinkText,f=void 0===s?"Let us know.":s,m=n.state.context.searchSuggestions;return ht.a.createElement("div",{className:"DocSearch-NoResults"},ht.a.createElement("div",{className:"DocSearch-Screen-Icon"},ht.a.createElement(Pt,null)),ht.a.createElement("p",{className:"DocSearch-Title"},a,' "',ht.a.createElement("strong",null,n.state.query),'"'),m&&m.length>0&&ht.a.createElement("div",{className:"DocSearch-NoResults-Prefill-List"},ht.a.createElement("p",{className:"DocSearch-Help"},c,":"),ht.a.createElement("ul",null,m.slice(0,3).reduce((function(e,t){return[].concat(Dt(e),[ht.a.createElement("li",{key:t},ht.a.createElement("button",{className:"DocSearch-Prefill",key:t,type:"button",onClick:function(){n.setQuery(t.toLowerCase()+" "),n.refresh(),n.inputRef.current.focus()}},t))])}),[]))),n.getMissingResultsUrl&&ht.a.createElement("p",{className:"DocSearch-Help"},"".concat(u," "),ht.a.createElement("a",{href:n.getMissingResultsUrl({query:n.state.query}),target:"_blank",rel:"noopener noreferrer"},f)))}var Ct=function(){return ht.a.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},ht.a.createElement("path",{d:"M17 6v12c0 .52-.2 1-1 1H4c-.7 0-1-.33-1-1V2c0-.55.42-1 1-1h8l5 5zM14 8h-3.13c-.51 0-.87-.34-.87-.87V4",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinejoin:"round"}))};function Nt(e){switch(e.type){case"lvl1":return ht.a.createElement(Ct,null);case"content":return ht.a.createElement(Tt,null);default:return ht.a.createElement(_t,null)}}function _t(){return ht.a.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},ht.a.createElement("path",{d:"M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}function Tt(){return ht.a.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},ht.a.createElement("path",{d:"M17 5H3h14zm0 5H3h14zm0 5H3h14z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinejoin:"round"}))}function qt(){return ht.a.createElement("svg",{className:"DocSearch-Hit-Select-Icon",width:"20",height:"20",viewBox:"0 0 20 20"},ht.a.createElement("g",{stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"},ht.a.createElement("path",{d:"M18 3v4c0 2-2 4-4 4H2"}),ht.a.createElement("path",{d:"M8 17l-6-6 6-6"})))}var Rt=["hit","attribute","tagName"];function Lt(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function Mt(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function Ut(e,t){return t.split(".").reduce((function(e,t){return null!=e&&e[t]?e[t]:null}),e)}function Bt(e){var t=e.hit,r=e.attribute,n=e.tagName,o=void 0===n?"span":n,a=Ft(e,Rt);return Object(yt.createElement)(o,Mt(Mt({},a),{},{dangerouslySetInnerHTML:{__html:Ut(t,"_snippetResult.".concat(r,".value"))||Ut(t,r)}}))}function Vt(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var n,o,a=[],i=!0,c=!1;try{for(r=r.call(e);!(i=(n=r.next()).done)&&(a.push(n.value),!t||a.length!==t);i=!0);}catch(l){c=!0,o=l}finally{try{i||null==r.return||r.return()}finally{if(c)throw o}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return Kt(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return Kt(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Kt(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r|<\/mark>)/g,Wt=RegExp(Qt.source);function Zt(e){var t,r,n=e;if(!n.__docsearch_parent&&!e._highlightResult)return e.hierarchy.lvl0;var o=((n.__docsearch_parent?null===(t=n.__docsearch_parent)||void 0===t||null===(t=t._highlightResult)||void 0===t||null===(t=t.hierarchy)||void 0===t?void 0:t.lvl0:null===(r=e._highlightResult)||void 0===r||null===(r=r.hierarchy)||void 0===r?void 0:r.lvl0)||{}).value;return o&&Wt.test(o)?o.replace(Qt,""):o}function Gt(){return Gt=Object.assign||function(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function ar(e){var t=e.translations,r=void 0===t?{}:t,n=or(e,rr),o=r.recentSearchesTitle,a=void 0===o?"Recent":o,i=r.noRecentSearchesText,c=void 0===i?"No recent searches":i,l=r.saveRecentSearchButtonTitle,u=void 0===l?"Save this search":l,s=r.removeRecentSearchButtonTitle,f=void 0===s?"Remove this search from history":s,m=r.favoriteSearchesTitle,p=void 0===m?"Favorite":m,v=r.removeFavoriteSearchButtonTitle,d=void 0===v?"Remove this search from favorites":v;return"idle"===n.state.status&&!1===n.hasCollections?n.disableUserPersonalization?null:ht.a.createElement("div",{className:"DocSearch-StartScreen"},ht.a.createElement("p",{className:"DocSearch-Help"},c)):!1===n.hasCollections?null:ht.a.createElement("div",{className:"DocSearch-Dropdown-Container"},ht.a.createElement(Jt,nr({},n,{title:a,collection:n.state.collections[0],renderIcon:function(){return ht.a.createElement("div",{className:"DocSearch-Hit-icon"},ht.a.createElement(Yt,null))},renderAction:function(e){var t=e.item,r=e.runFavoriteTransition,o=e.runDeleteTransition;return ht.a.createElement(ht.a.Fragment,null,ht.a.createElement("div",{className:"DocSearch-Hit-action"},ht.a.createElement("button",{className:"DocSearch-Hit-action-button",title:u,type:"submit",onClick:function(e){e.preventDefault(),e.stopPropagation(),r((function(){n.favoriteSearches.add(t),n.recentSearches.remove(t),n.refresh()}))}},ht.a.createElement(er,null))),ht.a.createElement("div",{className:"DocSearch-Hit-action"},ht.a.createElement("button",{className:"DocSearch-Hit-action-button",title:f,type:"submit",onClick:function(e){e.preventDefault(),e.stopPropagation(),o((function(){n.recentSearches.remove(t),n.refresh()}))}},ht.a.createElement(tr,null))))}})),ht.a.createElement(Jt,nr({},n,{title:p,collection:n.state.collections[1],renderIcon:function(){return ht.a.createElement("div",{className:"DocSearch-Hit-icon"},ht.a.createElement(er,null))},renderAction:function(e){var t=e.item,r=e.runDeleteTransition;return ht.a.createElement("div",{className:"DocSearch-Hit-action"},ht.a.createElement("button",{className:"DocSearch-Hit-action-button",title:d,type:"submit",onClick:function(e){e.preventDefault(),e.stopPropagation(),r((function(){n.favoriteSearches.remove(t),n.refresh()}))}},ht.a.createElement(tr,null)))}})))}var ir=["translations"];function cr(){return cr=Object.assign||function(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var ur=ht.a.memo((function(e){var t=e.translations,r=void 0===t?{}:t,n=lr(e,ir);if("error"===n.state.status)return ht.a.createElement(Et,{translations:null==r?void 0:r.errorScreen});var o=n.state.collections.some((function(e){return e.items.length>0}));return n.state.query?!1===o?ht.a.createElement(xt,cr({},n,{translations:null==r?void 0:r.noResultsScreen})):ht.a.createElement(Xt,n):ht.a.createElement(ar,cr({},n,{hasCollections:o,translations:null==r?void 0:r.startScreen}))}),(function(e,t){return"loading"===t.state.status||"stalled"===t.state.status}));function sr(){return ht.a.createElement("svg",{viewBox:"0 0 38 38",stroke:"currentColor",strokeOpacity:".5"},ht.a.createElement("g",{fill:"none",fillRule:"evenodd"},ht.a.createElement("g",{transform:"translate(1 1)",strokeWidth:"2"},ht.a.createElement("circle",{strokeOpacity:".3",cx:"18",cy:"18",r:"18"}),ht.a.createElement("path",{d:"M36 18c0-9.94-8.06-18-18-18"},ht.a.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"1s",repeatCount:"indefinite"})))))}var fr=r(658),mr=["translations"];function pr(){return pr=Object.assign||function(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function dr(e){var t=e.translations,r=void 0===t?{}:t,n=vr(e,mr),o=r.resetButtonTitle,a=void 0===o?"Clear the query":o,i=r.resetButtonAriaLabel,c=void 0===i?"Clear the query":i,l=r.cancelButtonText,u=void 0===l?"Cancel":l,s=r.cancelButtonAriaLabel,f=void 0===s?"Cancel":s,m=r.searchInputLabel,p=void 0===m?"Search":m,v=n.getFormProps({inputElement:n.inputRef.current}).onReset;return ht.a.useEffect((function(){n.autoFocus&&n.inputRef.current&&n.inputRef.current.focus()}),[n.autoFocus,n.inputRef]),ht.a.useEffect((function(){n.isFromSelection&&n.inputRef.current&&n.inputRef.current.select()}),[n.isFromSelection,n.inputRef]),ht.a.createElement(ht.a.Fragment,null,ht.a.createElement("form",{className:"DocSearch-Form",onSubmit:function(e){e.preventDefault()},onReset:v},ht.a.createElement("label",pr({className:"DocSearch-MagnifierLabel"},n.getLabelProps()),ht.a.createElement(fr.a,null),ht.a.createElement("span",{className:"DocSearch-VisuallyHiddenForAccessibility"},p)),ht.a.createElement("div",{className:"DocSearch-LoadingIndicator"},ht.a.createElement(sr,null)),ht.a.createElement("input",pr({className:"DocSearch-Input",ref:n.inputRef},n.getInputProps({inputElement:n.inputRef.current,autoFocus:n.autoFocus,maxLength:bt}))),ht.a.createElement("button",{type:"reset",title:a,className:"DocSearch-Reset","aria-label":c,hidden:!n.state.query},ht.a.createElement(tr,null))),ht.a.createElement("button",{className:"DocSearch-Cancel",type:"reset","aria-label":f,onClick:n.onClose},u))}var yr=["_highlightResult","_snippetResult"];function hr(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function br(e){return!1===function(){var e="__TEST_KEY__";try{return localStorage.setItem(e,""),localStorage.removeItem(e),!0}catch(t){return!1}}()?{setItem:function(){},getItem:function(){return[]}}:{setItem:function(t){return window.localStorage.setItem(e,JSON.stringify(t))},getItem:function(){var t=window.localStorage.getItem(e);return t?JSON.parse(t):[]}}}function gr(e){var t=e.key,r=e.limit,n=void 0===r?5:r,o=br(t),a=o.getItem().slice(0,n);return{add:function(e){var t=e,r=(t._highlightResult,t._snippetResult,hr(t,yr)),i=a.findIndex((function(e){return e.objectID===r.objectID}));i>-1&&a.splice(i,1),a.unshift(r),a=a.slice(0,n),o.setItem(a)},remove:function(e){a=a.filter((function(t){return t.objectID!==e.objectID})),o.setItem(a)},getAll:function(){return a}}}function Or(e){const t=`algoliasearch-client-js-${e.key}`;let r;const n=()=>(void 0===r&&(r=e.localStorage||window.localStorage),r),o=()=>JSON.parse(n().getItem(t)||"{}"),a=e=>{n().setItem(t,JSON.stringify(e))};return{get:(t,r,n={miss:()=>Promise.resolve()})=>Promise.resolve().then((()=>{(()=>{const t=e.timeToLive?1e3*e.timeToLive:null,r=o(),n=Object.fromEntries(Object.entries(r).filter((([,e])=>void 0!==e.timestamp)));if(a(n),!t)return;const i=Object.fromEntries(Object.entries(n).filter((([,e])=>{const r=(new Date).getTime();return!(e.timestamp+tPromise.all([e?e.value:r(),void 0!==e]))).then((([e,t])=>Promise.all([e,t||n.miss(e)]))).then((([e])=>e)),set:(e,r)=>Promise.resolve().then((()=>{const a=o();return a[JSON.stringify(e)]={timestamp:(new Date).getTime(),value:r},n().setItem(t,JSON.stringify(a)),r})),delete:e=>Promise.resolve().then((()=>{const r=o();delete r[JSON.stringify(e)],n().setItem(t,JSON.stringify(r))})),clear:()=>Promise.resolve().then((()=>{n().removeItem(t)}))}}function Sr(e){const t=[...e.caches],r=t.shift();return void 0===r?{get:(e,t,r={miss:()=>Promise.resolve()})=>t().then((e=>Promise.all([e,r.miss(e)]))).then((([e])=>e)),set:(e,t)=>Promise.resolve(t),delete:e=>Promise.resolve(),clear:()=>Promise.resolve()}:{get:(e,n,o={miss:()=>Promise.resolve()})=>r.get(e,n,o).catch((()=>Sr({caches:t}).get(e,n,o))),set:(e,n)=>r.set(e,n).catch((()=>Sr({caches:t}).set(e,n))),delete:e=>r.delete(e).catch((()=>Sr({caches:t}).delete(e))),clear:()=>r.clear().catch((()=>Sr({caches:t}).clear()))}}function jr(e={serializable:!0}){let t={};return{get(r,n,o={miss:()=>Promise.resolve()}){const a=JSON.stringify(r);if(a in t)return Promise.resolve(e.serializable?JSON.parse(t[a]):t[a]);const i=n(),c=o&&o.miss||(()=>Promise.resolve());return i.then((e=>c(e))).then((()=>i))},set:(r,n)=>(t[JSON.stringify(r)]=e.serializable?JSON.stringify(n):n,Promise.resolve(n)),delete:e=>(delete t[JSON.stringify(e)],Promise.resolve()),clear:()=>(t={},Promise.resolve())}}function wr(e){let t=e.length-1;for(;t>0;t--){const r=Math.floor(Math.random()*(t+1)),n=e[t];e[t]=e[r],e[r]=n}return e}function Er(e,t){return t?(Object.keys(t).forEach((r=>{e[r]=t[r](e)})),e):e}function Pr(e,...t){let r=0;return e.replace(/%s/g,(()=>encodeURIComponent(t[r++])))}const Ir="4.23.2",Dr={WithinQueryParameters:0,WithinHeaders:1};function Ar(e,t){const r=e||{},n=r.data||{};return Object.keys(r).forEach((e=>{-1===["timeout","headers","queryParameters","data","cacheable"].indexOf(e)&&(n[e]=r[e])})),{data:Object.entries(n).length>0?n:void 0,timeout:r.timeout||t,headers:r.headers||{},queryParameters:r.queryParameters||{},cacheable:r.cacheable}}const kr={Read:1,Write:2,Any:3},xr={Up:1,Down:2,Timeouted:3},Cr=12e4;function Nr(e,t=xr.Up){return{...e,status:t,lastUpdate:Date.now()}}function _r(e){return"string"==typeof e?{protocol:"https",url:e,accept:kr.Any}:{protocol:e.protocol||"https",url:e.url,accept:e.accept||kr.Any}}const Tr={Delete:"DELETE",Get:"GET",Post:"POST",Put:"PUT"};function qr(e,t){return Promise.all(t.map((t=>e.get(t,(()=>Promise.resolve(Nr(t))))))).then((e=>{const r=e.filter((e=>function(e){return e.status===xr.Up||Date.now()-e.lastUpdate>Cr}(e))),n=e.filter((e=>function(e){return e.status===xr.Timeouted&&Date.now()-e.lastUpdate<=Cr}(e))),o=[...r,...n];return{getTimeout:(e,t)=>(0===n.length&&0===e?1:n.length+3+e)*t,statelessHosts:o.length>0?o.map((e=>_r(e))):t}}))}const Rr=(e,t)=>(e=>{const t=e.status;return e.isTimedOut||(({isTimedOut:e,status:t})=>!e&&!~~t)(e)||2!=~~(t/100)&&4!=~~(t/100)})(e)?t.onRetry(e):(({status:e})=>2==~~(e/100))(e)?t.onSuccess(e):t.onFail(e);function Lr(e,t,r,n){const o=[],a=function(e,t){if(e.method===Tr.Get||void 0===e.data&&void 0===t.data)return;const r=Array.isArray(e.data)?e.data:{...e.data,...t.data};return JSON.stringify(r)}(r,n),i=function(e,t){const r={...e.headers,...t.headers},n={};return Object.keys(r).forEach((e=>{const t=r[e];n[e.toLowerCase()]=t})),n}(e,n),c=r.method,l=r.method!==Tr.Get?{}:{...r.data,...n.data},u={"x-algolia-agent":e.userAgent.value,...e.queryParameters,...l,...n.queryParameters};let s=0;const f=(t,l)=>{const m=t.pop();if(void 0===m)throw{name:"RetryError",message:"Unreachable hosts - your application id may be incorrect. If the error persists, contact support@algolia.com.",transporterStackTrace:Ur(o)};const p={data:a,headers:i,method:c,url:Hr(m,r.path,u),connectTimeout:l(s,e.timeouts.connect),responseTimeout:l(s,n.timeout)},v=e=>{const r={request:p,response:e,host:m,triesLeft:t.length};return o.push(r),r},d={onSuccess:e=>function(e){try{return JSON.parse(e.content)}catch(t){throw function(e,t){return{name:"DeserializationError",message:e,response:t}}(t.message,e)}}(e),onRetry(r){const n=v(r);return r.isTimedOut&&s++,Promise.all([e.logger.info("Retryable failure",Br(n)),e.hostsCache.set(m,Nr(m,r.isTimedOut?xr.Timeouted:xr.Down))]).then((()=>f(t,l)))},onFail(e){throw v(e),function({content:e,status:t},r){let n=e;try{n=JSON.parse(e).message}catch(o){}return function(e,t,r){return{name:"ApiError",message:e,status:t,transporterStackTrace:r}}(n,t,r)}(e,Ur(o))}};return e.requester.send(p).then((e=>Rr(e,d)))};return qr(e.hostsCache,t).then((e=>f([...e.statelessHosts].reverse(),e.getTimeout)))}function Mr(e){const t={value:`Algolia for JavaScript (${e})`,add(e){const r=`; ${e.segment}${void 0!==e.version?` (${e.version})`:""}`;return-1===t.value.indexOf(r)&&(t.value=`${t.value}${r}`),t}};return t}function Hr(e,t,r){const n=Fr(r);let o=`${e.protocol}://${e.url}/${"/"===t.charAt(0)?t.substr(1):t}`;return n.length&&(o+=`?${n}`),o}function Fr(e){return Object.keys(e).map((t=>{return Pr("%s=%s",t,(r=e[t],"[object Object]"===Object.prototype.toString.call(r)||"[object Array]"===Object.prototype.toString.call(r)?JSON.stringify(e[t]):e[t]));var r})).join("&")}function Ur(e){return e.map((e=>Br(e)))}function Br(e){const t=e.request.headers["x-algolia-api-key"]?{"x-algolia-api-key":"*****"}:{};return{...e,request:{...e.request,headers:{...e.request.headers,...t}}}}const Vr=e=>{const t=e.appId,r=function(e,t,r){const n={"x-algolia-api-key":r,"x-algolia-application-id":t};return{headers:()=>e===Dr.WithinHeaders?n:{},queryParameters:()=>e===Dr.WithinQueryParameters?n:{}}}(void 0!==e.authMode?e.authMode:Dr.WithinHeaders,t,e.apiKey),n=function(e){const{hostsCache:t,logger:r,requester:n,requestsCache:o,responsesCache:a,timeouts:i,userAgent:c,hosts:l,queryParameters:u,headers:s}=e,f={hostsCache:t,logger:r,requester:n,requestsCache:o,responsesCache:a,timeouts:i,userAgent:c,headers:s,queryParameters:u,hosts:l.map((e=>_r(e))),read(e,t){const r=Ar(t,f.timeouts.read),n=()=>Lr(f,f.hosts.filter((e=>!!(e.accept&kr.Read))),e,r);if(!0!==(void 0!==r.cacheable?r.cacheable:e.cacheable))return n();const o={request:e,mappedRequestOptions:r,transporter:{queryParameters:f.queryParameters,headers:f.headers}};return f.responsesCache.get(o,(()=>f.requestsCache.get(o,(()=>f.requestsCache.set(o,n()).then((e=>Promise.all([f.requestsCache.delete(o),e])),(e=>Promise.all([f.requestsCache.delete(o),Promise.reject(e)]))).then((([e,t])=>t))))),{miss:e=>f.responsesCache.set(o,e)})},write:(e,t)=>Lr(f,f.hosts.filter((e=>!!(e.accept&kr.Write))),e,Ar(t,f.timeouts.write))};return f}({hosts:[{url:`${t}-dsn.algolia.net`,accept:kr.Read},{url:`${t}.algolia.net`,accept:kr.Write}].concat(wr([{url:`${t}-1.algolianet.com`},{url:`${t}-2.algolianet.com`},{url:`${t}-3.algolianet.com`}])),...e,headers:{...r.headers(),"content-type":"application/x-www-form-urlencoded",...e.headers},queryParameters:{...r.queryParameters(),...e.queryParameters}}),o={transporter:n,appId:t,addAlgoliaAgent(e,t){n.userAgent.add({segment:e,version:t})},clearCache:()=>Promise.all([n.requestsCache.clear(),n.responsesCache.clear()]).then((()=>{}))};return Er(o,e.methods)},Kr=e=>(t,r)=>t.method===Tr.Get?e.transporter.read(t,r):e.transporter.write(t,r),$r=e=>(t,r={})=>Er({transporter:e.transporter,appId:e.appId,indexName:t},r.methods),Jr=e=>(t,r)=>{const n=t.map((e=>({...e,params:Fr(e.params||{})})));return e.transporter.read({method:Tr.Post,path:"1/indexes/*/queries",data:{requests:n},cacheable:!0},r)},zr=e=>(t,r)=>Promise.all(t.map((t=>{const{facetName:n,facetQuery:o,...a}=t.params;return $r(e)(t.indexName,{methods:{searchForFacetValues:Zr}}).searchForFacetValues(n,o,{...r,...a})}))),Qr=e=>(t,r,n)=>e.transporter.read({method:Tr.Post,path:Pr("1/answers/%s/prediction",e.indexName),data:{query:t,queryLanguages:r},cacheable:!0},n),Wr=e=>(t,r)=>e.transporter.read({method:Tr.Post,path:Pr("1/indexes/%s/query",e.indexName),data:{query:t},cacheable:!0},r),Zr=e=>(t,r,n)=>e.transporter.read({method:Tr.Post,path:Pr("1/indexes/%s/facets/%s/query",e.indexName,t),data:{facetQuery:r},cacheable:!0},n),Gr={Debug:1,Info:2,Error:3};const Xr=e=>(t,r)=>{const n=t.map((e=>({...e,threshold:e.threshold||0})));return e.transporter.read({method:Tr.Post,path:"1/indexes/*/recommendations",data:{requests:n},cacheable:!0},r)};function Yr(e,t,r){const n={appId:e,apiKey:t,timeouts:{connect:1,read:2,write:30},requester:{send:e=>new Promise((t=>{const r=new XMLHttpRequest;r.open(e.method,e.url,!0),Object.keys(e.headers).forEach((t=>r.setRequestHeader(t,e.headers[t])));const n=(e,n)=>setTimeout((()=>{r.abort(),t({status:0,content:n,isTimedOut:!0})}),1e3*e),o=n(e.connectTimeout,"Connection timeout");let a;r.onreadystatechange=()=>{r.readyState>r.OPENED&&void 0===a&&(clearTimeout(o),a=n(e.responseTimeout,"Socket timeout"))},r.onerror=()=>{0===r.status&&(clearTimeout(o),clearTimeout(a),t({content:r.responseText||"Network request failed",status:r.status,isTimedOut:!1}))},r.onload=()=>{clearTimeout(o),clearTimeout(a),t({content:r.responseText,status:r.status,isTimedOut:!1})},r.send(e.data)}))},logger:(o=Gr.Error,{debug:(e,t)=>(Gr.Debug>=o&&console.debug(e,t),Promise.resolve()),info:(e,t)=>(Gr.Info>=o&&console.info(e,t),Promise.resolve()),error:(e,t)=>(console.error(e,t),Promise.resolve())}),responsesCache:jr(),requestsCache:jr({serializable:!1}),hostsCache:Sr({caches:[Or({key:`${Ir}-${e}`}),jr()]}),userAgent:Mr(Ir).add({segment:"Browser",version:"lite"}),authMode:Dr.WithinQueryParameters};var o;return Vr({...n,...r,methods:{search:Jr,searchForFacetValues:zr,multipleQueries:Jr,multipleSearchForFacetValues:zr,customRequest:Kr,initIndex:e=>t=>$r(e)(t,{methods:{search:Wr,searchForFacetValues:Zr,findAnswers:Qr}}),getRecommendations:Xr}})}Yr.version=Ir;var en=Yr,tn="3.6.0";function rn(){}function nn(e){return e}function on(e){return 1===e.button||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey}function an(e,t,r){return e.reduce((function(e,n){var o=t(n);return e.hasOwnProperty(o)||(e[o]=[]),e[o].length<(r||5)&&e[o].push(n),e}),{})}var cn=["footer","searchBox"];function ln(){return ln=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var r=0,n=new Array(t);r=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function dn(e){var t=e.appId,r=e.apiKey,n=e.indexName,o=e.placeholder,a=void 0===o?"Search docs":o,i=e.searchParameters,c=e.maxResultsPerGroup,l=e.onClose,u=void 0===l?rn:l,s=e.transformItems,f=void 0===s?nn:s,m=e.hitComponent,p=void 0===m?jt:m,v=e.resultsFooterComponent,d=void 0===v?function(){return null}:v,y=e.navigator,h=e.initialScrollY,b=void 0===h?0:h,g=e.transformSearchClient,O=void 0===g?nn:g,S=e.disableUserPersonalization,j=void 0!==S&&S,w=e.initialQuery,E=void 0===w?"":w,P=e.translations,I=void 0===P?{}:P,D=e.getMissingResultsUrl,A=e.insights,k=void 0!==A&&A,x=I.footer,C=I.searchBox,N=vn(I,cn),_=mn(ht.a.useState({query:"",collections:[],completion:null,context:{},isOpen:!1,activeItemId:null,status:"idle"}),2),T=_[0],q=_[1],R=ht.a.useRef(null),L=ht.a.useRef(null),M=ht.a.useRef(null),H=ht.a.useRef(null),F=ht.a.useRef(null),U=ht.a.useRef(10),B=ht.a.useRef("undefined"!=typeof window?window.getSelection().toString().slice(0,bt):"").current,V=ht.a.useRef(E||B).current,K=function(e,t,r){return ht.a.useMemo((function(){var n=en(e,t);return n.addAlgoliaAgent("docsearch",tn),!1===/docsearch.js \(.*\)/.test(n.transporter.userAgent.value)&&n.addAlgoliaAgent("docsearch-react",tn),r(n)}),[e,t,r])}(t,r,O),$=ht.a.useRef(gr({key:"__DOCSEARCH_FAVORITE_SEARCHES__".concat(n),limit:10})).current,J=ht.a.useRef(gr({key:"__DOCSEARCH_RECENT_SEARCHES__".concat(n),limit:0===$.getAll().length?7:4})).current,z=ht.a.useCallback((function(e){if(!j){var t="content"===e.type?e.__docsearch_parent:e;t&&-1===$.getAll().findIndex((function(e){return e.objectID===t.objectID}))&&J.add(t)}}),[$,J,j]),Q=ht.a.useCallback((function(e){if(T.context.algoliaInsightsPlugin&&e.__autocomplete_id){var t=e,r={eventName:"Item Selected",index:t.__autocomplete_indexName,items:[t],positions:[e.__autocomplete_id],queryID:t.__autocomplete_queryID};T.context.algoliaInsightsPlugin.insights.clickedObjectIDsAfterSearch(r)}}),[T.context.algoliaInsightsPlugin]),W=ht.a.useMemo((function(){return dt({id:"docsearch",defaultActiveItemId:0,placeholder:a,openOnFocus:!0,initialState:{query:V,context:{searchSuggestions:[]}},insights:k,navigator:y,onStateChange:function(e){q(e.state)},getSources:function(e){var o=e.query,a=e.state,l=e.setContext,s=e.setStatus;if(!o)return j?[]:[{sourceId:"recentSearches",onSelect:function(e){var t=e.item,r=e.event;z(t),on(r)||u()},getItemUrl:function(e){return e.item.url},getItems:function(){return J.getAll()}},{sourceId:"favoriteSearches",onSelect:function(e){var t=e.item,r=e.event;z(t),on(r)||u()},getItemUrl:function(e){return e.item.url},getItems:function(){return $.getAll()}}];var m=Boolean(k);return K.search([{query:o,indexName:n,params:sn({attributesToRetrieve:["hierarchy.lvl0","hierarchy.lvl1","hierarchy.lvl2","hierarchy.lvl3","hierarchy.lvl4","hierarchy.lvl5","hierarchy.lvl6","content","type","url"],attributesToSnippet:["hierarchy.lvl1:".concat(U.current),"hierarchy.lvl2:".concat(U.current),"hierarchy.lvl3:".concat(U.current),"hierarchy.lvl4:".concat(U.current),"hierarchy.lvl5:".concat(U.current),"hierarchy.lvl6:".concat(U.current),"content:".concat(U.current)],snippetEllipsisText:"\u2026",highlightPreTag:"",highlightPostTag:"",hitsPerPage:20,clickAnalytics:m},i)}]).catch((function(e){throw"RetryError"===e.name&&s("error"),e})).then((function(e){var o=e.results[0],i=o.hits,s=o.nbHits,p=an(i,(function(e){return Zt(e)}),c);a.context.searchSuggestions.length0&&(X(),F.current&&F.current.focus())}),[V,X]),ht.a.useEffect((function(){function e(){if(L.current){var e=.01*window.innerHeight;L.current.style.setProperty("--docsearch-vh","".concat(e,"px"))}}return e(),window.addEventListener("resize",e),function(){window.removeEventListener("resize",e)}}),[]),ht.a.createElement("div",ln({ref:R},G({"aria-expanded":!0}),{className:["DocSearch","DocSearch-Container","stalled"===T.status&&"DocSearch-Container--Stalled","error"===T.status&&"DocSearch-Container--Errored"].filter(Boolean).join(" "),role:"button",tabIndex:0,onMouseDown:function(e){e.target===e.currentTarget&&u()}}),ht.a.createElement("div",{className:"DocSearch-Modal",ref:L},ht.a.createElement("header",{className:"DocSearch-SearchBar",ref:M},ht.a.createElement(dr,ln({},W,{state:T,autoFocus:0===V.length,inputRef:F,isFromSelection:Boolean(V)&&V===B,translations:C,onClose:u}))),ht.a.createElement("div",{className:"DocSearch-Dropdown",ref:H},ht.a.createElement(ur,ln({},W,{indexName:n,state:T,hitComponent:p,resultsFooterComponent:d,disableUserPersonalization:j,recentSearches:J,favoriteSearches:$,inputRef:F,translations:N,getMissingResultsUrl:D,onItemClick:function(e,t){Q(e),z(e),on(t)||u()}}))),ht.a.createElement("footer",{className:"DocSearch-Footer"},ht.a.createElement(St,{translations:x}))))}}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[555],{760:function(e,t,r){"use strict";function n(e,t){var r=void 0;return function(){for(var n=arguments.length,o=new Array(n),a=0;ae.length)&&(t=e.length);for(var r=0,n=new Array(t);re.length)&&(t=e.length);for(var r=0,n=new Array(t);r=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function y(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function h(e){for(var t=1;t=3||2===r&&n>=4||1===r&&n>=10);function a(t,r,n){if(o&&void 0!==n){var a=n[0].__autocomplete_algoliaCredentials,i={"X-Algolia-Application-Id":a.appId,"X-Algolia-API-Key":a.apiKey};e.apply(void 0,[t].concat(p(r),[{headers:i}]))}else e.apply(void 0,[t].concat(p(r)))}return{init:function(t,r){e("init",{appId:t,apiKey:r})},setUserToken:function(t){e("setUserToken",t)},clickedObjectIDsAfterSearch:function(){for(var e=arguments.length,t=new Array(e),r=0;r0&&a("clickedObjectIDsAfterSearch",g(t),t[0].items)},clickedObjectIDs:function(){for(var e=arguments.length,t=new Array(e),r=0;r0&&a("clickedObjectIDs",g(t),t[0].items)},clickedFilters:function(){for(var t=arguments.length,r=new Array(t),n=0;n0&&e.apply(void 0,["clickedFilters"].concat(r))},convertedObjectIDsAfterSearch:function(){for(var e=arguments.length,t=new Array(e),r=0;r0&&a("convertedObjectIDsAfterSearch",g(t),t[0].items)},convertedObjectIDs:function(){for(var e=arguments.length,t=new Array(e),r=0;r0&&a("convertedObjectIDs",g(t),t[0].items)},convertedFilters:function(){for(var t=arguments.length,r=new Array(t),n=0;n0&&e.apply(void 0,["convertedFilters"].concat(r))},viewedObjectIDs:function(){for(var e=arguments.length,t=new Array(e),r=0;r0&&t.reduce((function(e,t){var r=t.items,n=d(t,f);return[].concat(p(e),p(function(e){for(var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:20,r=[],n=0;n0&&e.apply(void 0,["viewedFilters"].concat(r))}}}function S(e){var t=e.items.reduce((function(e,t){var r;return e[t.__autocomplete_indexName]=(null!==(r=e[t.__autocomplete_indexName])&&void 0!==r?r:[]).concat(t),e}),{});return Object.keys(t).map((function(e){return{index:e,items:t[e],algoliaSource:["autocomplete"]}}))}function j(e){return e.objectID&&e.__autocomplete_indexName&&e.__autocomplete_queryID}function w(e){return w="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},w(e)}function E(e){return function(e){if(Array.isArray(e))return P(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return P(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return P(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function P(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r0&&C({onItemsChange:o,items:r,insights:f,state:t}))}}),0);return{name:"aa.algoliaInsightsPlugin",subscribe:function(e){var t=e.setContext,r=e.onSelect,n=e.onActive;s("addAlgoliaAgent","insights-plugin"),t({algoliaInsightsPlugin:{__algoliaSearchParameters:{clickAnalytics:!0},insights:f}}),r((function(e){var t=e.item,r=e.state,n=e.event;j(t)&&l({state:r,event:n,insights:f,item:t,insightsEvents:[D({eventName:"Item Selected"},c({item:t,items:m.current}))]})})),n((function(e){var t=e.item,r=e.state,n=e.event;j(t)&&u({state:r,event:n,insights:f,item:t,insightsEvents:[D({eventName:"Item Active"},c({item:t,items:m.current}))]})}))},onStateChange:function(e){var t=e.state;p({state:t})},__autocomplete_pluginOptions:e}}function _(e){return _="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},_(e)}function T(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function q(e,t,r){return(t=function(e){var t=function(e,t){if("object"!==_(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==_(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"===_(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function R(e,t,r){var n,o=t.initialState;return{getState:function(){return o},dispatch:function(n,a){var i=function(e){for(var t=1;te.length)&&(t=e.length);for(var r=0,n=new Array(t);r0},reshape:function(e){return e.sources}},e),{},{id:null!==(r=e.id)&&void 0!==r?r:"autocomplete-".concat(V++),plugins:o,initialState:X({activeItemId:null,query:"",completion:null,collections:[],isOpen:!1,status:"idle",context:{}},e.initialState),onStateChange:function(t){var r;null===(r=e.onStateChange)||void 0===r||r.call(e,t),o.forEach((function(e){var r;return null===(r=e.onStateChange)||void 0===r?void 0:r.call(e,t)}))},onSubmit:function(t){var r;null===(r=e.onSubmit)||void 0===r||r.call(e,t),o.forEach((function(e){var r;return null===(r=e.onSubmit)||void 0===r?void 0:r.call(e,t)}))},onReset:function(t){var r;null===(r=e.onReset)||void 0===r||r.call(e,t),o.forEach((function(e){var r;return null===(r=e.onReset)||void 0===r?void 0:r.call(e,t)}))},getSources:function(r){return Promise.all([].concat(W(o.map((function(e){return e.getSources}))),[e.getSources]).filter(Boolean).map((function(e){return function(e,t){var r=[];return Promise.resolve(e(t)).then((function(e){return Array.isArray(e),Promise.all(e.filter((function(e){return Boolean(e)})).map((function(e){if(e.sourceId,r.includes(e.sourceId))throw new Error("[Autocomplete] The `sourceId` ".concat(JSON.stringify(e.sourceId)," is not unique."));r.push(e.sourceId);var t={getItemInputValue:function(e){return e.state.query},getItemUrl:function(){},onSelect:function(e){(0,e.setIsOpen)(!1)},onActive:i,onResolve:i};Object.keys(t).forEach((function(e){t[e].__default=!0}));var n=$($({},t),e);return Promise.resolve(n)})))}))}(e,r)}))).then((function(e){return L(e)})).then((function(e){return e.map((function(e){return X(X({},e),{},{onSelect:function(r){e.onSelect(r),t.forEach((function(e){var t;return null===(t=e.onSelect)||void 0===t?void 0:t.call(e,r)}))},onActive:function(r){e.onActive(r),t.forEach((function(e){var t;return null===(t=e.onActive)||void 0===t?void 0:t.call(e,r)}))},onResolve:function(r){e.onResolve(r),t.forEach((function(e){var t;return null===(t=e.onResolve)||void 0===t?void 0:t.call(e,r)}))}})}))}))},navigator:X({navigate:function(e){var t=e.itemUrl;n.location.assign(t)},navigateNewTab:function(e){var t=e.itemUrl,r=n.open(t,"_blank","noopener");null==r||r.focus()},navigateNewWindow:function(e){var t=e.itemUrl;n.open(t,"_blank","noopener")}},e.navigator)})}function te(e){return te="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},te(e)}function re(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function ne(e){for(var t=1;te.length)&&(t=e.length);for(var r=0,n=new Array(t);r=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var Ie,De,Ae,ke=null,xe=(Ie=-1,De=-1,Ae=void 0,function(e){var t=++Ie;return Promise.resolve(e).then((function(e){return Ae&&t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var Me=/((gt|sm)-|galaxy nexus)|samsung[- ]|samsungbrowser/i;function He(e){return He="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},He(e)}var Fe=["props","refresh","store"],Ue=["inputElement","formElement","panelElement"],Be=["inputElement"],Ve=["inputElement","maxLength"],Ke=["sourceIndex"],$e=["sourceIndex"],Je=["item","source","sourceIndex"];function ze(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function Qe(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function Ge(e){var t=e.props,r=e.refresh,n=e.store,o=Ze(e,Fe),a=function(e,t){return void 0!==t?"".concat(e,"-").concat(t):e};return{getEnvironmentProps:function(e){var r=e.inputElement,o=e.formElement,a=e.panelElement;function i(e){!n.getState().isOpen&&n.pendingRequests.isEmpty()||e.target===r||!1===[o,a].some((function(t){return r=t,n=e.target,r===n||r.contains(n);var r,n}))&&(n.dispatch("blur",null),t.debug||n.pendingRequests.cancelAll())}return Qe({onTouchStart:i,onMouseDown:i,onTouchMove:function(e){!1!==n.getState().isOpen&&r===t.environment.document.activeElement&&e.target!==r&&r.blur()}},Ze(e,Ue))},getRootProps:function(e){return Qe({role:"combobox","aria-expanded":n.getState().isOpen,"aria-haspopup":"listbox","aria-owns":n.getState().isOpen?"".concat(t.id,"-list"):void 0,"aria-labelledby":"".concat(t.id,"-label")},e)},getFormProps:function(e){e.inputElement;return Qe({action:"",noValidate:!0,role:"search",onSubmit:function(a){var i;a.preventDefault(),t.onSubmit(Qe({event:a,refresh:r,state:n.getState()},o)),n.dispatch("submit",null),null===(i=e.inputElement)||void 0===i||i.blur()},onReset:function(a){var i;a.preventDefault(),t.onReset(Qe({event:a,refresh:r,state:n.getState()},o)),n.dispatch("reset",null),null===(i=e.inputElement)||void 0===i||i.focus()}},Ze(e,Be))},getLabelProps:function(e){var r=e||{},n=r.sourceIndex,o=Ze(r,Ke);return Qe({htmlFor:"".concat(a(t.id,n),"-input"),id:"".concat(a(t.id,n),"-label")},o)},getInputProps:function(e){var a;function c(e){(t.openOnFocus||Boolean(n.getState().query))&&Ce(Qe({event:e,props:t,query:n.getState().completion||n.getState().query,refresh:r,store:n},o)),n.dispatch("focus",null)}var l=e||{},u=(l.inputElement,l.maxLength),s=void 0===u?512:u,f=Ze(l,Ve),m=ge(n.getState()),p=function(e){return Boolean(e&&e.match(Me))}((null===(a=t.environment.navigator)||void 0===a?void 0:a.userAgent)||""),v=null!=m&&m.itemUrl&&!p?"go":"search";return Qe({"aria-autocomplete":"both","aria-activedescendant":n.getState().isOpen&&null!==n.getState().activeItemId?"".concat(t.id,"-item-").concat(n.getState().activeItemId):void 0,"aria-controls":n.getState().isOpen?"".concat(t.id,"-list"):void 0,"aria-labelledby":"".concat(t.id,"-label"),value:n.getState().completion||n.getState().query,id:"".concat(t.id,"-input"),autoComplete:"off",autoCorrect:"off",autoCapitalize:"off",enterKeyHint:v,spellCheck:"false",autoFocus:t.autoFocus,placeholder:t.placeholder,maxLength:s,type:"search",onChange:function(e){Ce(Qe({event:e,props:t,query:e.currentTarget.value.slice(0,s),refresh:r,store:n},o))},onKeyDown:function(e){!function(e){var t=e.event,r=e.props,n=e.refresh,o=e.store,a=Le(e,_e);if("ArrowUp"===t.key||"ArrowDown"===t.key){var i=function(){var e=r.environment.document.getElementById("".concat(r.id,"-item-").concat(o.getState().activeItemId));e&&(e.scrollIntoViewIfNeeded?e.scrollIntoViewIfNeeded(!1):e.scrollIntoView(!1))},c=function(){var e=ge(o.getState());if(null!==o.getState().activeItemId&&e){var r=e.item,i=e.itemInputValue,c=e.itemUrl,l=e.source;l.onActive(qe({event:t,item:r,itemInputValue:i,itemUrl:c,refresh:n,source:l,state:o.getState()},a))}};t.preventDefault(),!1===o.getState().isOpen&&(r.openOnFocus||Boolean(o.getState().query))?Ce(qe({event:t,props:r,query:o.getState().query,refresh:n,store:o},a)).then((function(){o.dispatch(t.key,{nextActiveItemId:r.defaultActiveItemId}),c(),setTimeout(i,0)})):(o.dispatch(t.key,{}),c(),i())}else if("Escape"===t.key)t.preventDefault(),o.dispatch(t.key,null),o.pendingRequests.cancelAll();else if("Tab"===t.key)o.dispatch("blur",null),o.pendingRequests.cancelAll();else if("Enter"===t.key){if(null===o.getState().activeItemId||o.getState().collections.every((function(e){return 0===e.items.length})))return void(r.debug||o.pendingRequests.cancelAll());t.preventDefault();var l=ge(o.getState()),u=l.item,s=l.itemInputValue,f=l.itemUrl,m=l.source;if(t.metaKey||t.ctrlKey)void 0!==f&&(m.onSelect(qe({event:t,item:u,itemInputValue:s,itemUrl:f,refresh:n,source:m,state:o.getState()},a)),r.navigator.navigateNewTab({itemUrl:f,item:u,state:o.getState()}));else if(t.shiftKey)void 0!==f&&(m.onSelect(qe({event:t,item:u,itemInputValue:s,itemUrl:f,refresh:n,source:m,state:o.getState()},a)),r.navigator.navigateNewWindow({itemUrl:f,item:u,state:o.getState()}));else if(t.altKey);else{if(void 0!==f)return m.onSelect(qe({event:t,item:u,itemInputValue:s,itemUrl:f,refresh:n,source:m,state:o.getState()},a)),void r.navigator.navigate({itemUrl:f,item:u,state:o.getState()});Ce(qe({event:t,nextState:{isOpen:!1},props:r,query:s,refresh:n,store:o},a)).then((function(){m.onSelect(qe({event:t,item:u,itemInputValue:s,itemUrl:f,refresh:n,source:m,state:o.getState()},a))}))}}}(Qe({event:e,props:t,refresh:r,store:n},o))},onFocus:c,onBlur:i,onClick:function(r){e.inputElement!==t.environment.document.activeElement||n.getState().isOpen||c(r)}},f)},getPanelProps:function(e){return Qe({onMouseDown:function(e){e.preventDefault()},onMouseLeave:function(){n.dispatch("mouseleave",null)}},e)},getListProps:function(e){var r=e||{},n=r.sourceIndex,o=Ze(r,$e);return Qe({role:"listbox","aria-labelledby":"".concat(a(t.id,n),"-label"),id:"".concat(a(t.id,n),"-list")},o)},getItemProps:function(e){var i=e.item,c=e.source,l=e.sourceIndex,u=Ze(e,Je);return Qe({id:"".concat(a(t.id,l),"-item-").concat(i.__autocomplete_id),role:"option","aria-selected":n.getState().activeItemId===i.__autocomplete_id,onMouseMove:function(e){if(i.__autocomplete_id!==n.getState().activeItemId){n.dispatch("mousemove",i.__autocomplete_id);var t=ge(n.getState());if(null!==n.getState().activeItemId&&t){var a=t.item,c=t.itemInputValue,l=t.itemUrl,u=t.source;u.onActive(Qe({event:e,item:a,itemInputValue:c,itemUrl:l,refresh:r,source:u,state:n.getState()},o))}}},onMouseDown:function(e){e.preventDefault()},onClick:function(e){var a=c.getItemInputValue({item:i,state:n.getState()}),l=c.getItemUrl({item:i,state:n.getState()});(l?Promise.resolve():Ce(Qe({event:e,nextState:{isOpen:!1},props:t,query:a,refresh:r,store:n},o))).then((function(){c.onSelect(Qe({event:e,item:i,itemInputValue:a,itemUrl:l,refresh:r,source:c,state:n.getState()},o))}))}},u)}}}var Xe=[{segment:"autocomplete-core",version:"1.9.3"}];function Ye(e){return Ye="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},Ye(e)}function et(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function tt(e){for(var t=1;t=r?null===n?null:0:o}function it(e){return it="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},it(e)}function ct(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function lt(e){for(var t=1;te.length)&&(t=e.length);for(var r=0,n=new Array(t);r=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function xt(e){var t=e.translations,r=void 0===t?{}:t,n=kt(e,It),o=r.noResultsText,a=void 0===o?"No results for":o,i=r.suggestedQueryText,c=void 0===i?"Try searching for":i,l=r.reportMissingResultsText,u=void 0===l?"Believe this query should return results?":l,s=r.reportMissingResultsLinkText,f=void 0===s?"Let us know.":s,m=n.state.context.searchSuggestions;return ht.a.createElement("div",{className:"DocSearch-NoResults"},ht.a.createElement("div",{className:"DocSearch-Screen-Icon"},ht.a.createElement(Pt,null)),ht.a.createElement("p",{className:"DocSearch-Title"},a,' "',ht.a.createElement("strong",null,n.state.query),'"'),m&&m.length>0&&ht.a.createElement("div",{className:"DocSearch-NoResults-Prefill-List"},ht.a.createElement("p",{className:"DocSearch-Help"},c,":"),ht.a.createElement("ul",null,m.slice(0,3).reduce((function(e,t){return[].concat(Dt(e),[ht.a.createElement("li",{key:t},ht.a.createElement("button",{className:"DocSearch-Prefill",key:t,type:"button",onClick:function(){n.setQuery(t.toLowerCase()+" "),n.refresh(),n.inputRef.current.focus()}},t))])}),[]))),n.getMissingResultsUrl&&ht.a.createElement("p",{className:"DocSearch-Help"},"".concat(u," "),ht.a.createElement("a",{href:n.getMissingResultsUrl({query:n.state.query}),target:"_blank",rel:"noopener noreferrer"},f)))}var Ct=function(){return ht.a.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},ht.a.createElement("path",{d:"M17 6v12c0 .52-.2 1-1 1H4c-.7 0-1-.33-1-1V2c0-.55.42-1 1-1h8l5 5zM14 8h-3.13c-.51 0-.87-.34-.87-.87V4",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinejoin:"round"}))};function Nt(e){switch(e.type){case"lvl1":return ht.a.createElement(Ct,null);case"content":return ht.a.createElement(Tt,null);default:return ht.a.createElement(_t,null)}}function _t(){return ht.a.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},ht.a.createElement("path",{d:"M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}function Tt(){return ht.a.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},ht.a.createElement("path",{d:"M17 5H3h14zm0 5H3h14zm0 5H3h14z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinejoin:"round"}))}function qt(){return ht.a.createElement("svg",{className:"DocSearch-Hit-Select-Icon",width:"20",height:"20",viewBox:"0 0 20 20"},ht.a.createElement("g",{stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"},ht.a.createElement("path",{d:"M18 3v4c0 2-2 4-4 4H2"}),ht.a.createElement("path",{d:"M8 17l-6-6 6-6"})))}var Rt=["hit","attribute","tagName"];function Lt(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function Mt(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function Ut(e,t){return t.split(".").reduce((function(e,t){return null!=e&&e[t]?e[t]:null}),e)}function Bt(e){var t=e.hit,r=e.attribute,n=e.tagName,o=void 0===n?"span":n,a=Ft(e,Rt);return Object(yt.createElement)(o,Mt(Mt({},a),{},{dangerouslySetInnerHTML:{__html:Ut(t,"_snippetResult.".concat(r,".value"))||Ut(t,r)}}))}function Vt(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var n,o,a=[],i=!0,c=!1;try{for(r=r.call(e);!(i=(n=r.next()).done)&&(a.push(n.value),!t||a.length!==t);i=!0);}catch(l){c=!0,o=l}finally{try{i||null==r.return||r.return()}finally{if(c)throw o}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return Kt(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return Kt(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Kt(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r|<\/mark>)/g,Wt=RegExp(Qt.source);function Zt(e){var t,r,n=e;if(!n.__docsearch_parent&&!e._highlightResult)return e.hierarchy.lvl0;var o=((n.__docsearch_parent?null===(t=n.__docsearch_parent)||void 0===t||null===(t=t._highlightResult)||void 0===t||null===(t=t.hierarchy)||void 0===t?void 0:t.lvl0:null===(r=e._highlightResult)||void 0===r||null===(r=r.hierarchy)||void 0===r?void 0:r.lvl0)||{}).value;return o&&Wt.test(o)?o.replace(Qt,""):o}function Gt(){return Gt=Object.assign||function(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function ar(e){var t=e.translations,r=void 0===t?{}:t,n=or(e,rr),o=r.recentSearchesTitle,a=void 0===o?"Recent":o,i=r.noRecentSearchesText,c=void 0===i?"No recent searches":i,l=r.saveRecentSearchButtonTitle,u=void 0===l?"Save this search":l,s=r.removeRecentSearchButtonTitle,f=void 0===s?"Remove this search from history":s,m=r.favoriteSearchesTitle,p=void 0===m?"Favorite":m,v=r.removeFavoriteSearchButtonTitle,d=void 0===v?"Remove this search from favorites":v;return"idle"===n.state.status&&!1===n.hasCollections?n.disableUserPersonalization?null:ht.a.createElement("div",{className:"DocSearch-StartScreen"},ht.a.createElement("p",{className:"DocSearch-Help"},c)):!1===n.hasCollections?null:ht.a.createElement("div",{className:"DocSearch-Dropdown-Container"},ht.a.createElement(Jt,nr({},n,{title:a,collection:n.state.collections[0],renderIcon:function(){return ht.a.createElement("div",{className:"DocSearch-Hit-icon"},ht.a.createElement(Yt,null))},renderAction:function(e){var t=e.item,r=e.runFavoriteTransition,o=e.runDeleteTransition;return ht.a.createElement(ht.a.Fragment,null,ht.a.createElement("div",{className:"DocSearch-Hit-action"},ht.a.createElement("button",{className:"DocSearch-Hit-action-button",title:u,type:"submit",onClick:function(e){e.preventDefault(),e.stopPropagation(),r((function(){n.favoriteSearches.add(t),n.recentSearches.remove(t),n.refresh()}))}},ht.a.createElement(er,null))),ht.a.createElement("div",{className:"DocSearch-Hit-action"},ht.a.createElement("button",{className:"DocSearch-Hit-action-button",title:f,type:"submit",onClick:function(e){e.preventDefault(),e.stopPropagation(),o((function(){n.recentSearches.remove(t),n.refresh()}))}},ht.a.createElement(tr,null))))}})),ht.a.createElement(Jt,nr({},n,{title:p,collection:n.state.collections[1],renderIcon:function(){return ht.a.createElement("div",{className:"DocSearch-Hit-icon"},ht.a.createElement(er,null))},renderAction:function(e){var t=e.item,r=e.runDeleteTransition;return ht.a.createElement("div",{className:"DocSearch-Hit-action"},ht.a.createElement("button",{className:"DocSearch-Hit-action-button",title:d,type:"submit",onClick:function(e){e.preventDefault(),e.stopPropagation(),r((function(){n.favoriteSearches.remove(t),n.refresh()}))}},ht.a.createElement(tr,null)))}})))}var ir=["translations"];function cr(){return cr=Object.assign||function(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var ur=ht.a.memo((function(e){var t=e.translations,r=void 0===t?{}:t,n=lr(e,ir);if("error"===n.state.status)return ht.a.createElement(Et,{translations:null==r?void 0:r.errorScreen});var o=n.state.collections.some((function(e){return e.items.length>0}));return n.state.query?!1===o?ht.a.createElement(xt,cr({},n,{translations:null==r?void 0:r.noResultsScreen})):ht.a.createElement(Xt,n):ht.a.createElement(ar,cr({},n,{hasCollections:o,translations:null==r?void 0:r.startScreen}))}),(function(e,t){return"loading"===t.state.status||"stalled"===t.state.status}));function sr(){return ht.a.createElement("svg",{viewBox:"0 0 38 38",stroke:"currentColor",strokeOpacity:".5"},ht.a.createElement("g",{fill:"none",fillRule:"evenodd"},ht.a.createElement("g",{transform:"translate(1 1)",strokeWidth:"2"},ht.a.createElement("circle",{strokeOpacity:".3",cx:"18",cy:"18",r:"18"}),ht.a.createElement("path",{d:"M36 18c0-9.94-8.06-18-18-18"},ht.a.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"1s",repeatCount:"indefinite"})))))}var fr=r(658),mr=["translations"];function pr(){return pr=Object.assign||function(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function dr(e){var t=e.translations,r=void 0===t?{}:t,n=vr(e,mr),o=r.resetButtonTitle,a=void 0===o?"Clear the query":o,i=r.resetButtonAriaLabel,c=void 0===i?"Clear the query":i,l=r.cancelButtonText,u=void 0===l?"Cancel":l,s=r.cancelButtonAriaLabel,f=void 0===s?"Cancel":s,m=r.searchInputLabel,p=void 0===m?"Search":m,v=n.getFormProps({inputElement:n.inputRef.current}).onReset;return ht.a.useEffect((function(){n.autoFocus&&n.inputRef.current&&n.inputRef.current.focus()}),[n.autoFocus,n.inputRef]),ht.a.useEffect((function(){n.isFromSelection&&n.inputRef.current&&n.inputRef.current.select()}),[n.isFromSelection,n.inputRef]),ht.a.createElement(ht.a.Fragment,null,ht.a.createElement("form",{className:"DocSearch-Form",onSubmit:function(e){e.preventDefault()},onReset:v},ht.a.createElement("label",pr({className:"DocSearch-MagnifierLabel"},n.getLabelProps()),ht.a.createElement(fr.a,null),ht.a.createElement("span",{className:"DocSearch-VisuallyHiddenForAccessibility"},p)),ht.a.createElement("div",{className:"DocSearch-LoadingIndicator"},ht.a.createElement(sr,null)),ht.a.createElement("input",pr({className:"DocSearch-Input",ref:n.inputRef},n.getInputProps({inputElement:n.inputRef.current,autoFocus:n.autoFocus,maxLength:bt}))),ht.a.createElement("button",{type:"reset",title:a,className:"DocSearch-Reset","aria-label":c,hidden:!n.state.query},ht.a.createElement(tr,null))),ht.a.createElement("button",{className:"DocSearch-Cancel",type:"reset","aria-label":f,onClick:n.onClose},u))}var yr=["_highlightResult","_snippetResult"];function hr(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function br(e){return!1===function(){var e="__TEST_KEY__";try{return localStorage.setItem(e,""),localStorage.removeItem(e),!0}catch(t){return!1}}()?{setItem:function(){},getItem:function(){return[]}}:{setItem:function(t){return window.localStorage.setItem(e,JSON.stringify(t))},getItem:function(){var t=window.localStorage.getItem(e);return t?JSON.parse(t):[]}}}function gr(e){var t=e.key,r=e.limit,n=void 0===r?5:r,o=br(t),a=o.getItem().slice(0,n);return{add:function(e){var t=e,r=(t._highlightResult,t._snippetResult,hr(t,yr)),i=a.findIndex((function(e){return e.objectID===r.objectID}));i>-1&&a.splice(i,1),a.unshift(r),a=a.slice(0,n),o.setItem(a)},remove:function(e){a=a.filter((function(t){return t.objectID!==e.objectID})),o.setItem(a)},getAll:function(){return a}}}function Or(e){const t=`algoliasearch-client-js-${e.key}`;let r;const n=()=>(void 0===r&&(r=e.localStorage||window.localStorage),r),o=()=>JSON.parse(n().getItem(t)||"{}"),a=e=>{n().setItem(t,JSON.stringify(e))};return{get:(t,r,n={miss:()=>Promise.resolve()})=>Promise.resolve().then((()=>{(()=>{const t=e.timeToLive?1e3*e.timeToLive:null,r=o(),n=Object.fromEntries(Object.entries(r).filter((([,e])=>void 0!==e.timestamp)));if(a(n),!t)return;const i=Object.fromEntries(Object.entries(n).filter((([,e])=>{const r=(new Date).getTime();return!(e.timestamp+tPromise.all([e?e.value:r(),void 0!==e]))).then((([e,t])=>Promise.all([e,t||n.miss(e)]))).then((([e])=>e)),set:(e,r)=>Promise.resolve().then((()=>{const a=o();return a[JSON.stringify(e)]={timestamp:(new Date).getTime(),value:r},n().setItem(t,JSON.stringify(a)),r})),delete:e=>Promise.resolve().then((()=>{const r=o();delete r[JSON.stringify(e)],n().setItem(t,JSON.stringify(r))})),clear:()=>Promise.resolve().then((()=>{n().removeItem(t)}))}}function Sr(e){const t=[...e.caches],r=t.shift();return void 0===r?{get:(e,t,r={miss:()=>Promise.resolve()})=>t().then((e=>Promise.all([e,r.miss(e)]))).then((([e])=>e)),set:(e,t)=>Promise.resolve(t),delete:e=>Promise.resolve(),clear:()=>Promise.resolve()}:{get:(e,n,o={miss:()=>Promise.resolve()})=>r.get(e,n,o).catch((()=>Sr({caches:t}).get(e,n,o))),set:(e,n)=>r.set(e,n).catch((()=>Sr({caches:t}).set(e,n))),delete:e=>r.delete(e).catch((()=>Sr({caches:t}).delete(e))),clear:()=>r.clear().catch((()=>Sr({caches:t}).clear()))}}function jr(e={serializable:!0}){let t={};return{get(r,n,o={miss:()=>Promise.resolve()}){const a=JSON.stringify(r);if(a in t)return Promise.resolve(e.serializable?JSON.parse(t[a]):t[a]);const i=n(),c=o&&o.miss||(()=>Promise.resolve());return i.then((e=>c(e))).then((()=>i))},set:(r,n)=>(t[JSON.stringify(r)]=e.serializable?JSON.stringify(n):n,Promise.resolve(n)),delete:e=>(delete t[JSON.stringify(e)],Promise.resolve()),clear:()=>(t={},Promise.resolve())}}function wr(e){let t=e.length-1;for(;t>0;t--){const r=Math.floor(Math.random()*(t+1)),n=e[t];e[t]=e[r],e[r]=n}return e}function Er(e,t){return t?(Object.keys(t).forEach((r=>{e[r]=t[r](e)})),e):e}function Pr(e,...t){let r=0;return e.replace(/%s/g,(()=>encodeURIComponent(t[r++])))}const Ir="4.23.2",Dr={WithinQueryParameters:0,WithinHeaders:1};function Ar(e,t){const r=e||{},n=r.data||{};return Object.keys(r).forEach((e=>{-1===["timeout","headers","queryParameters","data","cacheable"].indexOf(e)&&(n[e]=r[e])})),{data:Object.entries(n).length>0?n:void 0,timeout:r.timeout||t,headers:r.headers||{},queryParameters:r.queryParameters||{},cacheable:r.cacheable}}const kr={Read:1,Write:2,Any:3},xr={Up:1,Down:2,Timeouted:3},Cr=12e4;function Nr(e,t=xr.Up){return{...e,status:t,lastUpdate:Date.now()}}function _r(e){return"string"==typeof e?{protocol:"https",url:e,accept:kr.Any}:{protocol:e.protocol||"https",url:e.url,accept:e.accept||kr.Any}}const Tr={Delete:"DELETE",Get:"GET",Post:"POST",Put:"PUT"};function qr(e,t){return Promise.all(t.map((t=>e.get(t,(()=>Promise.resolve(Nr(t))))))).then((e=>{const r=e.filter((e=>function(e){return e.status===xr.Up||Date.now()-e.lastUpdate>Cr}(e))),n=e.filter((e=>function(e){return e.status===xr.Timeouted&&Date.now()-e.lastUpdate<=Cr}(e))),o=[...r,...n];return{getTimeout:(e,t)=>(0===n.length&&0===e?1:n.length+3+e)*t,statelessHosts:o.length>0?o.map((e=>_r(e))):t}}))}const Rr=(e,t)=>(e=>{const t=e.status;return e.isTimedOut||(({isTimedOut:e,status:t})=>!e&&!~~t)(e)||2!=~~(t/100)&&4!=~~(t/100)})(e)?t.onRetry(e):(({status:e})=>2==~~(e/100))(e)?t.onSuccess(e):t.onFail(e);function Lr(e,t,r,n){const o=[],a=function(e,t){if(e.method===Tr.Get||void 0===e.data&&void 0===t.data)return;const r=Array.isArray(e.data)?e.data:{...e.data,...t.data};return JSON.stringify(r)}(r,n),i=function(e,t){const r={...e.headers,...t.headers},n={};return Object.keys(r).forEach((e=>{const t=r[e];n[e.toLowerCase()]=t})),n}(e,n),c=r.method,l=r.method!==Tr.Get?{}:{...r.data,...n.data},u={"x-algolia-agent":e.userAgent.value,...e.queryParameters,...l,...n.queryParameters};let s=0;const f=(t,l)=>{const m=t.pop();if(void 0===m)throw{name:"RetryError",message:"Unreachable hosts - your application id may be incorrect. If the error persists, contact support@algolia.com.",transporterStackTrace:Ur(o)};const p={data:a,headers:i,method:c,url:Hr(m,r.path,u),connectTimeout:l(s,e.timeouts.connect),responseTimeout:l(s,n.timeout)},v=e=>{const r={request:p,response:e,host:m,triesLeft:t.length};return o.push(r),r},d={onSuccess:e=>function(e){try{return JSON.parse(e.content)}catch(t){throw function(e,t){return{name:"DeserializationError",message:e,response:t}}(t.message,e)}}(e),onRetry(r){const n=v(r);return r.isTimedOut&&s++,Promise.all([e.logger.info("Retryable failure",Br(n)),e.hostsCache.set(m,Nr(m,r.isTimedOut?xr.Timeouted:xr.Down))]).then((()=>f(t,l)))},onFail(e){throw v(e),function({content:e,status:t},r){let n=e;try{n=JSON.parse(e).message}catch(o){}return function(e,t,r){return{name:"ApiError",message:e,status:t,transporterStackTrace:r}}(n,t,r)}(e,Ur(o))}};return e.requester.send(p).then((e=>Rr(e,d)))};return qr(e.hostsCache,t).then((e=>f([...e.statelessHosts].reverse(),e.getTimeout)))}function Mr(e){const t={value:`Algolia for JavaScript (${e})`,add(e){const r=`; ${e.segment}${void 0!==e.version?` (${e.version})`:""}`;return-1===t.value.indexOf(r)&&(t.value=`${t.value}${r}`),t}};return t}function Hr(e,t,r){const n=Fr(r);let o=`${e.protocol}://${e.url}/${"/"===t.charAt(0)?t.substr(1):t}`;return n.length&&(o+=`?${n}`),o}function Fr(e){return Object.keys(e).map((t=>{return Pr("%s=%s",t,(r=e[t],"[object Object]"===Object.prototype.toString.call(r)||"[object Array]"===Object.prototype.toString.call(r)?JSON.stringify(e[t]):e[t]));var r})).join("&")}function Ur(e){return e.map((e=>Br(e)))}function Br(e){const t=e.request.headers["x-algolia-api-key"]?{"x-algolia-api-key":"*****"}:{};return{...e,request:{...e.request,headers:{...e.request.headers,...t}}}}const Vr=e=>{const t=e.appId,r=function(e,t,r){const n={"x-algolia-api-key":r,"x-algolia-application-id":t};return{headers:()=>e===Dr.WithinHeaders?n:{},queryParameters:()=>e===Dr.WithinQueryParameters?n:{}}}(void 0!==e.authMode?e.authMode:Dr.WithinHeaders,t,e.apiKey),n=function(e){const{hostsCache:t,logger:r,requester:n,requestsCache:o,responsesCache:a,timeouts:i,userAgent:c,hosts:l,queryParameters:u,headers:s}=e,f={hostsCache:t,logger:r,requester:n,requestsCache:o,responsesCache:a,timeouts:i,userAgent:c,headers:s,queryParameters:u,hosts:l.map((e=>_r(e))),read(e,t){const r=Ar(t,f.timeouts.read),n=()=>Lr(f,f.hosts.filter((e=>!!(e.accept&kr.Read))),e,r);if(!0!==(void 0!==r.cacheable?r.cacheable:e.cacheable))return n();const o={request:e,mappedRequestOptions:r,transporter:{queryParameters:f.queryParameters,headers:f.headers}};return f.responsesCache.get(o,(()=>f.requestsCache.get(o,(()=>f.requestsCache.set(o,n()).then((e=>Promise.all([f.requestsCache.delete(o),e])),(e=>Promise.all([f.requestsCache.delete(o),Promise.reject(e)]))).then((([e,t])=>t))))),{miss:e=>f.responsesCache.set(o,e)})},write:(e,t)=>Lr(f,f.hosts.filter((e=>!!(e.accept&kr.Write))),e,Ar(t,f.timeouts.write))};return f}({hosts:[{url:`${t}-dsn.algolia.net`,accept:kr.Read},{url:`${t}.algolia.net`,accept:kr.Write}].concat(wr([{url:`${t}-1.algolianet.com`},{url:`${t}-2.algolianet.com`},{url:`${t}-3.algolianet.com`}])),...e,headers:{...r.headers(),"content-type":"application/x-www-form-urlencoded",...e.headers},queryParameters:{...r.queryParameters(),...e.queryParameters}}),o={transporter:n,appId:t,addAlgoliaAgent(e,t){n.userAgent.add({segment:e,version:t})},clearCache:()=>Promise.all([n.requestsCache.clear(),n.responsesCache.clear()]).then((()=>{}))};return Er(o,e.methods)},Kr=e=>(t,r)=>t.method===Tr.Get?e.transporter.read(t,r):e.transporter.write(t,r),$r=e=>(t,r={})=>Er({transporter:e.transporter,appId:e.appId,indexName:t},r.methods),Jr=e=>(t,r)=>{const n=t.map((e=>({...e,params:Fr(e.params||{})})));return e.transporter.read({method:Tr.Post,path:"1/indexes/*/queries",data:{requests:n},cacheable:!0},r)},zr=e=>(t,r)=>Promise.all(t.map((t=>{const{facetName:n,facetQuery:o,...a}=t.params;return $r(e)(t.indexName,{methods:{searchForFacetValues:Zr}}).searchForFacetValues(n,o,{...r,...a})}))),Qr=e=>(t,r,n)=>e.transporter.read({method:Tr.Post,path:Pr("1/answers/%s/prediction",e.indexName),data:{query:t,queryLanguages:r},cacheable:!0},n),Wr=e=>(t,r)=>e.transporter.read({method:Tr.Post,path:Pr("1/indexes/%s/query",e.indexName),data:{query:t},cacheable:!0},r),Zr=e=>(t,r,n)=>e.transporter.read({method:Tr.Post,path:Pr("1/indexes/%s/facets/%s/query",e.indexName,t),data:{facetQuery:r},cacheable:!0},n),Gr={Debug:1,Info:2,Error:3};const Xr=e=>(t,r)=>{const n=t.map((e=>({...e,threshold:e.threshold||0})));return e.transporter.read({method:Tr.Post,path:"1/indexes/*/recommendations",data:{requests:n},cacheable:!0},r)};function Yr(e,t,r){const n={appId:e,apiKey:t,timeouts:{connect:1,read:2,write:30},requester:{send:e=>new Promise((t=>{const r=new XMLHttpRequest;r.open(e.method,e.url,!0),Object.keys(e.headers).forEach((t=>r.setRequestHeader(t,e.headers[t])));const n=(e,n)=>setTimeout((()=>{r.abort(),t({status:0,content:n,isTimedOut:!0})}),1e3*e),o=n(e.connectTimeout,"Connection timeout");let a;r.onreadystatechange=()=>{r.readyState>r.OPENED&&void 0===a&&(clearTimeout(o),a=n(e.responseTimeout,"Socket timeout"))},r.onerror=()=>{0===r.status&&(clearTimeout(o),clearTimeout(a),t({content:r.responseText||"Network request failed",status:r.status,isTimedOut:!1}))},r.onload=()=>{clearTimeout(o),clearTimeout(a),t({content:r.responseText,status:r.status,isTimedOut:!1})},r.send(e.data)}))},logger:(o=Gr.Error,{debug:(e,t)=>(Gr.Debug>=o&&console.debug(e,t),Promise.resolve()),info:(e,t)=>(Gr.Info>=o&&console.info(e,t),Promise.resolve()),error:(e,t)=>(console.error(e,t),Promise.resolve())}),responsesCache:jr(),requestsCache:jr({serializable:!1}),hostsCache:Sr({caches:[Or({key:`${Ir}-${e}`}),jr()]}),userAgent:Mr(Ir).add({segment:"Browser",version:"lite"}),authMode:Dr.WithinQueryParameters};var o;return Vr({...n,...r,methods:{search:Jr,searchForFacetValues:zr,multipleQueries:Jr,multipleSearchForFacetValues:zr,customRequest:Kr,initIndex:e=>t=>$r(e)(t,{methods:{search:Wr,searchForFacetValues:Zr,findAnswers:Qr}}),getRecommendations:Xr}})}Yr.version=Ir;var en=Yr,tn="3.6.0";function rn(){}function nn(e){return e}function on(e){return 1===e.button||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey}function an(e,t,r){return e.reduce((function(e,n){var o=t(n);return e.hasOwnProperty(o)||(e[o]=[]),e[o].length<(r||5)&&e[o].push(n),e}),{})}var cn=["footer","searchBox"];function ln(){return ln=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var r=0,n=new Array(t);r=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function dn(e){var t=e.appId,r=e.apiKey,n=e.indexName,o=e.placeholder,a=void 0===o?"Search docs":o,i=e.searchParameters,c=e.maxResultsPerGroup,l=e.onClose,u=void 0===l?rn:l,s=e.transformItems,f=void 0===s?nn:s,m=e.hitComponent,p=void 0===m?jt:m,v=e.resultsFooterComponent,d=void 0===v?function(){return null}:v,y=e.navigator,h=e.initialScrollY,b=void 0===h?0:h,g=e.transformSearchClient,O=void 0===g?nn:g,S=e.disableUserPersonalization,j=void 0!==S&&S,w=e.initialQuery,E=void 0===w?"":w,P=e.translations,I=void 0===P?{}:P,D=e.getMissingResultsUrl,A=e.insights,k=void 0!==A&&A,x=I.footer,C=I.searchBox,N=vn(I,cn),_=mn(ht.a.useState({query:"",collections:[],completion:null,context:{},isOpen:!1,activeItemId:null,status:"idle"}),2),T=_[0],q=_[1],R=ht.a.useRef(null),L=ht.a.useRef(null),M=ht.a.useRef(null),H=ht.a.useRef(null),F=ht.a.useRef(null),U=ht.a.useRef(10),B=ht.a.useRef("undefined"!=typeof window?window.getSelection().toString().slice(0,bt):"").current,V=ht.a.useRef(E||B).current,K=function(e,t,r){return ht.a.useMemo((function(){var n=en(e,t);return n.addAlgoliaAgent("docsearch",tn),!1===/docsearch.js \(.*\)/.test(n.transporter.userAgent.value)&&n.addAlgoliaAgent("docsearch-react",tn),r(n)}),[e,t,r])}(t,r,O),$=ht.a.useRef(gr({key:"__DOCSEARCH_FAVORITE_SEARCHES__".concat(n),limit:10})).current,J=ht.a.useRef(gr({key:"__DOCSEARCH_RECENT_SEARCHES__".concat(n),limit:0===$.getAll().length?7:4})).current,z=ht.a.useCallback((function(e){if(!j){var t="content"===e.type?e.__docsearch_parent:e;t&&-1===$.getAll().findIndex((function(e){return e.objectID===t.objectID}))&&J.add(t)}}),[$,J,j]),Q=ht.a.useCallback((function(e){if(T.context.algoliaInsightsPlugin&&e.__autocomplete_id){var t=e,r={eventName:"Item Selected",index:t.__autocomplete_indexName,items:[t],positions:[e.__autocomplete_id],queryID:t.__autocomplete_queryID};T.context.algoliaInsightsPlugin.insights.clickedObjectIDsAfterSearch(r)}}),[T.context.algoliaInsightsPlugin]),W=ht.a.useMemo((function(){return dt({id:"docsearch",defaultActiveItemId:0,placeholder:a,openOnFocus:!0,initialState:{query:V,context:{searchSuggestions:[]}},insights:k,navigator:y,onStateChange:function(e){q(e.state)},getSources:function(e){var o=e.query,a=e.state,l=e.setContext,s=e.setStatus;if(!o)return j?[]:[{sourceId:"recentSearches",onSelect:function(e){var t=e.item,r=e.event;z(t),on(r)||u()},getItemUrl:function(e){return e.item.url},getItems:function(){return J.getAll()}},{sourceId:"favoriteSearches",onSelect:function(e){var t=e.item,r=e.event;z(t),on(r)||u()},getItemUrl:function(e){return e.item.url},getItems:function(){return $.getAll()}}];var m=Boolean(k);return K.search([{query:o,indexName:n,params:sn({attributesToRetrieve:["hierarchy.lvl0","hierarchy.lvl1","hierarchy.lvl2","hierarchy.lvl3","hierarchy.lvl4","hierarchy.lvl5","hierarchy.lvl6","content","type","url"],attributesToSnippet:["hierarchy.lvl1:".concat(U.current),"hierarchy.lvl2:".concat(U.current),"hierarchy.lvl3:".concat(U.current),"hierarchy.lvl4:".concat(U.current),"hierarchy.lvl5:".concat(U.current),"hierarchy.lvl6:".concat(U.current),"content:".concat(U.current)],snippetEllipsisText:"\u2026",highlightPreTag:"",highlightPostTag:"",hitsPerPage:20,clickAnalytics:m},i)}]).catch((function(e){throw"RetryError"===e.name&&s("error"),e})).then((function(e){var o=e.results[0],i=o.hits,s=o.nbHits,p=an(i,(function(e){return Zt(e)}),c);a.context.searchSuggestions.length0&&(X(),F.current&&F.current.focus())}),[V,X]),ht.a.useEffect((function(){function e(){if(L.current){var e=.01*window.innerHeight;L.current.style.setProperty("--docsearch-vh","".concat(e,"px"))}}return e(),window.addEventListener("resize",e),function(){window.removeEventListener("resize",e)}}),[]),ht.a.createElement("div",ln({ref:R},G({"aria-expanded":!0}),{className:["DocSearch","DocSearch-Container","stalled"===T.status&&"DocSearch-Container--Stalled","error"===T.status&&"DocSearch-Container--Errored"].filter(Boolean).join(" "),role:"button",tabIndex:0,onMouseDown:function(e){e.target===e.currentTarget&&u()}}),ht.a.createElement("div",{className:"DocSearch-Modal",ref:L},ht.a.createElement("header",{className:"DocSearch-SearchBar",ref:M},ht.a.createElement(dr,ln({},W,{state:T,autoFocus:0===V.length,inputRef:F,isFromSelection:Boolean(V)&&V===B,translations:C,onClose:u}))),ht.a.createElement("div",{className:"DocSearch-Dropdown",ref:H},ht.a.createElement(ur,ln({},W,{indexName:n,state:T,hitComponent:p,resultsFooterComponent:d,disableUserPersonalization:j,recentSearches:J,favoriteSearches:$,inputRef:F,translations:N,getMissingResultsUrl:D,onItemClick:function(e,t){Q(e),z(e),on(t)||u()}}))),ht.a.createElement("footer",{className:"DocSearch-Footer"},ht.a.createElement(St,{translations:x}))))}}}]); \ No newline at end of file diff --git a/assets/js/555388fc.de22ae58.js b/assets/js/555388fc.379e5d88.js similarity index 100% rename from assets/js/555388fc.de22ae58.js rename to assets/js/555388fc.379e5d88.js diff --git a/assets/js/556.c2638744.js b/assets/js/556.5747ef57.js similarity index 69% rename from assets/js/556.c2638744.js rename to assets/js/556.5747ef57.js index f4d7132dd7..d327609e2a 100644 --- a/assets/js/556.c2638744.js +++ b/assets/js/556.5747ef57.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[556],{758:function(n,i,o){"use strict";o.r(i);var r=o(56);for(var t in r)["default"].indexOf(t)<0&&function(n){o.d(i,n,(function(){return r[n]}))}(t)}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[556],{759:function(n,i,o){"use strict";o.r(i);var r=o(56);for(var t in r)["default"].indexOf(t)<0&&function(n){o.d(i,n,(function(){return r[n]}))}(t)}}]); \ No newline at end of file diff --git a/assets/js/55671c81.342c953d.js b/assets/js/55671c81.aec30f40.js similarity index 100% rename from assets/js/55671c81.342c953d.js rename to assets/js/55671c81.aec30f40.js diff --git a/assets/js/557.3872bb03.js b/assets/js/557.52add286.js similarity index 100% rename from assets/js/557.3872bb03.js rename to assets/js/557.52add286.js diff --git a/assets/js/5591dbb5.2f523020.js b/assets/js/5591dbb5.020b6b7b.js similarity index 100% rename from assets/js/5591dbb5.2f523020.js rename to assets/js/5591dbb5.020b6b7b.js diff --git a/assets/js/55c5045f.8fed1c4c.js b/assets/js/55c5045f.66e94a0c.js similarity index 100% rename from assets/js/55c5045f.8fed1c4c.js rename to assets/js/55c5045f.66e94a0c.js diff --git a/assets/js/55f40575.86c80aa2.js b/assets/js/55f40575.023f2f49.js similarity index 100% rename from assets/js/55f40575.86c80aa2.js rename to assets/js/55f40575.023f2f49.js diff --git a/assets/js/56845d16.05bbd907.js b/assets/js/56845d16.2246d8b2.js similarity index 100% rename from assets/js/56845d16.05bbd907.js rename to assets/js/56845d16.2246d8b2.js diff --git a/assets/js/570f2039.6d9f0f47.js b/assets/js/570f2039.88ac683d.js similarity index 100% rename from assets/js/570f2039.6d9f0f47.js rename to assets/js/570f2039.88ac683d.js diff --git a/assets/js/57a388cd.7d29dbdb.js b/assets/js/57a388cd.28d38832.js similarity index 100% rename from assets/js/57a388cd.7d29dbdb.js rename to assets/js/57a388cd.28d38832.js diff --git a/assets/js/581e4720.06ac8154.js b/assets/js/581e4720.ee0f9795.js similarity index 100% rename from assets/js/581e4720.06ac8154.js rename to assets/js/581e4720.ee0f9795.js diff --git a/assets/js/596f251d.cd17ab85.js b/assets/js/596f251d.2b69db12.js similarity index 100% rename from assets/js/596f251d.cd17ab85.js rename to assets/js/596f251d.2b69db12.js diff --git a/assets/js/59f5955d.d8b4a180.js b/assets/js/59f5955d.193d1d8e.js similarity index 100% rename from assets/js/59f5955d.d8b4a180.js rename to assets/js/59f5955d.193d1d8e.js diff --git a/assets/js/5ad5f28b.bba960ab.js b/assets/js/5ad5f28b.1f350f59.js similarity index 100% rename from assets/js/5ad5f28b.bba960ab.js rename to assets/js/5ad5f28b.1f350f59.js diff --git a/assets/js/5aeb685e.bce7b293.js b/assets/js/5aeb685e.6cdbdb38.js similarity index 100% rename from assets/js/5aeb685e.bce7b293.js rename to assets/js/5aeb685e.6cdbdb38.js diff --git a/assets/js/5b706e4b.86b0a8ec.js b/assets/js/5b706e4b.77af6e17.js similarity index 100% rename from assets/js/5b706e4b.86b0a8ec.js rename to assets/js/5b706e4b.77af6e17.js diff --git a/assets/js/5c07861d.679898ba.js b/assets/js/5c07861d.104a4c5a.js similarity index 100% rename from assets/js/5c07861d.679898ba.js rename to assets/js/5c07861d.104a4c5a.js diff --git a/assets/js/5cdb87ed.9a8b1042.js b/assets/js/5cdb87ed.1b5b92d8.js similarity index 100% rename from assets/js/5cdb87ed.9a8b1042.js rename to assets/js/5cdb87ed.1b5b92d8.js diff --git a/assets/js/5db053d3.c6745162.js b/assets/js/5db053d3.d8389302.js similarity index 100% rename from assets/js/5db053d3.c6745162.js rename to assets/js/5db053d3.d8389302.js diff --git a/assets/js/5e36bea9.621d32f1.js b/assets/js/5e36bea9.493fa341.js similarity index 100% rename from assets/js/5e36bea9.621d32f1.js rename to assets/js/5e36bea9.493fa341.js diff --git a/assets/js/5e716ae9.296f58c4.js b/assets/js/5e716ae9.ff8ebc4f.js similarity index 100% rename from assets/js/5e716ae9.296f58c4.js rename to assets/js/5e716ae9.ff8ebc4f.js diff --git a/assets/js/5ebcd5d2.f553750f.js b/assets/js/5ebcd5d2.f3722759.js similarity index 100% rename from assets/js/5ebcd5d2.f553750f.js rename to assets/js/5ebcd5d2.f3722759.js diff --git a/assets/js/5f1a894f.05ac2c2d.js b/assets/js/5f1a894f.aab441c3.js similarity index 100% rename from assets/js/5f1a894f.05ac2c2d.js rename to assets/js/5f1a894f.aab441c3.js diff --git a/assets/js/5f57d2d2.f033d7b3.js b/assets/js/5f57d2d2.4d6aa1cd.js similarity index 100% rename from assets/js/5f57d2d2.f033d7b3.js rename to assets/js/5f57d2d2.4d6aa1cd.js diff --git a/assets/js/5f8b000f.5f94ac4c.js b/assets/js/5f8b000f.eb86b4a1.js similarity index 100% rename from assets/js/5f8b000f.5f94ac4c.js rename to assets/js/5f8b000f.eb86b4a1.js diff --git a/assets/js/5f9a6bc5.4f02e714.js b/assets/js/5f9a6bc5.9183bf34.js similarity index 100% rename from assets/js/5f9a6bc5.4f02e714.js rename to assets/js/5f9a6bc5.9183bf34.js diff --git a/assets/js/60cae097.65ee2ae2.js b/assets/js/60cae097.5de96afa.js similarity index 100% rename from assets/js/60cae097.65ee2ae2.js rename to assets/js/60cae097.5de96afa.js diff --git a/assets/js/60e856fd.aef69c42.js b/assets/js/60e856fd.9d279486.js similarity index 100% rename from assets/js/60e856fd.aef69c42.js rename to assets/js/60e856fd.9d279486.js diff --git a/assets/js/614d5726.c3ae4983.js b/assets/js/614d5726.3b7d79bd.js similarity index 100% rename from assets/js/614d5726.c3ae4983.js rename to assets/js/614d5726.3b7d79bd.js diff --git a/assets/js/61a162a2.aa41f5a3.js b/assets/js/61a162a2.b7003bd3.js similarity index 100% rename from assets/js/61a162a2.aa41f5a3.js rename to assets/js/61a162a2.b7003bd3.js diff --git a/assets/js/61b7a2d8.a9cf8fa4.js b/assets/js/61b7a2d8.0a602888.js similarity index 100% rename from assets/js/61b7a2d8.a9cf8fa4.js rename to assets/js/61b7a2d8.0a602888.js diff --git a/assets/js/62851422.abb3e68b.js b/assets/js/62851422.b7501a3b.js similarity index 100% rename from assets/js/62851422.abb3e68b.js rename to assets/js/62851422.b7501a3b.js diff --git a/assets/js/628cd644.893c0a66.js b/assets/js/628cd644.0a671ef0.js similarity index 100% rename from assets/js/628cd644.893c0a66.js rename to assets/js/628cd644.0a671ef0.js diff --git a/assets/js/62dfd26a.a026c1bc.js b/assets/js/62dfd26a.08efcc02.js similarity index 100% rename from assets/js/62dfd26a.a026c1bc.js rename to assets/js/62dfd26a.08efcc02.js diff --git a/assets/js/6314e686.f9f5abaa.js b/assets/js/6314e686.dc57581e.js similarity index 100% rename from assets/js/6314e686.f9f5abaa.js rename to assets/js/6314e686.dc57581e.js diff --git a/assets/js/633054aa.9ae80f88.js b/assets/js/633054aa.61b7c460.js similarity index 100% rename from assets/js/633054aa.9ae80f88.js rename to assets/js/633054aa.61b7c460.js diff --git a/assets/js/63b7161b.2bd1649a.js b/assets/js/63b7161b.5fdd2a50.js similarity index 100% rename from assets/js/63b7161b.2bd1649a.js rename to assets/js/63b7161b.5fdd2a50.js diff --git a/assets/js/6443e343.4165347c.js b/assets/js/6443e343.e222535a.js similarity index 100% rename from assets/js/6443e343.4165347c.js rename to assets/js/6443e343.e222535a.js diff --git a/assets/js/64b524e9.bdc8a093.js b/assets/js/64b524e9.2629630a.js similarity index 100% rename from assets/js/64b524e9.bdc8a093.js rename to assets/js/64b524e9.2629630a.js diff --git a/assets/js/65ee8ae4.1bfa15be.js b/assets/js/65ee8ae4.e5303649.js similarity index 100% rename from assets/js/65ee8ae4.1bfa15be.js rename to assets/js/65ee8ae4.e5303649.js diff --git a/assets/js/67246f5a.547b2297.js b/assets/js/67246f5a.773efee7.js similarity index 100% rename from assets/js/67246f5a.547b2297.js rename to assets/js/67246f5a.773efee7.js diff --git a/assets/js/67505168.19fdbad1.js b/assets/js/67505168.a2822719.js similarity index 100% rename from assets/js/67505168.19fdbad1.js rename to assets/js/67505168.a2822719.js diff --git a/assets/js/67b33350.3808e76e.js b/assets/js/67b33350.bc065da5.js similarity index 100% rename from assets/js/67b33350.3808e76e.js rename to assets/js/67b33350.bc065da5.js diff --git a/assets/js/67d24e69.8adb9daa.js b/assets/js/67d24e69.3e4044f9.js similarity index 100% rename from assets/js/67d24e69.8adb9daa.js rename to assets/js/67d24e69.3e4044f9.js diff --git a/assets/js/686ece5a.5cc6a910.js b/assets/js/686ece5a.ef9faa2a.js similarity index 100% rename from assets/js/686ece5a.5cc6a910.js rename to assets/js/686ece5a.ef9faa2a.js diff --git a/assets/js/68c97b35.fa04d0b8.js b/assets/js/68c97b35.7a03dadf.js similarity index 100% rename from assets/js/68c97b35.fa04d0b8.js rename to assets/js/68c97b35.7a03dadf.js diff --git a/assets/js/68e92148.1faa0f9a.js b/assets/js/68e92148.6f33e2f9.js similarity index 100% rename from assets/js/68e92148.1faa0f9a.js rename to assets/js/68e92148.6f33e2f9.js diff --git a/assets/js/6928e096.96b22c31.js b/assets/js/6928e096.daed79eb.js similarity index 100% rename from assets/js/6928e096.96b22c31.js rename to assets/js/6928e096.daed79eb.js diff --git a/assets/js/69bda1fb.5b2ae1a9.js b/assets/js/69bda1fb.9c971900.js similarity index 100% rename from assets/js/69bda1fb.5b2ae1a9.js rename to assets/js/69bda1fb.9c971900.js diff --git a/assets/js/6af19526.a495b68d.js b/assets/js/6af19526.a1a666c1.js similarity index 100% rename from assets/js/6af19526.a495b68d.js rename to assets/js/6af19526.a1a666c1.js diff --git a/assets/js/6b713b47.c4447586.js b/assets/js/6b713b47.3c6fbbd7.js similarity index 100% rename from assets/js/6b713b47.c4447586.js rename to assets/js/6b713b47.3c6fbbd7.js diff --git a/assets/js/6bd8488f.300fd166.js b/assets/js/6bd8488f.21748d3f.js similarity index 100% rename from assets/js/6bd8488f.300fd166.js rename to assets/js/6bd8488f.21748d3f.js diff --git a/assets/js/6c4025a1.1a7ca366.js b/assets/js/6c4025a1.9ff82151.js similarity index 100% rename from assets/js/6c4025a1.1a7ca366.js rename to assets/js/6c4025a1.9ff82151.js diff --git a/assets/js/6c57f576.0fb90c20.js b/assets/js/6c57f576.1609cd88.js similarity index 100% rename from assets/js/6c57f576.0fb90c20.js rename to assets/js/6c57f576.1609cd88.js diff --git a/assets/js/6cb6f1fd.926a2dfb.js b/assets/js/6cb6f1fd.9c2316a6.js similarity index 100% rename from assets/js/6cb6f1fd.926a2dfb.js rename to assets/js/6cb6f1fd.9c2316a6.js diff --git a/assets/js/6cff0fac.7eec1a57.js b/assets/js/6cff0fac.3c979593.js similarity index 100% rename from assets/js/6cff0fac.7eec1a57.js rename to assets/js/6cff0fac.3c979593.js diff --git a/assets/js/6db0eab6.e6d3f40d.js b/assets/js/6db0eab6.fb152ec6.js similarity index 100% rename from assets/js/6db0eab6.e6d3f40d.js rename to assets/js/6db0eab6.fb152ec6.js diff --git a/assets/js/6e560846.ad490c16.js b/assets/js/6e560846.73ba9e9e.js similarity index 100% rename from assets/js/6e560846.ad490c16.js rename to assets/js/6e560846.73ba9e9e.js diff --git a/assets/js/6e57f868.aeebf35e.js b/assets/js/6e57f868.042c353b.js similarity index 100% rename from assets/js/6e57f868.aeebf35e.js rename to assets/js/6e57f868.042c353b.js diff --git a/assets/js/6e59b9bc.26d2586d.js b/assets/js/6e59b9bc.236ac0c9.js similarity index 100% rename from assets/js/6e59b9bc.26d2586d.js rename to assets/js/6e59b9bc.236ac0c9.js diff --git a/assets/js/6f0558fb.9d616020.js b/assets/js/6f0558fb.5456f1c4.js similarity index 100% rename from assets/js/6f0558fb.9d616020.js rename to assets/js/6f0558fb.5456f1c4.js diff --git a/assets/js/6f7d33a4.49382862.js b/assets/js/6f7d33a4.c4fd38c8.js similarity index 100% rename from assets/js/6f7d33a4.49382862.js rename to assets/js/6f7d33a4.c4fd38c8.js diff --git a/assets/js/70ed012e.928bf71a.js b/assets/js/70ed012e.fcc596ca.js similarity index 100% rename from assets/js/70ed012e.928bf71a.js rename to assets/js/70ed012e.fcc596ca.js diff --git a/assets/js/70f656fe.94ad7cd4.js b/assets/js/70f656fe.3990efd8.js similarity index 100% rename from assets/js/70f656fe.94ad7cd4.js rename to assets/js/70f656fe.3990efd8.js diff --git a/assets/js/71056d45.0dd4e1da.js b/assets/js/71056d45.66c125fd.js similarity index 100% rename from assets/js/71056d45.0dd4e1da.js rename to assets/js/71056d45.66c125fd.js diff --git a/assets/js/710f1fb8.6ddb5fa1.js b/assets/js/710f1fb8.9b3fbb88.js similarity index 100% rename from assets/js/710f1fb8.6ddb5fa1.js rename to assets/js/710f1fb8.9b3fbb88.js diff --git a/assets/js/71e954ff.d6531b64.js b/assets/js/71e954ff.5dbb6394.js similarity index 100% rename from assets/js/71e954ff.d6531b64.js rename to assets/js/71e954ff.5dbb6394.js diff --git a/assets/js/71eeb0e0.690e86c1.js b/assets/js/71eeb0e0.b76b3f6f.js similarity index 100% rename from assets/js/71eeb0e0.690e86c1.js rename to assets/js/71eeb0e0.b76b3f6f.js diff --git a/assets/js/71f6628b.42e49683.js b/assets/js/71f6628b.03b3d777.js similarity index 100% rename from assets/js/71f6628b.42e49683.js rename to assets/js/71f6628b.03b3d777.js diff --git a/assets/js/722925cc.a81875e7.js b/assets/js/722925cc.cb1ff209.js similarity index 100% rename from assets/js/722925cc.a81875e7.js rename to assets/js/722925cc.cb1ff209.js diff --git a/assets/js/724a65ab.e16b700b.js b/assets/js/724a65ab.cd67361e.js similarity index 100% rename from assets/js/724a65ab.e16b700b.js rename to assets/js/724a65ab.cd67361e.js diff --git a/assets/js/72991a83.e1283a0b.js b/assets/js/72991a83.fcb24249.js similarity index 100% rename from assets/js/72991a83.e1283a0b.js rename to assets/js/72991a83.fcb24249.js diff --git a/assets/js/7337198d.bf0393c1.js b/assets/js/7337198d.13f43548.js similarity index 100% rename from assets/js/7337198d.bf0393c1.js rename to assets/js/7337198d.13f43548.js diff --git a/assets/js/733afe39.6a0b6315.js b/assets/js/733afe39.15d17b48.js similarity index 100% rename from assets/js/733afe39.6a0b6315.js rename to assets/js/733afe39.15d17b48.js diff --git a/assets/js/733b44b2.2800ddb0.js b/assets/js/733b44b2.2216585a.js similarity index 100% rename from assets/js/733b44b2.2800ddb0.js rename to assets/js/733b44b2.2216585a.js diff --git a/assets/js/737e874d.0e299ed5.js b/assets/js/737e874d.bea3afb6.js similarity index 100% rename from assets/js/737e874d.0e299ed5.js rename to assets/js/737e874d.bea3afb6.js diff --git a/assets/js/745e1426.0653cfaf.js b/assets/js/745e1426.f73cc98c.js similarity index 100% rename from assets/js/745e1426.0653cfaf.js rename to assets/js/745e1426.f73cc98c.js diff --git a/assets/js/75e4e133.40f327f3.js b/assets/js/75e4e133.70b9ea75.js similarity index 100% rename from assets/js/75e4e133.40f327f3.js rename to assets/js/75e4e133.70b9ea75.js diff --git a/assets/js/765f58ca.900eb410.js b/assets/js/765f58ca.ef59ceae.js similarity index 100% rename from assets/js/765f58ca.900eb410.js rename to assets/js/765f58ca.ef59ceae.js diff --git a/assets/js/7695e191.b8fd2cad.js b/assets/js/7695e191.693ee26c.js similarity index 100% rename from assets/js/7695e191.b8fd2cad.js rename to assets/js/7695e191.693ee26c.js diff --git a/assets/js/76cc1cd4.f2674bae.js b/assets/js/76cc1cd4.0d272464.js similarity index 100% rename from assets/js/76cc1cd4.f2674bae.js rename to assets/js/76cc1cd4.0d272464.js diff --git a/assets/js/796634c9.4809aee7.js b/assets/js/796634c9.6263dc49.js similarity index 100% rename from assets/js/796634c9.4809aee7.js rename to assets/js/796634c9.6263dc49.js diff --git a/assets/js/796af274.270a657f.js b/assets/js/796af274.b3fc166c.js similarity index 100% rename from assets/js/796af274.270a657f.js rename to assets/js/796af274.b3fc166c.js diff --git a/assets/js/797fb45b.bfc09699.js b/assets/js/797fb45b.659552d8.js similarity index 100% rename from assets/js/797fb45b.bfc09699.js rename to assets/js/797fb45b.659552d8.js diff --git a/assets/js/79f4c125.3b8a62e8.js b/assets/js/79f4c125.b32b17d8.js similarity index 100% rename from assets/js/79f4c125.3b8a62e8.js rename to assets/js/79f4c125.b32b17d8.js diff --git a/assets/js/7a768154.ca87fde2.js b/assets/js/7a768154.fd3bb8e1.js similarity index 100% rename from assets/js/7a768154.ca87fde2.js rename to assets/js/7a768154.fd3bb8e1.js diff --git a/assets/js/7aba8a28.fc5922f7.js b/assets/js/7aba8a28.98409b5d.js similarity index 100% rename from assets/js/7aba8a28.fc5922f7.js rename to assets/js/7aba8a28.98409b5d.js diff --git a/assets/js/7b0045c0.39ff2420.js b/assets/js/7b0045c0.75ce0f0d.js similarity index 100% rename from assets/js/7b0045c0.39ff2420.js rename to assets/js/7b0045c0.75ce0f0d.js diff --git a/assets/js/7b0b4d35.6dfe566d.js b/assets/js/7b0b4d35.a68f6a1d.js similarity index 100% rename from assets/js/7b0b4d35.6dfe566d.js rename to assets/js/7b0b4d35.a68f6a1d.js diff --git a/assets/js/7bcc5fb1.20e52cdc.js b/assets/js/7bcc5fb1.24757676.js similarity index 100% rename from assets/js/7bcc5fb1.20e52cdc.js rename to assets/js/7bcc5fb1.24757676.js diff --git a/assets/js/7c23e770.7b234057.js b/assets/js/7c23e770.7b3a9cdb.js similarity index 100% rename from assets/js/7c23e770.7b234057.js rename to assets/js/7c23e770.7b3a9cdb.js diff --git a/assets/js/7ce7658d.f603e044.js b/assets/js/7ce7658d.93fca6ec.js similarity index 100% rename from assets/js/7ce7658d.f603e044.js rename to assets/js/7ce7658d.93fca6ec.js diff --git a/assets/js/7d1b4d68.4f2db793.js b/assets/js/7d1b4d68.b42e271d.js similarity index 100% rename from assets/js/7d1b4d68.4f2db793.js rename to assets/js/7d1b4d68.b42e271d.js diff --git a/assets/js/7e37b14a.53fcd4f0.js b/assets/js/7e37b14a.bf74c946.js similarity index 100% rename from assets/js/7e37b14a.53fcd4f0.js rename to assets/js/7e37b14a.bf74c946.js diff --git a/assets/js/7e5462e7.6f79a938.js b/assets/js/7e5462e7.8226ebc5.js similarity index 100% rename from assets/js/7e5462e7.6f79a938.js rename to assets/js/7e5462e7.8226ebc5.js diff --git a/assets/js/7fbdd563.3a094f79.js b/assets/js/7fbdd563.581b32b6.js similarity index 100% rename from assets/js/7fbdd563.3a094f79.js rename to assets/js/7fbdd563.581b32b6.js diff --git a/assets/js/805c86b6.337fd27e.js b/assets/js/805c86b6.11b40937.js similarity index 100% rename from assets/js/805c86b6.337fd27e.js rename to assets/js/805c86b6.11b40937.js diff --git a/assets/js/819bd6dd.866da219.js b/assets/js/819bd6dd.2dfe4a05.js similarity index 100% rename from assets/js/819bd6dd.866da219.js rename to assets/js/819bd6dd.2dfe4a05.js diff --git a/assets/js/82023ef6.fa98da74.js b/assets/js/82023ef6.73073896.js similarity index 100% rename from assets/js/82023ef6.fa98da74.js rename to assets/js/82023ef6.73073896.js diff --git a/assets/js/8291813c.c53ab73e.js b/assets/js/8291813c.6eb66672.js similarity index 100% rename from assets/js/8291813c.c53ab73e.js rename to assets/js/8291813c.6eb66672.js diff --git a/assets/js/834b1b34.f96df7b8.js b/assets/js/834b1b34.e58fe991.js similarity index 100% rename from assets/js/834b1b34.f96df7b8.js rename to assets/js/834b1b34.e58fe991.js diff --git a/assets/js/83a912f8.3ed37436.js b/assets/js/83a912f8.d138b19e.js similarity index 100% rename from assets/js/83a912f8.3ed37436.js rename to assets/js/83a912f8.d138b19e.js diff --git a/assets/js/841634ee.85474c2d.js b/assets/js/841634ee.e1c6a15d.js similarity index 100% rename from assets/js/841634ee.85474c2d.js rename to assets/js/841634ee.e1c6a15d.js diff --git a/assets/js/845e6efd.03124405.js b/assets/js/845e6efd.1474a887.js similarity index 100% rename from assets/js/845e6efd.03124405.js rename to assets/js/845e6efd.1474a887.js diff --git a/assets/js/846f84ed.ec80011d.js b/assets/js/846f84ed.325fe295.js similarity index 100% rename from assets/js/846f84ed.ec80011d.js rename to assets/js/846f84ed.325fe295.js diff --git a/assets/js/84fa3108.5e123171.js b/assets/js/84fa3108.2ded0365.js similarity index 100% rename from assets/js/84fa3108.5e123171.js rename to assets/js/84fa3108.2ded0365.js diff --git a/assets/js/8541c64a.6b21d0a6.js b/assets/js/8541c64a.36633fb9.js similarity index 100% rename from assets/js/8541c64a.6b21d0a6.js rename to assets/js/8541c64a.36633fb9.js diff --git a/assets/js/858297e5.131b326b.js b/assets/js/858297e5.49a73bd6.js similarity index 100% rename from assets/js/858297e5.131b326b.js rename to assets/js/858297e5.49a73bd6.js diff --git a/assets/js/85e160d3.7ae523df.js b/assets/js/85e160d3.7a4e65a1.js similarity index 100% rename from assets/js/85e160d3.7ae523df.js rename to assets/js/85e160d3.7a4e65a1.js diff --git a/assets/js/87db15d5.f683549f.js b/assets/js/87db15d5.ff28ad75.js similarity index 100% rename from assets/js/87db15d5.f683549f.js rename to assets/js/87db15d5.ff28ad75.js diff --git a/assets/js/88aeac7e.b680c2c9.js b/assets/js/88aeac7e.ba760e58.js similarity index 100% rename from assets/js/88aeac7e.b680c2c9.js rename to assets/js/88aeac7e.ba760e58.js diff --git a/assets/js/8a2191c9.f54b76b2.js b/assets/js/8a2191c9.62b33ade.js similarity index 100% rename from assets/js/8a2191c9.f54b76b2.js rename to assets/js/8a2191c9.62b33ade.js diff --git a/assets/js/8a3423d8.28848912.js b/assets/js/8a3423d8.1d95c978.js similarity index 100% rename from assets/js/8a3423d8.28848912.js rename to assets/js/8a3423d8.1d95c978.js diff --git a/assets/js/8a425469.3bd25872.js b/assets/js/8a425469.0193582c.js similarity index 100% rename from assets/js/8a425469.3bd25872.js rename to assets/js/8a425469.0193582c.js diff --git a/assets/js/8a6fa54b.ffdef6a8.js b/assets/js/8a6fa54b.8dc70717.js similarity index 100% rename from assets/js/8a6fa54b.ffdef6a8.js rename to assets/js/8a6fa54b.8dc70717.js diff --git a/assets/js/8b004f25.3807430a.js b/assets/js/8b004f25.3dc83757.js similarity index 100% rename from assets/js/8b004f25.3807430a.js rename to assets/js/8b004f25.3dc83757.js diff --git a/assets/js/8bcfbda9.27a5637f.js b/assets/js/8bcfbda9.c2017ac4.js similarity index 100% rename from assets/js/8bcfbda9.27a5637f.js rename to assets/js/8bcfbda9.c2017ac4.js diff --git a/assets/js/8cc6dc47.84359e34.js b/assets/js/8cc6dc47.857959a3.js similarity index 100% rename from assets/js/8cc6dc47.84359e34.js rename to assets/js/8cc6dc47.857959a3.js diff --git a/assets/js/8dc6a573.247fbd79.js b/assets/js/8dc6a573.b8e2d916.js similarity index 100% rename from assets/js/8dc6a573.247fbd79.js rename to assets/js/8dc6a573.b8e2d916.js diff --git a/assets/js/8e316003.592afa57.js b/assets/js/8e316003.dcd85cfb.js similarity index 100% rename from assets/js/8e316003.592afa57.js rename to assets/js/8e316003.dcd85cfb.js diff --git a/assets/js/8fcfcbe4.b5ce2370.js b/assets/js/8fcfcbe4.8d47af54.js similarity index 100% rename from assets/js/8fcfcbe4.b5ce2370.js rename to assets/js/8fcfcbe4.8d47af54.js diff --git a/assets/js/9258ad63.6517898b.js b/assets/js/9258ad63.9a43f849.js similarity index 100% rename from assets/js/9258ad63.6517898b.js rename to assets/js/9258ad63.9a43f849.js diff --git a/assets/js/927c8cb1.ae948e7c.js b/assets/js/927c8cb1.df87596f.js similarity index 100% rename from assets/js/927c8cb1.ae948e7c.js rename to assets/js/927c8cb1.df87596f.js diff --git a/assets/js/92d57007.382e47a6.js b/assets/js/92d57007.f4856c06.js similarity index 100% rename from assets/js/92d57007.382e47a6.js rename to assets/js/92d57007.f4856c06.js diff --git a/assets/js/92f4c895.3a5c439f.js b/assets/js/92f4c895.3a7b7396.js similarity index 100% rename from assets/js/92f4c895.3a5c439f.js rename to assets/js/92f4c895.3a7b7396.js diff --git a/assets/js/93011a86.9d8c09e0.js b/assets/js/93011a86.bd989bd5.js similarity index 100% rename from assets/js/93011a86.9d8c09e0.js rename to assets/js/93011a86.bd989bd5.js diff --git a/assets/js/9308bd2a.2518d476.js b/assets/js/9308bd2a.057c7984.js similarity index 100% rename from assets/js/9308bd2a.2518d476.js rename to assets/js/9308bd2a.057c7984.js diff --git a/assets/js/93298ec8.f9d9b4e7.js b/assets/js/93298ec8.06652142.js similarity index 100% rename from assets/js/93298ec8.f9d9b4e7.js rename to assets/js/93298ec8.06652142.js diff --git a/assets/js/935f2afb.750e0600.js b/assets/js/935f2afb.9069cb95.js similarity index 100% rename from assets/js/935f2afb.750e0600.js rename to assets/js/935f2afb.9069cb95.js diff --git a/assets/js/936799cc.d92587bc.js b/assets/js/936799cc.039cca49.js similarity index 100% rename from assets/js/936799cc.d92587bc.js rename to assets/js/936799cc.039cca49.js diff --git a/assets/js/936803e8.47dca6a2.js b/assets/js/936803e8.e97af8ac.js similarity index 100% rename from assets/js/936803e8.47dca6a2.js rename to assets/js/936803e8.e97af8ac.js diff --git a/assets/js/93710a9c.1c2847dd.js b/assets/js/93710a9c.6834cdfb.js similarity index 100% rename from assets/js/93710a9c.1c2847dd.js rename to assets/js/93710a9c.6834cdfb.js diff --git a/assets/js/93923fbf.b74080f3.js b/assets/js/93923fbf.74115880.js similarity index 100% rename from assets/js/93923fbf.b74080f3.js rename to assets/js/93923fbf.74115880.js diff --git a/assets/js/944dcb7a.0a0b32f9.js b/assets/js/944dcb7a.494778f9.js similarity index 100% rename from assets/js/944dcb7a.0a0b32f9.js rename to assets/js/944dcb7a.494778f9.js diff --git a/assets/js/94d3795c.14dfb97f.js b/assets/js/94d3795c.9b4b3392.js similarity index 100% rename from assets/js/94d3795c.14dfb97f.js rename to assets/js/94d3795c.9b4b3392.js diff --git a/assets/js/9506a041.d9352b82.js b/assets/js/9506a041.ba738cfd.js similarity index 100% rename from assets/js/9506a041.d9352b82.js rename to assets/js/9506a041.ba738cfd.js diff --git a/assets/js/95a27607.6db0d519.js b/assets/js/95a27607.4724a157.js similarity index 100% rename from assets/js/95a27607.6db0d519.js rename to assets/js/95a27607.4724a157.js diff --git a/assets/js/96528293.33d3f38e.js b/assets/js/96528293.b9b2b8a0.js similarity index 100% rename from assets/js/96528293.33d3f38e.js rename to assets/js/96528293.b9b2b8a0.js diff --git a/assets/js/96dc5664.cfc5bac0.js b/assets/js/96dc5664.b5b7223d.js similarity index 100% rename from assets/js/96dc5664.cfc5bac0.js rename to assets/js/96dc5664.b5b7223d.js diff --git a/assets/js/96e43b42.57d5ef1e.js b/assets/js/96e43b42.52266850.js similarity index 100% rename from assets/js/96e43b42.57d5ef1e.js rename to assets/js/96e43b42.52266850.js diff --git a/assets/js/970e6d70.2c137772.js b/assets/js/970e6d70.1004ffff.js similarity index 100% rename from assets/js/970e6d70.2c137772.js rename to assets/js/970e6d70.1004ffff.js diff --git a/assets/js/9753faba.a140b9f6.js b/assets/js/9753faba.350fdef2.js similarity index 100% rename from assets/js/9753faba.a140b9f6.js rename to assets/js/9753faba.350fdef2.js diff --git a/assets/js/979c6429.130fb199.js b/assets/js/979c6429.b482adbc.js similarity index 100% rename from assets/js/979c6429.130fb199.js rename to assets/js/979c6429.b482adbc.js diff --git a/assets/js/9848e2c7.ce32063b.js b/assets/js/9848e2c7.f28fa96b.js similarity index 100% rename from assets/js/9848e2c7.ce32063b.js rename to assets/js/9848e2c7.f28fa96b.js diff --git a/assets/js/98ca2ed8.e85d395e.js b/assets/js/98ca2ed8.1121d22e.js similarity index 100% rename from assets/js/98ca2ed8.e85d395e.js rename to assets/js/98ca2ed8.1121d22e.js diff --git a/assets/js/98d54e16.4f221b9e.js b/assets/js/98d54e16.d47c4bbd.js similarity index 100% rename from assets/js/98d54e16.4f221b9e.js rename to assets/js/98d54e16.d47c4bbd.js diff --git a/assets/js/994993c6.55d04d62.js b/assets/js/994993c6.3ac2d140.js similarity index 100% rename from assets/js/994993c6.55d04d62.js rename to assets/js/994993c6.3ac2d140.js diff --git a/assets/js/995a79a6.412c1199.js b/assets/js/995a79a6.8c91ea1b.js similarity index 100% rename from assets/js/995a79a6.412c1199.js rename to assets/js/995a79a6.8c91ea1b.js diff --git a/assets/js/99d058c7.56fae189.js b/assets/js/99d058c7.df8e077e.js similarity index 100% rename from assets/js/99d058c7.56fae189.js rename to assets/js/99d058c7.df8e077e.js diff --git a/assets/js/9a1d62bb.49217408.js b/assets/js/9a1d62bb.9e495b5f.js similarity index 100% rename from assets/js/9a1d62bb.49217408.js rename to assets/js/9a1d62bb.9e495b5f.js diff --git a/assets/js/9a961523.70639d9b.js b/assets/js/9a961523.543c3216.js similarity index 100% rename from assets/js/9a961523.70639d9b.js rename to assets/js/9a961523.543c3216.js diff --git a/assets/js/9af69400.3734376d.js b/assets/js/9af69400.8edd56c7.js similarity index 100% rename from assets/js/9af69400.3734376d.js rename to assets/js/9af69400.8edd56c7.js diff --git a/assets/js/9b17d7b9.9310f76d.js b/assets/js/9b17d7b9.73f909b3.js similarity index 100% rename from assets/js/9b17d7b9.9310f76d.js rename to assets/js/9b17d7b9.73f909b3.js diff --git a/assets/js/9b23e258.41f054ca.js b/assets/js/9b23e258.788a10ff.js similarity index 100% rename from assets/js/9b23e258.41f054ca.js rename to assets/js/9b23e258.788a10ff.js diff --git a/assets/js/9c09aad4.978438ff.js b/assets/js/9c09aad4.ac0524dc.js similarity index 100% rename from assets/js/9c09aad4.978438ff.js rename to assets/js/9c09aad4.ac0524dc.js diff --git a/assets/js/9c24692c.c2ba99c9.js b/assets/js/9c24692c.5bbe8d71.js similarity index 100% rename from assets/js/9c24692c.c2ba99c9.js rename to assets/js/9c24692c.5bbe8d71.js diff --git a/assets/js/9c28178f.a49b1069.js b/assets/js/9c28178f.adafe524.js similarity index 100% rename from assets/js/9c28178f.a49b1069.js rename to assets/js/9c28178f.adafe524.js diff --git a/assets/js/9d1c590d.8c462cde.js b/assets/js/9d1c590d.fe8ea204.js similarity index 100% rename from assets/js/9d1c590d.8c462cde.js rename to assets/js/9d1c590d.fe8ea204.js diff --git a/assets/js/9d2aa5af.3da0e7bd.js b/assets/js/9d2aa5af.d6896304.js similarity index 100% rename from assets/js/9d2aa5af.3da0e7bd.js rename to assets/js/9d2aa5af.d6896304.js diff --git a/assets/js/9d9742d5.cb2ce4ce.js b/assets/js/9d9742d5.0c89bfa3.js similarity index 100% rename from assets/js/9d9742d5.cb2ce4ce.js rename to assets/js/9d9742d5.0c89bfa3.js diff --git a/assets/js/9dab56b4.598f7450.js b/assets/js/9dab56b4.620ad4ec.js similarity index 100% rename from assets/js/9dab56b4.598f7450.js rename to assets/js/9dab56b4.620ad4ec.js diff --git a/assets/js/9dbc2d3e.b3452d0d.js b/assets/js/9dbc2d3e.f2417917.js similarity index 100% rename from assets/js/9dbc2d3e.b3452d0d.js rename to assets/js/9dbc2d3e.f2417917.js diff --git a/assets/js/9e2dc38c.473d6e0d.js b/assets/js/9e2dc38c.7ad5c1c1.js similarity index 100% rename from assets/js/9e2dc38c.473d6e0d.js rename to assets/js/9e2dc38c.7ad5c1c1.js diff --git a/assets/js/9e5670e9.24263678.js b/assets/js/9e5670e9.1b5fa4c5.js similarity index 100% rename from assets/js/9e5670e9.24263678.js rename to assets/js/9e5670e9.1b5fa4c5.js diff --git a/assets/js/9fc72eed.d09e35d4.js b/assets/js/9fc72eed.68cc0636.js similarity index 100% rename from assets/js/9fc72eed.d09e35d4.js rename to assets/js/9fc72eed.68cc0636.js diff --git a/assets/js/9fe53ea0.eac018f3.js b/assets/js/9fe53ea0.951c4644.js similarity index 100% rename from assets/js/9fe53ea0.eac018f3.js rename to assets/js/9fe53ea0.951c4644.js diff --git a/assets/js/a0417692.5ba5c062.js b/assets/js/a0417692.338328c6.js similarity index 100% rename from assets/js/a0417692.5ba5c062.js rename to assets/js/a0417692.338328c6.js diff --git a/assets/js/a0f7a70e.43f2cbbd.js b/assets/js/a0f7a70e.666de7f2.js similarity index 100% rename from assets/js/a0f7a70e.43f2cbbd.js rename to assets/js/a0f7a70e.666de7f2.js diff --git a/assets/js/a176cfd4.ea96a96a.js b/assets/js/a176cfd4.238d8cba.js similarity index 100% rename from assets/js/a176cfd4.ea96a96a.js rename to assets/js/a176cfd4.238d8cba.js diff --git a/assets/js/a199a65b.0ea3eaab.js b/assets/js/a199a65b.505045f6.js similarity index 100% rename from assets/js/a199a65b.0ea3eaab.js rename to assets/js/a199a65b.505045f6.js diff --git a/assets/js/a26227d1.e3bcefa1.js b/assets/js/a26227d1.f847d184.js similarity index 100% rename from assets/js/a26227d1.e3bcefa1.js rename to assets/js/a26227d1.f847d184.js diff --git a/assets/js/a271911a.21cc280a.js b/assets/js/a271911a.c7c43838.js similarity index 100% rename from assets/js/a271911a.21cc280a.js rename to assets/js/a271911a.c7c43838.js diff --git a/assets/js/a29dd78e.b75625ce.js b/assets/js/a29dd78e.ecf430b5.js similarity index 100% rename from assets/js/a29dd78e.b75625ce.js rename to assets/js/a29dd78e.ecf430b5.js diff --git a/assets/js/a33aee09.5a7b6cd8.js b/assets/js/a33aee09.391e800c.js similarity index 100% rename from assets/js/a33aee09.5a7b6cd8.js rename to assets/js/a33aee09.391e800c.js diff --git a/assets/js/a39e3a9c.3d005274.js b/assets/js/a39e3a9c.744f5cde.js similarity index 100% rename from assets/js/a39e3a9c.3d005274.js rename to assets/js/a39e3a9c.744f5cde.js diff --git a/assets/js/a45819f0.67a1c0e6.js b/assets/js/a45819f0.8cd5ea20.js similarity index 100% rename from assets/js/a45819f0.67a1c0e6.js rename to assets/js/a45819f0.8cd5ea20.js diff --git a/assets/js/a489e737.335a3043.js b/assets/js/a489e737.39123897.js similarity index 100% rename from assets/js/a489e737.335a3043.js rename to assets/js/a489e737.39123897.js diff --git a/assets/js/a5202fb3.c3523c9d.js b/assets/js/a5202fb3.d15fe581.js similarity index 100% rename from assets/js/a5202fb3.c3523c9d.js rename to assets/js/a5202fb3.d15fe581.js diff --git a/assets/js/a55e9ae3.5b9c08cf.js b/assets/js/a55e9ae3.4acbacea.js similarity index 100% rename from assets/js/a55e9ae3.5b9c08cf.js rename to assets/js/a55e9ae3.4acbacea.js diff --git a/assets/js/a5b7f128.73afa94e.js b/assets/js/a5b7f128.baaebb4f.js similarity index 100% rename from assets/js/a5b7f128.73afa94e.js rename to assets/js/a5b7f128.baaebb4f.js diff --git a/assets/js/a5e9e7a1.dc72204e.js b/assets/js/a5e9e7a1.e4b359ad.js similarity index 100% rename from assets/js/a5e9e7a1.dc72204e.js rename to assets/js/a5e9e7a1.e4b359ad.js diff --git a/assets/js/a63f633b.3bc208eb.js b/assets/js/a63f633b.50a38aa0.js similarity index 100% rename from assets/js/a63f633b.3bc208eb.js rename to assets/js/a63f633b.50a38aa0.js diff --git a/assets/js/a6946925.0fa86a02.js b/assets/js/a6946925.8d88e064.js similarity index 100% rename from assets/js/a6946925.0fa86a02.js rename to assets/js/a6946925.8d88e064.js diff --git a/assets/js/a81f1977.c8f2b14e.js b/assets/js/a81f1977.949b328b.js similarity index 100% rename from assets/js/a81f1977.c8f2b14e.js rename to assets/js/a81f1977.949b328b.js diff --git a/assets/js/a8a1de49.70f6d439.js b/assets/js/a8a1de49.2cfb65c8.js similarity index 90% rename from assets/js/a8a1de49.70f6d439.js rename to assets/js/a8a1de49.2cfb65c8.js index ff37a6d035..2ba1b5ed93 100644 --- a/assets/js/a8a1de49.70f6d439.js +++ b/assets/js/a8a1de49.2cfb65c8.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[366],{625:function(a,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return o}));var t=n(0),r=n.n(t),i=n(754),s=n(437),c=n.n(s),l=n(638);function u(){return r.a.createElement("div",{className:c.a.banner},r.a.createElement(l.a,{to:"https://stand-with-ukraine.pp.ua",className:c.a.link},"\ud83c\uddfa\ud83c\udde6 This project is created with substantial contributions from our Ukrainian colleagues."," ",r.a.createElement("span",{className:c.a.hashtag},"#StandWithUkraine")))}function o(a){return r.a.createElement(r.a.Fragment,null,r.a.createElement(u,null),r.a.createElement(i.a,a))}}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[366],{625:function(a,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return o}));var t=n(0),r=n.n(t),i=n(755),s=n(437),c=n.n(s),l=n(638);function u(){return r.a.createElement("div",{className:c.a.banner},r.a.createElement(l.a,{to:"https://stand-with-ukraine.pp.ua",className:c.a.link},"\ud83c\uddfa\ud83c\udde6 This project is created with substantial contributions from our Ukrainian colleagues."," ",r.a.createElement("span",{className:c.a.hashtag},"#StandWithUkraine")))}function o(a){return r.a.createElement(r.a.Fragment,null,r.a.createElement(u,null),r.a.createElement(i.a,a))}}}]); \ No newline at end of file diff --git a/assets/js/a9f1bf2b.12e81d55.js b/assets/js/a9f1bf2b.6912b9f4.js similarity index 100% rename from assets/js/a9f1bf2b.12e81d55.js rename to assets/js/a9f1bf2b.6912b9f4.js diff --git a/assets/js/ab1e3150.59a652d8.js b/assets/js/ab1e3150.c0c33d7c.js similarity index 100% rename from assets/js/ab1e3150.59a652d8.js rename to assets/js/ab1e3150.c0c33d7c.js diff --git a/assets/js/ab5f391a.013ff5a8.js b/assets/js/ab5f391a.cf189c2a.js similarity index 100% rename from assets/js/ab5f391a.013ff5a8.js rename to assets/js/ab5f391a.cf189c2a.js diff --git a/assets/js/ab9b2b08.27b07686.js b/assets/js/ab9b2b08.5bf054cf.js similarity index 100% rename from assets/js/ab9b2b08.27b07686.js rename to assets/js/ab9b2b08.5bf054cf.js diff --git a/assets/js/abdfbd6b.954ab775.js b/assets/js/abdfbd6b.7d664cee.js similarity index 100% rename from assets/js/abdfbd6b.954ab775.js rename to assets/js/abdfbd6b.7d664cee.js diff --git a/assets/js/ac259749.4ed7e4ad.js b/assets/js/ac259749.8d1f0625.js similarity index 100% rename from assets/js/ac259749.4ed7e4ad.js rename to assets/js/ac259749.8d1f0625.js diff --git a/assets/js/ad0e8a11.7672845b.js b/assets/js/ad0e8a11.ea31575f.js similarity index 100% rename from assets/js/ad0e8a11.7672845b.js rename to assets/js/ad0e8a11.ea31575f.js diff --git a/assets/js/adafd01a.fcc91314.js b/assets/js/adafd01a.7a17d386.js similarity index 100% rename from assets/js/adafd01a.fcc91314.js rename to assets/js/adafd01a.7a17d386.js diff --git a/assets/js/adcea6f3.cc75e7bc.js b/assets/js/adcea6f3.89800a08.js similarity index 100% rename from assets/js/adcea6f3.cc75e7bc.js rename to assets/js/adcea6f3.89800a08.js diff --git a/assets/js/adda2092.a0348321.js b/assets/js/adda2092.e35956f1.js similarity index 100% rename from assets/js/adda2092.a0348321.js rename to assets/js/adda2092.e35956f1.js diff --git a/assets/js/adee7fac.dd7b022d.js b/assets/js/adee7fac.dfb104ef.js similarity index 100% rename from assets/js/adee7fac.dd7b022d.js rename to assets/js/adee7fac.dfb104ef.js diff --git a/assets/js/ae012ad6.03ab0a02.js b/assets/js/ae012ad6.9e433d27.js similarity index 100% rename from assets/js/ae012ad6.03ab0a02.js rename to assets/js/ae012ad6.9e433d27.js diff --git a/assets/js/af0d6317.f03a91e6.js b/assets/js/af0d6317.1d7d7144.js similarity index 100% rename from assets/js/af0d6317.f03a91e6.js rename to assets/js/af0d6317.1d7d7144.js diff --git a/assets/js/af1c1b4c.77dd8457.js b/assets/js/af1c1b4c.7ec439a0.js similarity index 100% rename from assets/js/af1c1b4c.77dd8457.js rename to assets/js/af1c1b4c.7ec439a0.js diff --git a/assets/js/af595eb3.d96f074b.js b/assets/js/af595eb3.6c24678a.js similarity index 100% rename from assets/js/af595eb3.d96f074b.js rename to assets/js/af595eb3.6c24678a.js diff --git a/assets/js/afe98dc1.8dcdae8c.js b/assets/js/afe98dc1.da37a8c8.js similarity index 100% rename from assets/js/afe98dc1.8dcdae8c.js rename to assets/js/afe98dc1.da37a8c8.js diff --git a/assets/js/b0fae788.5cee2467.js b/assets/js/b0fae788.bdea86d1.js similarity index 100% rename from assets/js/b0fae788.5cee2467.js rename to assets/js/b0fae788.bdea86d1.js diff --git a/assets/js/b210f538.56345209.js b/assets/js/b210f538.336cf940.js similarity index 100% rename from assets/js/b210f538.56345209.js rename to assets/js/b210f538.336cf940.js diff --git a/assets/js/b2ae0418.5989275e.js b/assets/js/b2ae0418.328666fc.js similarity index 100% rename from assets/js/b2ae0418.5989275e.js rename to assets/js/b2ae0418.328666fc.js diff --git a/assets/js/b2b6acd7.fabb9832.js b/assets/js/b2b6acd7.56289947.js similarity index 100% rename from assets/js/b2b6acd7.fabb9832.js rename to assets/js/b2b6acd7.56289947.js diff --git a/assets/js/b2f0342a.a52156cf.js b/assets/js/b2f0342a.dbe42cef.js similarity index 100% rename from assets/js/b2f0342a.a52156cf.js rename to assets/js/b2f0342a.dbe42cef.js diff --git a/assets/js/b3eaef05.4ae8dc3b.js b/assets/js/b3eaef05.3b7c2b24.js similarity index 100% rename from assets/js/b3eaef05.4ae8dc3b.js rename to assets/js/b3eaef05.3b7c2b24.js diff --git a/assets/js/b459db2c.ce295046.js b/assets/js/b459db2c.6c905f8c.js similarity index 100% rename from assets/js/b459db2c.ce295046.js rename to assets/js/b459db2c.6c905f8c.js diff --git a/assets/js/b4d5a2f6.16b801ab.js b/assets/js/b4d5a2f6.df16bf11.js similarity index 100% rename from assets/js/b4d5a2f6.16b801ab.js rename to assets/js/b4d5a2f6.df16bf11.js diff --git a/assets/js/b4e3226a.5d7067cb.js b/assets/js/b4e3226a.2ab8f9ab.js similarity index 100% rename from assets/js/b4e3226a.5d7067cb.js rename to assets/js/b4e3226a.2ab8f9ab.js diff --git a/assets/js/b555335c.c02c2c22.js b/assets/js/b555335c.34d689b3.js similarity index 100% rename from assets/js/b555335c.c02c2c22.js rename to assets/js/b555335c.34d689b3.js diff --git a/assets/js/b626e4a0.382a701f.js b/assets/js/b626e4a0.0401bef1.js similarity index 100% rename from assets/js/b626e4a0.382a701f.js rename to assets/js/b626e4a0.0401bef1.js diff --git a/assets/js/b6543ad7.93632173.js b/assets/js/b6543ad7.1f7099c3.js similarity index 100% rename from assets/js/b6543ad7.93632173.js rename to assets/js/b6543ad7.1f7099c3.js diff --git a/assets/js/b7589f11.69376040.js b/assets/js/b7589f11.05f8c829.js similarity index 100% rename from assets/js/b7589f11.69376040.js rename to assets/js/b7589f11.05f8c829.js diff --git a/assets/js/b80ed113.4c9efcd7.js b/assets/js/b80ed113.01db101a.js similarity index 100% rename from assets/js/b80ed113.4c9efcd7.js rename to assets/js/b80ed113.01db101a.js diff --git a/assets/js/b9e53938.879de361.js b/assets/js/b9e53938.c299dc76.js similarity index 100% rename from assets/js/b9e53938.879de361.js rename to assets/js/b9e53938.c299dc76.js diff --git a/assets/js/ba486bac.63111b58.js b/assets/js/ba486bac.aec454aa.js similarity index 100% rename from assets/js/ba486bac.63111b58.js rename to assets/js/ba486bac.aec454aa.js diff --git a/assets/js/bab816a3.287d0d11.js b/assets/js/bab816a3.ad6794fb.js similarity index 100% rename from assets/js/bab816a3.287d0d11.js rename to assets/js/bab816a3.ad6794fb.js diff --git a/assets/js/bae20a2e.55177a30.js b/assets/js/bae20a2e.38044ff1.js similarity index 100% rename from assets/js/bae20a2e.55177a30.js rename to assets/js/bae20a2e.38044ff1.js diff --git a/assets/js/bb568c08.ae1e1ddc.js b/assets/js/bb568c08.7646a7a2.js similarity index 100% rename from assets/js/bb568c08.ae1e1ddc.js rename to assets/js/bb568c08.7646a7a2.js diff --git a/assets/js/bb73c9a4.1bafb563.js b/assets/js/bb73c9a4.e1990cb9.js similarity index 100% rename from assets/js/bb73c9a4.1bafb563.js rename to assets/js/bb73c9a4.e1990cb9.js diff --git a/assets/js/bbd3cca1.108bae28.js b/assets/js/bbd3cca1.8170a05d.js similarity index 100% rename from assets/js/bbd3cca1.108bae28.js rename to assets/js/bbd3cca1.8170a05d.js diff --git a/assets/js/bcedb369.03cf2211.js b/assets/js/bcedb369.59b7f3f4.js similarity index 100% rename from assets/js/bcedb369.03cf2211.js rename to assets/js/bcedb369.59b7f3f4.js diff --git a/assets/js/bcf8cc4a.e0e1228e.js b/assets/js/bcf8cc4a.5b572564.js similarity index 100% rename from assets/js/bcf8cc4a.e0e1228e.js rename to assets/js/bcf8cc4a.5b572564.js diff --git a/assets/js/bd4b2066.55a39585.js b/assets/js/bd4b2066.5cd04cee.js similarity index 100% rename from assets/js/bd4b2066.55a39585.js rename to assets/js/bd4b2066.5cd04cee.js diff --git a/assets/js/bda3d396.5afb993e.js b/assets/js/bda3d396.7d00b6e4.js similarity index 100% rename from assets/js/bda3d396.5afb993e.js rename to assets/js/bda3d396.7d00b6e4.js diff --git a/assets/js/bdc7dfef.cd392c74.js b/assets/js/bdc7dfef.5785386c.js similarity index 100% rename from assets/js/bdc7dfef.cd392c74.js rename to assets/js/bdc7dfef.5785386c.js diff --git a/assets/js/be39e40f.edbe2960.js b/assets/js/be39e40f.5838974f.js similarity index 100% rename from assets/js/be39e40f.edbe2960.js rename to assets/js/be39e40f.5838974f.js diff --git a/assets/js/be52a7d3.2ce04924.js b/assets/js/be52a7d3.7e1da531.js similarity index 100% rename from assets/js/be52a7d3.2ce04924.js rename to assets/js/be52a7d3.7e1da531.js diff --git a/assets/js/be5d235e.21593acd.js b/assets/js/be5d235e.09348d6a.js similarity index 100% rename from assets/js/be5d235e.21593acd.js rename to assets/js/be5d235e.09348d6a.js diff --git a/assets/js/be7ecf1a.a6c669c8.js b/assets/js/be7ecf1a.2575a97c.js similarity index 100% rename from assets/js/be7ecf1a.a6c669c8.js rename to assets/js/be7ecf1a.2575a97c.js diff --git a/assets/js/beace3d7.d7a45272.js b/assets/js/beace3d7.9e56f86a.js similarity index 100% rename from assets/js/beace3d7.d7a45272.js rename to assets/js/beace3d7.9e56f86a.js diff --git a/assets/js/befa7391.1294fb76.js b/assets/js/befa7391.d71f4fa5.js similarity index 100% rename from assets/js/befa7391.1294fb76.js rename to assets/js/befa7391.d71f4fa5.js diff --git a/assets/js/c0bc635a.0d26f0a2.js b/assets/js/c0bc635a.676bbd13.js similarity index 100% rename from assets/js/c0bc635a.0d26f0a2.js rename to assets/js/c0bc635a.676bbd13.js diff --git a/assets/js/c0d4081e.474cd791.js b/assets/js/c0d4081e.fb92c70e.js similarity index 100% rename from assets/js/c0d4081e.474cd791.js rename to assets/js/c0d4081e.fb92c70e.js diff --git a/assets/js/c18f4942.b01da59b.js b/assets/js/c18f4942.1b1395d7.js similarity index 100% rename from assets/js/c18f4942.b01da59b.js rename to assets/js/c18f4942.1b1395d7.js diff --git a/assets/js/c1bcd62e.87cd2210.js b/assets/js/c1bcd62e.782893ee.js similarity index 100% rename from assets/js/c1bcd62e.87cd2210.js rename to assets/js/c1bcd62e.782893ee.js diff --git a/assets/js/c1f9e30a.73939327.js b/assets/js/c1f9e30a.96783f85.js similarity index 100% rename from assets/js/c1f9e30a.73939327.js rename to assets/js/c1f9e30a.96783f85.js diff --git a/assets/js/c213d637.b7abb086.js b/assets/js/c213d637.e2cfc9cd.js similarity index 100% rename from assets/js/c213d637.b7abb086.js rename to assets/js/c213d637.e2cfc9cd.js diff --git a/assets/js/c2bb1329.9bd6d3c2.js b/assets/js/c2bb1329.f0fada29.js similarity index 100% rename from assets/js/c2bb1329.9bd6d3c2.js rename to assets/js/c2bb1329.f0fada29.js diff --git a/assets/js/c4c17032.bdfcdd51.js b/assets/js/c4c17032.620e3ca8.js similarity index 100% rename from assets/js/c4c17032.bdfcdd51.js rename to assets/js/c4c17032.620e3ca8.js diff --git a/assets/js/c4ef2964.1cb34283.js b/assets/js/c4ef2964.71cafa64.js similarity index 100% rename from assets/js/c4ef2964.1cb34283.js rename to assets/js/c4ef2964.71cafa64.js diff --git a/assets/js/c4f5d8e4.ddcbca78.js b/assets/js/c4f5d8e4.7dc1336f.js similarity index 100% rename from assets/js/c4f5d8e4.ddcbca78.js rename to assets/js/c4f5d8e4.7dc1336f.js diff --git a/assets/js/c5e7f3af.6e648253.js b/assets/js/c5e7f3af.e0d43827.js similarity index 100% rename from assets/js/c5e7f3af.6e648253.js rename to assets/js/c5e7f3af.e0d43827.js diff --git a/assets/js/c6720e67.353a16fc.js b/assets/js/c6720e67.ea582a13.js similarity index 100% rename from assets/js/c6720e67.353a16fc.js rename to assets/js/c6720e67.ea582a13.js diff --git a/assets/js/c6eceeae.45c0e31b.js b/assets/js/c6eceeae.d82fc429.js similarity index 100% rename from assets/js/c6eceeae.45c0e31b.js rename to assets/js/c6eceeae.d82fc429.js diff --git a/assets/js/c74d9e4e.a21ca085.js b/assets/js/c74d9e4e.f386fdc7.js similarity index 100% rename from assets/js/c74d9e4e.a21ca085.js rename to assets/js/c74d9e4e.f386fdc7.js diff --git a/assets/js/c7608fc7.b66eec66.js b/assets/js/c7608fc7.fd5a5990.js similarity index 100% rename from assets/js/c7608fc7.b66eec66.js rename to assets/js/c7608fc7.fd5a5990.js diff --git a/assets/js/c783b066.a0bc16b0.js b/assets/js/c783b066.c0bed07c.js similarity index 100% rename from assets/js/c783b066.a0bc16b0.js rename to assets/js/c783b066.c0bed07c.js diff --git a/assets/js/c7d17e4b.f38d577d.js b/assets/js/c7d17e4b.fad30d3b.js similarity index 100% rename from assets/js/c7d17e4b.f38d577d.js rename to assets/js/c7d17e4b.fad30d3b.js diff --git a/assets/js/c811aa7f.0bb82c2c.js b/assets/js/c811aa7f.467939dc.js similarity index 100% rename from assets/js/c811aa7f.0bb82c2c.js rename to assets/js/c811aa7f.467939dc.js diff --git a/assets/js/c82555e2.f27a2e53.js b/assets/js/c82555e2.e96ad60c.js similarity index 100% rename from assets/js/c82555e2.f27a2e53.js rename to assets/js/c82555e2.e96ad60c.js diff --git a/assets/js/c9f1df9f.6fe4639f.js b/assets/js/c9f1df9f.4c23f79a.js similarity index 100% rename from assets/js/c9f1df9f.6fe4639f.js rename to assets/js/c9f1df9f.4c23f79a.js diff --git a/assets/js/ca195e88.f1bd9792.js b/assets/js/ca195e88.9b2b18cb.js similarity index 100% rename from assets/js/ca195e88.f1bd9792.js rename to assets/js/ca195e88.9b2b18cb.js diff --git a/assets/js/ca9eeb9f.346d29f7.js b/assets/js/ca9eeb9f.3f86c3dc.js similarity index 100% rename from assets/js/ca9eeb9f.346d29f7.js rename to assets/js/ca9eeb9f.3f86c3dc.js diff --git a/assets/js/cad7ffaf.96da0965.js b/assets/js/cad7ffaf.d622709b.js similarity index 100% rename from assets/js/cad7ffaf.96da0965.js rename to assets/js/cad7ffaf.d622709b.js diff --git a/assets/js/cb66a971.e574789e.js b/assets/js/cb66a971.3c74ea92.js similarity index 100% rename from assets/js/cb66a971.e574789e.js rename to assets/js/cb66a971.3c74ea92.js diff --git a/assets/js/cbb11013.ad2b3bf8.js b/assets/js/cbb11013.86db69a2.js similarity index 100% rename from assets/js/cbb11013.ad2b3bf8.js rename to assets/js/cbb11013.86db69a2.js diff --git a/assets/js/cbdf4c0b.30df7875.js b/assets/js/cbdf4c0b.33241f9d.js similarity index 100% rename from assets/js/cbdf4c0b.30df7875.js rename to assets/js/cbdf4c0b.33241f9d.js diff --git a/assets/js/cc3e32ef.5c8e938a.js b/assets/js/cc3e32ef.fb14df95.js similarity index 100% rename from assets/js/cc3e32ef.5c8e938a.js rename to assets/js/cc3e32ef.fb14df95.js diff --git a/assets/js/ccef7f5b.2a5232b9.js b/assets/js/ccef7f5b.3b244f12.js similarity index 100% rename from assets/js/ccef7f5b.2a5232b9.js rename to assets/js/ccef7f5b.3b244f12.js diff --git a/assets/js/cd443648.9980e1b4.js b/assets/js/cd443648.b2ff6866.js similarity index 100% rename from assets/js/cd443648.9980e1b4.js rename to assets/js/cd443648.b2ff6866.js diff --git a/assets/js/cd907f23.eb0aaf12.js b/assets/js/cd907f23.e3865b0e.js similarity index 100% rename from assets/js/cd907f23.eb0aaf12.js rename to assets/js/cd907f23.e3865b0e.js diff --git a/assets/js/cdb38c9b.fad46388.js b/assets/js/cdb38c9b.371b3b3b.js similarity index 100% rename from assets/js/cdb38c9b.fad46388.js rename to assets/js/cdb38c9b.371b3b3b.js diff --git a/assets/js/ce91c8e6.67729f2e.js b/assets/js/ce91c8e6.db90616c.js similarity index 100% rename from assets/js/ce91c8e6.67729f2e.js rename to assets/js/ce91c8e6.db90616c.js diff --git a/assets/js/cf4a34bd.4c9953f0.js b/assets/js/cf4a34bd.786bd41c.js similarity index 100% rename from assets/js/cf4a34bd.4c9953f0.js rename to assets/js/cf4a34bd.786bd41c.js diff --git a/assets/js/cf8c7470.8ffd1b5d.js b/assets/js/cf8c7470.852b6e5d.js similarity index 100% rename from assets/js/cf8c7470.8ffd1b5d.js rename to assets/js/cf8c7470.852b6e5d.js diff --git a/assets/js/d0a7834c.8ba4e88e.js b/assets/js/d0a7834c.aca9af79.js similarity index 100% rename from assets/js/d0a7834c.8ba4e88e.js rename to assets/js/d0a7834c.aca9af79.js diff --git a/assets/js/d1167098.7818a4f1.js b/assets/js/d1167098.31d8c43c.js similarity index 100% rename from assets/js/d1167098.7818a4f1.js rename to assets/js/d1167098.31d8c43c.js diff --git a/assets/js/d12ff093.37c5b9f2.js b/assets/js/d12ff093.63d9b3d5.js similarity index 100% rename from assets/js/d12ff093.37c5b9f2.js rename to assets/js/d12ff093.63d9b3d5.js diff --git a/assets/js/d14d5dce.f62a24e4.js b/assets/js/d14d5dce.cf9a9fff.js similarity index 100% rename from assets/js/d14d5dce.f62a24e4.js rename to assets/js/d14d5dce.cf9a9fff.js diff --git a/assets/js/d2477c27.f83a0ec5.js b/assets/js/d2477c27.540e5b5a.js similarity index 100% rename from assets/js/d2477c27.f83a0ec5.js rename to assets/js/d2477c27.540e5b5a.js diff --git a/assets/js/d311eeaf.d5c21e41.js b/assets/js/d311eeaf.a650595d.js similarity index 100% rename from assets/js/d311eeaf.d5c21e41.js rename to assets/js/d311eeaf.a650595d.js diff --git a/assets/js/d320f50b.4ad6bdd5.js b/assets/js/d320f50b.bd21b7f7.js similarity index 100% rename from assets/js/d320f50b.4ad6bdd5.js rename to assets/js/d320f50b.bd21b7f7.js diff --git a/assets/js/d324dc66.711d9836.js b/assets/js/d324dc66.604403c9.js similarity index 100% rename from assets/js/d324dc66.711d9836.js rename to assets/js/d324dc66.604403c9.js diff --git a/assets/js/d37d7f17.4bf14f6f.js b/assets/js/d37d7f17.19dfd8b2.js similarity index 100% rename from assets/js/d37d7f17.4bf14f6f.js rename to assets/js/d37d7f17.19dfd8b2.js diff --git a/assets/js/d3a04b7a.f24a0630.js b/assets/js/d3a04b7a.d2add501.js similarity index 100% rename from assets/js/d3a04b7a.f24a0630.js rename to assets/js/d3a04b7a.d2add501.js diff --git a/assets/js/d460217b.f6b1c859.js b/assets/js/d460217b.e4c17b61.js similarity index 100% rename from assets/js/d460217b.f6b1c859.js rename to assets/js/d460217b.e4c17b61.js diff --git a/assets/js/d648f144.e398a005.js b/assets/js/d648f144.3cb98085.js similarity index 100% rename from assets/js/d648f144.e398a005.js rename to assets/js/d648f144.3cb98085.js diff --git a/assets/js/d64ca407.ae0cc3d8.js b/assets/js/d64ca407.5175a969.js similarity index 100% rename from assets/js/d64ca407.ae0cc3d8.js rename to assets/js/d64ca407.5175a969.js diff --git a/assets/js/d6c09953.3d2a2c91.js b/assets/js/d6c09953.cf85e224.js similarity index 100% rename from assets/js/d6c09953.3d2a2c91.js rename to assets/js/d6c09953.cf85e224.js diff --git a/assets/js/d73fea11.a49b3180.js b/assets/js/d73fea11.aacc65dc.js similarity index 100% rename from assets/js/d73fea11.a49b3180.js rename to assets/js/d73fea11.aacc65dc.js diff --git a/assets/js/d85c8cd6.2960aae8.js b/assets/js/d85c8cd6.857d6dd6.js similarity index 100% rename from assets/js/d85c8cd6.2960aae8.js rename to assets/js/d85c8cd6.857d6dd6.js diff --git a/assets/js/d8b1ec13.06c36f8c.js b/assets/js/d8b1ec13.c463f362.js similarity index 100% rename from assets/js/d8b1ec13.06c36f8c.js rename to assets/js/d8b1ec13.c463f362.js diff --git a/assets/js/d8c3d873.4f8399e1.js b/assets/js/d8c3d873.3596ea90.js similarity index 100% rename from assets/js/d8c3d873.4f8399e1.js rename to assets/js/d8c3d873.3596ea90.js diff --git a/assets/js/d91c45f5.6bd6c747.js b/assets/js/d91c45f5.65997318.js similarity index 100% rename from assets/js/d91c45f5.6bd6c747.js rename to assets/js/d91c45f5.65997318.js diff --git a/assets/js/da0151db.ab918813.js b/assets/js/da0151db.8e2785c9.js similarity index 100% rename from assets/js/da0151db.ab918813.js rename to assets/js/da0151db.8e2785c9.js diff --git a/assets/js/da63f618.cf1bf158.js b/assets/js/da63f618.a3597590.js similarity index 100% rename from assets/js/da63f618.cf1bf158.js rename to assets/js/da63f618.a3597590.js diff --git a/assets/js/daad9ff9.0e2b7bdc.js b/assets/js/daad9ff9.33918c16.js similarity index 100% rename from assets/js/daad9ff9.0e2b7bdc.js rename to assets/js/daad9ff9.33918c16.js diff --git a/assets/js/dac962c5.325460a7.js b/assets/js/dac962c5.8533b121.js similarity index 100% rename from assets/js/dac962c5.325460a7.js rename to assets/js/dac962c5.8533b121.js diff --git a/assets/js/db35c4c8.1c924ce4.js b/assets/js/db35c4c8.0fee98d1.js similarity index 100% rename from assets/js/db35c4c8.1c924ce4.js rename to assets/js/db35c4c8.0fee98d1.js diff --git a/assets/js/db40a197.6a02d044.js b/assets/js/db40a197.d58e7942.js similarity index 100% rename from assets/js/db40a197.6a02d044.js rename to assets/js/db40a197.d58e7942.js diff --git a/assets/js/db9aebef.37a53f87.js b/assets/js/db9aebef.20194021.js similarity index 100% rename from assets/js/db9aebef.37a53f87.js rename to assets/js/db9aebef.20194021.js diff --git a/assets/js/dfb780e2.cc7e93f3.js b/assets/js/dfb780e2.ad421568.js similarity index 100% rename from assets/js/dfb780e2.cc7e93f3.js rename to assets/js/dfb780e2.ad421568.js diff --git a/assets/js/e0945e2f.da69faf0.js b/assets/js/e0945e2f.4bbbb75c.js similarity index 100% rename from assets/js/e0945e2f.da69faf0.js rename to assets/js/e0945e2f.4bbbb75c.js diff --git a/assets/js/e1411089.9c4a67ad.js b/assets/js/e1411089.2f5695cd.js similarity index 100% rename from assets/js/e1411089.9c4a67ad.js rename to assets/js/e1411089.2f5695cd.js diff --git a/assets/js/e181c7c7.44f008b4.js b/assets/js/e181c7c7.44c70003.js similarity index 100% rename from assets/js/e181c7c7.44f008b4.js rename to assets/js/e181c7c7.44c70003.js diff --git a/assets/js/e2968c94.c0fecf81.js b/assets/js/e2968c94.f9b67899.js similarity index 100% rename from assets/js/e2968c94.c0fecf81.js rename to assets/js/e2968c94.f9b67899.js diff --git a/assets/js/e378c0f5.3d22ff67.js b/assets/js/e378c0f5.c4ee2892.js similarity index 100% rename from assets/js/e378c0f5.3d22ff67.js rename to assets/js/e378c0f5.c4ee2892.js diff --git a/assets/js/e40d76ff.63a892e9.js b/assets/js/e40d76ff.99bc6e8f.js similarity index 100% rename from assets/js/e40d76ff.63a892e9.js rename to assets/js/e40d76ff.99bc6e8f.js diff --git a/assets/js/e44baca5.6f779815.js b/assets/js/e44baca5.5bef5d3a.js similarity index 100% rename from assets/js/e44baca5.6f779815.js rename to assets/js/e44baca5.5bef5d3a.js diff --git a/assets/js/e47f129a.5d50330c.js b/assets/js/e47f129a.c43b049e.js similarity index 100% rename from assets/js/e47f129a.5d50330c.js rename to assets/js/e47f129a.c43b049e.js diff --git a/assets/js/e4976f82.530ba4ef.js b/assets/js/e4976f82.bdb64663.js similarity index 100% rename from assets/js/e4976f82.530ba4ef.js rename to assets/js/e4976f82.bdb64663.js diff --git a/assets/js/e4b98d56.819afffc.js b/assets/js/e4b98d56.64c0186a.js similarity index 100% rename from assets/js/e4b98d56.819afffc.js rename to assets/js/e4b98d56.64c0186a.js diff --git a/assets/js/e4fc6f88.31a479f0.js b/assets/js/e4fc6f88.f0801d08.js similarity index 100% rename from assets/js/e4fc6f88.31a479f0.js rename to assets/js/e4fc6f88.f0801d08.js diff --git a/assets/js/e50dbd59.f7bb6708.js b/assets/js/e50dbd59.fd2c86d8.js similarity index 100% rename from assets/js/e50dbd59.f7bb6708.js rename to assets/js/e50dbd59.fd2c86d8.js diff --git a/assets/js/e53314b3.1ba0694a.js b/assets/js/e53314b3.ba01bcbf.js similarity index 100% rename from assets/js/e53314b3.1ba0694a.js rename to assets/js/e53314b3.ba01bcbf.js diff --git a/assets/js/e53b1169.d3501ee5.js b/assets/js/e53b1169.c7683bc5.js similarity index 100% rename from assets/js/e53b1169.d3501ee5.js rename to assets/js/e53b1169.c7683bc5.js diff --git a/assets/js/e549d204.68e2a22f.js b/assets/js/e549d204.12cbe431.js similarity index 100% rename from assets/js/e549d204.68e2a22f.js rename to assets/js/e549d204.12cbe431.js diff --git a/assets/js/e56a5f3e.507acfa0.js b/assets/js/e56a5f3e.015104d6.js similarity index 100% rename from assets/js/e56a5f3e.507acfa0.js rename to assets/js/e56a5f3e.015104d6.js diff --git a/assets/js/e578e1c1.5d895d8f.js b/assets/js/e578e1c1.df22a64d.js similarity index 100% rename from assets/js/e578e1c1.5d895d8f.js rename to assets/js/e578e1c1.df22a64d.js diff --git a/assets/js/e623212a.78f6fb45.js b/assets/js/e623212a.834ceb13.js similarity index 100% rename from assets/js/e623212a.78f6fb45.js rename to assets/js/e623212a.834ceb13.js diff --git a/assets/js/e6b615c7.deaafb46.js b/assets/js/e6b615c7.1510f30b.js similarity index 100% rename from assets/js/e6b615c7.deaafb46.js rename to assets/js/e6b615c7.1510f30b.js diff --git a/assets/js/e78a2122.8338f7c1.js b/assets/js/e78a2122.4912dd2a.js similarity index 100% rename from assets/js/e78a2122.8338f7c1.js rename to assets/js/e78a2122.4912dd2a.js diff --git a/assets/js/e7f51ecb.ab6dd890.js b/assets/js/e7f51ecb.4c94f11c.js similarity index 100% rename from assets/js/e7f51ecb.ab6dd890.js rename to assets/js/e7f51ecb.4c94f11c.js diff --git a/assets/js/e9e4cc90.29486ebd.js b/assets/js/e9e4cc90.990eb102.js similarity index 100% rename from assets/js/e9e4cc90.29486ebd.js rename to assets/js/e9e4cc90.990eb102.js diff --git a/assets/js/ea0eeea3.042b9fc5.js b/assets/js/ea0eeea3.f65d37a5.js similarity index 100% rename from assets/js/ea0eeea3.042b9fc5.js rename to assets/js/ea0eeea3.f65d37a5.js diff --git a/assets/js/eab0d811.0a9ef737.js b/assets/js/eab0d811.b34dfc7f.js similarity index 100% rename from assets/js/eab0d811.0a9ef737.js rename to assets/js/eab0d811.b34dfc7f.js diff --git a/assets/js/eab8af53.50fcbc38.js b/assets/js/eab8af53.3dbb5101.js similarity index 100% rename from assets/js/eab8af53.50fcbc38.js rename to assets/js/eab8af53.3dbb5101.js diff --git a/assets/js/eade11f2.e9d9df82.js b/assets/js/eade11f2.79b7a7b7.js similarity index 100% rename from assets/js/eade11f2.e9d9df82.js rename to assets/js/eade11f2.79b7a7b7.js diff --git a/assets/js/eaf4c34d.2fd9e9a2.js b/assets/js/eaf4c34d.424e8364.js similarity index 100% rename from assets/js/eaf4c34d.2fd9e9a2.js rename to assets/js/eaf4c34d.424e8364.js diff --git a/assets/js/eb547e60.556a8776.js b/assets/js/eb547e60.ac032256.js similarity index 100% rename from assets/js/eb547e60.556a8776.js rename to assets/js/eb547e60.ac032256.js diff --git a/assets/js/ebb622c4.43c6f5be.js b/assets/js/ebb622c4.505bd398.js similarity index 100% rename from assets/js/ebb622c4.43c6f5be.js rename to assets/js/ebb622c4.505bd398.js diff --git a/assets/js/ec69c133.b35b6055.js b/assets/js/ec69c133.6a62bb5f.js similarity index 100% rename from assets/js/ec69c133.b35b6055.js rename to assets/js/ec69c133.6a62bb5f.js diff --git a/assets/js/ed3cdc07.5e18f0c8.js b/assets/js/ed3cdc07.bd0036e2.js similarity index 100% rename from assets/js/ed3cdc07.5e18f0c8.js rename to assets/js/ed3cdc07.bd0036e2.js diff --git a/assets/js/edfd899f.43abc462.js b/assets/js/edfd899f.779bc7b3.js similarity index 100% rename from assets/js/edfd899f.43abc462.js rename to assets/js/edfd899f.779bc7b3.js diff --git a/assets/js/ee1c428b.28369836.js b/assets/js/ee1c428b.7a88bbd2.js similarity index 100% rename from assets/js/ee1c428b.28369836.js rename to assets/js/ee1c428b.7a88bbd2.js diff --git a/assets/js/eea3c882.db360e43.js b/assets/js/eea3c882.4ff20323.js similarity index 100% rename from assets/js/eea3c882.db360e43.js rename to assets/js/eea3c882.4ff20323.js diff --git a/assets/js/ef9854ec.bcaa9264.js b/assets/js/ef9854ec.93e9ed0a.js similarity index 100% rename from assets/js/ef9854ec.bcaa9264.js rename to assets/js/ef9854ec.93e9ed0a.js diff --git a/assets/js/efe8a79b.2b96cc70.js b/assets/js/efe8a79b.2592ade0.js similarity index 100% rename from assets/js/efe8a79b.2b96cc70.js rename to assets/js/efe8a79b.2592ade0.js diff --git a/assets/js/f01ffb6e.fe3cad16.js b/assets/js/f01ffb6e.18b3fe4c.js similarity index 100% rename from assets/js/f01ffb6e.fe3cad16.js rename to assets/js/f01ffb6e.18b3fe4c.js diff --git a/assets/js/f03823fb.0e33c6a2.js b/assets/js/f03823fb.46815f32.js similarity index 100% rename from assets/js/f03823fb.0e33c6a2.js rename to assets/js/f03823fb.46815f32.js diff --git a/assets/js/f074aa7c.86eaf4f5.js b/assets/js/f074aa7c.d9ab6cc2.js similarity index 100% rename from assets/js/f074aa7c.86eaf4f5.js rename to assets/js/f074aa7c.d9ab6cc2.js diff --git a/assets/js/f13220bc.ad8ca848.js b/assets/js/f13220bc.d5e0b877.js similarity index 100% rename from assets/js/f13220bc.ad8ca848.js rename to assets/js/f13220bc.d5e0b877.js diff --git a/assets/js/f1ae5025.a8f13bbc.js b/assets/js/f1ae5025.8088cd65.js similarity index 100% rename from assets/js/f1ae5025.a8f13bbc.js rename to assets/js/f1ae5025.8088cd65.js diff --git a/assets/js/f1f320f4.6c2983f9.js b/assets/js/f1f320f4.d1555b64.js similarity index 100% rename from assets/js/f1f320f4.6c2983f9.js rename to assets/js/f1f320f4.d1555b64.js diff --git a/assets/js/f288d75b.7a890d89.js b/assets/js/f288d75b.7f1ac475.js similarity index 100% rename from assets/js/f288d75b.7a890d89.js rename to assets/js/f288d75b.7f1ac475.js diff --git a/assets/js/f31d0f82.65ab7f9e.js b/assets/js/f31d0f82.e4035f32.js similarity index 100% rename from assets/js/f31d0f82.65ab7f9e.js rename to assets/js/f31d0f82.e4035f32.js diff --git a/assets/js/f3b225f5.26efa4ea.js b/assets/js/f3b225f5.c8f35dab.js similarity index 100% rename from assets/js/f3b225f5.26efa4ea.js rename to assets/js/f3b225f5.c8f35dab.js diff --git a/assets/js/f41020a8.fa5ff272.js b/assets/js/f41020a8.80077608.js similarity index 100% rename from assets/js/f41020a8.fa5ff272.js rename to assets/js/f41020a8.80077608.js diff --git a/assets/js/f426c772.468dca7d.js b/assets/js/f426c772.b2991f3d.js similarity index 100% rename from assets/js/f426c772.468dca7d.js rename to assets/js/f426c772.b2991f3d.js diff --git a/assets/js/f501240f.75f964ce.js b/assets/js/f501240f.fa03317e.js similarity index 100% rename from assets/js/f501240f.75f964ce.js rename to assets/js/f501240f.fa03317e.js diff --git a/assets/js/f5ebfb03.c79028ef.js b/assets/js/f5ebfb03.cafc6496.js similarity index 100% rename from assets/js/f5ebfb03.c79028ef.js rename to assets/js/f5ebfb03.cafc6496.js diff --git a/assets/js/f657dcbe.e833f215.js b/assets/js/f657dcbe.da1a7e28.js similarity index 100% rename from assets/js/f657dcbe.e833f215.js rename to assets/js/f657dcbe.da1a7e28.js diff --git a/assets/js/f67b2e96.9740935f.js b/assets/js/f67b2e96.9d7dcf8c.js similarity index 100% rename from assets/js/f67b2e96.9740935f.js rename to assets/js/f67b2e96.9d7dcf8c.js diff --git a/assets/js/f7b7b097.64183dba.js b/assets/js/f7b7b097.5a864d3b.js similarity index 100% rename from assets/js/f7b7b097.64183dba.js rename to assets/js/f7b7b097.5a864d3b.js diff --git a/assets/js/f8372c68.9787cdbd.js b/assets/js/f8372c68.dc7048e3.js similarity index 100% rename from assets/js/f8372c68.9787cdbd.js rename to assets/js/f8372c68.dc7048e3.js diff --git a/assets/js/f88e3eac.a86988c8.js b/assets/js/f88e3eac.380df235.js similarity index 100% rename from assets/js/f88e3eac.a86988c8.js rename to assets/js/f88e3eac.380df235.js diff --git a/assets/js/f9153133.46e8c83e.js b/assets/js/f9153133.b73f8479.js similarity index 100% rename from assets/js/f9153133.46e8c83e.js rename to assets/js/f9153133.b73f8479.js diff --git a/assets/js/f982c8aa.e4b61524.js b/assets/js/f982c8aa.e9d2b377.js similarity index 100% rename from assets/js/f982c8aa.e4b61524.js rename to assets/js/f982c8aa.e9d2b377.js diff --git a/assets/js/f99337df.334cee9d.js b/assets/js/f99337df.3d5cfa8b.js similarity index 100% rename from assets/js/f99337df.334cee9d.js rename to assets/js/f99337df.3d5cfa8b.js diff --git a/assets/js/fa3f8c77.f2990275.js b/assets/js/fa3f8c77.08a0cac2.js similarity index 100% rename from assets/js/fa3f8c77.f2990275.js rename to assets/js/fa3f8c77.08a0cac2.js diff --git a/assets/js/faf4c33d.e17edaeb.js b/assets/js/faf4c33d.31ca35c1.js similarity index 100% rename from assets/js/faf4c33d.e17edaeb.js rename to assets/js/faf4c33d.31ca35c1.js diff --git a/assets/js/fb19c5cf.c1a3e179.js b/assets/js/fb19c5cf.cf261135.js similarity index 100% rename from assets/js/fb19c5cf.c1a3e179.js rename to assets/js/fb19c5cf.cf261135.js diff --git a/assets/js/fb88c6dd.731eb5b5.js b/assets/js/fb88c6dd.82e3ed54.js similarity index 100% rename from assets/js/fb88c6dd.731eb5b5.js rename to assets/js/fb88c6dd.82e3ed54.js diff --git a/assets/js/fb9288fc.eee3efae.js b/assets/js/fb9288fc.9dfdcac6.js similarity index 100% rename from assets/js/fb9288fc.eee3efae.js rename to assets/js/fb9288fc.9dfdcac6.js diff --git a/assets/js/fbbf3453.8e40c861.js b/assets/js/fbbf3453.df9415e9.js similarity index 100% rename from assets/js/fbbf3453.8e40c861.js rename to assets/js/fbbf3453.df9415e9.js diff --git a/assets/js/fc545d88.516349b2.js b/assets/js/fc545d88.d4c583f4.js similarity index 100% rename from assets/js/fc545d88.516349b2.js rename to assets/js/fc545d88.d4c583f4.js diff --git a/assets/js/fcc3e544.13db955e.js b/assets/js/fcc3e544.de361fdf.js similarity index 100% rename from assets/js/fcc3e544.13db955e.js rename to assets/js/fcc3e544.de361fdf.js diff --git a/assets/js/fceb1eb4.2b7ccdc8.js b/assets/js/fceb1eb4.d95dd202.js similarity index 100% rename from assets/js/fceb1eb4.2b7ccdc8.js rename to assets/js/fceb1eb4.d95dd202.js diff --git a/assets/js/fd46dfbe.60da0511.js b/assets/js/fd46dfbe.7d08b735.js similarity index 100% rename from assets/js/fd46dfbe.60da0511.js rename to assets/js/fd46dfbe.7d08b735.js diff --git a/assets/js/fd5ab4b0.ecca1a3e.js b/assets/js/fd5ab4b0.e6f7eebe.js similarity index 100% rename from assets/js/fd5ab4b0.ecca1a3e.js rename to assets/js/fd5ab4b0.e6f7eebe.js diff --git a/assets/js/fd8c2799.459634d2.js b/assets/js/fd8c2799.be069215.js similarity index 100% rename from assets/js/fd8c2799.459634d2.js rename to assets/js/fd8c2799.be069215.js diff --git a/assets/js/fdee7c0b.726168ed.js b/assets/js/fdee7c0b.8e1d57fe.js similarity index 100% rename from assets/js/fdee7c0b.726168ed.js rename to assets/js/fdee7c0b.8e1d57fe.js diff --git a/assets/js/fea67c26.32a09206.js b/assets/js/fea67c26.90dc2a0a.js similarity index 100% rename from assets/js/fea67c26.32a09206.js rename to assets/js/fea67c26.90dc2a0a.js diff --git a/assets/js/fec30dd7.d3283fe5.js b/assets/js/fec30dd7.2d0793db.js similarity index 100% rename from assets/js/fec30dd7.d3283fe5.js rename to assets/js/fec30dd7.2d0793db.js diff --git a/assets/js/fefe1fde.0d4cb257.js b/assets/js/fefe1fde.c9cd477b.js similarity index 100% rename from assets/js/fefe1fde.0d4cb257.js rename to assets/js/fefe1fde.c9cd477b.js diff --git a/assets/js/ffcf8c10.44ab9ca1.js b/assets/js/ffcf8c10.08e31d9f.js similarity index 100% rename from assets/js/ffcf8c10.44ab9ca1.js rename to assets/js/ffcf8c10.08e31d9f.js diff --git a/assets/js/main.63f53138.js b/assets/js/main.02f0a6a3.js similarity index 99% rename from assets/js/main.63f53138.js rename to assets/js/main.02f0a6a3.js index a057b9f39a..eca29a21c9 100644 --- a/assets/js/main.63f53138.js +++ b/assets/js/main.02f0a6a3.js @@ -1,2 +1,2 @@ -/*! For license information please see main.63f53138.js.LICENSE.txt */ +/*! For license information please see main.02f0a6a3.js.LICENSE.txt */ (window.webpackJsonp=window.webpackJsonp||[]).push([[550],[function(e,t,n){"use strict";e.exports=n(38)},function(e,t,n){e.exports=n(42)()},function(e,t,n){"use strict";(function(e){n.d(t,"a",(function(){return T})),n.d(t,"b",(function(){return E})),n.d(t,"c",(function(){return O})),n.d(t,"d",(function(){return I})),n.d(t,"e",(function(){return w})),n.d(t,"f",(function(){return U})),n.d(t,"g",(function(){return $})),n.d(t,"h",(function(){return k})),n.d(t,"i",(function(){return P})),n.d(t,"j",(function(){return N})),n.d(t,"k",(function(){return V})),n.d(t,"l",(function(){return H})),n.d(t,"m",(function(){return W})),n.d(t,"n",(function(){return K})),n.d(t,"o",(function(){return q}));var a=n(6),i=n(0),o=n.n(i),r=n(1),s=n.n(r),c=n(4),l=n(5),d=n(3),p=n(20),u=n.n(p),v=(n(25),n(7)),f=n(33),m=n.n(f),g=1073741823,h="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:void 0!==e?e:{};var b=o.a.createContext||function(e,t){var n,i,r="__create-react-context-"+function(){var e="__global_unique_id__";return h[e]=(h[e]||0)+1}()+"__",c=function(e){function n(){for(var t,n,a,i=arguments.length,o=new Array(i),r=0;r=0;u--){var v=r[u];"."===v?o(r,u):".."===v?(o(r,u),p++):p&&(o(r,u),p--)}if(!l)for(;p--;p)r.unshift("..");!l||""===r[0]||r[0]&&i(r[0])||r.unshift("");var f=r.join("/");return n&&"/"!==f.substr(-1)&&(f+="/"),f};function s(e){return e.valueOf?e.valueOf():Object.prototype.valueOf.call(e)}var c=function e(t,n){if(t===n)return!0;if(null==t||null==n)return!1;if(Array.isArray(t))return Array.isArray(n)&&t.length===n.length&&t.every((function(t,a){return e(t,n[a])}));if("object"==typeof t||"object"==typeof n){var a=s(t),i=s(n);return a!==t||i!==n?e(a,i):Object.keys(Object.assign({},t,n)).every((function(a){return e(t[a],n[a])}))}return!1},l=n(5);function d(e){return"/"===e.charAt(0)?e:"/"+e}function p(e){return"/"===e.charAt(0)?e.substr(1):e}function u(e,t){return function(e,t){return 0===e.toLowerCase().indexOf(t.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(t.length))}(e,t)?e.substr(t.length):e}function v(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function f(e){var t=e.pathname,n=e.search,a=e.hash,i=t||"/";return n&&"?"!==n&&(i+="?"===n.charAt(0)?n:"?"+n),a&&"#"!==a&&(i+="#"===a.charAt(0)?a:"#"+a),i}function m(e,t,n,i){var o;"string"==typeof e?(o=function(e){var t=e||"/",n="",a="",i=t.indexOf("#");-1!==i&&(a=t.substr(i),t=t.substr(0,i));var o=t.indexOf("?");return-1!==o&&(n=t.substr(o),t=t.substr(0,o)),{pathname:t,search:"?"===n?"":n,hash:"#"===a?"":a}}(e),o.state=t):(void 0===(o=Object(a.a)({},e)).pathname&&(o.pathname=""),o.search?"?"!==o.search.charAt(0)&&(o.search="?"+o.search):o.search="",o.hash?"#"!==o.hash.charAt(0)&&(o.hash="#"+o.hash):o.hash="",void 0!==t&&void 0===o.state&&(o.state=t));try{o.pathname=decodeURI(o.pathname)}catch(s){throw s instanceof URIError?new URIError('Pathname "'+o.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):s}return n&&(o.key=n),i?o.pathname?"/"!==o.pathname.charAt(0)&&(o.pathname=r(o.pathname,i.pathname)):o.pathname=i.pathname:o.pathname||(o.pathname="/"),o}function g(e,t){return e.pathname===t.pathname&&e.search===t.search&&e.hash===t.hash&&e.key===t.key&&c(e.state,t.state)}function h(){var e=null;var t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,a,i){if(null!=e){var o="function"==typeof e?e(t,n):e;"string"==typeof o?"function"==typeof a?a(o,i):i(!0):i(!1!==o)}else i(!0)},appendListener:function(e){var n=!0;function a(){n&&e.apply(void 0,arguments)}return t.push(a),function(){n=!1,t=t.filter((function(e){return e!==a}))}},notifyListeners:function(){for(var e=arguments.length,n=new Array(e),a=0;at?n.splice(t,n.length-t,i):n.push(i),p({action:a,location:i,index:t,entries:n})}}))},replace:function(e,t){var a="REPLACE",i=m(e,t,u(),x.location);d.confirmTransitionTo(i,a,n,(function(e){e&&(x.entries[x.index]=i,p({action:a,location:i}))}))},go:y,goBack:function(){y(-1)},goForward:function(){y(1)},canGo:function(e){var t=x.index+e;return t>=0&&t=0||(i[n]=e[n]);return i}n.d(t,"a",(function(){return a}))},function(e,t,n){"use strict";const a=!("undefined"==typeof window||!window.document||!window.document.createElement),i={canUseDOM:a,canUseEventListeners:a&&!(!window.addEventListener&&!window.attachEvent),canUseIntersectionObserver:a&&"IntersectionObserver"in window,canUseViewport:a&&!!window.screen};t.a=i},function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return c}));var a=n(2),i=n(3),o=n(0),r=n.n(o);function s(e,t,n){return void 0===n&&(n=[]),e.some((function(e){var i=e.path?Object(a.j)(t,e):n.length?n[n.length-1].match:a.e.computeRootMatch(t);return i&&(n.push({route:e,match:i}),e.routes&&s(e.routes,t,n)),i})),n}function c(e,t,n){return void 0===t&&(t={}),void 0===n&&(n={}),e?r.a.createElement(a.g,n,e.map((function(e,n){return r.a.createElement(a.d,{key:e.key||n,path:e.path,exact:e.exact,strict:e.strict,render:function(n){return e.render?e.render(Object(i.a)({},n,{},t,{route:e})):r.a.createElement(e.component,Object(i.a)({},n,t,{route:e}))}})}))):null}},function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return u})),n.d(t,"c",(function(){return b})),n.d(t,"e",(function(){return k}));var a=n(2);n.d(t,"d",(function(){return a.a})),n.d(t,"f",(function(){return a.b})),n.d(t,"g",(function(){return a.c})),n.d(t,"h",(function(){return a.d})),n.d(t,"i",(function(){return a.e})),n.d(t,"j",(function(){return a.f})),n.d(t,"k",(function(){return a.g})),n.d(t,"l",(function(){return a.i})),n.d(t,"m",(function(){return a.j})),n.d(t,"n",(function(){return a.k})),n.d(t,"o",(function(){return a.l})),n.d(t,"p",(function(){return a.m})),n.d(t,"q",(function(){return a.n})),n.d(t,"r",(function(){return a.o}));var i=n(6),o=n(0),r=n.n(o),s=n(4),c=n(3),l=n(7),d=n(5),p=function(e){function t(){for(var t,n=arguments.length,a=new Array(n),i=0;i
'};function i(e,t,n){return en?n:e}function o(e){return 100*(-1+e)}function r(e,t,n){var i;return(i="translate3d"===a.positionUsing?{transform:"translate3d("+o(e)+"%,0,0)"}:"translate"===a.positionUsing?{transform:"translate("+o(e)+"%,0)"}:{"margin-left":o(e)+"%"}).transition="all "+t+"ms "+n,i}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(a[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=i(e,a.minimum,1),n.status=1===e?null:e;var o=n.render(!t),l=o.querySelector(a.barSelector),d=a.speed,p=a.easing;return o.offsetWidth,s((function(t){""===a.positionUsing&&(a.positionUsing=n.getPositioningCSS()),c(l,r(e,d,p)),1===e?(c(o,{transition:"none",opacity:1}),o.offsetWidth,setTimeout((function(){c(o,{transition:"all "+d+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),d)}),d)):setTimeout(t,d)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),a.trickleSpeed)};return a.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*i(Math.random()*t,.1,.95)),t=i(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*a.trickleRate)},e=0,t=0,n.promise=function(a){return a&&"resolved"!==a.state()?(0===t&&n.start(),e++,t++,a.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");d(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=a.template;var i,r=t.querySelector(a.barSelector),s=e?"-100":o(n.status||0),l=document.querySelector(a.parent);return c(r,{transition:"all 0 linear",transform:"translate3d("+s+"%,0,0)"}),a.showSpinner||(i=t.querySelector(a.spinnerSelector))&&v(i),l!=document.body&&d(l,"nprogress-custom-parent"),l.appendChild(t),t},n.remove=function(){p(document.documentElement,"nprogress-busy"),p(document.querySelector(a.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&v(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var s=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),c=function(){var e=["Webkit","O","Moz","ms"],t={};function n(e){return e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()}))}function a(t){var n=document.body.style;if(t in n)return t;for(var a,i=e.length,o=t.charAt(0).toUpperCase()+t.slice(1);i--;)if((a=e[i]+o)in n)return a;return t}function i(e){return e=n(e),t[e]||(t[e]=a(e))}function o(e,t,n){t=i(t),e.style[t]=n}return function(e,t){var n,a,i=arguments;if(2==i.length)for(n in t)void 0!==(a=t[n])&&t.hasOwnProperty(n)&&o(e,n,a);else o(e,i[1],i[2])}}();function l(e,t){return("string"==typeof e?e:u(e)).indexOf(" "+t+" ")>=0}function d(e,t){var n=u(e),a=n+t;l(n,t)||(e.className=a.substring(1))}function p(e,t){var n,a=u(e);l(e,t)&&(n=a.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function u(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function v(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n},void 0===(i="function"==typeof a?a.call(t,n,t,e):a)||(e.exports=i)},function(e,t,n){"use strict";n.r(t);var a=n(0),i=n(14);t.default=function(){const e=Object(a.useContext)(i.a);if(null===e)throw new Error("Docusaurus context not provided");return e}},,function(e,t,n){var a={"./":47};function i(e){var t=o(e);return n(t)}function o(e){if(!n.o(a,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return a[e]}i.keys=function(){return Object.keys(a)},i.resolve=o,e.exports=i,i.id=18},function(e,t,n){"use strict";function a(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function i(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(){return r=Object.assign||function(e){for(var t=1;t=p.reach);T+=w.value.length,w=w.next){var S=w.value;if(t.length>e.length)return;if(!(S instanceof i)){var E,_=1;if(b){if(!(E=o(k,T,e,h))||E.index>=e.length)break;var C=E.index,B=E.index+E[0].length,P=T;for(P+=w.value.length;C>=P;)P+=(w=w.next).value.length;if(T=P-=w.value.length,w.value instanceof i)continue;for(var O=w;O!==t.tail&&(Pp.reach&&(p.reach=N);var I=w.prev;if(R&&(I=c(t,I,R),T+=R.length),l(t,I,_),w=c(t,I,new i(u,g?a.tokenize(A,g):A,y,A)),M&&c(t,w,M),_>1){var L={cause:u+","+f,reach:N};r(e,t,n,w.prev,T,L),p&&L.reach>p.reach&&(p.reach=L.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},t={value:null,prev:e,next:null};e.next=t,this.head=e,this.tail=t,this.length=0}function c(e,t,n){var a=t.next,i={value:n,prev:t,next:a};return t.next=i,a.prev=i,e.length++,i}function l(e,t,n){for(var a=t.next,i=0;i"+o.content+""},a}(),i=a;a.default=a,i.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},i.languages.markup.tag.inside["attr-value"].inside.entity=i.languages.markup.entity,i.languages.markup.doctype.inside["internal-subset"].inside=i.languages.markup,i.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))})),Object.defineProperty(i.languages.markup.tag,"addInlined",{value:function(e,t){var n={};n["language-"+t]={pattern:/(^$)/i,lookbehind:!0,inside:i.languages[t]},n.cdata=/^$/i;var a={"included-cdata":{pattern://i,inside:n}};a["language-"+t]={pattern:/[\s\S]+/,inside:i.languages[t]};var o={};o[e]={pattern:RegExp(/(<__[^>]*>)(?:))*\]\]>|(?!)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:a},i.languages.insertBefore("markup","cdata",o)}}),Object.defineProperty(i.languages.markup.tag,"addAttribute",{value:function(e,t){i.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+e+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[t,"language-"+t],inside:i.languages[t]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),i.languages.html=i.languages.markup,i.languages.mathml=i.languages.markup,i.languages.svg=i.languages.markup,i.languages.xml=i.languages.extend("markup",{}),i.languages.ssml=i.languages.xml,i.languages.atom=i.languages.xml,i.languages.rss=i.languages.xml,function(e){var t="\\b(?:BASH|BASHOPTS|BASH_ALIASES|BASH_ARGC|BASH_ARGV|BASH_CMDS|BASH_COMPLETION_COMPAT_DIR|BASH_LINENO|BASH_REMATCH|BASH_SOURCE|BASH_VERSINFO|BASH_VERSION|COLORTERM|COLUMNS|COMP_WORDBREAKS|DBUS_SESSION_BUS_ADDRESS|DEFAULTS_PATH|DESKTOP_SESSION|DIRSTACK|DISPLAY|EUID|GDMSESSION|GDM_LANG|GNOME_KEYRING_CONTROL|GNOME_KEYRING_PID|GPG_AGENT_INFO|GROUPS|HISTCONTROL|HISTFILE|HISTFILESIZE|HISTSIZE|HOME|HOSTNAME|HOSTTYPE|IFS|INSTANCE|JOB|LANG|LANGUAGE|LC_ADDRESS|LC_ALL|LC_IDENTIFICATION|LC_MEASUREMENT|LC_MONETARY|LC_NAME|LC_NUMERIC|LC_PAPER|LC_TELEPHONE|LC_TIME|LESSCLOSE|LESSOPEN|LINES|LOGNAME|LS_COLORS|MACHTYPE|MAILCHECK|MANDATORY_PATH|NO_AT_BRIDGE|OLDPWD|OPTERR|OPTIND|ORBIT_SOCKETDIR|OSTYPE|PAPERSIZE|PATH|PIPESTATUS|PPID|PS1|PS2|PS3|PS4|PWD|RANDOM|REPLY|SECONDS|SELINUX_INIT|SESSION|SESSIONTYPE|SESSION_MANAGER|SHELL|SHELLOPTS|SHLVL|SSH_AUTH_SOCK|TERM|UID|UPSTART_EVENTS|UPSTART_INSTANCE|UPSTART_JOB|UPSTART_SESSION|USER|WINDOWID|XAUTHORITY|XDG_CONFIG_DIRS|XDG_CURRENT_DESKTOP|XDG_DATA_DIRS|XDG_GREETER_DATA_DIR|XDG_MENU_PREFIX|XDG_RUNTIME_DIR|XDG_SEAT|XDG_SEAT_PATH|XDG_SESSION_DESKTOP|XDG_SESSION_ID|XDG_SESSION_PATH|XDG_SESSION_TYPE|XDG_VTNR|XMODIFIERS)\\b",n={pattern:/(^(["']?)\w+\2)[ \t]+\S.*/,lookbehind:!0,alias:"punctuation",inside:null},a={bash:n,environment:{pattern:RegExp("\\$"+t),alias:"constant"},variable:[{pattern:/\$?\(\([\s\S]+?\)\)/,greedy:!0,inside:{variable:[{pattern:/(^\$\(\([\s\S]+)\)\)/,lookbehind:!0},/^\$\(\(/],number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee]-?\d+)?/,operator:/--|\+\+|\*\*=?|<<=?|>>=?|&&|\|\||[=!+\-*/%<>^&|]=?|[?~:]/,punctuation:/\(\(?|\)\)?|,|;/}},{pattern:/\$\((?:\([^)]+\)|[^()])+\)|`[^`]+`/,greedy:!0,inside:{variable:/^\$\(|^`|\)$|`$/}},{pattern:/\$\{[^}]+\}/,greedy:!0,inside:{operator:/:[-=?+]?|[!\/]|##?|%%?|\^\^?|,,?/,punctuation:/[\[\]]/,environment:{pattern:RegExp("(\\{)"+t),lookbehind:!0,alias:"constant"}}},/\$(?:\w+|[#?*!@$])/],entity:/\\(?:[abceEfnrtv\\"]|O?[0-7]{1,3}|U[0-9a-fA-F]{8}|u[0-9a-fA-F]{4}|x[0-9a-fA-F]{1,2})/};e.languages.bash={shebang:{pattern:/^#!\s*\/.*/,alias:"important"},comment:{pattern:/(^|[^"{\\$])#.*/,lookbehind:!0},"function-name":[{pattern:/(\bfunction\s+)[\w-]+(?=(?:\s*\(?:\s*\))?\s*\{)/,lookbehind:!0,alias:"function"},{pattern:/\b[\w-]+(?=\s*\(\s*\)\s*\{)/,alias:"function"}],"for-or-select":{pattern:/(\b(?:for|select)\s+)\w+(?=\s+in\s)/,alias:"variable",lookbehind:!0},"assign-left":{pattern:/(^|[\s;|&]|[<>]\()\w+(?=\+?=)/,inside:{environment:{pattern:RegExp("(^|[\\s;|&]|[<>]\\()"+t),lookbehind:!0,alias:"constant"}},alias:"variable",lookbehind:!0},string:[{pattern:/((?:^|[^<])<<-?\s*)(\w+)\s[\s\S]*?(?:\r?\n|\r)\2/,lookbehind:!0,greedy:!0,inside:a},{pattern:/((?:^|[^<])<<-?\s*)(["'])(\w+)\2\s[\s\S]*?(?:\r?\n|\r)\3/,lookbehind:!0,greedy:!0,inside:{bash:n}},{pattern:/(^|[^\\](?:\\\\)*)"(?:\\[\s\S]|\$\([^)]+\)|\$(?!\()|`[^`]+`|[^"\\`$])*"/,lookbehind:!0,greedy:!0,inside:a},{pattern:/(^|[^$\\])'[^']*'/,lookbehind:!0,greedy:!0},{pattern:/\$'(?:[^'\\]|\\[\s\S])*'/,greedy:!0,inside:{entity:a.entity}}],environment:{pattern:RegExp("\\$?"+t),alias:"constant"},variable:a.variable,function:{pattern:/(^|[\s;|&]|[<>]\()(?:add|apropos|apt|apt-cache|apt-get|aptitude|aspell|automysqlbackup|awk|basename|bash|bc|bconsole|bg|bzip2|cal|cat|cfdisk|chgrp|chkconfig|chmod|chown|chroot|cksum|clear|cmp|column|comm|composer|cp|cron|crontab|csplit|curl|cut|date|dc|dd|ddrescue|debootstrap|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|docker|docker-compose|du|egrep|eject|env|ethtool|expand|expect|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|git|gparted|grep|groupadd|groupdel|groupmod|groups|grub-mkconfig|gzip|halt|head|hg|history|host|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|ip|jobs|join|kill|killall|less|link|ln|locate|logname|logrotate|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|lynx|make|man|mc|mdadm|mkconfig|mkdir|mke2fs|mkfifo|mkfs|mkisofs|mknod|mkswap|mmv|more|most|mount|mtools|mtr|mutt|mv|nano|nc|netstat|nice|nl|node|nohup|notify-send|npm|nslookup|op|open|parted|passwd|paste|pathchk|ping|pkill|pnpm|podman|podman-compose|popd|pr|printcap|printenv|ps|pushd|pv|quota|quotacheck|quotactl|ram|rar|rcp|reboot|remsync|rename|renice|rev|rm|rmdir|rpm|rsync|scp|screen|sdiff|sed|sendmail|seq|service|sftp|sh|shellcheck|shuf|shutdown|sleep|slocate|sort|split|ssh|stat|strace|su|sudo|sum|suspend|swapon|sync|tac|tail|tar|tee|time|timeout|top|touch|tr|traceroute|tsort|tty|umount|uname|unexpand|uniq|units|unrar|unshar|unzip|update-grub|uptime|useradd|userdel|usermod|users|uudecode|uuencode|v|vcpkg|vdir|vi|vim|virsh|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yarn|yes|zenity|zip|zsh|zypper)(?=$|[)\s;|&])/,lookbehind:!0},keyword:{pattern:/(^|[\s;|&]|[<>]\()(?:case|do|done|elif|else|esac|fi|for|function|if|in|select|then|until|while)(?=$|[)\s;|&])/,lookbehind:!0},builtin:{pattern:/(^|[\s;|&]|[<>]\()(?:\.|:|alias|bind|break|builtin|caller|cd|command|continue|declare|echo|enable|eval|exec|exit|export|getopts|hash|help|let|local|logout|mapfile|printf|pwd|read|readarray|readonly|return|set|shift|shopt|source|test|times|trap|type|typeset|ulimit|umask|unalias|unset)(?=$|[)\s;|&])/,lookbehind:!0,alias:"class-name"},boolean:{pattern:/(^|[\s;|&]|[<>]\()(?:false|true)(?=$|[)\s;|&])/,lookbehind:!0},"file-descriptor":{pattern:/\B&\d\b/,alias:"important"},operator:{pattern:/\d?<>|>\||\+=|=[=~]?|!=?|<<[<-]?|[&\d]?>>|\d[<>]&?|[<>][&=]?|&[>&]?|\|[&|]?/,inside:{"file-descriptor":{pattern:/^\d/,alias:"important"}}},punctuation:/\$?\(\(?|\)\)?|\.\.|[{}[\];\\]/,number:{pattern:/(^|\s)(?:[1-9]\d*|0)(?:[.,]\d+)?\b/,lookbehind:!0}},n.inside=e.languages.bash;for(var i=["comment","function-name","for-or-select","assign-left","string","environment","function","keyword","builtin","boolean","file-descriptor","operator","punctuation","number"],o=a.variable[1].inside,r=0;r]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},i.languages.c=i.languages.extend("clike",{comment:{pattern:/\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},"class-name":{pattern:/(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/,lookbehind:!0},keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|__attribute__|asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|inline|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|typeof|union|unsigned|void|volatile|while)\b/,function:/\b[a-z_]\w*(?=\s*\()/i,number:/(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i,operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/}),i.languages.insertBefore("c","string",{char:{pattern:/'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/,greedy:!0}}),i.languages.insertBefore("c","string",{macro:{pattern:/(^[\t ]*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,greedy:!0,alias:"property",inside:{string:[{pattern:/^(#\s*include\s*)<[^>]+>/,lookbehind:!0},i.languages.c.string],char:i.languages.c.char,comment:i.languages.c.comment,"macro-name":[{pattern:/(^#\s*define\s+)\w+\b(?!\()/i,lookbehind:!0},{pattern:/(^#\s*define\s+)\w+\b(?=\()/i,lookbehind:!0,alias:"function"}],directive:{pattern:/^(#\s*)[a-z]+/,lookbehind:!0,alias:"keyword"},"directive-hash":/^#/,punctuation:/##|\\(?=[\r\n])/,expression:{pattern:/\S[\s\S]*/,inside:i.languages.c}}}}),i.languages.insertBefore("c","function",{constant:/\b(?:EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|__DATE__|__FILE__|__LINE__|__TIMESTAMP__|__TIME__|__func__|stderr|stdin|stdout)\b/}),delete i.languages.c.boolean,function(e){var t=/\b(?:alignas|alignof|asm|auto|bool|break|case|catch|char|char16_t|char32_t|char8_t|class|co_await|co_return|co_yield|compl|concept|const|const_cast|consteval|constexpr|constinit|continue|decltype|default|delete|do|double|dynamic_cast|else|enum|explicit|export|extern|final|float|for|friend|goto|if|import|inline|int|int16_t|int32_t|int64_t|int8_t|long|module|mutable|namespace|new|noexcept|nullptr|operator|override|private|protected|public|register|reinterpret_cast|requires|return|short|signed|sizeof|static|static_assert|static_cast|struct|switch|template|this|thread_local|throw|try|typedef|typeid|typename|uint16_t|uint32_t|uint64_t|uint8_t|union|unsigned|using|virtual|void|volatile|wchar_t|while)\b/,n=/\b(?!)\w+(?:\s*\.\s*\w+)*\b/.source.replace(//g,(function(){return t.source}));e.languages.cpp=e.languages.extend("c",{"class-name":[{pattern:RegExp(/(\b(?:class|concept|enum|struct|typename)\s+)(?!)\w+/.source.replace(//g,(function(){return t.source}))),lookbehind:!0},/\b[A-Z]\w*(?=\s*::\s*\w+\s*\()/,/\b[A-Z_]\w*(?=\s*::\s*~\w+\s*\()/i,/\b\w+(?=\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>\s*::\s*\w+\s*\()/],keyword:t,number:{pattern:/(?:\b0b[01']+|\b0x(?:[\da-f']+(?:\.[\da-f']*)?|\.[\da-f']+)(?:p[+-]?[\d']+)?|(?:\b[\d']+(?:\.[\d']*)?|\B\.[\d']+)(?:e[+-]?[\d']+)?)[ful]{0,4}/i,greedy:!0},operator:/>>=?|<<=?|->|--|\+\+|&&|\|\||[?:~]|<=>|[-+*/%&|^!=<>]=?|\b(?:and|and_eq|bitand|bitor|not|not_eq|or|or_eq|xor|xor_eq)\b/,boolean:/\b(?:false|true)\b/}),e.languages.insertBefore("cpp","string",{module:{pattern:RegExp(/(\b(?:import|module)\s+)/.source+"(?:"+/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|<[^<>\r\n]*>/.source+"|"+/(?:\s*:\s*)?|:\s*/.source.replace(//g,(function(){return n}))+")"),lookbehind:!0,greedy:!0,inside:{string:/^[<"][\s\S]+/,operator:/:/,punctuation:/\./}},"raw-string":{pattern:/R"([^()\\ ]{0,16})\([\s\S]*?\)\1"/,alias:"string",greedy:!0}}),e.languages.insertBefore("cpp","keyword",{"generic-function":{pattern:/\b(?!operator\b)[a-z_]\w*\s*<(?:[^<>]|<[^<>]*>)*>(?=\s*\()/i,inside:{function:/^\w+/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:e.languages.cpp}}}}),e.languages.insertBefore("cpp","operator",{"double-colon":{pattern:/::/,alias:"punctuation"}}),e.languages.insertBefore("cpp","class-name",{"base-clause":{pattern:/(\b(?:class|struct)\s+\w+\s*:\s*)[^;{}"'\s]+(?:\s+[^;{}"'\s]+)*(?=\s*[;{])/,lookbehind:!0,greedy:!0,inside:e.languages.extend("cpp",{})}}),e.languages.insertBefore("inside","double-colon",{"class-name":/\b[a-z_]\w*\b(?!\s*::)/i},e.languages.cpp["base-clause"])}(i),function(e){var t=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+t.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+t.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+t.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:t,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css;var n=e.languages.markup;n&&(n.tag.addInlined("style","css"),n.tag.addAttribute("style","css"))}(i),function(e){var t,n=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;e.languages.css.selector={pattern:e.languages.css.selector.pattern,lookbehind:!0,inside:t={"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/,"pseudo-class":/:[-\w]+/,class:/\.[-\w]+/,id:/#[-\w]+/,attribute:{pattern:RegExp("\\[(?:[^[\\]\"']|"+n.source+")*\\]"),greedy:!0,inside:{punctuation:/^\[|\]$/,"case-sensitivity":{pattern:/(\s)[si]$/i,lookbehind:!0,alias:"keyword"},namespace:{pattern:/^(\s*)(?:(?!\s)[-*\w\xA0-\uFFFF])*\|(?!=)/,lookbehind:!0,inside:{punctuation:/\|$/}},"attr-name":{pattern:/^(\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+/,lookbehind:!0},"attr-value":[n,{pattern:/(=\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+(?=\s*$)/,lookbehind:!0}],operator:/[|~*^$]?=/}},"n-th":[{pattern:/(\(\s*)[+-]?\d*[\dn](?:\s*[+-]\s*\d+)?(?=\s*\))/,lookbehind:!0,inside:{number:/[\dn]+/,operator:/[+-]/}},{pattern:/(\(\s*)(?:even|odd)(?=\s*\))/i,lookbehind:!0}],combinator:/>|\+|~|\|\|/,punctuation:/[(),]/}},e.languages.css.atrule.inside["selector-function-argument"].inside=t,e.languages.insertBefore("css","property",{variable:{pattern:/(^|[^-\w\xA0-\uFFFF])--(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*/i,lookbehind:!0}});var a={pattern:/(\b\d+)(?:%|[a-z]+(?![\w-]))/,lookbehind:!0},i={pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0};e.languages.insertBefore("css","function",{operator:{pattern:/(\s)[+\-*\/](?=\s)/,lookbehind:!0},hexcode:{pattern:/\B#[\da-f]{3,8}\b/i,alias:"color"},color:[{pattern:/(^|[^\w-])(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)(?![\w-])/i,lookbehind:!0},{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:a,number:i,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:a,number:i})}(i),i.languages.javascript=i.languages.extend("clike",{"class-name":[i.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp(/(^|[^\w$])/.source+"(?:"+/NaN|Infinity/.source+"|"+/0[bB][01]+(?:_[01]+)*n?/.source+"|"+/0[oO][0-7]+(?:_[0-7]+)*n?/.source+"|"+/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+"|"+/\d+(?:_\d+)*n/.source+"|"+/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source+")"+/(?![\w$])/.source),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),i.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,i.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:i.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:i.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:i.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:i.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:i.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),i.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:i.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),i.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),i.languages.markup&&(i.languages.markup.tag.addInlined("script","javascript"),i.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),i.languages.js=i.languages.javascript,function(e){var t=/#(?!\{).+/,n={pattern:/#\{[^}]+\}/,alias:"variable"};e.languages.coffeescript=e.languages.extend("javascript",{comment:t,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:n}}],keyword:/\b(?:and|break|by|catch|class|continue|debugger|delete|do|each|else|extend|extends|false|finally|for|if|in|instanceof|is|isnt|let|loop|namespace|new|no|not|null|of|off|on|or|own|return|super|switch|then|this|throw|true|try|typeof|undefined|unless|until|when|while|window|with|yes|yield)\b/,"class-member":{pattern:/@(?!\d)\w+/,alias:"variable"}}),e.languages.insertBefore("coffeescript","comment",{"multiline-comment":{pattern:/###[\s\S]+?###/,alias:"comment"},"block-regex":{pattern:/\/{3}[\s\S]*?\/{3}/,alias:"regex",inside:{comment:t,interpolation:n}}}),e.languages.insertBefore("coffeescript","string",{"inline-javascript":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,inside:{delimiter:{pattern:/^`|`$/,alias:"punctuation"},script:{pattern:/[\s\S]+/,alias:"language-javascript",inside:e.languages.javascript}}},"multiline-string":[{pattern:/'''[\s\S]*?'''/,greedy:!0,alias:"string"},{pattern:/"""[\s\S]*?"""/,greedy:!0,alias:"string",inside:{interpolation:n}}]}),e.languages.insertBefore("coffeescript","keyword",{property:/(?!\d)\w+(?=\s*:(?!:))/}),delete e.languages.coffeescript["template-string"],e.languages.coffee=e.languages.coffeescript}(i),function(e){var t=/[*&][^\s[\]{},]+/,n=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,a="(?:"+n.source+"(?:[ \t]+"+t.source+")?|"+t.source+"(?:[ \t]+"+n.source+")?)",i=/(?:[^\s\x00-\x08\x0e-\x1f!"#%&'*,\-:>?@[\]`{|}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]|[?:-])(?:[ \t]*(?:(?![#:])|:))*/.source.replace(//g,(function(){return/[^\s\x00-\x08\x0e-\x1f,[\]{}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]/.source})),o=/"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;function r(e,t){t=(t||"").replace(/m/g,"")+"m";var n=/([:\-,[{]\s*(?:\s<>[ \t]+)?)(?:<>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source.replace(/<>/g,(function(){return a})).replace(/<>/g,(function(){return e}));return RegExp(n,t)}e.languages.yaml={scalar:{pattern:RegExp(/([\-:]\s*(?:\s<>[ \t]+)?[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)\S[^\r\n]*(?:\2[^\r\n]+)*)/.source.replace(/<>/g,(function(){return a}))),lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:RegExp(/((?:^|[:\-,[{\r\n?])[ \t]*(?:<>[ \t]+)?)<>(?=\s*:\s)/.source.replace(/<>/g,(function(){return a})).replace(/<>/g,(function(){return"(?:"+i+"|"+o+")"}))),lookbehind:!0,greedy:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:r(/\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?(?:[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?))?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?/.source),lookbehind:!0,alias:"number"},boolean:{pattern:r(/false|true/.source,"i"),lookbehind:!0,alias:"important"},null:{pattern:r(/null|~/.source,"i"),lookbehind:!0,alias:"important"},string:{pattern:r(o),lookbehind:!0,greedy:!0},number:{pattern:r(/[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?|\.inf|\.nan)/.source,"i"),lookbehind:!0},tag:n,important:t,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},e.languages.yml=e.languages.yaml}(i),function(e){var t=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function n(e){return e=e.replace(//g,(function(){return t})),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var a=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,i=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,(function(){return a})),o=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source;e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{"front-matter-block":{pattern:/(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,lookbehind:!0,greedy:!0,inside:{punctuation:/^---|---$/,"front-matter":{pattern:/\S+(?:\s+\S+)*/,alias:["yaml","language-yaml"],inside:e.languages.yaml}}},blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+i+o+"(?:"+i+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+i+o+")(?:"+i+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(a),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+i+")"+o+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+i+"$"),inside:{"table-header":{pattern:RegExp(a),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,lookbehind:!0,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:n(/\b__(?:(?!_)|_(?:(?!_))+_)+__\b|\*\*(?:(?!\*)|\*(?:(?!\*))+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/\b_(?:(?!_)|__(?:(?!_))+__)+_\b|\*(?:(?!\*)|\*\*(?:(?!\*))+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~))+\2/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},"code-snippet":{pattern:/(^|[^\\`])(?:``[^`\r\n]+(?:`[^`\r\n]+)*``(?!`)|`[^`\r\n]+`(?!`))/,lookbehind:!0,greedy:!0,alias:["code","keyword"]},url:{pattern:n(/!?\[(?:(?!\]))+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\]))+\])/.source),lookbehind:!0,greedy:!0,inside:{operator:/^!/,content:{pattern:/(^\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},variable:{pattern:/(^\][ \t]?\[)[^\]]+(?=\]$)/,lookbehind:!0},url:{pattern:/(^\]\()[^\s)]+/,lookbehind:!0},string:{pattern:/(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/,lookbehind:!0}}}}),["url","bold","italic","strike"].forEach((function(t){["url","bold","italic","strike","code-snippet"].forEach((function(n){t!==n&&(e.languages.markdown[t].inside.content.inside[n]=e.languages.markdown[n])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(t){if(t&&"string"!=typeof t)for(var n=0,a=t.length;n",quot:'"'},c=String.fromCodePoint||String.fromCharCode;e.languages.md=e.languages.markdown}(i),i.languages.graphql={comment:/#.*/,description:{pattern:/(?:"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*")(?=\s*[a-z_])/i,greedy:!0,alias:"string",inside:{"language-markdown":{pattern:/(^"(?:"")?)(?!\1)[\s\S]+(?=\1$)/,lookbehind:!0,inside:i.languages.markdown}}},string:{pattern:/"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*"/,greedy:!0},number:/(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,boolean:/\b(?:false|true)\b/,variable:/\$[a-z_]\w*/i,directive:{pattern:/@[a-z_]\w*/i,alias:"function"},"attr-name":{pattern:/\b[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,greedy:!0},"atom-input":{pattern:/\b[A-Z]\w*Input\b/,alias:"class-name"},scalar:/\b(?:Boolean|Float|ID|Int|String)\b/,constant:/\b[A-Z][A-Z_\d]*\b/,"class-name":{pattern:/(\b(?:enum|implements|interface|on|scalar|type|union)\s+|&\s*|:\s*|\[)[A-Z_]\w*/,lookbehind:!0},fragment:{pattern:/(\bfragment\s+|\.{3}\s*(?!on\b))[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-mutation":{pattern:/(\bmutation\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-query":{pattern:/(\bquery\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},keyword:/\b(?:directive|enum|extend|fragment|implements|input|interface|mutation|on|query|repeatable|scalar|schema|subscription|type|union)\b/,operator:/[!=|&]|\.{3}/,"property-query":/\w+(?=\s*\()/,object:/\w+(?=\s*\{)/,punctuation:/[!(){}\[\]:=,]/,property:/\w+/},i.hooks.add("after-tokenize",(function(e){if("graphql"===e.language)for(var t=e.tokens.filter((function(e){return"string"!=typeof e&&"comment"!==e.type&&"scalar"!==e.type})),n=0;n0)){var s=u(/^\{$/,/^\}$/);if(-1===s)continue;for(var c=n;c=0&&v(l,"variable-input")}}}}function d(e){return t[n+e]}function p(e,t){t=t||0;for(var n=0;n?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|ILIKE|IN|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/},function(e){var t=e.languages.javascript["template-string"],n=t.pattern.source,a=t.inside.interpolation,i=a.inside["interpolation-punctuation"],o=a.pattern.source;function r(t,a){if(e.languages[t])return{pattern:RegExp("((?:"+a+")\\s*)"+n),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:t}}}}function s(e,t){return"___"+t.toUpperCase()+"_"+e+"___"}function c(t,n,a){var i={code:t,grammar:n,language:a};return e.hooks.run("before-tokenize",i),i.tokens=e.tokenize(i.code,i.grammar),e.hooks.run("after-tokenize",i),i.tokens}function l(t){var n={};n["interpolation-punctuation"]=i;var o=e.tokenize(t,n);if(3===o.length){var r=[1,1];r.push.apply(r,c(o[1],e.languages.javascript,"javascript")),o.splice.apply(o,r)}return new e.Token("interpolation",o,a.alias,t)}function d(t,n,a){var i=e.tokenize(t,{interpolation:{pattern:RegExp(o),lookbehind:!0}}),r=0,d={},p=c(i.map((function(e){if("string"==typeof e)return e;for(var n,i=e.content;-1!==t.indexOf(n=s(r++,a)););return d[n]=i,n})).join(""),n,a),u=Object.keys(d);return r=0,function e(t){for(var n=0;n=u.length)return;var a=t[n];if("string"==typeof a||"string"==typeof a.content){var i=u[r],o="string"==typeof a?a:a.content,s=o.indexOf(i);if(-1!==s){++r;var c=o.substring(0,s),p=l(d[i]),v=o.substring(s+i.length),f=[];if(c&&f.push(c),f.push(p),v){var m=[v];e(m),f.push.apply(f,m)}"string"==typeof a?(t.splice.apply(t,[n,1].concat(f)),n+=f.length-1):a.content=f}}else{var g=a.content;Array.isArray(g)?e(g):e([g])}}}(p),new e.Token(a,p,"language-"+a,t)}e.languages.javascript["template-string"]=[r("css",/\b(?:styled(?:\([^)]*\))?(?:\s*\.\s*\w+(?:\([^)]*\))*)*|css(?:\s*\.\s*(?:global|resolve))?|createGlobalStyle|keyframes)/.source),r("html",/\bhtml|\.\s*(?:inner|outer)HTML\s*\+?=/.source),r("svg",/\bsvg/.source),r("markdown",/\b(?:markdown|md)/.source),r("graphql",/\b(?:gql|graphql(?:\s*\.\s*experimental)?)/.source),r("sql",/\bsql/.source),t].filter(Boolean);var p={javascript:!0,js:!0,typescript:!0,ts:!0,jsx:!0,tsx:!0};function u(e){return"string"==typeof e?e:Array.isArray(e)?e.map(u).join(""):u(e.content)}e.hooks.add("after-tokenize",(function(t){t.language in p&&function t(n){for(var a=0,i=n.length;a]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),e.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete e.languages.typescript.parameter,delete e.languages.typescript["literal-property"];var t=e.languages.extend("typescript",{});delete t["class-name"],e.languages.typescript["class-name"].inside=t,e.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:t}}}}),e.languages.ts=e.languages.typescript}(i),function(e){function t(e,t){return RegExp(e.replace(//g,(function(){return/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/.source})),t)}e.languages.insertBefore("javascript","function-variable",{"method-variable":{pattern:RegExp("(\\.\\s*)"+e.languages.javascript["function-variable"].pattern.source),lookbehind:!0,alias:["function-variable","method","function","property-access"]}}),e.languages.insertBefore("javascript","function",{method:{pattern:RegExp("(\\.\\s*)"+e.languages.javascript.function.source),lookbehind:!0,alias:["function","property-access"]}}),e.languages.insertBefore("javascript","constant",{"known-class-name":[{pattern:/\b(?:(?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|(?:Weak)?(?:Map|Set)|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|WebAssembly)\b/,alias:"class-name"},{pattern:/\b(?:[A-Z]\w*)Error\b/,alias:"class-name"}]}),e.languages.insertBefore("javascript","keyword",{imports:{pattern:t(/(\bimport\b\s*)(?:(?:\s*,\s*(?:\*\s*as\s+|\{[^{}]*\}))?|\*\s*as\s+|\{[^{}]*\})(?=\s*\bfrom\b)/.source),lookbehind:!0,inside:e.languages.javascript},exports:{pattern:t(/(\bexport\b\s*)(?:\*(?:\s*as\s+)?(?=\s*\bfrom\b)|\{[^{}]*\})/.source),lookbehind:!0,inside:e.languages.javascript}}),e.languages.javascript.keyword.unshift({pattern:/\b(?:as|default|export|from|import)\b/,alias:"module"},{pattern:/\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,alias:"control-flow"},{pattern:/\bnull\b/,alias:["null","nil"]},{pattern:/\bundefined\b/,alias:"nil"}),e.languages.insertBefore("javascript","operator",{spread:{pattern:/\.{3}/,alias:"operator"},arrow:{pattern:/=>/,alias:"operator"}}),e.languages.insertBefore("javascript","punctuation",{"property-access":{pattern:t(/(\.\s*)#?/.source),lookbehind:!0},"maybe-class-name":{pattern:/(^|[^$\w\xA0-\uFFFF])[A-Z][$\w\xA0-\uFFFF]+/,lookbehind:!0},dom:{pattern:/\b(?:document|(?:local|session)Storage|location|navigator|performance|window)\b/,alias:"variable"},console:{pattern:/\bconsole(?=\s*\.)/,alias:"class-name"}});for(var n=["function","function-variable","method","method-variable","property-access"],a=0;a*\.{3}(?:[^{}]|)*\})/.source;function o(e,t){return e=e.replace(//g,(function(){return n})).replace(//g,(function(){return a})).replace(//g,(function(){return i})),RegExp(e,t)}i=o(i).source,e.languages.jsx=e.languages.extend("markup",t),e.languages.jsx.tag.pattern=o(/<\/?(?:[\w.:-]+(?:+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|))?|))**\/?)?>/.source),e.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/,e.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/,e.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,e.languages.jsx.tag.inside.comment=t.comment,e.languages.insertBefore("inside","attr-name",{spread:{pattern:o(//.source),inside:e.languages.jsx}},e.languages.jsx.tag),e.languages.insertBefore("inside","special-attr",{script:{pattern:o(/=/.source),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:e.languages.jsx}}},e.languages.jsx.tag);var r=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(r).join(""):""},s=function(t){for(var n=[],a=0;a0&&n[n.length-1].tagName===r(i.content[0].content[1])&&n.pop():"/>"===i.content[i.content.length-1].content||n.push({tagName:r(i.content[0].content[1]),openedBraces:0}):n.length>0&&"punctuation"===i.type&&"{"===i.content?n[n.length-1].openedBraces++:n.length>0&&n[n.length-1].openedBraces>0&&"punctuation"===i.type&&"}"===i.content?n[n.length-1].openedBraces--:o=!0),(o||"string"==typeof i)&&n.length>0&&0===n[n.length-1].openedBraces){var c=r(i);a0&&("string"==typeof t[a-1]||"plain-text"===t[a-1].type)&&(c=r(t[a-1])+c,t.splice(a-1,1),a--),t[a]=new e.Token("plain-text",c,null,c)}i.content&&"string"!=typeof i.content&&s(i.content)}};e.hooks.add("after-tokenize",(function(e){"jsx"!==e.language&&"tsx"!==e.language||s(e.tokens)}))}(i),function(e){e.languages.diff={coord:[/^(?:\*{3}|-{3}|\+{3}).*$/m,/^@@.*@@$/m,/^\d.*$/m]};var t={"deleted-sign":"-","deleted-arrow":"<","inserted-sign":"+","inserted-arrow":">",unchanged:" ",diff:"!"};Object.keys(t).forEach((function(n){var a=t[n],i=[];/^\w+$/.test(n)||i.push(/\w+/.exec(n)[0]),"diff"===n&&i.push("bold"),e.languages.diff[n]={pattern:RegExp("^(?:["+a+"].*(?:\r\n?|\n|(?![\\s\\S])))+","m"),alias:i,inside:{line:{pattern:/(.)(?=[\s\S]).*(?:\r\n?|\n)?/,lookbehind:!0},prefix:{pattern:/[\s\S]/,alias:/\w+/.exec(n)[0]}}}})),Object.defineProperty(e.languages.diff,"PREFIXES",{value:t})}(i),i.languages.git={comment:/^#.*/m,deleted:/^[-\u2013].*/m,inserted:/^\+.*/m,string:/("|')(?:\\.|(?!\1)[^\\\r\n])*\1/,command:{pattern:/^.*\$ git .*$/m,inside:{parameter:/\s--?\w+/}},coord:/^@@.*@@$/m,"commit-sha1":/^commit \w{40}$/m},i.languages.go=i.languages.extend("clike",{string:{pattern:/(^|[^\\])"(?:\\.|[^"\\\r\n])*"|`[^`]*`/,lookbehind:!0,greedy:!0},keyword:/\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(?:to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,boolean:/\b(?:_|false|iota|nil|true)\b/,number:[/\b0(?:b[01_]+|o[0-7_]+)i?\b/i,/\b0x(?:[a-f\d_]+(?:\.[a-f\d_]*)?|\.[a-f\d_]+)(?:p[+-]?\d+(?:_\d+)*)?i?(?!\w)/i,/(?:\b\d[\d_]*(?:\.[\d_]*)?|\B\.\d[\d_]*)(?:e[+-]?[\d_]+)?i?(?!\w)/i],operator:/[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,builtin:/\b(?:append|bool|byte|cap|close|complex|complex(?:64|128)|copy|delete|error|float(?:32|64)|u?int(?:8|16|32|64)?|imag|len|make|new|panic|print(?:ln)?|real|recover|rune|string|uintptr)\b/}),i.languages.insertBefore("go","string",{char:{pattern:/'(?:\\.|[^'\\\r\n]){0,10}'/,greedy:!0}}),delete i.languages.go["class-name"],function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,a,i,o){if(n.language===a){var r=n.tokenStack=[];n.code=n.code.replace(i,(function(e){if("function"==typeof o&&!o(e))return e;for(var i,s=r.length;-1!==n.code.indexOf(i=t(a,s));)++s;return r[s]=e,i})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,a){if(n.language===a&&n.tokenStack){n.grammar=e.languages[a];var i=0,o=Object.keys(n.tokenStack);!function r(s){for(var c=0;c=o.length);c++){var l=s[c];if("string"==typeof l||l.content&&"string"==typeof l.content){var d=o[i],p=n.tokenStack[d],u="string"==typeof l?l:l.content,v=t(a,d),f=u.indexOf(v);if(f>-1){++i;var m=u.substring(0,f),g=new e.Token(a,e.tokenize(p,n.grammar),"language-"+a,p),h=u.substring(f+v.length),b=[];m&&b.push.apply(b,r([m])),b.push(g),h&&b.push.apply(b,r([h])),"string"==typeof l?s.splice.apply(s,[c,1].concat(b)):l.content=b}}else l.content&&r(l.content)}return s}(n.tokens)}}}})}(i),function(e){e.languages.handlebars={comment:/\{\{![\s\S]*?\}\}/,delimiter:{pattern:/^\{\{\{?|\}\}\}?$/,alias:"punctuation"},string:/(["'])(?:\\.|(?!\1)[^\\\r\n])*\1/,number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee][+-]?\d+)?/,boolean:/\b(?:false|true)\b/,block:{pattern:/^(\s*(?:~\s*)?)[#\/]\S+?(?=\s*(?:~\s*)?$|\s)/,lookbehind:!0,alias:"keyword"},brackets:{pattern:/\[[^\]]+\]/,inside:{punctuation:/\[|\]/,variable:/[\s\S]+/}},punctuation:/[!"#%&':()*+,.\/;<=>@\[\\\]^`{|}~]/,variable:/[^!"#%&'()*+,\/;<=>@\[\\\]^`{|}~\s]+/},e.hooks.add("before-tokenize",(function(t){e.languages["markup-templating"].buildPlaceholders(t,"handlebars",/\{\{\{[\s\S]+?\}\}\}|\{\{[\s\S]+?\}\}/g)})),e.hooks.add("after-tokenize",(function(t){e.languages["markup-templating"].tokenizePlaceholders(t,"handlebars")})),e.languages.hbs=e.languages.handlebars}(i),i.languages.json={property:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?=\s*:)/,lookbehind:!0,greedy:!0},string:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,lookbehind:!0,greedy:!0},comment:{pattern:/\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},number:/-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,punctuation:/[{}[\],]/,operator:/:/,boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"}},i.languages.webmanifest=i.languages.json,i.languages.less=i.languages.extend("css",{comment:[/\/\*[\s\S]*?\*\//,{pattern:/(^|[^\\])\/\/.*/,lookbehind:!0}],atrule:{pattern:/@[\w-](?:\((?:[^(){}]|\([^(){}]*\))*\)|[^(){};\s]|\s+(?!\s))*?(?=\s*\{)/,inside:{punctuation:/[:()]/}},selector:{pattern:/(?:@\{[\w-]+\}|[^{};\s@])(?:@\{[\w-]+\}|\((?:[^(){}]|\([^(){}]*\))*\)|[^(){};@\s]|\s+(?!\s))*?(?=\s*\{)/,inside:{variable:/@+[\w-]+/}},property:/(?:@\{[\w-]+\}|[\w-])+(?:\+_?)?(?=\s*:)/,operator:/[+\-*\/]/}),i.languages.insertBefore("less","property",{variable:[{pattern:/@[\w-]+\s*:/,inside:{punctuation:/:/}},/@@?[\w-]+/],"mixin-usage":{pattern:/([{;]\s*)[.#](?!\d)[\w-].*?(?=[(;])/,lookbehind:!0,alias:"function"}}),i.languages.makefile={comment:{pattern:/(^|[^\\])#(?:\\(?:\r\n|[\s\S])|[^\\\r\n])*/,lookbehind:!0},string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"builtin-target":{pattern:/\.[A-Z][^:#=\s]+(?=\s*:(?!=))/,alias:"builtin"},target:{pattern:/^(?:[^:=\s]|[ \t]+(?![\s:]))+(?=\s*:(?!=))/m,alias:"symbol",inside:{variable:/\$+(?:(?!\$)[^(){}:#=\s]+|(?=[({]))/}},variable:/\$+(?:(?!\$)[^(){}:#=\s]+|\([@*%<^+?][DF]\)|(?=[({]))/,keyword:/-include\b|\b(?:define|else|endef|endif|export|ifn?def|ifn?eq|include|override|private|sinclude|undefine|unexport|vpath)\b/,function:{pattern:/(\()(?:abspath|addsuffix|and|basename|call|dir|error|eval|file|filter(?:-out)?|findstring|firstword|flavor|foreach|guile|if|info|join|lastword|load|notdir|or|origin|patsubst|realpath|shell|sort|strip|subst|suffix|value|warning|wildcard|word(?:list|s)?)(?=[ \t])/,lookbehind:!0},operator:/(?:::|[?:+!])?=|[|@]/,punctuation:/[:;(){}]/},i.languages.objectivec=i.languages.extend("c",{string:{pattern:/@?"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},keyword:/\b(?:asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|in|inline|int|long|register|return|self|short|signed|sizeof|static|struct|super|switch|typedef|typeof|union|unsigned|void|volatile|while)\b|(?:@interface|@end|@implementation|@protocol|@class|@public|@protected|@private|@property|@try|@catch|@finally|@throw|@synthesize|@dynamic|@selector)\b/,operator:/-[->]?|\+\+?|!=?|<>?=?|==?|&&?|\|\|?|[~^%?*\/@]/}),delete i.languages.objectivec["class-name"],i.languages.objc=i.languages.objectivec,i.languages.ocaml={comment:{pattern:/\(\*[\s\S]*?\*\)/,greedy:!0},char:{pattern:/'(?:[^\\\r\n']|\\(?:.|[ox]?[0-9a-f]{1,3}))'/i,greedy:!0},string:[{pattern:/"(?:\\(?:[\s\S]|\r\n)|[^\\\r\n"])*"/,greedy:!0},{pattern:/\{([a-z_]*)\|[\s\S]*?\|\1\}/,greedy:!0}],number:[/\b(?:0b[01][01_]*|0o[0-7][0-7_]*)\b/i,/\b0x[a-f0-9][a-f0-9_]*(?:\.[a-f0-9_]*)?(?:p[+-]?\d[\d_]*)?(?!\w)/i,/\b\d[\d_]*(?:\.[\d_]*)?(?:e[+-]?\d[\d_]*)?(?!\w)/i],directive:{pattern:/\B#\w+/,alias:"property"},label:{pattern:/\B~\w+/,alias:"property"},"type-variable":{pattern:/\B'\w+/,alias:"function"},variant:{pattern:/`\w+/,alias:"symbol"},keyword:/\b(?:as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|match|method|module|mutable|new|nonrec|object|of|open|private|rec|sig|struct|then|to|try|type|val|value|virtual|when|where|while|with)\b/,boolean:/\b(?:false|true)\b/,"operator-like-punctuation":{pattern:/\[[<>|]|[>|]\]|\{<|>\}/,alias:"punctuation"},operator:/\.[.~]|:[=>]|[=<>@^|&+\-*\/$%!?~][!$%&*+\-.\/:<=>?@^|~]*|\b(?:and|asr|land|lor|lsl|lsr|lxor|mod|or)\b/,punctuation:/;;|::|[(){}\[\].,:;#]|\b_\b/},i.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0,greedy:!0},"string-interpolation":{pattern:/(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=\}$)/,lookbehind:!0},"conversion-option":{pattern:/![sra](?=[:}]$)/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^[\t ]*)@\w+(?:\.\w+)*/m,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:False|None|True)\b/,number:/\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,operator:/[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},i.languages.python["string-interpolation"].inside.interpolation.inside.rest=i.languages.python,i.languages.py=i.languages.python,i.languages.reason=i.languages.extend("clike",{string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^\\\r\n"])*"/,greedy:!0},"class-name":/\b[A-Z]\w*/,keyword:/\b(?:and|as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|method|module|mutable|new|nonrec|object|of|open|or|private|rec|sig|struct|switch|then|to|try|type|val|virtual|when|while|with)\b/,operator:/\.{3}|:[:=]|\|>|->|=(?:==?|>)?|<=?|>=?|[|^?'#!~`]|[+\-*\/]\.?|\b(?:asr|land|lor|lsl|lsr|lxor|mod)\b/}),i.languages.insertBefore("reason","class-name",{char:{pattern:/'(?:\\x[\da-f]{2}|\\o[0-3][0-7][0-7]|\\\d{3}|\\.|[^'\\\r\n])'/,greedy:!0},constructor:/\b[A-Z]\w*\b(?!\s*\.)/,label:{pattern:/\b[a-z]\w*(?=::)/,alias:"symbol"}}),delete i.languages.reason.function,function(e){e.languages.sass=e.languages.extend("css",{comment:{pattern:/^([ \t]*)\/[\/*].*(?:(?:\r?\n|\r)\1[ \t].+)*/m,lookbehind:!0,greedy:!0}}),e.languages.insertBefore("sass","atrule",{"atrule-line":{pattern:/^(?:[ \t]*)[@+=].+/m,greedy:!0,inside:{atrule:/(?:@[\w-]+|[+=])/}}}),delete e.languages.sass.atrule;var t=/\$[-\w]+|#\{\$[-\w]+\}/,n=[/[+*\/%]|[=!]=|<=?|>=?|\b(?:and|not|or)\b/,{pattern:/(\s)-(?=\s)/,lookbehind:!0}];e.languages.insertBefore("sass","property",{"variable-line":{pattern:/^[ \t]*\$.+/m,greedy:!0,inside:{punctuation:/:/,variable:t,operator:n}},"property-line":{pattern:/^[ \t]*(?:[^:\s]+ *:.*|:[^:\s].*)/m,greedy:!0,inside:{property:[/[^:\s]+(?=\s*:)/,{pattern:/(:)[^:\s]+/,lookbehind:!0}],punctuation:/:/,variable:t,operator:n,important:e.languages.sass.important}}}),delete e.languages.sass.property,delete e.languages.sass.important,e.languages.insertBefore("sass","punctuation",{selector:{pattern:/^([ \t]*)\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*(?:,(?:\r?\n|\r)\1[ \t]+\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*)*/m,lookbehind:!0,greedy:!0}})}(i),i.languages.scss=i.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-](?:\([^()]+\)|[^()\s]|\s+(?!\s))*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)?url(?=\()/i,selector:{pattern:/(?=\S)[^@;{}()]?(?:[^@;{}()\s]|\s+(?!\s)|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}][^:{}]*[:{][^}]))/,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-\w]+/,variable:/\$[-\w]+|#\{\$[-\w]+\}/}},property:{pattern:/(?:[-\w]|\$[-\w]|#\{\$[-\w]+\})+(?=\s*:)/,inside:{variable:/\$[-\w]+|#\{\$[-\w]+\}/}}}),i.languages.insertBefore("scss","atrule",{keyword:[/@(?:content|debug|each|else(?: if)?|extend|for|forward|function|if|import|include|mixin|return|use|warn|while)\b/i,{pattern:/( )(?:from|through)(?= )/,lookbehind:!0}]}),i.languages.insertBefore("scss","important",{variable:/\$[-\w]+|#\{\$[-\w]+\}/}),i.languages.insertBefore("scss","function",{"module-modifier":{pattern:/\b(?:as|hide|show|with)\b/i,alias:"keyword"},placeholder:{pattern:/%[-\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"},operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|not|or)(?=\s)/,lookbehind:!0}}),i.languages.scss.atrule.inside.rest=i.languages.scss,function(e){var t={pattern:/(\b\d+)(?:%|[a-z]+)/,lookbehind:!0},n={pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0},a={comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},url:{pattern:/\burl\((["']?).*?\1\)/i,greedy:!0},string:{pattern:/("|')(?:(?!\1)[^\\\r\n]|\\(?:\r\n|[\s\S]))*\1/,greedy:!0},interpolation:null,func:null,important:/\B!(?:important|optional)\b/i,keyword:{pattern:/(^|\s+)(?:(?:else|for|if|return|unless)(?=\s|$)|@[\w-]+)/,lookbehind:!0},hexcode:/#[\da-f]{3,6}/i,color:[/\b(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)\b/i,{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:t,number:n,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:t,boolean:/\b(?:false|true)\b/,operator:[/~|[+!\/%<>?=]=?|[-:]=|\*[*=]?|\.{2,3}|&&|\|\||\B-\B|\b(?:and|in|is(?: a| defined| not|nt)?|not|or)\b/],number:n,punctuation:/[{}()\[\];:,]/};a.interpolation={pattern:/\{[^\r\n}:]+\}/,alias:"variable",inside:{delimiter:{pattern:/^\{|\}$/,alias:"punctuation"},rest:a}},a.func={pattern:/[\w-]+\([^)]*\).*/,inside:{function:/^[^(]+/,rest:a}},e.languages.stylus={"atrule-declaration":{pattern:/(^[ \t]*)@.+/m,lookbehind:!0,inside:{atrule:/^@[\w-]+/,rest:a}},"variable-declaration":{pattern:/(^[ \t]*)[\w$-]+\s*.?=[ \t]*(?:\{[^{}]*\}|\S.*|$)/m,lookbehind:!0,inside:{variable:/^\S+/,rest:a}},statement:{pattern:/(^[ \t]*)(?:else|for|if|return|unless)[ \t].+/m,lookbehind:!0,inside:{keyword:/^\S+/,rest:a}},"property-declaration":{pattern:/((?:^|\{)([ \t]*))(?:[\w-]|\{[^}\r\n]+\})+(?:\s*:\s*|[ \t]+)(?!\s)[^{\r\n]*(?:;|[^{\r\n,]$(?!(?:\r?\n|\r)(?:\{|\2[ \t])))/m,lookbehind:!0,inside:{property:{pattern:/^[^\s:]+/,inside:{interpolation:a.interpolation}},rest:a}},selector:{pattern:/(^[ \t]*)(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\)|(?![\w-]))|\{[^}\r\n]+\})+)(?:(?:\r?\n|\r)(?:\1(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\)|(?![\w-]))|\{[^}\r\n]+\})+)))*(?:,$|\{|(?=(?:\r?\n|\r)(?:\{|\1[ \t])))/m,lookbehind:!0,inside:{interpolation:a.interpolation,comment:a.comment,punctuation:/[{},]/}},func:a.func,string:a.string,comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0,greedy:!0},interpolation:a.interpolation,punctuation:/[{}()\[\];:.]/}}(i),function(e){var t=e.util.clone(e.languages.typescript);e.languages.tsx=e.languages.extend("jsx",t),delete e.languages.tsx.parameter,delete e.languages.tsx["literal-property"];var n=e.languages.tsx.tag;n.pattern=RegExp(/(^|[^\w$]|(?=<\/))/.source+"(?:"+n.pattern.source+")",n.pattern.flags),n.lookbehind=!0}(i),i.languages.wasm={comment:[/\(;[\s\S]*?;\)/,{pattern:/;;.*/,greedy:!0}],string:{pattern:/"(?:\\[\s\S]|[^"\\])*"/,greedy:!0},keyword:[{pattern:/\b(?:align|offset)=/,inside:{operator:/=/}},{pattern:/\b(?:(?:f32|f64|i32|i64)(?:\.(?:abs|add|and|ceil|clz|const|convert_[su]\/i(?:32|64)|copysign|ctz|demote\/f64|div(?:_[su])?|eqz?|extend_[su]\/i32|floor|ge(?:_[su])?|gt(?:_[su])?|le(?:_[su])?|load(?:(?:8|16|32)_[su])?|lt(?:_[su])?|max|min|mul|neg?|nearest|or|popcnt|promote\/f32|reinterpret\/[fi](?:32|64)|rem_[su]|rot[lr]|shl|shr_[su]|sqrt|store(?:8|16|32)?|sub|trunc(?:_[su]\/f(?:32|64))?|wrap\/i64|xor))?|memory\.(?:grow|size))\b/,inside:{punctuation:/\./}},/\b(?:anyfunc|block|br(?:_if|_table)?|call(?:_indirect)?|data|drop|elem|else|end|export|func|get_(?:global|local)|global|if|import|local|loop|memory|module|mut|nop|offset|param|result|return|select|set_(?:global|local)|start|table|tee_local|then|type|unreachable)\b/],variable:/\$[\w!#$%&'*+\-./:<=>?@\\^`|~]+/,number:/[+-]?\b(?:\d(?:_?\d)*(?:\.\d(?:_?\d)*)?(?:[eE][+-]?\d(?:_?\d)*)?|0x[\da-fA-F](?:_?[\da-fA-F])*(?:\.[\da-fA-F](?:_?[\da-fA-D])*)?(?:[pP][+-]?\d(?:_?\d)*)?)\b|\binf\b|\bnan(?::0x[\da-fA-F](?:_?[\da-fA-D])*)?\b/,punctuation:/[()]/},t.a=i},function(e,t){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(a){"object"==typeof window&&(n=window)}e.exports=n},function(e,t,n){"use strict";e.exports=n(45)},,function(e,t,n){"use strict";!function e(){if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE)try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(e)}catch(t){console.error(t)}}(),e.exports=n(39)},function(e){e.exports=JSON.parse("{}")},function(e,t,n){"use strict";var a=n(9);t.a=a.b},function(e){e.exports=JSON.parse('{"docusaurus-plugin-content-docs":{"default":{"path":"/react-native-navigation/","versions":[{"name":"current","label":"Next","isLast":false,"path":"/react-native-navigation/next","mainDocId":"docs/before-you-start","docs":[{"id":"api/component","path":"/react-native-navigation/next/api/component","sidebar":"api"},{"id":"api/events","path":"/react-native-navigation/next/api/events","sidebar":"api"},{"id":"api/layout-bottomTabs","path":"/react-native-navigation/next/api/layout-bottomTabs","sidebar":"api"},{"id":"api/layout-component","path":"/react-native-navigation/next/api/layout-component","sidebar":"api"},{"id":"api/layout-layout","path":"/react-native-navigation/next/api/layout-layout","sidebar":"api"},{"id":"api/layout-sideMenu","path":"/react-native-navigation/next/api/layout-sideMenu","sidebar":"api"},{"id":"api/layout-splitView","path":"/react-native-navigation/next/api/layout-splitView","sidebar":"api"},{"id":"api/layout-stack","path":"/react-native-navigation/next/api/layout-stack","sidebar":"api"},{"id":"api/modal","path":"/react-native-navigation/next/api/modal","sidebar":"api"},{"id":"api/options-animations","path":"/react-native-navigation/next/api/options-animations"},{"id":"api/options-api","path":"/react-native-navigation/next/api/options-api","sidebar":"api"},{"id":"api/options-backButton","path":"/react-native-navigation/next/api/options-backButton","sidebar":"api"},{"id":"api/options-background","path":"/react-native-navigation/next/api/options-background","sidebar":"api"},{"id":"api/options-bottomTab","path":"/react-native-navigation/next/api/options-bottomTab","sidebar":"api"},{"id":"api/options-bottomTabs","path":"/react-native-navigation/next/api/options-bottomTabs","sidebar":"api"},{"id":"api/options-button","path":"/react-native-navigation/next/api/options-button","sidebar":"api"},{"id":"api/options-fab","path":"/react-native-navigation/next/api/options-fab"},{"id":"api/options-hardwareBackButton","path":"/react-native-navigation/next/api/options-hardwareBackButton","sidebar":"api"},{"id":"api/options-iconBackground","path":"/react-native-navigation/next/api/options-iconBackground","sidebar":"api"},{"id":"api/options-iconInsets","path":"/react-native-navigation/next/api/options-iconInsets","sidebar":"api"},{"id":"api/options-imageResource","path":"/react-native-navigation/next/api/options-imageResource"},{"id":"api/options-largeTitle","path":"/react-native-navigation/next/api/options-largeTitle","sidebar":"api"},{"id":"api/options-layout","path":"/react-native-navigation/next/api/options-layout","sidebar":"api"},{"id":"api/options-migration","path":"/react-native-navigation/next/api/options-migration"},{"id":"api/options-modal","path":"/react-native-navigation/next/api/options-modal","sidebar":"api"},{"id":"api/options-navigationBar","path":"/react-native-navigation/next/api/options-navigationBar","sidebar":"api"},{"id":"api/options-overlay","path":"/react-native-navigation/next/api/options-overlay","sidebar":"api"},{"id":"api/options-preview","path":"/react-native-navigation/next/api/options-preview"},{"id":"api/options-root","path":"/react-native-navigation/next/api/options-root","sidebar":"api"},{"id":"api/options-scrollEdgeAppearance","path":"/react-native-navigation/next/api/options-scrollEdgeAppearance"},{"id":"api/options-sideMenu","path":"/react-native-navigation/next/api/options-sideMenu","sidebar":"api"},{"id":"api/options-sideMenuSide","path":"/react-native-navigation/next/api/options-sideMenuSide","sidebar":"api"},{"id":"api/options-splitView","path":"/react-native-navigation/next/api/options-splitView","sidebar":"api"},{"id":"api/options-stack","path":"/react-native-navigation/next/api/options-stack","sidebar":"api"},{"id":"api/options-statusBar","path":"/react-native-navigation/next/api/options-statusBar","sidebar":"api"},{"id":"api/options-subtitle","path":"/react-native-navigation/next/api/options-subtitle","sidebar":"api"},{"id":"api/options-title","path":"/react-native-navigation/next/api/options-title","sidebar":"api"},{"id":"api/overlay","path":"/react-native-navigation/next/api/overlay","sidebar":"api"},{"id":"api/root","path":"/react-native-navigation/next/api/root","sidebar":"api"},{"id":"api/sideMenu-api","path":"/react-native-navigation/next/api/sideMenu-api"},{"id":"api/stack","path":"/react-native-navigation/next/api/stack","sidebar":"api"},{"id":"api/topBar-searchBar","path":"/react-native-navigation/next/api/topBar-searchBar"},{"id":"docs/advanced-navigation","path":"/react-native-navigation/next/docs/advanced-navigation","sidebar":"docs"},{"id":"docs/app-launch","path":"/react-native-navigation/next/docs/app-launch","sidebar":"docs"},{"id":"docs/basic-navigation","path":"/react-native-navigation/next/docs/basic-navigation","sidebar":"docs"},{"id":"docs/before-you-start","path":"/react-native-navigation/next/docs/before-you-start","sidebar":"docs"},{"id":"docs/bottomTabs","path":"/react-native-navigation/next/docs/bottomTabs","sidebar":"docs"},{"id":"docs/community-libraries","path":"/react-native-navigation/next/docs/community-libraries","sidebar":"docs"},{"id":"docs/customBackNavigation","path":"/react-native-navigation/next/docs/customBackNavigation","sidebar":"docs"},{"id":"docs/externalComponent","path":"/react-native-navigation/next/docs/externalComponent","sidebar":"docs"},{"id":"docs/functionalComponents","path":"/react-native-navigation/next/docs/functionalComponents","sidebar":"docs"},{"id":"docs/installing","path":"/react-native-navigation/next/docs/installing","sidebar":"docs"},{"id":"docs/meta-contributing","path":"/react-native-navigation/next/docs/meta-contributing","sidebar":"docs"},{"id":"docs/modal","path":"/react-native-navigation/next/docs/modal","sidebar":"docs"},{"id":"docs/overlay","path":"/react-native-navigation/next/docs/overlay","sidebar":"docs"},{"id":"docs/passing-data-to-components","path":"/react-native-navigation/next/docs/passing-data-to-components","sidebar":"docs"},{"id":"docs/playground-app","path":"/react-native-navigation/next/docs/playground-app","sidebar":"docs"},{"id":"docs/root","path":"/react-native-navigation/next/docs/root","sidebar":"docs"},{"id":"docs/screen-lifecycle","path":"/react-native-navigation/next/docs/screen-lifecycle","sidebar":"docs"},{"id":"docs/showcases","path":"/react-native-navigation/next/docs/showcases","sidebar":"docs"},{"id":"docs/sideMenu","path":"/react-native-navigation/next/docs/sideMenu","sidebar":"docs"},{"id":"docs/sideMenu-disable","path":"/react-native-navigation/next/docs/sideMenu-disable"},{"id":"docs/stack","path":"/react-native-navigation/next/docs/stack","sidebar":"docs"},{"id":"docs/stack-backButton","path":"/react-native-navigation/next/docs/stack-backButton"},{"id":"docs/stack-backNavigation","path":"/react-native-navigation/next/docs/stack-backNavigation"},{"id":"docs/stack-buttons","path":"/react-native-navigation/next/docs/stack-buttons","sidebar":"docs"},{"id":"docs/stack-programmatically","path":"/react-native-navigation/next/docs/stack-programmatically"},{"id":"docs/style-animations","path":"/react-native-navigation/next/docs/style-animations","sidebar":"docs"},{"id":"docs/style-constants","path":"/react-native-navigation/next/docs/style-constants","sidebar":"docs"},{"id":"docs/style-fonts","path":"/react-native-navigation/next/docs/style-fonts","sidebar":"docs"},{"id":"docs/style-options","path":"/react-native-navigation/next/docs/style-options","sidebar":"docs"},{"id":"docs/style-orientation","path":"/react-native-navigation/next/docs/style-orientation","sidebar":"docs"},{"id":"docs/style-statusBar","path":"/react-native-navigation/next/docs/style-statusBar","sidebar":"docs"},{"id":"docs/style-theme","path":"/react-native-navigation/next/docs/style-theme","sidebar":"docs"},{"id":"docs/third-party-mobx","path":"/react-native-navigation/next/docs/third-party-mobx","sidebar":"docs"},{"id":"docs/third-party-react-context","path":"/react-native-navigation/next/docs/third-party-react-context","sidebar":"docs"},{"id":"docs/third-party-react-native-vector-icons","path":"/react-native-navigation/next/docs/third-party-react-native-vector-icons"},{"id":"docs/third-party-typescript","path":"/react-native-navigation/next/docs/third-party-typescript","sidebar":"docs"}]},{"name":"7.37.0","label":"7.37.0","isLast":true,"path":"/react-native-navigation/","mainDocId":"docs/before-you-start","docs":[{"id":"api/component","path":"/react-native-navigation/api/component","sidebar":"version-7.37.0/api"},{"id":"api/events","path":"/react-native-navigation/api/events","sidebar":"version-7.37.0/api"},{"id":"api/layout-bottomTabs","path":"/react-native-navigation/api/layout-bottomTabs","sidebar":"version-7.37.0/api"},{"id":"api/layout-component","path":"/react-native-navigation/api/layout-component","sidebar":"version-7.37.0/api"},{"id":"api/layout-layout","path":"/react-native-navigation/api/layout-layout","sidebar":"version-7.37.0/api"},{"id":"api/layout-sideMenu","path":"/react-native-navigation/api/layout-sideMenu","sidebar":"version-7.37.0/api"},{"id":"api/layout-splitView","path":"/react-native-navigation/api/layout-splitView","sidebar":"version-7.37.0/api"},{"id":"api/layout-stack","path":"/react-native-navigation/api/layout-stack","sidebar":"version-7.37.0/api"},{"id":"api/modal","path":"/react-native-navigation/api/modal","sidebar":"version-7.37.0/api"},{"id":"api/options-animations","path":"/react-native-navigation/api/options-animations"},{"id":"api/options-api","path":"/react-native-navigation/api/options-api","sidebar":"version-7.37.0/api"},{"id":"api/options-backButton","path":"/react-native-navigation/api/options-backButton","sidebar":"version-7.37.0/api"},{"id":"api/options-background","path":"/react-native-navigation/api/options-background","sidebar":"version-7.37.0/api"},{"id":"api/options-bottomTab","path":"/react-native-navigation/api/options-bottomTab","sidebar":"version-7.37.0/api"},{"id":"api/options-bottomTabs","path":"/react-native-navigation/api/options-bottomTabs","sidebar":"version-7.37.0/api"},{"id":"api/options-button","path":"/react-native-navigation/api/options-button","sidebar":"version-7.37.0/api"},{"id":"api/options-fab","path":"/react-native-navigation/api/options-fab"},{"id":"api/options-hardwareBackButton","path":"/react-native-navigation/api/options-hardwareBackButton","sidebar":"version-7.37.0/api"},{"id":"api/options-iconBackground","path":"/react-native-navigation/api/options-iconBackground","sidebar":"version-7.37.0/api"},{"id":"api/options-iconInsets","path":"/react-native-navigation/api/options-iconInsets","sidebar":"version-7.37.0/api"},{"id":"api/options-imageResource","path":"/react-native-navigation/api/options-imageResource"},{"id":"api/options-largeTitle","path":"/react-native-navigation/api/options-largeTitle","sidebar":"version-7.37.0/api"},{"id":"api/options-layout","path":"/react-native-navigation/api/options-layout","sidebar":"version-7.37.0/api"},{"id":"api/options-migration","path":"/react-native-navigation/api/options-migration"},{"id":"api/options-modal","path":"/react-native-navigation/api/options-modal","sidebar":"version-7.37.0/api"},{"id":"api/options-navigationBar","path":"/react-native-navigation/api/options-navigationBar","sidebar":"version-7.37.0/api"},{"id":"api/options-overlay","path":"/react-native-navigation/api/options-overlay","sidebar":"version-7.37.0/api"},{"id":"api/options-preview","path":"/react-native-navigation/api/options-preview"},{"id":"api/options-root","path":"/react-native-navigation/api/options-root","sidebar":"version-7.37.0/api"},{"id":"api/options-scrollEdgeAppearance","path":"/react-native-navigation/api/options-scrollEdgeAppearance"},{"id":"api/options-sideMenu","path":"/react-native-navigation/api/options-sideMenu","sidebar":"version-7.37.0/api"},{"id":"api/options-sideMenuSide","path":"/react-native-navigation/api/options-sideMenuSide","sidebar":"version-7.37.0/api"},{"id":"api/options-splitView","path":"/react-native-navigation/api/options-splitView","sidebar":"version-7.37.0/api"},{"id":"api/options-stack","path":"/react-native-navigation/api/options-stack","sidebar":"version-7.37.0/api"},{"id":"api/options-statusBar","path":"/react-native-navigation/api/options-statusBar","sidebar":"version-7.37.0/api"},{"id":"api/options-subtitle","path":"/react-native-navigation/api/options-subtitle","sidebar":"version-7.37.0/api"},{"id":"api/options-title","path":"/react-native-navigation/api/options-title","sidebar":"version-7.37.0/api"},{"id":"api/overlay","path":"/react-native-navigation/api/overlay","sidebar":"version-7.37.0/api"},{"id":"api/root","path":"/react-native-navigation/api/root","sidebar":"version-7.37.0/api"},{"id":"api/sideMenu-api","path":"/react-native-navigation/api/sideMenu-api"},{"id":"api/stack","path":"/react-native-navigation/api/stack","sidebar":"version-7.37.0/api"},{"id":"api/topBar-searchBar","path":"/react-native-navigation/api/topBar-searchBar"},{"id":"docs/advanced-navigation","path":"/react-native-navigation/docs/advanced-navigation","sidebar":"version-7.37.0/docs"},{"id":"docs/app-launch","path":"/react-native-navigation/docs/app-launch","sidebar":"version-7.37.0/docs"},{"id":"docs/basic-navigation","path":"/react-native-navigation/docs/basic-navigation","sidebar":"version-7.37.0/docs"},{"id":"docs/before-you-start","path":"/react-native-navigation/docs/before-you-start","sidebar":"version-7.37.0/docs"},{"id":"docs/bottomTabs","path":"/react-native-navigation/docs/bottomTabs","sidebar":"version-7.37.0/docs"},{"id":"docs/community-libraries","path":"/react-native-navigation/docs/community-libraries","sidebar":"version-7.37.0/docs"},{"id":"docs/customBackNavigation","path":"/react-native-navigation/docs/customBackNavigation","sidebar":"version-7.37.0/docs"},{"id":"docs/externalComponent","path":"/react-native-navigation/docs/externalComponent","sidebar":"version-7.37.0/docs"},{"id":"docs/functionalComponents","path":"/react-native-navigation/docs/functionalComponents","sidebar":"version-7.37.0/docs"},{"id":"docs/installing","path":"/react-native-navigation/docs/installing","sidebar":"version-7.37.0/docs"},{"id":"docs/meta-contributing","path":"/react-native-navigation/docs/meta-contributing","sidebar":"version-7.37.0/docs"},{"id":"docs/modal","path":"/react-native-navigation/docs/modal","sidebar":"version-7.37.0/docs"},{"id":"docs/overlay","path":"/react-native-navigation/docs/overlay","sidebar":"version-7.37.0/docs"},{"id":"docs/passing-data-to-components","path":"/react-native-navigation/docs/passing-data-to-components","sidebar":"version-7.37.0/docs"},{"id":"docs/playground-app","path":"/react-native-navigation/docs/playground-app","sidebar":"version-7.37.0/docs"},{"id":"docs/root","path":"/react-native-navigation/docs/root","sidebar":"version-7.37.0/docs"},{"id":"docs/screen-lifecycle","path":"/react-native-navigation/docs/screen-lifecycle","sidebar":"version-7.37.0/docs"},{"id":"docs/showcases","path":"/react-native-navigation/docs/showcases","sidebar":"version-7.37.0/docs"},{"id":"docs/sideMenu","path":"/react-native-navigation/docs/sideMenu","sidebar":"version-7.37.0/docs"},{"id":"docs/sideMenu-disable","path":"/react-native-navigation/docs/sideMenu-disable"},{"id":"docs/stack","path":"/react-native-navigation/docs/stack","sidebar":"version-7.37.0/docs"},{"id":"docs/stack-backButton","path":"/react-native-navigation/docs/stack-backButton"},{"id":"docs/stack-backNavigation","path":"/react-native-navigation/docs/stack-backNavigation"},{"id":"docs/stack-buttons","path":"/react-native-navigation/docs/stack-buttons","sidebar":"version-7.37.0/docs"},{"id":"docs/stack-programmatically","path":"/react-native-navigation/docs/stack-programmatically"},{"id":"docs/style-animations","path":"/react-native-navigation/docs/style-animations","sidebar":"version-7.37.0/docs"},{"id":"docs/style-constants","path":"/react-native-navigation/docs/style-constants","sidebar":"version-7.37.0/docs"},{"id":"docs/style-fonts","path":"/react-native-navigation/docs/style-fonts","sidebar":"version-7.37.0/docs"},{"id":"docs/style-options","path":"/react-native-navigation/docs/style-options","sidebar":"version-7.37.0/docs"},{"id":"docs/style-orientation","path":"/react-native-navigation/docs/style-orientation","sidebar":"version-7.37.0/docs"},{"id":"docs/style-statusBar","path":"/react-native-navigation/docs/style-statusBar","sidebar":"version-7.37.0/docs"},{"id":"docs/style-theme","path":"/react-native-navigation/docs/style-theme","sidebar":"version-7.37.0/docs"},{"id":"docs/third-party-mobx","path":"/react-native-navigation/docs/third-party-mobx","sidebar":"version-7.37.0/docs"},{"id":"docs/third-party-react-context","path":"/react-native-navigation/docs/third-party-react-context","sidebar":"version-7.37.0/docs"},{"id":"docs/third-party-react-native-vector-icons","path":"/react-native-navigation/docs/third-party-react-native-vector-icons"},{"id":"docs/third-party-typescript","path":"/react-native-navigation/docs/third-party-typescript","sidebar":"version-7.37.0/docs"}]},{"name":"7.32.1","label":"7.32.1","isLast":false,"path":"/react-native-navigation/7.32.1","mainDocId":"docs/before-you-start","docs":[{"id":"api/component","path":"/react-native-navigation/7.32.1/api/component","sidebar":"version-7.32.1/api"},{"id":"api/events","path":"/react-native-navigation/7.32.1/api/events","sidebar":"version-7.32.1/api"},{"id":"api/layout-bottomTabs","path":"/react-native-navigation/7.32.1/api/layout-bottomTabs","sidebar":"version-7.32.1/api"},{"id":"api/layout-component","path":"/react-native-navigation/7.32.1/api/layout-component","sidebar":"version-7.32.1/api"},{"id":"api/layout-layout","path":"/react-native-navigation/7.32.1/api/layout-layout","sidebar":"version-7.32.1/api"},{"id":"api/layout-sideMenu","path":"/react-native-navigation/7.32.1/api/layout-sideMenu","sidebar":"version-7.32.1/api"},{"id":"api/layout-splitView","path":"/react-native-navigation/7.32.1/api/layout-splitView","sidebar":"version-7.32.1/api"},{"id":"api/layout-stack","path":"/react-native-navigation/7.32.1/api/layout-stack","sidebar":"version-7.32.1/api"},{"id":"api/modal","path":"/react-native-navigation/7.32.1/api/modal","sidebar":"version-7.32.1/api"},{"id":"api/options-animations","path":"/react-native-navigation/7.32.1/api/options-animations"},{"id":"api/options-api","path":"/react-native-navigation/7.32.1/api/options-api","sidebar":"version-7.32.1/api"},{"id":"api/options-backButton","path":"/react-native-navigation/7.32.1/api/options-backButton","sidebar":"version-7.32.1/api"},{"id":"api/options-background","path":"/react-native-navigation/7.32.1/api/options-background","sidebar":"version-7.32.1/api"},{"id":"api/options-bottomTab","path":"/react-native-navigation/7.32.1/api/options-bottomTab","sidebar":"version-7.32.1/api"},{"id":"api/options-bottomTabs","path":"/react-native-navigation/7.32.1/api/options-bottomTabs","sidebar":"version-7.32.1/api"},{"id":"api/options-button","path":"/react-native-navigation/7.32.1/api/options-button","sidebar":"version-7.32.1/api"},{"id":"api/options-fab","path":"/react-native-navigation/7.32.1/api/options-fab"},{"id":"api/options-hardwareBackButton","path":"/react-native-navigation/7.32.1/api/options-hardwareBackButton","sidebar":"version-7.32.1/api"},{"id":"api/options-iconBackground","path":"/react-native-navigation/7.32.1/api/options-iconBackground","sidebar":"version-7.32.1/api"},{"id":"api/options-iconInsets","path":"/react-native-navigation/7.32.1/api/options-iconInsets","sidebar":"version-7.32.1/api"},{"id":"api/options-imageResource","path":"/react-native-navigation/7.32.1/api/options-imageResource"},{"id":"api/options-largeTitle","path":"/react-native-navigation/7.32.1/api/options-largeTitle","sidebar":"version-7.32.1/api"},{"id":"api/options-layout","path":"/react-native-navigation/7.32.1/api/options-layout","sidebar":"version-7.32.1/api"},{"id":"api/options-migration","path":"/react-native-navigation/7.32.1/api/options-migration"},{"id":"api/options-modal","path":"/react-native-navigation/7.32.1/api/options-modal","sidebar":"version-7.32.1/api"},{"id":"api/options-navigationBar","path":"/react-native-navigation/7.32.1/api/options-navigationBar","sidebar":"version-7.32.1/api"},{"id":"api/options-overlay","path":"/react-native-navigation/7.32.1/api/options-overlay","sidebar":"version-7.32.1/api"},{"id":"api/options-preview","path":"/react-native-navigation/7.32.1/api/options-preview"},{"id":"api/options-root","path":"/react-native-navigation/7.32.1/api/options-root","sidebar":"version-7.32.1/api"},{"id":"api/options-scrollEdgeAppearance","path":"/react-native-navigation/7.32.1/api/options-scrollEdgeAppearance"},{"id":"api/options-sideMenu","path":"/react-native-navigation/7.32.1/api/options-sideMenu","sidebar":"version-7.32.1/api"},{"id":"api/options-sideMenuSide","path":"/react-native-navigation/7.32.1/api/options-sideMenuSide","sidebar":"version-7.32.1/api"},{"id":"api/options-splitView","path":"/react-native-navigation/7.32.1/api/options-splitView","sidebar":"version-7.32.1/api"},{"id":"api/options-stack","path":"/react-native-navigation/7.32.1/api/options-stack","sidebar":"version-7.32.1/api"},{"id":"api/options-statusBar","path":"/react-native-navigation/7.32.1/api/options-statusBar","sidebar":"version-7.32.1/api"},{"id":"api/options-subtitle","path":"/react-native-navigation/7.32.1/api/options-subtitle","sidebar":"version-7.32.1/api"},{"id":"api/options-title","path":"/react-native-navigation/7.32.1/api/options-title","sidebar":"version-7.32.1/api"},{"id":"api/overlay","path":"/react-native-navigation/7.32.1/api/overlay","sidebar":"version-7.32.1/api"},{"id":"api/root","path":"/react-native-navigation/7.32.1/api/root","sidebar":"version-7.32.1/api"},{"id":"api/sideMenu-api","path":"/react-native-navigation/7.32.1/api/sideMenu-api"},{"id":"api/stack","path":"/react-native-navigation/7.32.1/api/stack","sidebar":"version-7.32.1/api"},{"id":"api/topBar-searchBar","path":"/react-native-navigation/7.32.1/api/topBar-searchBar"},{"id":"docs/advanced-navigation","path":"/react-native-navigation/7.32.1/docs/advanced-navigation","sidebar":"version-7.32.1/docs"},{"id":"docs/app-launch","path":"/react-native-navigation/7.32.1/docs/app-launch","sidebar":"version-7.32.1/docs"},{"id":"docs/basic-navigation","path":"/react-native-navigation/7.32.1/docs/basic-navigation","sidebar":"version-7.32.1/docs"},{"id":"docs/before-you-start","path":"/react-native-navigation/7.32.1/docs/before-you-start","sidebar":"version-7.32.1/docs"},{"id":"docs/bottomTabs","path":"/react-native-navigation/7.32.1/docs/bottomTabs","sidebar":"version-7.32.1/docs"},{"id":"docs/community-libraries","path":"/react-native-navigation/7.32.1/docs/community-libraries","sidebar":"version-7.32.1/docs"},{"id":"docs/customBackNavigation","path":"/react-native-navigation/7.32.1/docs/customBackNavigation","sidebar":"version-7.32.1/docs"},{"id":"docs/externalComponent","path":"/react-native-navigation/7.32.1/docs/externalComponent","sidebar":"version-7.32.1/docs"},{"id":"docs/functionalComponents","path":"/react-native-navigation/7.32.1/docs/functionalComponents","sidebar":"version-7.32.1/docs"},{"id":"docs/installing","path":"/react-native-navigation/7.32.1/docs/installing","sidebar":"version-7.32.1/docs"},{"id":"docs/meta-contributing","path":"/react-native-navigation/7.32.1/docs/meta-contributing","sidebar":"version-7.32.1/docs"},{"id":"docs/modal","path":"/react-native-navigation/7.32.1/docs/modal","sidebar":"version-7.32.1/docs"},{"id":"docs/overlay","path":"/react-native-navigation/7.32.1/docs/overlay","sidebar":"version-7.32.1/docs"},{"id":"docs/passing-data-to-components","path":"/react-native-navigation/7.32.1/docs/passing-data-to-components","sidebar":"version-7.32.1/docs"},{"id":"docs/playground-app","path":"/react-native-navigation/7.32.1/docs/playground-app","sidebar":"version-7.32.1/docs"},{"id":"docs/root","path":"/react-native-navigation/7.32.1/docs/root","sidebar":"version-7.32.1/docs"},{"id":"docs/screen-lifecycle","path":"/react-native-navigation/7.32.1/docs/screen-lifecycle","sidebar":"version-7.32.1/docs"},{"id":"docs/showcases","path":"/react-native-navigation/7.32.1/docs/showcases","sidebar":"version-7.32.1/docs"},{"id":"docs/sideMenu","path":"/react-native-navigation/7.32.1/docs/sideMenu","sidebar":"version-7.32.1/docs"},{"id":"docs/sideMenu-disable","path":"/react-native-navigation/7.32.1/docs/sideMenu-disable"},{"id":"docs/stack","path":"/react-native-navigation/7.32.1/docs/stack","sidebar":"version-7.32.1/docs"},{"id":"docs/stack-backButton","path":"/react-native-navigation/7.32.1/docs/stack-backButton"},{"id":"docs/stack-backNavigation","path":"/react-native-navigation/7.32.1/docs/stack-backNavigation"},{"id":"docs/stack-buttons","path":"/react-native-navigation/7.32.1/docs/stack-buttons","sidebar":"version-7.32.1/docs"},{"id":"docs/stack-programmatically","path":"/react-native-navigation/7.32.1/docs/stack-programmatically"},{"id":"docs/style-animations","path":"/react-native-navigation/7.32.1/docs/style-animations","sidebar":"version-7.32.1/docs"},{"id":"docs/style-constants","path":"/react-native-navigation/7.32.1/docs/style-constants","sidebar":"version-7.32.1/docs"},{"id":"docs/style-fonts","path":"/react-native-navigation/7.32.1/docs/style-fonts","sidebar":"version-7.32.1/docs"},{"id":"docs/style-options","path":"/react-native-navigation/7.32.1/docs/style-options","sidebar":"version-7.32.1/docs"},{"id":"docs/style-orientation","path":"/react-native-navigation/7.32.1/docs/style-orientation","sidebar":"version-7.32.1/docs"},{"id":"docs/style-statusBar","path":"/react-native-navigation/7.32.1/docs/style-statusBar","sidebar":"version-7.32.1/docs"},{"id":"docs/style-theme","path":"/react-native-navigation/7.32.1/docs/style-theme","sidebar":"version-7.32.1/docs"},{"id":"docs/third-party-mobx","path":"/react-native-navigation/7.32.1/docs/third-party-mobx","sidebar":"version-7.32.1/docs"},{"id":"docs/third-party-react-context","path":"/react-native-navigation/7.32.1/docs/third-party-react-context","sidebar":"version-7.32.1/docs"},{"id":"docs/third-party-react-native-vector-icons","path":"/react-native-navigation/7.32.1/docs/third-party-react-native-vector-icons"},{"id":"docs/third-party-typescript","path":"/react-native-navigation/7.32.1/docs/third-party-typescript","sidebar":"version-7.32.1/docs"}]},{"name":"7.25.4","label":"7.25.4","isLast":false,"path":"/react-native-navigation/7.25.4","mainDocId":"docs/before-you-start","docs":[{"id":"api/component","path":"/react-native-navigation/7.25.4/api/component","sidebar":"version-7.25.4/api"},{"id":"api/events","path":"/react-native-navigation/7.25.4/api/events","sidebar":"version-7.25.4/api"},{"id":"api/layout-bottomTabs","path":"/react-native-navigation/7.25.4/api/layout-bottomTabs","sidebar":"version-7.25.4/api"},{"id":"api/layout-component","path":"/react-native-navigation/7.25.4/api/layout-component","sidebar":"version-7.25.4/api"},{"id":"api/layout-layout","path":"/react-native-navigation/7.25.4/api/layout-layout","sidebar":"version-7.25.4/api"},{"id":"api/layout-sideMenu","path":"/react-native-navigation/7.25.4/api/layout-sideMenu","sidebar":"version-7.25.4/api"},{"id":"api/layout-splitView","path":"/react-native-navigation/7.25.4/api/layout-splitView","sidebar":"version-7.25.4/api"},{"id":"api/layout-stack","path":"/react-native-navigation/7.25.4/api/layout-stack","sidebar":"version-7.25.4/api"},{"id":"api/modal","path":"/react-native-navigation/7.25.4/api/modal","sidebar":"version-7.25.4/api"},{"id":"api/options-animations","path":"/react-native-navigation/7.25.4/api/options-animations"},{"id":"api/options-api","path":"/react-native-navigation/7.25.4/api/options-api","sidebar":"version-7.25.4/api"},{"id":"api/options-backButton","path":"/react-native-navigation/7.25.4/api/options-backButton","sidebar":"version-7.25.4/api"},{"id":"api/options-background","path":"/react-native-navigation/7.25.4/api/options-background","sidebar":"version-7.25.4/api"},{"id":"api/options-bottomTab","path":"/react-native-navigation/7.25.4/api/options-bottomTab","sidebar":"version-7.25.4/api"},{"id":"api/options-bottomTabs","path":"/react-native-navigation/7.25.4/api/options-bottomTabs","sidebar":"version-7.25.4/api"},{"id":"api/options-button","path":"/react-native-navigation/7.25.4/api/options-button","sidebar":"version-7.25.4/api"},{"id":"api/options-fab","path":"/react-native-navigation/7.25.4/api/options-fab"},{"id":"api/options-hardwareBackButton","path":"/react-native-navigation/7.25.4/api/options-hardwareBackButton","sidebar":"version-7.25.4/api"},{"id":"api/options-iconBackground","path":"/react-native-navigation/7.25.4/api/options-iconBackground","sidebar":"version-7.25.4/api"},{"id":"api/options-iconInsets","path":"/react-native-navigation/7.25.4/api/options-iconInsets","sidebar":"version-7.25.4/api"},{"id":"api/options-imageResource","path":"/react-native-navigation/7.25.4/api/options-imageResource"},{"id":"api/options-largeTitle","path":"/react-native-navigation/7.25.4/api/options-largeTitle","sidebar":"version-7.25.4/api"},{"id":"api/options-layout","path":"/react-native-navigation/7.25.4/api/options-layout","sidebar":"version-7.25.4/api"},{"id":"api/options-migration","path":"/react-native-navigation/7.25.4/api/options-migration"},{"id":"api/options-modal","path":"/react-native-navigation/7.25.4/api/options-modal","sidebar":"version-7.25.4/api"},{"id":"api/options-navigationBar","path":"/react-native-navigation/7.25.4/api/options-navigationBar","sidebar":"version-7.25.4/api"},{"id":"api/options-overlay","path":"/react-native-navigation/7.25.4/api/options-overlay","sidebar":"version-7.25.4/api"},{"id":"api/options-overlay-attach","path":"/react-native-navigation/7.25.4/api/options-overlay-attach","sidebar":"version-7.25.4/api"},{"id":"api/options-preview","path":"/react-native-navigation/7.25.4/api/options-preview"},{"id":"api/options-root","path":"/react-native-navigation/7.25.4/api/options-root","sidebar":"version-7.25.4/api"},{"id":"api/options-scrollEdgeAppearance","path":"/react-native-navigation/7.25.4/api/options-scrollEdgeAppearance"},{"id":"api/options-sideMenu","path":"/react-native-navigation/7.25.4/api/options-sideMenu","sidebar":"version-7.25.4/api"},{"id":"api/options-sideMenuSide","path":"/react-native-navigation/7.25.4/api/options-sideMenuSide","sidebar":"version-7.25.4/api"},{"id":"api/options-splitView","path":"/react-native-navigation/7.25.4/api/options-splitView","sidebar":"version-7.25.4/api"},{"id":"api/options-stack","path":"/react-native-navigation/7.25.4/api/options-stack","sidebar":"version-7.25.4/api"},{"id":"api/options-statusBar","path":"/react-native-navigation/7.25.4/api/options-statusBar","sidebar":"version-7.25.4/api"},{"id":"api/options-subtitle","path":"/react-native-navigation/7.25.4/api/options-subtitle","sidebar":"version-7.25.4/api"},{"id":"api/options-title","path":"/react-native-navigation/7.25.4/api/options-title","sidebar":"version-7.25.4/api"},{"id":"api/overlay","path":"/react-native-navigation/7.25.4/api/overlay","sidebar":"version-7.25.4/api"},{"id":"api/root","path":"/react-native-navigation/7.25.4/api/root","sidebar":"version-7.25.4/api"},{"id":"api/sideMenu-api","path":"/react-native-navigation/7.25.4/api/sideMenu-api"},{"id":"api/stack","path":"/react-native-navigation/7.25.4/api/stack","sidebar":"version-7.25.4/api"},{"id":"api/topBar-searchBar","path":"/react-native-navigation/7.25.4/api/topBar-searchBar"},{"id":"docs/advanced-navigation","path":"/react-native-navigation/7.25.4/docs/advanced-navigation","sidebar":"version-7.25.4/docs"},{"id":"docs/app-launch","path":"/react-native-navigation/7.25.4/docs/app-launch","sidebar":"version-7.25.4/docs"},{"id":"docs/basic-navigation","path":"/react-native-navigation/7.25.4/docs/basic-navigation","sidebar":"version-7.25.4/docs"},{"id":"docs/before-you-start","path":"/react-native-navigation/7.25.4/docs/before-you-start","sidebar":"version-7.25.4/docs"},{"id":"docs/bottomTabs","path":"/react-native-navigation/7.25.4/docs/bottomTabs","sidebar":"version-7.25.4/docs"},{"id":"docs/community-libraries","path":"/react-native-navigation/7.25.4/docs/community-libraries","sidebar":"version-7.25.4/docs"},{"id":"docs/customBackNavigation","path":"/react-native-navigation/7.25.4/docs/customBackNavigation","sidebar":"version-7.25.4/docs"},{"id":"docs/externalComponent","path":"/react-native-navigation/7.25.4/docs/externalComponent","sidebar":"version-7.25.4/docs"},{"id":"docs/functionalComponents","path":"/react-native-navigation/7.25.4/docs/functionalComponents","sidebar":"version-7.25.4/docs"},{"id":"docs/installing","path":"/react-native-navigation/7.25.4/docs/installing","sidebar":"version-7.25.4/docs"},{"id":"docs/meta-contributing","path":"/react-native-navigation/7.25.4/docs/meta-contributing","sidebar":"version-7.25.4/docs"},{"id":"docs/modal","path":"/react-native-navigation/7.25.4/docs/modal","sidebar":"version-7.25.4/docs"},{"id":"docs/overlay","path":"/react-native-navigation/7.25.4/docs/overlay","sidebar":"version-7.25.4/docs"},{"id":"docs/passing-data-to-components","path":"/react-native-navigation/7.25.4/docs/passing-data-to-components","sidebar":"version-7.25.4/docs"},{"id":"docs/playground-app","path":"/react-native-navigation/7.25.4/docs/playground-app","sidebar":"version-7.25.4/docs"},{"id":"docs/root","path":"/react-native-navigation/7.25.4/docs/root","sidebar":"version-7.25.4/docs"},{"id":"docs/screen-lifecycle","path":"/react-native-navigation/7.25.4/docs/screen-lifecycle","sidebar":"version-7.25.4/docs"},{"id":"docs/showcases","path":"/react-native-navigation/7.25.4/docs/showcases","sidebar":"version-7.25.4/docs"},{"id":"docs/sideMenu","path":"/react-native-navigation/7.25.4/docs/sideMenu","sidebar":"version-7.25.4/docs"},{"id":"docs/sideMenu-disable","path":"/react-native-navigation/7.25.4/docs/sideMenu-disable"},{"id":"docs/stack","path":"/react-native-navigation/7.25.4/docs/stack","sidebar":"version-7.25.4/docs"},{"id":"docs/stack-backButton","path":"/react-native-navigation/7.25.4/docs/stack-backButton"},{"id":"docs/stack-backNavigation","path":"/react-native-navigation/7.25.4/docs/stack-backNavigation"},{"id":"docs/stack-buttons","path":"/react-native-navigation/7.25.4/docs/stack-buttons","sidebar":"version-7.25.4/docs"},{"id":"docs/stack-programmatically","path":"/react-native-navigation/7.25.4/docs/stack-programmatically"},{"id":"docs/style-animations","path":"/react-native-navigation/7.25.4/docs/style-animations","sidebar":"version-7.25.4/docs"},{"id":"docs/style-constants","path":"/react-native-navigation/7.25.4/docs/style-constants","sidebar":"version-7.25.4/docs"},{"id":"docs/style-fonts","path":"/react-native-navigation/7.25.4/docs/style-fonts","sidebar":"version-7.25.4/docs"},{"id":"docs/style-options","path":"/react-native-navigation/7.25.4/docs/style-options","sidebar":"version-7.25.4/docs"},{"id":"docs/style-orientation","path":"/react-native-navigation/7.25.4/docs/style-orientation","sidebar":"version-7.25.4/docs"},{"id":"docs/style-statusBar","path":"/react-native-navigation/7.25.4/docs/style-statusBar","sidebar":"version-7.25.4/docs"},{"id":"docs/style-theme","path":"/react-native-navigation/7.25.4/docs/style-theme","sidebar":"version-7.25.4/docs"},{"id":"docs/third-party-mobx","path":"/react-native-navigation/7.25.4/docs/third-party-mobx","sidebar":"version-7.25.4/docs"},{"id":"docs/third-party-react-context","path":"/react-native-navigation/7.25.4/docs/third-party-react-context","sidebar":"version-7.25.4/docs"},{"id":"docs/third-party-react-native-vector-icons","path":"/react-native-navigation/7.25.4/docs/third-party-react-native-vector-icons"},{"id":"docs/third-party-typescript","path":"/react-native-navigation/7.25.4/docs/third-party-typescript","sidebar":"version-7.25.4/docs"}]},{"name":"7.11.2","label":"7.11.2","isLast":false,"path":"/react-native-navigation/7.11.2","mainDocId":"docs/before-you-start","docs":[{"id":"api/component","path":"/react-native-navigation/7.11.2/api/component","sidebar":"version-7.11.2/api"},{"id":"api/events","path":"/react-native-navigation/7.11.2/api/events","sidebar":"version-7.11.2/api"},{"id":"api/layout-bottomTabs","path":"/react-native-navigation/7.11.2/api/layout-bottomTabs","sidebar":"version-7.11.2/api"},{"id":"api/layout-component","path":"/react-native-navigation/7.11.2/api/layout-component","sidebar":"version-7.11.2/api"},{"id":"api/layout-layout","path":"/react-native-navigation/7.11.2/api/layout-layout","sidebar":"version-7.11.2/api"},{"id":"api/layout-sideMenu","path":"/react-native-navigation/7.11.2/api/layout-sideMenu","sidebar":"version-7.11.2/api"},{"id":"api/layout-splitView","path":"/react-native-navigation/7.11.2/api/layout-splitView","sidebar":"version-7.11.2/api"},{"id":"api/layout-stack","path":"/react-native-navigation/7.11.2/api/layout-stack","sidebar":"version-7.11.2/api"},{"id":"api/modal","path":"/react-native-navigation/7.11.2/api/modal","sidebar":"version-7.11.2/api"},{"id":"api/options-animations","path":"/react-native-navigation/7.11.2/api/options-animations"},{"id":"api/options-api","path":"/react-native-navigation/7.11.2/api/options-api","sidebar":"version-7.11.2/api"},{"id":"api/options-backButton","path":"/react-native-navigation/7.11.2/api/options-backButton","sidebar":"version-7.11.2/api"},{"id":"api/options-background","path":"/react-native-navigation/7.11.2/api/options-background","sidebar":"version-7.11.2/api"},{"id":"api/options-bottomTab","path":"/react-native-navigation/7.11.2/api/options-bottomTab","sidebar":"version-7.11.2/api"},{"id":"api/options-bottomTabs","path":"/react-native-navigation/7.11.2/api/options-bottomTabs","sidebar":"version-7.11.2/api"},{"id":"api/options-button","path":"/react-native-navigation/7.11.2/api/options-button","sidebar":"version-7.11.2/api"},{"id":"api/options-fab","path":"/react-native-navigation/7.11.2/api/options-fab"},{"id":"api/options-hardwareBackButton","path":"/react-native-navigation/7.11.2/api/options-hardwareBackButton","sidebar":"version-7.11.2/api"},{"id":"api/options-iconBackground","path":"/react-native-navigation/7.11.2/api/options-iconBackground","sidebar":"version-7.11.2/api"},{"id":"api/options-iconInsets","path":"/react-native-navigation/7.11.2/api/options-iconInsets","sidebar":"version-7.11.2/api"},{"id":"api/options-imageResource","path":"/react-native-navigation/7.11.2/api/options-imageResource"},{"id":"api/options-largeTitle","path":"/react-native-navigation/7.11.2/api/options-largeTitle","sidebar":"version-7.11.2/api"},{"id":"api/options-layout","path":"/react-native-navigation/7.11.2/api/options-layout","sidebar":"version-7.11.2/api"},{"id":"api/options-migration","path":"/react-native-navigation/7.11.2/api/options-migration"},{"id":"api/options-modal","path":"/react-native-navigation/7.11.2/api/options-modal","sidebar":"version-7.11.2/api"},{"id":"api/options-navigationBar","path":"/react-native-navigation/7.11.2/api/options-navigationBar","sidebar":"version-7.11.2/api"},{"id":"api/options-overlay","path":"/react-native-navigation/7.11.2/api/options-overlay","sidebar":"version-7.11.2/api"},{"id":"api/options-preview","path":"/react-native-navigation/7.11.2/api/options-preview"},{"id":"api/options-root","path":"/react-native-navigation/7.11.2/api/options-root","sidebar":"version-7.11.2/api"},{"id":"api/options-scrollEdgeAppearance","path":"/react-native-navigation/7.11.2/api/options-scrollEdgeAppearance"},{"id":"api/options-sideMenu","path":"/react-native-navigation/7.11.2/api/options-sideMenu","sidebar":"version-7.11.2/api"},{"id":"api/options-sideMenuSide","path":"/react-native-navigation/7.11.2/api/options-sideMenuSide","sidebar":"version-7.11.2/api"},{"id":"api/options-splitView","path":"/react-native-navigation/7.11.2/api/options-splitView","sidebar":"version-7.11.2/api"},{"id":"api/options-stack","path":"/react-native-navigation/7.11.2/api/options-stack","sidebar":"version-7.11.2/api"},{"id":"api/options-statusBar","path":"/react-native-navigation/7.11.2/api/options-statusBar","sidebar":"version-7.11.2/api"},{"id":"api/options-subtitle","path":"/react-native-navigation/7.11.2/api/options-subtitle","sidebar":"version-7.11.2/api"},{"id":"api/options-title","path":"/react-native-navigation/7.11.2/api/options-title","sidebar":"version-7.11.2/api"},{"id":"api/overlay","path":"/react-native-navigation/7.11.2/api/overlay","sidebar":"version-7.11.2/api"},{"id":"api/root","path":"/react-native-navigation/7.11.2/api/root","sidebar":"version-7.11.2/api"},{"id":"api/sideMenu-api","path":"/react-native-navigation/7.11.2/api/sideMenu-api"},{"id":"api/stack","path":"/react-native-navigation/7.11.2/api/stack","sidebar":"version-7.11.2/api"},{"id":"api/topBar-searchBar","path":"/react-native-navigation/7.11.2/api/topBar-searchBar"},{"id":"docs/advanced-navigation","path":"/react-native-navigation/7.11.2/docs/advanced-navigation","sidebar":"version-7.11.2/docs"},{"id":"docs/app-launch","path":"/react-native-navigation/7.11.2/docs/app-launch","sidebar":"version-7.11.2/docs"},{"id":"docs/basic-navigation","path":"/react-native-navigation/7.11.2/docs/basic-navigation","sidebar":"version-7.11.2/docs"},{"id":"docs/before-you-start","path":"/react-native-navigation/7.11.2/docs/before-you-start","sidebar":"version-7.11.2/docs"},{"id":"docs/bottomTabs","path":"/react-native-navigation/7.11.2/docs/bottomTabs","sidebar":"version-7.11.2/docs"},{"id":"docs/community-libraries","path":"/react-native-navigation/7.11.2/docs/community-libraries","sidebar":"version-7.11.2/docs"},{"id":"docs/externalComponent","path":"/react-native-navigation/7.11.2/docs/externalComponent","sidebar":"version-7.11.2/docs"},{"id":"docs/functionalComponents","path":"/react-native-navigation/7.11.2/docs/functionalComponents","sidebar":"version-7.11.2/docs"},{"id":"docs/installing","path":"/react-native-navigation/7.11.2/docs/installing","sidebar":"version-7.11.2/docs"},{"id":"docs/meta-contributing","path":"/react-native-navigation/7.11.2/docs/meta-contributing","sidebar":"version-7.11.2/docs"},{"id":"docs/modal","path":"/react-native-navigation/7.11.2/docs/modal","sidebar":"version-7.11.2/docs"},{"id":"docs/overlay","path":"/react-native-navigation/7.11.2/docs/overlay","sidebar":"version-7.11.2/docs"},{"id":"docs/passing-data-to-components","path":"/react-native-navigation/7.11.2/docs/passing-data-to-components","sidebar":"version-7.11.2/docs"},{"id":"docs/playground-app","path":"/react-native-navigation/7.11.2/docs/playground-app","sidebar":"version-7.11.2/docs"},{"id":"docs/root","path":"/react-native-navigation/7.11.2/docs/root","sidebar":"version-7.11.2/docs"},{"id":"docs/screen-lifecycle","path":"/react-native-navigation/7.11.2/docs/screen-lifecycle","sidebar":"version-7.11.2/docs"},{"id":"docs/showcases","path":"/react-native-navigation/7.11.2/docs/showcases","sidebar":"version-7.11.2/docs"},{"id":"docs/sideMenu","path":"/react-native-navigation/7.11.2/docs/sideMenu","sidebar":"version-7.11.2/docs"},{"id":"docs/sideMenu-disable","path":"/react-native-navigation/7.11.2/docs/sideMenu-disable"},{"id":"docs/stack","path":"/react-native-navigation/7.11.2/docs/stack","sidebar":"version-7.11.2/docs"},{"id":"docs/stack-backButton","path":"/react-native-navigation/7.11.2/docs/stack-backButton"},{"id":"docs/stack-backNavigation","path":"/react-native-navigation/7.11.2/docs/stack-backNavigation"},{"id":"docs/stack-buttons","path":"/react-native-navigation/7.11.2/docs/stack-buttons","sidebar":"version-7.11.2/docs"},{"id":"docs/stack-programmatically","path":"/react-native-navigation/7.11.2/docs/stack-programmatically"},{"id":"docs/style-animations","path":"/react-native-navigation/7.11.2/docs/style-animations","sidebar":"version-7.11.2/docs"},{"id":"docs/style-constants","path":"/react-native-navigation/7.11.2/docs/style-constants","sidebar":"version-7.11.2/docs"},{"id":"docs/style-fonts","path":"/react-native-navigation/7.11.2/docs/style-fonts","sidebar":"version-7.11.2/docs"},{"id":"docs/style-options","path":"/react-native-navigation/7.11.2/docs/style-options","sidebar":"version-7.11.2/docs"},{"id":"docs/style-orientation","path":"/react-native-navigation/7.11.2/docs/style-orientation","sidebar":"version-7.11.2/docs"},{"id":"docs/style-statusBar","path":"/react-native-navigation/7.11.2/docs/style-statusBar","sidebar":"version-7.11.2/docs"},{"id":"docs/style-theme","path":"/react-native-navigation/7.11.2/docs/style-theme","sidebar":"version-7.11.2/docs"},{"id":"docs/third-party-mobx","path":"/react-native-navigation/7.11.2/docs/third-party-mobx","sidebar":"version-7.11.2/docs"},{"id":"docs/third-party-react-context","path":"/react-native-navigation/7.11.2/docs/third-party-react-context","sidebar":"version-7.11.2/docs"},{"id":"docs/third-party-react-native-vector-icons","path":"/react-native-navigation/7.11.2/docs/third-party-react-native-vector-icons"},{"id":"docs/third-party-typescript","path":"/react-native-navigation/7.11.2/docs/third-party-typescript","sidebar":"version-7.11.2/docs"}]},{"name":"7.7.0","label":"7.7.0","isLast":false,"path":"/react-native-navigation/7.7.0","mainDocId":"docs/before-you-start","docs":[{"id":"api/component","path":"/react-native-navigation/7.7.0/api/component","sidebar":"version-7.7.0/api"},{"id":"api/events","path":"/react-native-navigation/7.7.0/api/events","sidebar":"version-7.7.0/api"},{"id":"api/layout-bottomTabs","path":"/react-native-navigation/7.7.0/api/layout-bottomTabs","sidebar":"version-7.7.0/api"},{"id":"api/layout-component","path":"/react-native-navigation/7.7.0/api/layout-component","sidebar":"version-7.7.0/api"},{"id":"api/layout-layout","path":"/react-native-navigation/7.7.0/api/layout-layout","sidebar":"version-7.7.0/api"},{"id":"api/layout-sideMenu","path":"/react-native-navigation/7.7.0/api/layout-sideMenu","sidebar":"version-7.7.0/api"},{"id":"api/layout-splitView","path":"/react-native-navigation/7.7.0/api/layout-splitView","sidebar":"version-7.7.0/api"},{"id":"api/layout-stack","path":"/react-native-navigation/7.7.0/api/layout-stack","sidebar":"version-7.7.0/api"},{"id":"api/modal","path":"/react-native-navigation/7.7.0/api/modal","sidebar":"version-7.7.0/api"},{"id":"api/options-animations","path":"/react-native-navigation/7.7.0/api/options-animations"},{"id":"api/options-api","path":"/react-native-navigation/7.7.0/api/options-api","sidebar":"version-7.7.0/api"},{"id":"api/options-backButton","path":"/react-native-navigation/7.7.0/api/options-backButton","sidebar":"version-7.7.0/api"},{"id":"api/options-background","path":"/react-native-navigation/7.7.0/api/options-background","sidebar":"version-7.7.0/api"},{"id":"api/options-bottomTab","path":"/react-native-navigation/7.7.0/api/options-bottomTab","sidebar":"version-7.7.0/api"},{"id":"api/options-bottomTabs","path":"/react-native-navigation/7.7.0/api/options-bottomTabs","sidebar":"version-7.7.0/api"},{"id":"api/options-button","path":"/react-native-navigation/7.7.0/api/options-button","sidebar":"version-7.7.0/api"},{"id":"api/options-fab","path":"/react-native-navigation/7.7.0/api/options-fab"},{"id":"api/options-iconBackground","path":"/react-native-navigation/7.7.0/api/options-iconBackground","sidebar":"version-7.7.0/api"},{"id":"api/options-iconInsets","path":"/react-native-navigation/7.7.0/api/options-iconInsets","sidebar":"version-7.7.0/api"},{"id":"api/options-imageResource","path":"/react-native-navigation/7.7.0/api/options-imageResource"},{"id":"api/options-largeTitle","path":"/react-native-navigation/7.7.0/api/options-largeTitle","sidebar":"version-7.7.0/api"},{"id":"api/options-layout","path":"/react-native-navigation/7.7.0/api/options-layout","sidebar":"version-7.7.0/api"},{"id":"api/options-migration","path":"/react-native-navigation/7.7.0/api/options-migration"},{"id":"api/options-modal","path":"/react-native-navigation/7.7.0/api/options-modal","sidebar":"version-7.7.0/api"},{"id":"api/options-navigationBar","path":"/react-native-navigation/7.7.0/api/options-navigationBar","sidebar":"version-7.7.0/api"},{"id":"api/options-overlay","path":"/react-native-navigation/7.7.0/api/options-overlay","sidebar":"version-7.7.0/api"},{"id":"api/options-preview","path":"/react-native-navigation/7.7.0/api/options-preview"},{"id":"api/options-root","path":"/react-native-navigation/7.7.0/api/options-root","sidebar":"version-7.7.0/api"},{"id":"api/options-scrollEdgeAppearance","path":"/react-native-navigation/7.7.0/api/options-scrollEdgeAppearance"},{"id":"api/options-sideMenu","path":"/react-native-navigation/7.7.0/api/options-sideMenu","sidebar":"version-7.7.0/api"},{"id":"api/options-sideMenuSide","path":"/react-native-navigation/7.7.0/api/options-sideMenuSide","sidebar":"version-7.7.0/api"},{"id":"api/options-splitView","path":"/react-native-navigation/7.7.0/api/options-splitView","sidebar":"version-7.7.0/api"},{"id":"api/options-stack","path":"/react-native-navigation/7.7.0/api/options-stack","sidebar":"version-7.7.0/api"},{"id":"api/options-statusBar","path":"/react-native-navigation/7.7.0/api/options-statusBar","sidebar":"version-7.7.0/api"},{"id":"api/options-subtitle","path":"/react-native-navigation/7.7.0/api/options-subtitle","sidebar":"version-7.7.0/api"},{"id":"api/options-title","path":"/react-native-navigation/7.7.0/api/options-title","sidebar":"version-7.7.0/api"},{"id":"api/overlay","path":"/react-native-navigation/7.7.0/api/overlay","sidebar":"version-7.7.0/api"},{"id":"api/root","path":"/react-native-navigation/7.7.0/api/root","sidebar":"version-7.7.0/api"},{"id":"api/sideMenu-api","path":"/react-native-navigation/7.7.0/api/sideMenu-api"},{"id":"api/stack","path":"/react-native-navigation/7.7.0/api/stack","sidebar":"version-7.7.0/api"},{"id":"api/topBar-searchBar","path":"/react-native-navigation/7.7.0/api/topBar-searchBar"},{"id":"docs/advanced-navigation","path":"/react-native-navigation/7.7.0/docs/advanced-navigation","sidebar":"version-7.7.0/docs"},{"id":"docs/app-launch","path":"/react-native-navigation/7.7.0/docs/app-launch","sidebar":"version-7.7.0/docs"},{"id":"docs/basic-navigation","path":"/react-native-navigation/7.7.0/docs/basic-navigation","sidebar":"version-7.7.0/docs"},{"id":"docs/before-you-start","path":"/react-native-navigation/7.7.0/docs/before-you-start","sidebar":"version-7.7.0/docs"},{"id":"docs/bottomTabs","path":"/react-native-navigation/7.7.0/docs/bottomTabs","sidebar":"version-7.7.0/docs"},{"id":"docs/community-libraries","path":"/react-native-navigation/7.7.0/docs/community-libraries","sidebar":"version-7.7.0/docs"},{"id":"docs/externalComponent","path":"/react-native-navigation/7.7.0/docs/externalComponent","sidebar":"version-7.7.0/docs"},{"id":"docs/functionalComponents","path":"/react-native-navigation/7.7.0/docs/functionalComponents","sidebar":"version-7.7.0/docs"},{"id":"docs/installing","path":"/react-native-navigation/7.7.0/docs/installing","sidebar":"version-7.7.0/docs"},{"id":"docs/meta-contributing","path":"/react-native-navigation/7.7.0/docs/meta-contributing","sidebar":"version-7.7.0/docs"},{"id":"docs/modal","path":"/react-native-navigation/7.7.0/docs/modal","sidebar":"version-7.7.0/docs"},{"id":"docs/overlay","path":"/react-native-navigation/7.7.0/docs/overlay","sidebar":"version-7.7.0/docs"},{"id":"docs/passing-data-to-components","path":"/react-native-navigation/7.7.0/docs/passing-data-to-components","sidebar":"version-7.7.0/docs"},{"id":"docs/playground-app","path":"/react-native-navigation/7.7.0/docs/playground-app","sidebar":"version-7.7.0/docs"},{"id":"docs/root","path":"/react-native-navigation/7.7.0/docs/root","sidebar":"version-7.7.0/docs"},{"id":"docs/screen-lifecycle","path":"/react-native-navigation/7.7.0/docs/screen-lifecycle","sidebar":"version-7.7.0/docs"},{"id":"docs/showcases","path":"/react-native-navigation/7.7.0/docs/showcases","sidebar":"version-7.7.0/docs"},{"id":"docs/sideMenu","path":"/react-native-navigation/7.7.0/docs/sideMenu","sidebar":"version-7.7.0/docs"},{"id":"docs/sideMenu-disable","path":"/react-native-navigation/7.7.0/docs/sideMenu-disable"},{"id":"docs/stack","path":"/react-native-navigation/7.7.0/docs/stack","sidebar":"version-7.7.0/docs"},{"id":"docs/stack-backButton","path":"/react-native-navigation/7.7.0/docs/stack-backButton"},{"id":"docs/stack-backNavigation","path":"/react-native-navigation/7.7.0/docs/stack-backNavigation"},{"id":"docs/stack-buttons","path":"/react-native-navigation/7.7.0/docs/stack-buttons"},{"id":"docs/stack-programmatically","path":"/react-native-navigation/7.7.0/docs/stack-programmatically"},{"id":"docs/style-animations","path":"/react-native-navigation/7.7.0/docs/style-animations","sidebar":"version-7.7.0/docs"},{"id":"docs/style-constants","path":"/react-native-navigation/7.7.0/docs/style-constants","sidebar":"version-7.7.0/docs"},{"id":"docs/style-fonts","path":"/react-native-navigation/7.7.0/docs/style-fonts","sidebar":"version-7.7.0/docs"},{"id":"docs/style-options","path":"/react-native-navigation/7.7.0/docs/style-options","sidebar":"version-7.7.0/docs"},{"id":"docs/style-orientation","path":"/react-native-navigation/7.7.0/docs/style-orientation","sidebar":"version-7.7.0/docs"},{"id":"docs/style-statusBar","path":"/react-native-navigation/7.7.0/docs/style-statusBar","sidebar":"version-7.7.0/docs"},{"id":"docs/style-theme","path":"/react-native-navigation/7.7.0/docs/style-theme","sidebar":"version-7.7.0/docs"},{"id":"docs/third-party-mobx","path":"/react-native-navigation/7.7.0/docs/third-party-mobx","sidebar":"version-7.7.0/docs"},{"id":"docs/third-party-react-context","path":"/react-native-navigation/7.7.0/docs/third-party-react-context","sidebar":"version-7.7.0/docs"},{"id":"docs/third-party-typescript","path":"/react-native-navigation/7.7.0/docs/third-party-typescript","sidebar":"version-7.7.0/docs"}]},{"name":"6.12.2","label":"6.12.2","isLast":false,"path":"/react-native-navigation/6.12.2","mainDocId":"docs/before-you-start","docs":[{"id":"api/component","path":"/react-native-navigation/6.12.2/api/component","sidebar":"version-6.12.2/api"},{"id":"api/events","path":"/react-native-navigation/6.12.2/api/events","sidebar":"version-6.12.2/api"},{"id":"api/layout-bottomTabs","path":"/react-native-navigation/6.12.2/api/layout-bottomTabs","sidebar":"version-6.12.2/api"},{"id":"api/layout-component","path":"/react-native-navigation/6.12.2/api/layout-component","sidebar":"version-6.12.2/api"},{"id":"api/layout-layout","path":"/react-native-navigation/6.12.2/api/layout-layout","sidebar":"version-6.12.2/api"},{"id":"api/layout-sideMenu","path":"/react-native-navigation/6.12.2/api/layout-sideMenu","sidebar":"version-6.12.2/api"},{"id":"api/layout-splitView","path":"/react-native-navigation/6.12.2/api/layout-splitView","sidebar":"version-6.12.2/api"},{"id":"api/layout-stack","path":"/react-native-navigation/6.12.2/api/layout-stack","sidebar":"version-6.12.2/api"},{"id":"api/modal","path":"/react-native-navigation/6.12.2/api/modal","sidebar":"version-6.12.2/api"},{"id":"api/options-animations","path":"/react-native-navigation/6.12.2/api/options-animations"},{"id":"api/options-api","path":"/react-native-navigation/6.12.2/api/options-api","sidebar":"version-6.12.2/api"},{"id":"api/options-backButton","path":"/react-native-navigation/6.12.2/api/options-backButton","sidebar":"version-6.12.2/api"},{"id":"api/options-background","path":"/react-native-navigation/6.12.2/api/options-background","sidebar":"version-6.12.2/api"},{"id":"api/options-bottomTab","path":"/react-native-navigation/6.12.2/api/options-bottomTab","sidebar":"version-6.12.2/api"},{"id":"api/options-bottomTabs","path":"/react-native-navigation/6.12.2/api/options-bottomTabs","sidebar":"version-6.12.2/api"},{"id":"api/options-button","path":"/react-native-navigation/6.12.2/api/options-button","sidebar":"version-6.12.2/api"},{"id":"api/options-fab","path":"/react-native-navigation/6.12.2/api/options-fab"},{"id":"api/options-iconInsets","path":"/react-native-navigation/6.12.2/api/options-iconInsets","sidebar":"version-6.12.2/api"},{"id":"api/options-largeTitle","path":"/react-native-navigation/6.12.2/api/options-largeTitle","sidebar":"version-6.12.2/api"},{"id":"api/options-layout","path":"/react-native-navigation/6.12.2/api/options-layout","sidebar":"version-6.12.2/api"},{"id":"api/options-migration","path":"/react-native-navigation/6.12.2/api/options-migration"},{"id":"api/options-modal","path":"/react-native-navigation/6.12.2/api/options-modal","sidebar":"version-6.12.2/api"},{"id":"api/options-navigationBar","path":"/react-native-navigation/6.12.2/api/options-navigationBar","sidebar":"version-6.12.2/api"},{"id":"api/options-overlay","path":"/react-native-navigation/6.12.2/api/options-overlay","sidebar":"version-6.12.2/api"},{"id":"api/options-preview","path":"/react-native-navigation/6.12.2/api/options-preview"},{"id":"api/options-root","path":"/react-native-navigation/6.12.2/api/options-root","sidebar":"version-6.12.2/api"},{"id":"api/options-sideMenu","path":"/react-native-navigation/6.12.2/api/options-sideMenu","sidebar":"version-6.12.2/api"},{"id":"api/options-sideMenuSide","path":"/react-native-navigation/6.12.2/api/options-sideMenuSide","sidebar":"version-6.12.2/api"},{"id":"api/options-splitView","path":"/react-native-navigation/6.12.2/api/options-splitView","sidebar":"version-6.12.2/api"},{"id":"api/options-stack","path":"/react-native-navigation/6.12.2/api/options-stack","sidebar":"version-6.12.2/api"},{"id":"api/options-statusBar","path":"/react-native-navigation/6.12.2/api/options-statusBar","sidebar":"version-6.12.2/api"},{"id":"api/options-subtitle","path":"/react-native-navigation/6.12.2/api/options-subtitle","sidebar":"version-6.12.2/api"},{"id":"api/options-title","path":"/react-native-navigation/6.12.2/api/options-title","sidebar":"version-6.12.2/api"},{"id":"api/overlay","path":"/react-native-navigation/6.12.2/api/overlay","sidebar":"version-6.12.2/api"},{"id":"api/root","path":"/react-native-navigation/6.12.2/api/root","sidebar":"version-6.12.2/api"},{"id":"api/sideMenu-api","path":"/react-native-navigation/6.12.2/api/sideMenu-api"},{"id":"api/stack","path":"/react-native-navigation/6.12.2/api/stack","sidebar":"version-6.12.2/api"},{"id":"docs/advanced-navigation","path":"/react-native-navigation/6.12.2/docs/advanced-navigation","sidebar":"version-6.12.2/docs"},{"id":"docs/app-launch","path":"/react-native-navigation/6.12.2/docs/app-launch","sidebar":"version-6.12.2/docs"},{"id":"docs/basic-navigation","path":"/react-native-navigation/6.12.2/docs/basic-navigation","sidebar":"version-6.12.2/docs"},{"id":"docs/before-you-start","path":"/react-native-navigation/6.12.2/docs/before-you-start","sidebar":"version-6.12.2/docs"},{"id":"docs/bottomTabs","path":"/react-native-navigation/6.12.2/docs/bottomTabs","sidebar":"version-6.12.2/docs"},{"id":"docs/community-libraries","path":"/react-native-navigation/6.12.2/docs/community-libraries","sidebar":"version-6.12.2/docs"},{"id":"docs/externalComponent","path":"/react-native-navigation/6.12.2/docs/externalComponent","sidebar":"version-6.12.2/docs"},{"id":"docs/functionalComponents","path":"/react-native-navigation/6.12.2/docs/functionalComponents","sidebar":"version-6.12.2/docs"},{"id":"docs/installing","path":"/react-native-navigation/6.12.2/docs/installing","sidebar":"version-6.12.2/docs"},{"id":"docs/meta-contributing","path":"/react-native-navigation/6.12.2/docs/meta-contributing","sidebar":"version-6.12.2/docs"},{"id":"docs/modal","path":"/react-native-navigation/6.12.2/docs/modal","sidebar":"version-6.12.2/docs"},{"id":"docs/overlay","path":"/react-native-navigation/6.12.2/docs/overlay","sidebar":"version-6.12.2/docs"},{"id":"docs/passing-data-to-components","path":"/react-native-navigation/6.12.2/docs/passing-data-to-components","sidebar":"version-6.12.2/docs"},{"id":"docs/playground-app","path":"/react-native-navigation/6.12.2/docs/playground-app","sidebar":"version-6.12.2/docs"},{"id":"docs/root","path":"/react-native-navigation/6.12.2/docs/root","sidebar":"version-6.12.2/docs"},{"id":"docs/screen-lifecycle","path":"/react-native-navigation/6.12.2/docs/screen-lifecycle","sidebar":"version-6.12.2/docs"},{"id":"docs/showcases","path":"/react-native-navigation/6.12.2/docs/showcases","sidebar":"version-6.12.2/docs"},{"id":"docs/sideMenu","path":"/react-native-navigation/6.12.2/docs/sideMenu","sidebar":"version-6.12.2/docs"},{"id":"docs/sideMenu-disable","path":"/react-native-navigation/6.12.2/docs/sideMenu-disable"},{"id":"docs/stack","path":"/react-native-navigation/6.12.2/docs/stack","sidebar":"version-6.12.2/docs"},{"id":"docs/stack-backButton","path":"/react-native-navigation/6.12.2/docs/stack-backButton"},{"id":"docs/stack-backNavigation","path":"/react-native-navigation/6.12.2/docs/stack-backNavigation"},{"id":"docs/stack-buttons","path":"/react-native-navigation/6.12.2/docs/stack-buttons"},{"id":"docs/stack-programmatically","path":"/react-native-navigation/6.12.2/docs/stack-programmatically"},{"id":"docs/style-animations","path":"/react-native-navigation/6.12.2/docs/style-animations","sidebar":"version-6.12.2/docs"},{"id":"docs/style-constants","path":"/react-native-navigation/6.12.2/docs/style-constants","sidebar":"version-6.12.2/docs"},{"id":"docs/style-fonts","path":"/react-native-navigation/6.12.2/docs/style-fonts","sidebar":"version-6.12.2/docs"},{"id":"docs/style-options","path":"/react-native-navigation/6.12.2/docs/style-options","sidebar":"version-6.12.2/docs"},{"id":"docs/style-orientation","path":"/react-native-navigation/6.12.2/docs/style-orientation","sidebar":"version-6.12.2/docs"},{"id":"docs/style-statusBar","path":"/react-native-navigation/6.12.2/docs/style-statusBar","sidebar":"version-6.12.2/docs"},{"id":"docs/style-theme","path":"/react-native-navigation/6.12.2/docs/style-theme","sidebar":"version-6.12.2/docs"},{"id":"docs/third-party-mobx","path":"/react-native-navigation/6.12.2/docs/third-party-mobx","sidebar":"version-6.12.2/docs"},{"id":"docs/third-party-react-context","path":"/react-native-navigation/6.12.2/docs/third-party-react-context","sidebar":"version-6.12.2/docs"},{"id":"docs/third-party-typescript","path":"/react-native-navigation/6.12.2/docs/third-party-typescript","sidebar":"version-6.12.2/docs"}]}]}}}')},function(e){e.exports=JSON.parse('{"defaultLocale":"en","locales":["en"],"localeConfigs":{"en":{"label":"en","direction":"ltr"}},"currentLocale":"en"}')},function(e){e.exports=JSON.parse('{"docusaurusVersion":"2.0.0-alpha.72","siteVersion":"0.0.0","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"2.0.0-alpha.72"},"docusaurus-plugin-content-blog":{"type":"package","name":"@docusaurus/plugin-content-blog","version":"2.0.0-alpha.72"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"2.0.0-alpha.72"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"2.0.0-alpha.72"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"2.0.0-alpha.72"},"docusaurus-theme-search-algolia":{"type":"package","name":"@docusaurus/theme-search-algolia","version":"2.0.0-alpha.72"},"docusaurus-plugin-ideal-image":{"type":"package","name":"@docusaurus/plugin-ideal-image","version":"2.0.0-alpha.72"}}}')},function(e,t,n){"use strict";var a=n(25),i={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},o={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},r={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},s={};function c(e){return a.isMemo(e)?r:s[e.$$typeof]||i}s[a.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},s[a.Memo]=r;var l=Object.defineProperty,d=Object.getOwnPropertyNames,p=Object.getOwnPropertySymbols,u=Object.getOwnPropertyDescriptor,v=Object.getPrototypeOf,f=Object.prototype;e.exports=function e(t,n,a){if("string"!=typeof n){if(f){var i=v(n);i&&i!==f&&e(t,i,a)}var r=d(n);p&&(r=r.concat(p(n)));for(var s=c(t),m=c(n),g=0;g=0||Object.prototype.hasOwnProperty.call(e,a)&&(n[a]=e[a]);return n},V=function(e){return!1===(!(arguments.length>1&&void 0!==arguments[1])||arguments[1])?String(e):String(e).replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'")},H=function(e){var t=X(e,x.TITLE),n=X(e,D);if(n&&t)return n.replace(/%s/g,(function(){return Array.isArray(t)?t.join(""):t}));var a=X(e,M);return t||a||void 0},W=function(e){return X(e,L)||function(){}},K=function(e,t){return t.filter((function(t){return void 0!==t[e]})).map((function(t){return t[e]})).reduce((function(e,t){return q({},e,t)}),{})},Q=function(e,t){return t.filter((function(e){return void 0!==e[x.BASE]})).map((function(e){return e[x.BASE]})).reverse().reduce((function(t,n){if(!t.length)for(var a=Object.keys(n),i=0;i=0;n--){var a=e[n];if(a.hasOwnProperty(t))return a[t]}return null},Z=(a=Date.now(),function(e){var t=Date.now();t-a>16?(a=t,e(t)):setTimeout((function(){Z(e)}),0)}),J=function(e){return clearTimeout(e)},ee="undefined"!=typeof window?window.requestAnimationFrame&&window.requestAnimationFrame.bind(window)||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||Z:e.requestAnimationFrame||Z,te="undefined"!=typeof window?window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||J:e.cancelAnimationFrame||J,ne=function(e){return console&&"function"==typeof console.warn&&console.warn(e)},ae=null,ie=function(e,t){var n=e.baseTag,a=e.bodyAttributes,i=e.htmlAttributes,o=e.linkTags,r=e.metaTags,s=e.noscriptTags,c=e.onChangeClientState,l=e.scriptTags,d=e.styleTags,p=e.title,u=e.titleAttributes;se(x.BODY,a),se(x.HTML,i),re(p,u);var v={baseTag:ce(x.BASE,n),linkTags:ce(x.LINK,o),metaTags:ce(x.META,r),noscriptTags:ce(x.NOSCRIPT,s),scriptTags:ce(x.SCRIPT,l),styleTags:ce(x.STYLE,d)},f={},m={};Object.keys(v).forEach((function(e){var t=v[e],n=t.newTags,a=t.oldTags;n.length&&(f[e]=n),a.length&&(m[e]=v[e].oldTags)})),t&&t(),c(e,f,m)},oe=function(e){return Array.isArray(e)?e.join(""):e},re=function(e,t){void 0!==e&&document.title!==e&&(document.title=oe(e)),se(x.TITLE,t)},se=function(e,t){var n=document.getElementsByTagName(e)[0];if(n){for(var a=n.getAttribute(z),i=a?a.split(","):[],o=[].concat(i),r=Object.keys(t),s=0;s=0;p--)n.removeAttribute(o[p]);i.length===o.length?n.removeAttribute(z):n.getAttribute(z)!==r.join(",")&&n.setAttribute(z,r.join(","))}},ce=function(e,t){var n=document.head||document.querySelector(x.HEAD),a=n.querySelectorAll(e+"["+z+"]"),i=Array.prototype.slice.call(a),o=[],r=void 0;return t&&t.length&&t.forEach((function(t){var n=document.createElement(e);for(var a in t)if(t.hasOwnProperty(a))if(a===E)n.innerHTML=t.innerHTML;else if(a===w)n.styleSheet?n.styleSheet.cssText=t.cssText:n.appendChild(document.createTextNode(t.cssText));else{var s=void 0===t[a]?"":t[a];n.setAttribute(a,s)}n.setAttribute(z,"true"),i.some((function(e,t){return r=t,n.isEqualNode(e)}))?i.splice(r,1):o.push(n)})),i.forEach((function(e){return e.parentNode.removeChild(e)})),o.forEach((function(e){return n.appendChild(e)})),{oldTags:i,newTags:o}},le=function(e){return Object.keys(e).reduce((function(t,n){var a=void 0!==e[n]?n+'="'+e[n]+'"':""+n;return t?t+" "+a:a}),"")},de=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return Object.keys(e).reduce((function(t,n){return t[R[n]||n]=e[n],t}),t)},pe=function(e,t,n){switch(e){case x.TITLE:return{toComponent:function(){return e=t.title,n=t.titleAttributes,(a={key:e})[z]=!0,i=de(n,a),[f.a.createElement(x.TITLE,i,e)];var e,n,a,i},toString:function(){return function(e,t,n,a){var i=le(n),o=oe(t);return i?"<"+e+" "+z+'="true" '+i+">"+V(o,a)+"":"<"+e+" "+z+'="true">'+V(o,a)+""}(e,t.title,t.titleAttributes,n)}};case h:case b:return{toComponent:function(){return de(t)},toString:function(){return le(t)}};default:return{toComponent:function(){return function(e,t){return t.map((function(t,n){var a,i=((a={key:n})[z]=!0,a);return Object.keys(t).forEach((function(e){var n=R[e]||e;if(n===E||n===w){var a=t.innerHTML||t.cssText;i.dangerouslySetInnerHTML={__html:a}}else i[n]=t[e]})),f.a.createElement(e,i)}))}(e,t)},toString:function(){return function(e,t,n){return t.reduce((function(t,a){var i=Object.keys(a).filter((function(e){return!(e===E||e===w)})).reduce((function(e,t){var i=void 0===a[t]?t:t+'="'+V(a[t],n)+'"';return e?e+" "+i:i}),""),o=a.innerHTML||a.cssText||"",r=-1===F.indexOf(e);return t+"<"+e+" "+z+'="true" '+i+(r?"/>":">"+o+"")}),"")}(e,t,n)}}}},ue=function(e){var t=e.baseTag,n=e.bodyAttributes,a=e.encode,i=e.htmlAttributes,o=e.linkTags,r=e.metaTags,s=e.noscriptTags,c=e.scriptTags,l=e.styleTags,d=e.title,p=void 0===d?"":d,u=e.titleAttributes;return{base:pe(x.BASE,t,a),bodyAttributes:pe(h,n,a),htmlAttributes:pe(b,i,a),link:pe(x.LINK,o,a),meta:pe(x.META,r,a),noscript:pe(x.NOSCRIPT,s,a),script:pe(x.SCRIPT,c,a),style:pe(x.STYLE,l,a),title:pe(x.TITLE,{title:p,titleAttributes:u},a)}},ve=d()((function(e){return{baseTag:Q([T,A],e),bodyAttributes:K(h,e),defer:X(e,N),encode:X(e,I),htmlAttributes:K(b,e),linkTags:Y(x.LINK,[P,T],e),metaTags:Y(x.META,[C,k,S,B,_],e),noscriptTags:Y(x.NOSCRIPT,[E],e),onChangeClientState:W(e),scriptTags:Y(x.SCRIPT,[O,E],e),styleTags:Y(x.STYLE,[w],e),title:H(e),titleAttributes:K(y,e)}}),(function(e){ae&&te(ae),e.defer?ae=ee((function(){ie(e,(function(){ae=null}))})):(ie(e),ae=null)}),ue)((function(){return null})),fe=(i=ve,r=o=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,e.apply(this,arguments))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),t.prototype.shouldComponentUpdate=function(e){return!u()(this.props,e)},t.prototype.mapNestedChildrenToProps=function(e,t){if(!t)return null;switch(e.type){case x.SCRIPT:case x.NOSCRIPT:return{innerHTML:t};case x.STYLE:return{cssText:t}}throw new Error("<"+e.type+" /> elements are self-closing and can not contain children. Refer to our API for more information.")},t.prototype.flattenArrayTypeChildren=function(e){var t,n=e.child,a=e.arrayTypeChildren,i=e.newChildProps,o=e.nestedChildren;return q({},a,((t={})[n.type]=[].concat(a[n.type]||[],[q({},i,this.mapNestedChildrenToProps(n,o))]),t))},t.prototype.mapObjectTypeChildren=function(e){var t,n,a=e.child,i=e.newProps,o=e.newChildProps,r=e.nestedChildren;switch(a.type){case x.TITLE:return q({},i,((t={})[a.type]=r,t.titleAttributes=q({},o),t));case x.BODY:return q({},i,{bodyAttributes:q({},o)});case x.HTML:return q({},i,{htmlAttributes:q({},o)})}return q({},i,((n={})[a.type]=q({},o),n))},t.prototype.mapArrayTypeChildrenToProps=function(e,t){var n=q({},t);return Object.keys(e).forEach((function(t){var a;n=q({},n,((a={})[t]=e[t],a))})),n},t.prototype.warnOnInvalidChildren=function(e,t){return!0},t.prototype.mapChildrenToProps=function(e,t){var n=this,a={};return f.a.Children.forEach(e,(function(e){if(e&&e.props){var i=e.props,o=i.children,r=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return Object.keys(e).reduce((function(t,n){return t[j[n]||n]=e[n],t}),t)}(G(i,["children"]));switch(n.warnOnInvalidChildren(e,o),e.type){case x.LINK:case x.META:case x.NOSCRIPT:case x.SCRIPT:case x.STYLE:a=n.flattenArrayTypeChildren({child:e,arrayTypeChildren:a,newChildProps:r,nestedChildren:o});break;default:t=n.mapObjectTypeChildren({child:e,newProps:t,newChildProps:r,nestedChildren:o})}}})),t=this.mapArrayTypeChildrenToProps(a,t)},t.prototype.render=function(){var e=this.props,t=e.children,n=G(e,["children"]),a=q({},n);return t&&(a=this.mapChildrenToProps(t,a)),f.a.createElement(i,a)},$(t,null,[{key:"canUseDOM",set:function(e){i.canUseDOM=e}}]),t}(f.a.Component),o.propTypes={base:c.a.object,bodyAttributes:c.a.object,children:c.a.oneOfType([c.a.arrayOf(c.a.node),c.a.node]),defaultTitle:c.a.string,defer:c.a.bool,encodeSpecialCharacters:c.a.bool,htmlAttributes:c.a.object,link:c.a.arrayOf(c.a.object),meta:c.a.arrayOf(c.a.object),noscript:c.a.arrayOf(c.a.object),onChangeClientState:c.a.func,script:c.a.arrayOf(c.a.object),style:c.a.arrayOf(c.a.object),title:c.a.string,titleAttributes:c.a.object,titleTemplate:c.a.string},o.defaultProps={defer:!0,encodeSpecialCharacters:!0},o.peek=i.peek,o.rewind=function(){var e=i.rewind();return e||(e=ue({baseTag:[],bodyAttributes:{},encodeSpecialCharacters:!0,htmlAttributes:{},linkTags:[],metaTags:[],noscriptTags:[],scriptTags:[],styleTags:[],title:"",titleAttributes:{}})),e},r);fe.renderStatic=fe.rewind}).call(this,n(24))},function(e,t,n){"use strict";var a,i=n(0),o=(a=i)&&"object"==typeof a&&"default"in a?a.default:a;function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var s=!("undefined"==typeof window||!window.document||!window.document.createElement);e.exports=function(e,t,n){if("function"!=typeof e)throw new Error("Expected reducePropsToState to be a function.");if("function"!=typeof t)throw new Error("Expected handleStateChangeOnClient to be a function.");if(void 0!==n&&"function"!=typeof n)throw new Error("Expected mapStateOnServer to either be undefined or a function.");return function(a){if("function"!=typeof a)throw new Error("Expected WrappedComponent to be a React component.");var c,l=[];function d(){c=e(l.map((function(e){return e.props}))),p.canUseDOM?t(c):n&&(c=n(c))}var p=function(e){var t,n;function i(){return e.apply(this,arguments)||this}n=e,(t=i).prototype=Object.create(n.prototype),t.prototype.constructor=t,t.__proto__=n,i.peek=function(){return c},i.rewind=function(){if(i.canUseDOM)throw new Error("You may only call rewind() on the server. Call peek() to read the current state.");var e=c;return c=void 0,l=[],e};var r=i.prototype;return r.UNSAFE_componentWillMount=function(){l.push(this),d()},r.componentDidUpdate=function(){d()},r.componentWillUnmount=function(){var e=l.indexOf(this);l.splice(e,1),d()},r.render=function(){return o.createElement(a,this.props)},i}(i.PureComponent);return r(p,"displayName","SideEffect("+function(e){return e.displayName||e.name||"Component"}(a)+")"),r(p,"canUseDOM",s),p}}},function(e,t){var n="undefined"!=typeof Element,a="function"==typeof Map,i="function"==typeof Set,o="function"==typeof ArrayBuffer&&!!ArrayBuffer.isView;function r(e,t){if(e===t)return!0;if(e&&t&&"object"==typeof e&&"object"==typeof t){if(e.constructor!==t.constructor)return!1;var s,c,l,d;if(Array.isArray(e)){if((s=e.length)!=t.length)return!1;for(c=s;0!=c--;)if(!r(e[c],t[c]))return!1;return!0}if(a&&e instanceof Map&&t instanceof Map){if(e.size!==t.size)return!1;for(d=e.entries();!(c=d.next()).done;)if(!t.has(c.value[0]))return!1;for(d=e.entries();!(c=d.next()).done;)if(!r(c.value[1],t.get(c.value[0])))return!1;return!0}if(i&&e instanceof Set&&t instanceof Set){if(e.size!==t.size)return!1;for(d=e.entries();!(c=d.next()).done;)if(!t.has(c.value[0]))return!1;return!0}if(o&&ArrayBuffer.isView(e)&&ArrayBuffer.isView(t)){if((s=e.length)!=t.length)return!1;for(c=s;0!=c--;)if(e[c]!==t[c])return!1;return!0}if(e.constructor===RegExp)return e.source===t.source&&e.flags===t.flags;if(e.valueOf!==Object.prototype.valueOf&&"function"==typeof e.valueOf&&"function"==typeof t.valueOf)return e.valueOf()===t.valueOf();if(e.toString!==Object.prototype.toString&&"function"==typeof e.toString&&"function"==typeof t.toString)return e.toString()===t.toString();if((s=(l=Object.keys(e)).length)!==Object.keys(t).length)return!1;for(c=s;0!=c--;)if(!Object.prototype.hasOwnProperty.call(t,l[c]))return!1;if(n&&e instanceof Element)return!1;for(c=s;0!=c--;)if(("_owner"!==l[c]&&"__v"!==l[c]&&"__o"!==l[c]||!e.$$typeof)&&!r(e[l[c]],t[l[c]]))return!1;return!0}return e!=e&&t!=t}e.exports=function(e,t){try{return r(e,t)}catch(n){if((n.message||"").match(/stack|recursion/i))return console.warn("react-fast-compare cannot handle circular refs"),!1;throw n}}},function(e,t,n){e.exports=n(53)},function(e,t,n){"use strict";var a=n(12),i="function"==typeof Symbol&&Symbol.for,o=i?Symbol.for("react.element"):60103,r=i?Symbol.for("react.portal"):60106,s=i?Symbol.for("react.fragment"):60107,c=i?Symbol.for("react.strict_mode"):60108,l=i?Symbol.for("react.profiler"):60114,d=i?Symbol.for("react.provider"):60109,p=i?Symbol.for("react.context"):60110,u=i?Symbol.for("react.forward_ref"):60112,v=i?Symbol.for("react.suspense"):60113,f=i?Symbol.for("react.memo"):60115,m=i?Symbol.for("react.lazy"):60116,g="function"==typeof Symbol&&Symbol.iterator;function h(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;nO.length&&O.push(e)}function M(e,t,n,a){var i=typeof e;"undefined"!==i&&"boolean"!==i||(e=null);var s=!1;if(null===e)s=!0;else switch(i){case"string":case"number":s=!0;break;case"object":switch(e.$$typeof){case o:case r:s=!0}}if(s)return n(a,e,""===t?"."+I(e,0):t),1;if(s=0,t=""===t?".":t+":",Array.isArray(e))for(var c=0;c