From b77fd3f561ae265eacf35c4c374cb16d26b2b103 Mon Sep 17 00:00:00 2001 From: yogevbd Date: Wed, 16 Oct 2024 13:43:31 +0000 Subject: [PATCH] Deploy website - based on 292eee5da73761366a1860a421716cc2ce3c7203 --- 404.html | 28 +++++++-------- 6.12.2/api/component/index.html | 36 +++++++++---------- 6.12.2/api/events/index.html | 36 +++++++++---------- 6.12.2/api/layout-bottomTabs/index.html | 36 +++++++++---------- 6.12.2/api/layout-component/index.html | 36 +++++++++---------- 6.12.2/api/layout-layout/index.html | 36 +++++++++---------- 6.12.2/api/layout-sideMenu/index.html | 36 +++++++++---------- 6.12.2/api/layout-splitView/index.html | 36 +++++++++---------- 6.12.2/api/layout-stack/index.html | 36 +++++++++---------- 6.12.2/api/modal/index.html | 36 +++++++++---------- 6.12.2/api/options-animations/index.html | 36 +++++++++---------- 6.12.2/api/options-api/index.html | 36 +++++++++---------- 6.12.2/api/options-backButton/index.html | 36 +++++++++---------- 6.12.2/api/options-background/index.html | 36 +++++++++---------- 6.12.2/api/options-bottomTab/index.html | 36 +++++++++---------- 6.12.2/api/options-bottomTabs/index.html | 36 +++++++++---------- 6.12.2/api/options-button/index.html | 36 +++++++++---------- 6.12.2/api/options-fab/index.html | 36 +++++++++---------- 6.12.2/api/options-iconInsets/index.html | 36 +++++++++---------- 6.12.2/api/options-largeTitle/index.html | 36 +++++++++---------- 6.12.2/api/options-layout/index.html | 36 +++++++++---------- 6.12.2/api/options-migration/index.html | 36 +++++++++---------- 6.12.2/api/options-modal/index.html | 36 +++++++++---------- 6.12.2/api/options-navigationBar/index.html | 36 +++++++++---------- 6.12.2/api/options-overlay/index.html | 36 +++++++++---------- 6.12.2/api/options-preview/index.html | 36 +++++++++---------- 6.12.2/api/options-root/index.html | 36 +++++++++---------- 6.12.2/api/options-sideMenu/index.html | 36 +++++++++---------- 6.12.2/api/options-sideMenuSide/index.html | 36 +++++++++---------- 6.12.2/api/options-splitView/index.html | 36 +++++++++---------- 6.12.2/api/options-stack/index.html | 36 +++++++++---------- 6.12.2/api/options-statusBar/index.html | 36 +++++++++---------- 6.12.2/api/options-subtitle/index.html | 36 +++++++++---------- 6.12.2/api/options-title/index.html | 36 +++++++++---------- 6.12.2/api/overlay/index.html | 36 +++++++++---------- 6.12.2/api/root/index.html | 36 +++++++++---------- 6.12.2/api/sideMenu-api/index.html | 36 +++++++++---------- 6.12.2/api/stack/index.html | 36 +++++++++---------- 6.12.2/docs/advanced-navigation/index.html | 36 +++++++++---------- 6.12.2/docs/app-launch/index.html | 36 +++++++++---------- 6.12.2/docs/basic-navigation/index.html | 36 +++++++++---------- 6.12.2/docs/before-you-start/index.html | 36 +++++++++---------- 6.12.2/docs/bottomTabs/index.html | 36 +++++++++---------- 6.12.2/docs/community-libraries/index.html | 36 +++++++++---------- 6.12.2/docs/externalComponent/index.html | 36 +++++++++---------- 6.12.2/docs/functionalComponents/index.html | 36 +++++++++---------- 6.12.2/docs/installing/index.html | 36 +++++++++---------- 6.12.2/docs/meta-contributing/index.html | 36 +++++++++---------- 6.12.2/docs/modal/index.html | 36 +++++++++---------- 6.12.2/docs/overlay/index.html | 36 +++++++++---------- .../passing-data-to-components/index.html | 36 +++++++++---------- 6.12.2/docs/playground-app/index.html | 36 +++++++++---------- 6.12.2/docs/root/index.html | 36 +++++++++---------- 6.12.2/docs/screen-lifecycle/index.html | 36 +++++++++---------- 6.12.2/docs/showcases/index.html | 36 +++++++++---------- 6.12.2/docs/sideMenu-disable/index.html | 36 +++++++++---------- 6.12.2/docs/sideMenu/index.html | 36 +++++++++---------- 6.12.2/docs/stack-backButton/index.html | 36 +++++++++---------- 6.12.2/docs/stack-backNavigation/index.html | 36 +++++++++---------- 6.12.2/docs/stack-buttons/index.html | 36 +++++++++---------- 6.12.2/docs/stack-programmatically/index.html | 36 +++++++++---------- 6.12.2/docs/stack/index.html | 36 +++++++++---------- 6.12.2/docs/style-animations/index.html | 36 +++++++++---------- 6.12.2/docs/style-constants/index.html | 36 +++++++++---------- 6.12.2/docs/style-fonts/index.html | 36 +++++++++---------- 6.12.2/docs/style-options/index.html | 36 +++++++++---------- 6.12.2/docs/style-orientation/index.html | 36 +++++++++---------- 6.12.2/docs/style-statusBar/index.html | 36 +++++++++---------- 6.12.2/docs/style-theme/index.html | 36 +++++++++---------- 6.12.2/docs/third-party-mobx/index.html | 36 +++++++++---------- .../docs/third-party-react-context/index.html | 36 +++++++++---------- 6.12.2/docs/third-party-typescript/index.html | 36 +++++++++---------- 7.11.2/api/component/index.html | 36 +++++++++---------- 7.11.2/api/events/index.html | 36 +++++++++---------- 7.11.2/api/layout-bottomTabs/index.html | 36 +++++++++---------- 7.11.2/api/layout-component/index.html | 36 +++++++++---------- 7.11.2/api/layout-layout/index.html | 36 +++++++++---------- 7.11.2/api/layout-sideMenu/index.html | 36 +++++++++---------- 7.11.2/api/layout-splitView/index.html | 36 +++++++++---------- 7.11.2/api/layout-stack/index.html | 36 +++++++++---------- 7.11.2/api/modal/index.html | 36 +++++++++---------- 7.11.2/api/options-animations/index.html | 36 +++++++++---------- 7.11.2/api/options-api/index.html | 36 +++++++++---------- 7.11.2/api/options-backButton/index.html | 36 +++++++++---------- 7.11.2/api/options-background/index.html | 36 +++++++++---------- 7.11.2/api/options-bottomTab/index.html | 36 +++++++++---------- 7.11.2/api/options-bottomTabs/index.html | 36 +++++++++---------- 7.11.2/api/options-button/index.html | 36 +++++++++---------- 7.11.2/api/options-fab/index.html | 36 +++++++++---------- .../api/options-hardwareBackButton/index.html | 36 +++++++++---------- 7.11.2/api/options-iconBackground/index.html | 36 +++++++++---------- 7.11.2/api/options-iconInsets/index.html | 36 +++++++++---------- 7.11.2/api/options-imageResource/index.html | 36 +++++++++---------- 7.11.2/api/options-largeTitle/index.html | 36 +++++++++---------- 7.11.2/api/options-layout/index.html | 36 +++++++++---------- 7.11.2/api/options-migration/index.html | 36 +++++++++---------- 7.11.2/api/options-modal/index.html | 36 +++++++++---------- 7.11.2/api/options-navigationBar/index.html | 36 +++++++++---------- 7.11.2/api/options-overlay/index.html | 36 +++++++++---------- 7.11.2/api/options-preview/index.html | 36 +++++++++---------- 7.11.2/api/options-root/index.html | 36 +++++++++---------- .../options-scrollEdgeAppearance/index.html | 36 +++++++++---------- 7.11.2/api/options-sideMenu/index.html | 36 +++++++++---------- 7.11.2/api/options-sideMenuSide/index.html | 36 +++++++++---------- 7.11.2/api/options-splitView/index.html | 36 +++++++++---------- 7.11.2/api/options-stack/index.html | 36 +++++++++---------- 7.11.2/api/options-statusBar/index.html | 36 +++++++++---------- 7.11.2/api/options-subtitle/index.html | 36 +++++++++---------- 7.11.2/api/options-title/index.html | 36 +++++++++---------- 7.11.2/api/overlay/index.html | 36 +++++++++---------- 7.11.2/api/root/index.html | 36 +++++++++---------- 7.11.2/api/sideMenu-api/index.html | 36 +++++++++---------- 7.11.2/api/stack/index.html | 36 +++++++++---------- 7.11.2/api/topBar-searchBar/index.html | 36 +++++++++---------- 7.11.2/docs/advanced-navigation/index.html | 36 +++++++++---------- 7.11.2/docs/app-launch/index.html | 36 +++++++++---------- 7.11.2/docs/basic-navigation/index.html | 36 +++++++++---------- 7.11.2/docs/before-you-start/index.html | 36 +++++++++---------- 7.11.2/docs/bottomTabs/index.html | 36 +++++++++---------- 7.11.2/docs/community-libraries/index.html | 36 +++++++++---------- 7.11.2/docs/externalComponent/index.html | 36 +++++++++---------- 7.11.2/docs/functionalComponents/index.html | 36 +++++++++---------- 7.11.2/docs/installing/index.html | 36 +++++++++---------- 7.11.2/docs/meta-contributing/index.html | 36 +++++++++---------- 7.11.2/docs/modal/index.html | 36 +++++++++---------- 7.11.2/docs/overlay/index.html | 36 +++++++++---------- .../passing-data-to-components/index.html | 36 +++++++++---------- 7.11.2/docs/playground-app/index.html | 36 +++++++++---------- 7.11.2/docs/root/index.html | 36 +++++++++---------- 7.11.2/docs/screen-lifecycle/index.html | 36 +++++++++---------- 7.11.2/docs/showcases/index.html | 36 +++++++++---------- 7.11.2/docs/sideMenu-disable/index.html | 36 +++++++++---------- 7.11.2/docs/sideMenu/index.html | 36 +++++++++---------- 7.11.2/docs/stack-backButton/index.html | 36 +++++++++---------- 7.11.2/docs/stack-backNavigation/index.html | 36 +++++++++---------- 7.11.2/docs/stack-buttons/index.html | 36 +++++++++---------- 7.11.2/docs/stack-programmatically/index.html | 36 +++++++++---------- 7.11.2/docs/stack/index.html | 36 +++++++++---------- 7.11.2/docs/style-animations/index.html | 36 +++++++++---------- 7.11.2/docs/style-constants/index.html | 36 +++++++++---------- 7.11.2/docs/style-fonts/index.html | 36 +++++++++---------- 7.11.2/docs/style-options/index.html | 36 +++++++++---------- 7.11.2/docs/style-orientation/index.html | 36 +++++++++---------- 7.11.2/docs/style-statusBar/index.html | 36 +++++++++---------- 7.11.2/docs/style-theme/index.html | 36 +++++++++---------- 7.11.2/docs/third-party-mobx/index.html | 36 +++++++++---------- .../docs/third-party-react-context/index.html | 36 +++++++++---------- .../index.html | 36 +++++++++---------- 7.11.2/docs/third-party-typescript/index.html | 36 +++++++++---------- 7.25.4/api/component/index.html | 36 +++++++++---------- 7.25.4/api/events/index.html | 36 +++++++++---------- 7.25.4/api/layout-bottomTabs/index.html | 36 +++++++++---------- 7.25.4/api/layout-component/index.html | 36 +++++++++---------- 7.25.4/api/layout-layout/index.html | 36 +++++++++---------- 7.25.4/api/layout-sideMenu/index.html | 36 +++++++++---------- 7.25.4/api/layout-splitView/index.html | 36 +++++++++---------- 7.25.4/api/layout-stack/index.html | 36 +++++++++---------- 7.25.4/api/modal/index.html | 36 +++++++++---------- 7.25.4/api/options-animations/index.html | 36 +++++++++---------- 7.25.4/api/options-api/index.html | 36 +++++++++---------- 7.25.4/api/options-backButton/index.html | 36 +++++++++---------- 7.25.4/api/options-background/index.html | 36 +++++++++---------- 7.25.4/api/options-bottomTab/index.html | 36 +++++++++---------- 7.25.4/api/options-bottomTabs/index.html | 36 +++++++++---------- 7.25.4/api/options-button/index.html | 36 +++++++++---------- 7.25.4/api/options-fab/index.html | 36 +++++++++---------- .../api/options-hardwareBackButton/index.html | 36 +++++++++---------- 7.25.4/api/options-iconBackground/index.html | 36 +++++++++---------- 7.25.4/api/options-iconInsets/index.html | 36 +++++++++---------- 7.25.4/api/options-imageResource/index.html | 36 +++++++++---------- 7.25.4/api/options-largeTitle/index.html | 36 +++++++++---------- 7.25.4/api/options-layout/index.html | 36 +++++++++---------- 7.25.4/api/options-migration/index.html | 36 +++++++++---------- 7.25.4/api/options-modal/index.html | 36 +++++++++---------- 7.25.4/api/options-navigationBar/index.html | 36 +++++++++---------- 7.25.4/api/options-overlay-attach/index.html | 36 +++++++++---------- 7.25.4/api/options-overlay/index.html | 36 +++++++++---------- 7.25.4/api/options-preview/index.html | 36 +++++++++---------- 7.25.4/api/options-root/index.html | 36 +++++++++---------- .../options-scrollEdgeAppearance/index.html | 36 +++++++++---------- 7.25.4/api/options-sideMenu/index.html | 36 +++++++++---------- 7.25.4/api/options-sideMenuSide/index.html | 36 +++++++++---------- 7.25.4/api/options-splitView/index.html | 36 +++++++++---------- 7.25.4/api/options-stack/index.html | 36 +++++++++---------- 7.25.4/api/options-statusBar/index.html | 36 +++++++++---------- 7.25.4/api/options-subtitle/index.html | 36 +++++++++---------- 7.25.4/api/options-title/index.html | 36 +++++++++---------- 7.25.4/api/overlay/index.html | 36 +++++++++---------- 7.25.4/api/root/index.html | 36 +++++++++---------- 7.25.4/api/sideMenu-api/index.html | 36 +++++++++---------- 7.25.4/api/stack/index.html | 36 +++++++++---------- 7.25.4/api/topBar-searchBar/index.html | 36 +++++++++---------- 7.25.4/docs/advanced-navigation/index.html | 36 +++++++++---------- 7.25.4/docs/app-launch/index.html | 36 +++++++++---------- 7.25.4/docs/basic-navigation/index.html | 36 +++++++++---------- 7.25.4/docs/before-you-start/index.html | 36 +++++++++---------- 7.25.4/docs/bottomTabs/index.html | 36 +++++++++---------- 7.25.4/docs/community-libraries/index.html | 36 +++++++++---------- 7.25.4/docs/customBackNavigation/index.html | 36 +++++++++---------- 7.25.4/docs/externalComponent/index.html | 36 +++++++++---------- 7.25.4/docs/functionalComponents/index.html | 36 +++++++++---------- 7.25.4/docs/installing/index.html | 36 +++++++++---------- 7.25.4/docs/meta-contributing/index.html | 36 +++++++++---------- 7.25.4/docs/modal/index.html | 36 +++++++++---------- 7.25.4/docs/overlay/index.html | 36 +++++++++---------- .../passing-data-to-components/index.html | 36 +++++++++---------- 7.25.4/docs/playground-app/index.html | 36 +++++++++---------- 7.25.4/docs/root/index.html | 36 +++++++++---------- 7.25.4/docs/screen-lifecycle/index.html | 36 +++++++++---------- 7.25.4/docs/showcases/index.html | 36 +++++++++---------- 7.25.4/docs/sideMenu-disable/index.html | 36 +++++++++---------- 7.25.4/docs/sideMenu/index.html | 36 +++++++++---------- 7.25.4/docs/stack-backButton/index.html | 36 +++++++++---------- 7.25.4/docs/stack-backNavigation/index.html | 36 +++++++++---------- 7.25.4/docs/stack-buttons/index.html | 36 +++++++++---------- 7.25.4/docs/stack-programmatically/index.html | 36 +++++++++---------- 7.25.4/docs/stack/index.html | 36 +++++++++---------- 7.25.4/docs/style-animations/index.html | 36 +++++++++---------- 7.25.4/docs/style-constants/index.html | 36 +++++++++---------- 7.25.4/docs/style-fonts/index.html | 36 +++++++++---------- 7.25.4/docs/style-options/index.html | 36 +++++++++---------- 7.25.4/docs/style-orientation/index.html | 36 +++++++++---------- 7.25.4/docs/style-statusBar/index.html | 36 +++++++++---------- 7.25.4/docs/style-theme/index.html | 36 +++++++++---------- 7.25.4/docs/third-party-mobx/index.html | 36 +++++++++---------- .../docs/third-party-react-context/index.html | 36 +++++++++---------- .../index.html | 36 +++++++++---------- 7.25.4/docs/third-party-typescript/index.html | 36 +++++++++---------- 7.32.1/api/component/index.html | 36 +++++++++---------- 7.32.1/api/events/index.html | 36 +++++++++---------- 7.32.1/api/layout-bottomTabs/index.html | 36 +++++++++---------- 7.32.1/api/layout-component/index.html | 36 +++++++++---------- 7.32.1/api/layout-layout/index.html | 36 +++++++++---------- 7.32.1/api/layout-sideMenu/index.html | 36 +++++++++---------- 7.32.1/api/layout-splitView/index.html | 36 +++++++++---------- 7.32.1/api/layout-stack/index.html | 36 +++++++++---------- 7.32.1/api/modal/index.html | 36 +++++++++---------- 7.32.1/api/options-animations/index.html | 36 +++++++++---------- 7.32.1/api/options-api/index.html | 36 +++++++++---------- 7.32.1/api/options-backButton/index.html | 36 +++++++++---------- 7.32.1/api/options-background/index.html | 36 +++++++++---------- 7.32.1/api/options-bottomTab/index.html | 36 +++++++++---------- 7.32.1/api/options-bottomTabs/index.html | 36 +++++++++---------- 7.32.1/api/options-button/index.html | 36 +++++++++---------- 7.32.1/api/options-fab/index.html | 36 +++++++++---------- .../api/options-hardwareBackButton/index.html | 36 +++++++++---------- 7.32.1/api/options-iconBackground/index.html | 36 +++++++++---------- 7.32.1/api/options-iconInsets/index.html | 36 +++++++++---------- 7.32.1/api/options-imageResource/index.html | 36 +++++++++---------- 7.32.1/api/options-largeTitle/index.html | 36 +++++++++---------- 7.32.1/api/options-layout/index.html | 36 +++++++++---------- 7.32.1/api/options-migration/index.html | 36 +++++++++---------- 7.32.1/api/options-modal/index.html | 36 +++++++++---------- 7.32.1/api/options-navigationBar/index.html | 36 +++++++++---------- 7.32.1/api/options-overlay/index.html | 36 +++++++++---------- 7.32.1/api/options-preview/index.html | 36 +++++++++---------- 7.32.1/api/options-root/index.html | 36 +++++++++---------- .../options-scrollEdgeAppearance/index.html | 36 +++++++++---------- 7.32.1/api/options-sideMenu/index.html | 36 +++++++++---------- 7.32.1/api/options-sideMenuSide/index.html | 36 +++++++++---------- 7.32.1/api/options-splitView/index.html | 36 +++++++++---------- 7.32.1/api/options-stack/index.html | 36 +++++++++---------- 7.32.1/api/options-statusBar/index.html | 36 +++++++++---------- 7.32.1/api/options-subtitle/index.html | 36 +++++++++---------- 7.32.1/api/options-title/index.html | 36 +++++++++---------- 7.32.1/api/overlay/index.html | 36 +++++++++---------- 7.32.1/api/root/index.html | 36 +++++++++---------- 7.32.1/api/sideMenu-api/index.html | 36 +++++++++---------- 7.32.1/api/stack/index.html | 36 +++++++++---------- 7.32.1/api/topBar-searchBar/index.html | 36 +++++++++---------- 7.32.1/docs/advanced-navigation/index.html | 36 +++++++++---------- 7.32.1/docs/app-launch/index.html | 36 +++++++++---------- 7.32.1/docs/basic-navigation/index.html | 36 +++++++++---------- 7.32.1/docs/before-you-start/index.html | 36 +++++++++---------- 7.32.1/docs/bottomTabs/index.html | 36 +++++++++---------- 7.32.1/docs/community-libraries/index.html | 36 +++++++++---------- 7.32.1/docs/customBackNavigation/index.html | 36 +++++++++---------- 7.32.1/docs/externalComponent/index.html | 36 +++++++++---------- 7.32.1/docs/functionalComponents/index.html | 36 +++++++++---------- 7.32.1/docs/installing/index.html | 36 +++++++++---------- 7.32.1/docs/meta-contributing/index.html | 36 +++++++++---------- 7.32.1/docs/modal/index.html | 36 +++++++++---------- 7.32.1/docs/overlay/index.html | 36 +++++++++---------- .../passing-data-to-components/index.html | 36 +++++++++---------- 7.32.1/docs/playground-app/index.html | 36 +++++++++---------- 7.32.1/docs/root/index.html | 36 +++++++++---------- 7.32.1/docs/screen-lifecycle/index.html | 36 +++++++++---------- 7.32.1/docs/showcases/index.html | 36 +++++++++---------- 7.32.1/docs/sideMenu-disable/index.html | 36 +++++++++---------- 7.32.1/docs/sideMenu/index.html | 36 +++++++++---------- 7.32.1/docs/stack-backButton/index.html | 36 +++++++++---------- 7.32.1/docs/stack-backNavigation/index.html | 36 +++++++++---------- 7.32.1/docs/stack-buttons/index.html | 36 +++++++++---------- 7.32.1/docs/stack-programmatically/index.html | 36 +++++++++---------- 7.32.1/docs/stack/index.html | 36 +++++++++---------- 7.32.1/docs/style-animations/index.html | 36 +++++++++---------- 7.32.1/docs/style-constants/index.html | 36 +++++++++---------- 7.32.1/docs/style-fonts/index.html | 36 +++++++++---------- 7.32.1/docs/style-options/index.html | 36 +++++++++---------- 7.32.1/docs/style-orientation/index.html | 36 +++++++++---------- 7.32.1/docs/style-statusBar/index.html | 36 +++++++++---------- 7.32.1/docs/style-theme/index.html | 36 +++++++++---------- 7.32.1/docs/third-party-mobx/index.html | 36 +++++++++---------- .../docs/third-party-react-context/index.html | 36 +++++++++---------- .../index.html | 36 +++++++++---------- 7.32.1/docs/third-party-typescript/index.html | 36 +++++++++---------- 7.7.0/api/component/index.html | 36 +++++++++---------- 7.7.0/api/events/index.html | 36 +++++++++---------- 7.7.0/api/layout-bottomTabs/index.html | 36 +++++++++---------- 7.7.0/api/layout-component/index.html | 36 +++++++++---------- 7.7.0/api/layout-layout/index.html | 36 +++++++++---------- 7.7.0/api/layout-sideMenu/index.html | 36 +++++++++---------- 7.7.0/api/layout-splitView/index.html | 36 +++++++++---------- 7.7.0/api/layout-stack/index.html | 36 +++++++++---------- 7.7.0/api/modal/index.html | 36 +++++++++---------- 7.7.0/api/options-animations/index.html | 36 +++++++++---------- 7.7.0/api/options-api/index.html | 36 +++++++++---------- 7.7.0/api/options-backButton/index.html | 36 +++++++++---------- 7.7.0/api/options-background/index.html | 36 +++++++++---------- 7.7.0/api/options-bottomTab/index.html | 36 +++++++++---------- 7.7.0/api/options-bottomTabs/index.html | 36 +++++++++---------- 7.7.0/api/options-button/index.html | 36 +++++++++---------- 7.7.0/api/options-fab/index.html | 36 +++++++++---------- 7.7.0/api/options-iconBackground/index.html | 36 +++++++++---------- 7.7.0/api/options-iconInsets/index.html | 36 +++++++++---------- 7.7.0/api/options-imageResource/index.html | 36 +++++++++---------- 7.7.0/api/options-largeTitle/index.html | 36 +++++++++---------- 7.7.0/api/options-layout/index.html | 36 +++++++++---------- 7.7.0/api/options-migration/index.html | 36 +++++++++---------- 7.7.0/api/options-modal/index.html | 36 +++++++++---------- 7.7.0/api/options-navigationBar/index.html | 36 +++++++++---------- 7.7.0/api/options-overlay/index.html | 36 +++++++++---------- 7.7.0/api/options-preview/index.html | 36 +++++++++---------- 7.7.0/api/options-root/index.html | 36 +++++++++---------- .../options-scrollEdgeAppearance/index.html | 36 +++++++++---------- 7.7.0/api/options-sideMenu/index.html | 36 +++++++++---------- 7.7.0/api/options-sideMenuSide/index.html | 36 +++++++++---------- 7.7.0/api/options-splitView/index.html | 36 +++++++++---------- 7.7.0/api/options-stack/index.html | 36 +++++++++---------- 7.7.0/api/options-statusBar/index.html | 36 +++++++++---------- 7.7.0/api/options-subtitle/index.html | 36 +++++++++---------- 7.7.0/api/options-title/index.html | 36 +++++++++---------- 7.7.0/api/overlay/index.html | 36 +++++++++---------- 7.7.0/api/root/index.html | 36 +++++++++---------- 7.7.0/api/sideMenu-api/index.html | 36 +++++++++---------- 7.7.0/api/stack/index.html | 36 +++++++++---------- 7.7.0/api/topBar-searchBar/index.html | 36 +++++++++---------- 7.7.0/docs/advanced-navigation/index.html | 36 +++++++++---------- 7.7.0/docs/app-launch/index.html | 36 +++++++++---------- 7.7.0/docs/basic-navigation/index.html | 36 +++++++++---------- 7.7.0/docs/before-you-start/index.html | 36 +++++++++---------- 7.7.0/docs/bottomTabs/index.html | 36 +++++++++---------- 7.7.0/docs/community-libraries/index.html | 36 +++++++++---------- 7.7.0/docs/externalComponent/index.html | 36 +++++++++---------- 7.7.0/docs/functionalComponents/index.html | 36 +++++++++---------- 7.7.0/docs/installing/index.html | 36 +++++++++---------- 7.7.0/docs/meta-contributing/index.html | 36 +++++++++---------- 7.7.0/docs/modal/index.html | 36 +++++++++---------- 7.7.0/docs/overlay/index.html | 36 +++++++++---------- .../passing-data-to-components/index.html | 36 +++++++++---------- 7.7.0/docs/playground-app/index.html | 36 +++++++++---------- 7.7.0/docs/root/index.html | 36 +++++++++---------- 7.7.0/docs/screen-lifecycle/index.html | 36 +++++++++---------- 7.7.0/docs/showcases/index.html | 36 +++++++++---------- 7.7.0/docs/sideMenu-disable/index.html | 36 +++++++++---------- 7.7.0/docs/sideMenu/index.html | 36 +++++++++---------- 7.7.0/docs/stack-backButton/index.html | 36 +++++++++---------- 7.7.0/docs/stack-backNavigation/index.html | 36 +++++++++---------- 7.7.0/docs/stack-buttons/index.html | 36 +++++++++---------- 7.7.0/docs/stack-programmatically/index.html | 36 +++++++++---------- 7.7.0/docs/stack/index.html | 36 +++++++++---------- 7.7.0/docs/style-animations/index.html | 36 +++++++++---------- 7.7.0/docs/style-constants/index.html | 36 +++++++++---------- 7.7.0/docs/style-fonts/index.html | 36 +++++++++---------- 7.7.0/docs/style-options/index.html | 36 +++++++++---------- 7.7.0/docs/style-orientation/index.html | 36 +++++++++---------- 7.7.0/docs/style-statusBar/index.html | 36 +++++++++---------- 7.7.0/docs/style-theme/index.html | 36 +++++++++---------- 7.7.0/docs/third-party-mobx/index.html | 36 +++++++++---------- .../docs/third-party-react-context/index.html | 36 +++++++++---------- 7.7.0/docs/third-party-typescript/index.html | 36 +++++++++---------- api/component/index.html | 36 +++++++++---------- api/events/index.html | 36 +++++++++---------- api/layout-bottomTabs/index.html | 36 +++++++++---------- api/layout-component/index.html | 36 +++++++++---------- api/layout-layout/index.html | 36 +++++++++---------- api/layout-sideMenu/index.html | 36 +++++++++---------- api/layout-splitView/index.html | 36 +++++++++---------- api/layout-stack/index.html | 36 +++++++++---------- api/modal/index.html | 36 +++++++++---------- api/options-animations/index.html | 36 +++++++++---------- api/options-api/index.html | 36 +++++++++---------- api/options-backButton/index.html | 36 +++++++++---------- api/options-background/index.html | 36 +++++++++---------- api/options-bottomTab/index.html | 36 +++++++++---------- api/options-bottomTabs/index.html | 36 +++++++++---------- api/options-button/index.html | 36 +++++++++---------- api/options-fab/index.html | 36 +++++++++---------- api/options-hardwareBackButton/index.html | 36 +++++++++---------- api/options-iconBackground/index.html | 36 +++++++++---------- api/options-iconInsets/index.html | 36 +++++++++---------- api/options-imageResource/index.html | 36 +++++++++---------- api/options-largeTitle/index.html | 36 +++++++++---------- api/options-layout/index.html | 36 +++++++++---------- api/options-migration/index.html | 36 +++++++++---------- api/options-modal/index.html | 36 +++++++++---------- api/options-navigationBar/index.html | 36 +++++++++---------- api/options-overlay/index.html | 36 +++++++++---------- api/options-preview/index.html | 36 +++++++++---------- api/options-root/index.html | 36 +++++++++---------- api/options-scrollEdgeAppearance/index.html | 36 +++++++++---------- api/options-sideMenu/index.html | 36 +++++++++---------- api/options-sideMenuSide/index.html | 36 +++++++++---------- api/options-splitView/index.html | 36 +++++++++---------- api/options-stack/index.html | 36 +++++++++---------- api/options-statusBar/index.html | 36 +++++++++---------- api/options-subtitle/index.html | 36 +++++++++---------- api/options-title/index.html | 36 +++++++++---------- api/overlay/index.html | 36 +++++++++---------- api/root/index.html | 36 +++++++++---------- api/sideMenu-api/index.html | 36 +++++++++---------- api/stack/index.html | 36 +++++++++---------- api/topBar-searchBar/index.html | 36 +++++++++---------- ...36e21.143d7e40.js => 01236e21.1ac81261.js} | 0 ...66c3c.74a98e17.js => 01766c3c.f303fff4.js} | 0 ...9fded.7b6a26dc.js => 0219fded.c03b7e66.js} | 0 ...81282.9277b640.js => 02481282.6abaa2f5.js} | 0 ...ffa26.91cd8ab4.js => 033ffa26.24a137ed.js} | 0 ...37775.c0f11620.js => 03637775.773dc71b.js} | 0 ...94375.1434b1ae.js => 03694375.90a26649.js} | 0 ...36653.353dcf04.js => 03936653.3c06bcf7.js} | 0 ...973b6.0143cb29.js => 03a973b6.8901e852.js} | 0 ...403e6.c8242cfa.js => 042403e6.3d20ae69.js} | 0 ...dea04.f9b09012.js => 046dea04.70c2205b.js} | 0 ...9bdec.c4848187.js => 04c9bdec.61852e6b.js} | 0 ...4968a.b1c2f338.js => 0504968a.62cecc3f.js} | 0 ...7be59.0f0a700e.js => 05e7be59.6e3c076b.js} | 0 ...28749.4684191a.js => 06428749.de557e73.js} | 0 ...5c4a5.ee33bc1d.js => 0795c4a5.6edaf4ed.js} | 0 ...5a5a7.cea8b129.js => 07a5a5a7.0d5a22c2.js} | 0 ...02486.4278941d.js => 07d02486.77491eaa.js} | 0 ...097f6.7a65eccd.js => 083097f6.d12e5121.js} | 0 ...29a07.5b3555ab.js => 08c29a07.49fb0f12.js} | 0 ...59eb1.5adcaf92.js => 08f59eb1.27cbf0e3.js} | 0 ...3de78.28838324.js => 0933de78.83577c3c.js} | 0 ...0b525.70766d9e.js => 0960b525.ada101e3.js} | 0 ...f251f.e47008ff.js => 09ef251f.0bfddf67.js} | 0 ...ae8c6.f67a4f21.js => 0a7ae8c6.7c5519bb.js} | 0 ...c912f.063d5745.js => 0a9c912f.322c0fe3.js} | 0 ...59e0b.e1c8b9c4.js => 0ac59e0b.b152e4f0.js} | 0 ...206b1.114c0077.js => 0af206b1.cfc25de7.js} | 0 ...8b93d.13b8cd1a.js => 0b88b93d.79caa19c.js} | 0 ...93413.0fa54120.js => 0c893413.b82044dc.js} | 0 ...a540d.129cd21b.js => 0d5a540d.4742cd6c.js} | 0 ...971fc.413d1fe9.js => 0d9971fc.637ef44c.js} | 0 ...03481.9b993480.js => 0da03481.265ef927.js} | 0 ...89b11.bec9340b.js => 0dd89b11.a3a718e2.js} | 0 ...ecaa0.2ad6d771.js => 0deecaa0.ba6bde4b.js} | 0 ...7ea6e.66fb6fe5.js => 0df7ea6e.74a1a253.js} | 0 ...03cd5.7ca3305d.js => 0e403cd5.a61c4b89.js} | 0 ...8a1db.48cee85a.js => 0e88a1db.6e2ee6bc.js} | 0 ...c805a.0e228a20.js => 0eac805a.42800a6d.js} | 0 ...f8c0a.336412c0.js => 0ebf8c0a.138c9cb3.js} | 0 ...c7edf.48293b3b.js => 0f6c7edf.31e1e897.js} | 0 ...6c028.e271ad22.js => 0fa6c028.2779c912.js} | 0 assets/js/{1.db09b3e8.js => 1.e351c036.js} | 0 ...4a535.a3873912.js => 1064a535.f71d5953.js} | 0 ...6d5b6.78b140a8.js => 10f6d5b6.ef898f1c.js} | 0 ...d3381.8e1e2e37.js => 110d3381.d8c7bc4c.js} | 0 ...d2742.8fe0c3a6.js => 121d2742.080e3e9b.js} | 0 ...6cfa0.a76e154d.js => 1316cfa0.2fc6927a.js} | 0 ...941bc.599a4279.js => 137941bc.b8f4b148.js} | 0 ...d4650.56352b6e.js => 141d4650.c382b43b.js} | 0 ...2bf54.189c85f9.js => 1472bf54.5432663c.js} | 0 ...da5a8.511f381e.js => 148da5a8.77c7c862.js} | 0 ...8d0d5.a1cc6667.js => 1568d0d5.7de1629e.js} | 0 ...ff25c.05db6a9b.js => 168ff25c.f02691ee.js} | 0 ...bfa7d.bf9f402a.js => 16dbfa7d.720485c6.js} | 0 ...299d4.ba152dec.js => 16e299d4.64ccaea4.js} | 0 ...10ebe.e45d6352.js => 17510ebe.3ddbb25c.js} | 0 ...96441.a14e03c4.js => 17896441.a93d10a6.js} | 0 ...9070c.9509b280.js => 1809070c.a85567a5.js} | 0 ...c5a2b.dc0eb954.js => 18ec5a2b.9946ed4d.js} | 0 ...74d1e.cd6d311d.js => 19174d1e.74c023b3.js} | 0 ...86aee.bf5c3415.js => 19286aee.ea4c218b.js} | 0 ...674d3.42054cdf.js => 1ab674d3.812eec10.js} | 0 ...20142.9030002f.js => 1ac20142.f4971419.js} | 0 ...08b45.b63e8505.js => 1bc08b45.eee0f7a3.js} | 0 ...687dd.741a6f05.js => 1bc687dd.dd402a05.js} | 0 ...2c02e.22095890.js => 1c82c02e.f25fa847.js} | 0 ...68f7b.8739f0f2.js => 1d268f7b.286bdb3e.js} | 0 ...ec27d.889b91d7.js => 1d6ec27d.8d0dacfc.js} | 0 ...00b69.ac6e9e51.js => 1e700b69.94bac2ca.js} | 0 ...5559d.96d57c84.js => 1f05559d.07cc2ddb.js} | 0 ...6651f.e712d6f0.js => 1f96651f.83275744.js} | 0 assets/js/{2.e086b3d3.js => 2.42d12bcd.js} | 2 +- ....LICENSE.txt => 2.42d12bcd.js.LICENSE.txt} | 0 ...2c8bf.c6259a92.js => 2052c8bf.720e0843.js} | 0 ...a5dc4.eda7aac9.js => 20ba5dc4.a7b3a3fe.js} | 0 ...4d7ad.74cd536c.js => 2174d7ad.d857c065.js} | 0 ...705f8.231710e7.js => 21f705f8.e1480f1e.js} | 0 ...d62cb.e45a001c.js => 224d62cb.592a604b.js} | 0 ...ed1f6.69488e6c.js => 225ed1f6.b2fe862e.js} | 0 ...cc33d.00ea9bcc.js => 229cc33d.8eda4b7f.js} | 0 ...62845.20c6ab00.js => 22f62845.5ce9829d.js} | 0 ...b1eeb.b420a3bf.js => 230b1eeb.8f4479db.js} | 0 ...64b07.0c1faef6.js => 23364b07.9d55db0b.js} | 0 ...1c769.794ff28c.js => 2351c769.bdfe7354.js} | 0 ...738c9.88ad4e2b.js => 247738c9.46f4f49a.js} | 0 ...8378a.e4d377d0.js => 25d8378a.e6408425.js} | 0 ...ea951.53aee9c3.js => 26eea951.4b90dbef.js} | 0 ...67c4e.2bc751e6.js => 27767c4e.afe5eabb.js} | 0 ...f3e44.0da9feae.js => 277f3e44.acd0d6fb.js} | 0 ...72f74.c1388822.js => 27c72f74.061fedf7.js} | 0 ...70a48.67e6e817.js => 27e70a48.f3969a67.js} | 0 ...505a6.130e9147.js => 284505a6.48010abd.js} | 0 ...86ae9.872fc26d.js => 29a86ae9.334b31e1.js} | 0 ...b663b.0755eecd.js => 2acb663b.80af43b4.js} | 0 ...c064f.d68c3fb3.js => 2adc064f.791d894d.js} | 0 ...78b99.450557e6.js => 2ba78b99.cd71661c.js} | 0 ...df9e1.844efd42.js => 2bfdf9e1.cd932d65.js} | 0 ...9de7d.21987181.js => 2c39de7d.0470ad67.js} | 0 ...3c4ce.1b036c8e.js => 2c73c4ce.d48a23ef.js} | 0 ...836e6.c766f4a7.js => 2c7836e6.57aa2a72.js} | 0 ...645c9.a52392aa.js => 2cd645c9.77bbb468.js} | 0 ...37949.17a824d3.js => 2dc37949.10f7bf25.js} | 0 ...8527b.6e65f944.js => 2e38527b.a2040f34.js} | 0 ...c07ac.5c4c0789.js => 2e6c07ac.503d8387.js} | 0 ...8f0ad.f4927e93.js => 2e98f0ad.c982f62c.js} | 0 ...cfab5.d05d9f4b.js => 2eccfab5.2d0d3059.js} | 0 ...5a19c.5ba8f7ba.js => 2ef5a19c.f203fccd.js} | 0 ...b2482.c419ef8a.js => 2efb2482.1127574d.js} | 0 ...4abc7.f027514a.js => 2fd4abc7.595f2ea1.js} | 0 ...ed03d.de783620.js => 2fded03d.85a825e2.js} | 0 ...bb418.927c3866.js => 300bb418.4955dc9b.js} | 0 ...9c26f.241d96f1.js => 30e9c26f.4f6bf9fc.js} | 0 ...43934.69f0f5b0.js => 31a43934.0dc7ef5d.js} | 0 ...a1917.dc04bb4e.js => 325a1917.ef5a8784.js} | 0 ...d1b94.a4ad45ec.js => 32dd1b94.ba2f21d8.js} | 0 ...b468f.056054b9.js => 32fb468f.a2c5249a.js} | 0 ...38c8c.7d9850bf.js => 33f38c8c.40527a23.js} | 0 ...e8d4a.a3210e4b.js => 349e8d4a.8f2511d3.js} | 0 ...c379b.98eaeb2e.js => 34dc379b.1e741e95.js} | 0 ...83c57.2314f1bb.js => 36283c57.1e1783ac.js} | 0 ...a98ea.3aa54095.js => 365a98ea.f0b2c346.js} | 0 ...8d48f.3f9a8191.js => 3668d48f.1c7a3685.js} | 0 ...2e865.0da4b737.js => 3772e865.8b0a484e.js} | 0 ...ca56c.f6cb5bd3.js => 386ca56c.64923550.js} | 0 ...8bdf1.7e37da4b.js => 3918bdf1.b039af7e.js} | 0 ...3bf1a.3ae82d9d.js => 3a53bf1a.bf298b34.js} | 0 ...9f308.fd8bf0bc.js => 3a69f308.873e96c0.js} | 0 ...54180.f4696613.js => 3aa54180.7e129cbb.js} | 0 ...ae8c2.28aaa112.js => 3aaae8c2.9e4a2c0d.js} | 0 ...ffe63.83324a49.js => 3acffe63.6bb8259f.js} | 0 ...d1d8e.8c7ed942.js => 3bcd1d8e.db208a99.js} | 0 ...59cae.17a7bc7f.js => 3c659cae.51eeb741.js} | 0 ...c2bf8.c0e0245b.js => 3c8c2bf8.22a2fa42.js} | 0 ...c5134.1127e95a.js => 3dec5134.d23f1348.js} | 0 ...e6ec9.b2fefd84.js => 3e3e6ec9.a5e0ff92.js} | 0 ...4ded7.3d234679.js => 3e84ded7.1afd9035.js} | 0 ...77703.82741f94.js => 3ed77703.32c3798b.js} | 0 ...95f29.dfc573db.js => 3ef95f29.a26fbc06.js} | 0 ...89655.c551e89a.js => 40e89655.336b0b26.js} | 0 ...93e56.73d1b787.js => 41193e56.e5969cd7.js} | 0 ...6e2c2.fc48bed1.js => 4226e2c2.9c292e9e.js} | 0 ...8bfb7.7d662ca1.js => 4288bfb7.68a153c4.js} | 0 ...57ae2.c13d8b1f.js => 43257ae2.3bf4d161.js} | 0 ...32eee.cc4104cc.js => 43d32eee.7a86038b.js} | 0 ...660c3.4c05681a.js => 43d660c3.21c8e3d8.js} | 0 ...f6c51.0c9b6999.js => 449f6c51.83c1fc48.js} | 0 ...087e9.94464a87.js => 44e087e9.b3f3ff26.js} | 0 ...3538c.bdaf04fa.js => 4513538c.86393762.js} | 0 ...ed5cc.256c7579.js => 454ed5cc.38a87b58.js} | 0 ...35fbd.26b327b4.js => 46435fbd.092fbdbe.js} | 0 ...a5eab.fe6941af.js => 466a5eab.b905e9e7.js} | 0 ...ec9c2.f9ea0ff1.js => 46bec9c2.d986abd9.js} | 0 ...83c70.d7fd11da.js => 46f83c70.c1560c5f.js} | 0 ...dc5a0.7fdcf3fa.js => 471dc5a0.8c693bbf.js} | 0 ...574fd.eb1be317.js => 47b574fd.b05a5899.js} | 0 ...1a286.3038deab.js => 4881a286.54ef4ae9.js} | 0 ...d24b5.64a63b6f.js => 48fd24b5.0c3f87a4.js} | 0 ...121d7.e0545f7d.js => 495121d7.15e37147.js} | 0 ...be183.49f4c402.js => 49dbe183.64fbdcba.js} | 0 ...001c6.fe55291d.js => 4a6001c6.612de358.js} | 0 ...249b7.5ab4a4c3.js => 4a6249b7.710c243e.js} | 0 ...ef72d.0b160e63.js => 4aaef72d.079d8f38.js} | 0 ...4128a.62250dc2.js => 4af4128a.0bd822df.js} | 0 ...4c56b.7d3de52a.js => 4af4c56b.bb03fcc8.js} | 0 ...43adc.6ba05533.js => 4b843adc.268b8d76.js} | 0 ...65ffd.1e1341a0.js => 4c165ffd.b3e599e2.js} | 0 ...b683c.5a5e0f51.js => 4c2b683c.3b21949a.js} | 0 ...90c7d.e2c9ad4c.js => 4e290c7d.1a704a1f.js} | 0 ...7bc4b.44c75058.js => 4e57bc4b.0b0bf4de.js} | 0 ...c4aff.c3b21830.js => 4e8c4aff.b47a4e9d.js} | 0 ...cf07e.48cb062f.js => 4e9cf07e.45a55b35.js} | 0 ...19231.a4286c1c.js => 4f219231.648e997e.js} | 0 ...3deb4.bbcd0c6c.js => 4f53deb4.bea1914b.js} | 0 ...5cddb.a4954403.js => 4f95cddb.edf4618f.js} | 0 ...dda28.641de565.js => 4f9dda28.b9fbdb65.js} | 0 ...caecc.b06e4565.js => 514caecc.3dc7ba46.js} | 0 ...7f34b.98cf97d8.js => 51a7f34b.428ba8c3.js} | 0 ...0cead.c8099cc9.js => 52a0cead.9dcf4a73.js} | 0 ...c3d82.e03f5caa.js => 532c3d82.d0f0b267.js} | 0 ...fd2f5.8b018fad.js => 532fd2f5.5cd0ad07.js} | 0 ...fb627.43c8e936.js => 535fb627.506bcb5c.js} | 0 ...9bc20.e0f6d9b8.js => 5369bc20.a6f8aace.js} | 0 ...20c5d.cb7fdc36.js => 54e20c5d.11466dd2.js} | 0 .../js/{552.0745ce7f.js => 552.90c7804d.js} | 2 +- ...ICENSE.txt => 552.90c7804d.js.LICENSE.txt} | 0 .../js/{553.b8c8fa90.js => 553.19d25723.js} | 0 .../js/{554.8dfc4b8e.js => 554.f23626fe.js} | 0 .../js/{555.580abe34.js => 555.bf99fa84.js} | 0 ...388fc.e1ecd822.js => 555388fc.db6dfd87.js} | 0 .../js/{556.81365057.js => 556.e6e6f3e0.js} | 0 ...71c81.1696261a.js => 55671c81.cfcb2123.js} | 0 .../js/{557.18d5674d.js => 557.4ca44bd5.js} | 0 ...1dbb5.8a858900.js => 5591dbb5.08d5ae51.js} | 0 ...5045f.83e34703.js => 55c5045f.66d4b307.js} | 0 ...40575.3f992557.js => 55f40575.0be17da0.js} | 0 ...45d16.49a56796.js => 56845d16.b8f0899c.js} | 0 ...f2039.22d0c210.js => 570f2039.ec16120d.js} | 0 ...388cd.9e9a6b0e.js => 57a388cd.9a89292e.js} | 0 ...e4720.83733738.js => 581e4720.d15f3640.js} | 0 ...f251d.fc11a1da.js => 596f251d.c85af4e7.js} | 0 ...5955d.066991f9.js => 59f5955d.786ec4ec.js} | 0 ...5f28b.4711c0f3.js => 5ad5f28b.181dc8ea.js} | 0 ...b685e.d0fbe632.js => 5aeb685e.2ecf93e3.js} | 0 ...06e4b.bbb6de1e.js => 5b706e4b.2f98f873.js} | 0 ...7861d.8f52e3b9.js => 5c07861d.513569b4.js} | 0 ...b87ed.43b6e3d7.js => 5cdb87ed.6f7aa93d.js} | 0 ...053d3.ede42421.js => 5db053d3.52fff96c.js} | 0 ...6bea9.74a41d4c.js => 5e36bea9.ed8b2a34.js} | 0 ...16ae9.9f72f20c.js => 5e716ae9.7078191f.js} | 0 ...cd5d2.772c5a96.js => 5ebcd5d2.6993a83b.js} | 0 ...a894f.50e1172f.js => 5f1a894f.2bfa9ede.js} | 0 ...7d2d2.2db45bca.js => 5f57d2d2.5212ee9d.js} | 0 ...b000f.431b6b12.js => 5f8b000f.085e43f4.js} | 0 ...a6bc5.d6708d2b.js => 5f9a6bc5.228e7f78.js} | 0 ...ae097.6775ee38.js => 60cae097.c6bf2012.js} | 0 ...856fd.47e6f86f.js => 60e856fd.205d19a0.js} | 0 ...d5726.15dcec86.js => 614d5726.6724c6cb.js} | 0 ...162a2.0d3e6973.js => 61a162a2.71ade98b.js} | 0 ...7a2d8.d2b48f67.js => 61b7a2d8.44067845.js} | 0 ...51422.85fb51da.js => 62851422.726fcad3.js} | 0 ...cd644.df4e85b3.js => 628cd644.b6617acc.js} | 0 ...fd26a.4974f68e.js => 62dfd26a.047a2875.js} | 0 ...4e686.2dd075cf.js => 6314e686.51747faa.js} | 0 ...054aa.e343b69d.js => 633054aa.01653b1d.js} | 0 ...7161b.cb4345b0.js => 63b7161b.7036d7f1.js} | 0 ...3e343.e12e97ce.js => 6443e343.e1db0e1a.js} | 0 ...524e9.16990186.js => 64b524e9.e2b31e7e.js} | 0 ...e8ae4.3c959999.js => 65ee8ae4.5362aeae.js} | 0 ...46f5a.b910231c.js => 67246f5a.0404fe1b.js} | 0 ...05168.3efd1af0.js => 67505168.9c59145b.js} | 0 ...33350.acc6474a.js => 67b33350.14902cc7.js} | 0 ...24e69.fc7ce31b.js => 67d24e69.d7f3ce48.js} | 0 ...ece5a.13de5707.js => 686ece5a.39a490b7.js} | 0 ...97b35.eb2ae974.js => 68c97b35.738ab2c3.js} | 0 ...92148.aeb2e4bb.js => 68e92148.c7bf89a4.js} | 0 ...8e096.bcdde1e8.js => 6928e096.239533f7.js} | 0 ...da1fb.1302c613.js => 69bda1fb.4442e97c.js} | 0 ...19526.cd40c809.js => 6af19526.ec56a82f.js} | 0 ...13b47.a40539fe.js => 6b713b47.1de274ec.js} | 0 ...8488f.5d5e3151.js => 6bd8488f.cd951895.js} | 0 ...025a1.95e56040.js => 6c4025a1.4aad6ec6.js} | 0 ...7f576.e0142295.js => 6c57f576.e5437d07.js} | 0 ...6f1fd.6630359e.js => 6cb6f1fd.37ff3c85.js} | 0 ...f0fac.816c42cc.js => 6cff0fac.5f30ab69.js} | 0 ...0eab6.3b2739cf.js => 6db0eab6.c206d920.js} | 0 ...60846.3e0cccff.js => 6e560846.1db94dad.js} | 0 ...7f868.d9e0ce27.js => 6e57f868.549eaf68.js} | 0 ...9b9bc.28ea3e2a.js => 6e59b9bc.4c6d4d33.js} | 0 ...558fb.6a20714a.js => 6f0558fb.0b190588.js} | 0 ...d33a4.6a8d0955.js => 6f7d33a4.f187091c.js} | 0 ...d012e.b8a68977.js => 70ed012e.f51b52cc.js} | 0 ...656fe.84de9052.js => 70f656fe.62ce6637.js} | 0 ...56d45.89a98a43.js => 71056d45.2d1d9ed9.js} | 0 ...f1fb8.2d29c1a5.js => 710f1fb8.14da69cd.js} | 0 ...954ff.3a3dcf7f.js => 71e954ff.11cf7f6a.js} | 0 ...eb0e0.af184b70.js => 71eeb0e0.eeb707a3.js} | 0 ...6628b.1d9d50fd.js => 71f6628b.d46773ac.js} | 0 ...925cc.408b8736.js => 722925cc.8793b306.js} | 0 ...a65ab.207f7144.js => 724a65ab.22054382.js} | 0 ...91a83.50ef73f4.js => 72991a83.8e1cf88a.js} | 0 ...7198d.1d86688f.js => 7337198d.9a8ab994.js} | 0 ...afe39.cfa248e0.js => 733afe39.bd069fbf.js} | 0 ...b44b2.854e5dc3.js => 733b44b2.dad96a2b.js} | 0 ...e874d.01a64ef1.js => 737e874d.543ed28e.js} | 0 ...e1426.ef526c8e.js => 745e1426.32ea0dc7.js} | 0 ...4e133.62578949.js => 75e4e133.05f0d4e8.js} | 0 ...f58ca.c971728d.js => 765f58ca.c001d239.js} | 0 ...5e191.19b6a2d7.js => 7695e191.b4aee299.js} | 0 ...c1cd4.e38e7bbb.js => 76cc1cd4.d641a8df.js} | 0 ...634c9.0d266bfd.js => 796634c9.8cf99c33.js} | 0 ...af274.73bd9f5e.js => 796af274.d5a34df9.js} | 0 ...fb45b.480dbed3.js => 797fb45b.f19ec835.js} | 0 ...4c125.d4695e80.js => 79f4c125.a82bb567.js} | 0 ...68154.ad1e3f72.js => 7a768154.d3dd91f8.js} | 0 ...a8a28.08943ccc.js => 7aba8a28.0b72feb1.js} | 0 ...045c0.936131ad.js => 7b0045c0.284d9139.js} | 0 ...b4d35.b104e1fa.js => 7b0b4d35.07186106.js} | 0 ...c5fb1.5db643f4.js => 7bcc5fb1.893e6021.js} | 0 ...3e770.1f6fd456.js => 7c23e770.f6c1cf09.js} | 0 ...7658d.e2792598.js => 7ce7658d.665ad30c.js} | 0 ...b4d68.66f171b1.js => 7d1b4d68.0100675b.js} | 0 ...7b14a.11ac39d0.js => 7e37b14a.101e1d85.js} | 0 ...462e7.2b8d1a32.js => 7e5462e7.d62a6bbb.js} | 0 ...dd563.769b6c07.js => 7fbdd563.906c968e.js} | 0 ...c86b6.d5520fac.js => 805c86b6.1ce2af26.js} | 0 ...bd6dd.68bcfbc8.js => 819bd6dd.af34a594.js} | 0 ...23ef6.7c092bbb.js => 82023ef6.e2f17f17.js} | 0 ...1813c.8f92fc00.js => 8291813c.d6da063b.js} | 0 ...b1b34.3a5ece5a.js => 834b1b34.4440c9c4.js} | 0 ...912f8.601759f3.js => 83a912f8.021e05db.js} | 0 ...634ee.309e5aaa.js => 841634ee.c12bc63f.js} | 0 ...e6efd.a8b2467f.js => 845e6efd.b8b3f9f9.js} | 0 ...f84ed.bccc70e9.js => 846f84ed.90c03515.js} | 0 ...a3108.8b6bcf3f.js => 84fa3108.23a683e0.js} | 0 ...1c64a.10490cf6.js => 8541c64a.77ceed78.js} | 0 ...297e5.9cff2905.js => 858297e5.9fd13792.js} | 0 ...160d3.bf9cdf61.js => 85e160d3.d18af7a1.js} | 0 ...b15d5.a5f2d4e9.js => 87db15d5.17874dfa.js} | 0 ...eac7e.cc3fef8f.js => 88aeac7e.7b512b83.js} | 0 ...191c9.85e8398f.js => 8a2191c9.b77f2e1b.js} | 0 ...423d8.03bbad7f.js => 8a3423d8.4180d836.js} | 0 ...25469.a7f9793e.js => 8a425469.91c68e50.js} | 0 ...fa54b.d57877c1.js => 8a6fa54b.c55cc043.js} | 0 ...04f25.c8300abc.js => 8b004f25.cbd1daab.js} | 0 ...fbda9.ad5c1914.js => 8bcfbda9.7d6abbd2.js} | 0 ...6dc47.3c8bbc1b.js => 8cc6dc47.e3c19f2a.js} | 0 ...6a573.b2f6e26f.js => 8dc6a573.ae6aea00.js} | 0 ...16003.aa41154b.js => 8e316003.a39389f6.js} | 0 ...fcbe4.5fd3fd6b.js => 8fcfcbe4.3662f590.js} | 0 ...8ad63.7a0ba271.js => 9258ad63.1ccd1ee8.js} | 0 ...c8cb1.087a137b.js => 927c8cb1.cadc3a23.js} | 0 ...57007.90b60814.js => 92d57007.972fd129.js} | 0 ...4c895.f44b62d1.js => 92f4c895.70227b86.js} | 0 ...11a86.5734fb3a.js => 93011a86.97e5ffcb.js} | 0 ...8bd2a.790f3d80.js => 9308bd2a.03fa838d.js} | 0 ...98ec8.3d58fd2d.js => 93298ec8.926da05a.js} | 0 ...f2afb.a71d4820.js => 935f2afb.dd000f3a.js} | 0 ...799cc.a79edc84.js => 936799cc.9bc9ea77.js} | 0 ...803e8.6cfebb36.js => 936803e8.9407d3f5.js} | 0 ...10a9c.3f3bdf3a.js => 93710a9c.41221962.js} | 0 ...23fbf.af8d1dca.js => 93923fbf.4aed0602.js} | 0 ...dcb7a.17f076fd.js => 944dcb7a.a1adbd3f.js} | 0 ...3795c.6a22c2d4.js => 94d3795c.be91d56c.js} | 0 ...6a041.119f3c94.js => 9506a041.8a906999.js} | 0 ...27607.a3b824c7.js => 95a27607.8965ef49.js} | 0 ...28293.91ecfd26.js => 96528293.6cef076f.js} | 0 ...c5664.a95edaff.js => 96dc5664.dbfcf8d5.js} | 0 ...43b42.33016623.js => 96e43b42.e2d6eec2.js} | 0 ...e6d70.1a61d1ec.js => 970e6d70.c39ccd5e.js} | 0 ...3faba.8c7db914.js => 9753faba.7dcaac49.js} | 0 ...c6429.826cc644.js => 979c6429.82ded961.js} | 0 ...8e2c7.7921ed09.js => 9848e2c7.b5e84a82.js} | 0 ...a2ed8.c9f6f7e2.js => 98ca2ed8.fe0cf4a1.js} | 0 ...54e16.e9f3533f.js => 98d54e16.32d0683e.js} | 0 ...993c6.bff47442.js => 994993c6.3101ffac.js} | 0 ...a79a6.3237f4b3.js => 995a79a6.fc54b3a8.js} | 0 ...058c7.4a56eab1.js => 99d058c7.82ee9efc.js} | 0 ...d62bb.02d81693.js => 9a1d62bb.38e9b459.js} | 0 ...61523.9429fd3b.js => 9a961523.e693d23b.js} | 0 ...69400.ca16d11c.js => 9af69400.84a09307.js} | 0 ...7d7b9.039b1229.js => 9b17d7b9.ad18394a.js} | 0 ...3e258.41885fcf.js => 9b23e258.8bb65e3c.js} | 0 ...9aad4.3d3c36a3.js => 9c09aad4.bbd87b29.js} | 0 ...4692c.887dfa5c.js => 9c24692c.8f807bdd.js} | 0 ...8178f.7075e9fe.js => 9c28178f.4e3c54e4.js} | 0 ...c590d.ba7c1c1e.js => 9d1c590d.94c79f9f.js} | 0 ...aa5af.425bad04.js => 9d2aa5af.df0c65fc.js} | 0 ...742d5.106e2325.js => 9d9742d5.a38b7781.js} | 0 ...b56b4.62607c3a.js => 9dab56b4.1dbb201c.js} | 0 ...c2d3e.17b57951.js => 9dbc2d3e.a97914c2.js} | 0 ...dc38c.5b72710e.js => 9e2dc38c.043d1953.js} | 0 ...670e9.8df6a17a.js => 9e5670e9.d3cfdddf.js} | 0 ...72eed.2d88cd02.js => 9fc72eed.f8d04078.js} | 0 ...53ea0.dc37308d.js => 9fe53ea0.ed9f004f.js} | 0 ...17692.8808069c.js => a0417692.c26f015d.js} | 0 ...7a70e.dec341f2.js => a0f7a70e.25afae36.js} | 0 ...6cfd4.16698138.js => a176cfd4.8a7eb354.js} | 0 ...9a65b.5cd5ec4c.js => a199a65b.425c9e58.js} | 0 ...227d1.7ce812c4.js => a26227d1.3156c160.js} | 0 ...1911a.7407cdb7.js => a271911a.601b16a3.js} | 0 ...dd78e.4782a0c0.js => a29dd78e.610f804c.js} | 0 ...aee09.f8bb41e9.js => a33aee09.b048b922.js} | 0 ...e3a9c.0aac7cb2.js => a39e3a9c.ab8f5473.js} | 0 ...819f0.d0c1b279.js => a45819f0.546b099c.js} | 0 ...9e737.104a163a.js => a489e737.d04b570a.js} | 0 ...02fb3.61e014f0.js => a5202fb3.86c614f4.js} | 0 ...e9ae3.e62dd267.js => a55e9ae3.5bf096fc.js} | 0 ...7f128.5901eeb2.js => a5b7f128.3320a5fc.js} | 0 ...9e7a1.09f6a06a.js => a5e9e7a1.b2e22c9f.js} | 0 ...f633b.2fac5df8.js => a63f633b.8b58bc2a.js} | 0 ...46925.638dfdec.js => a6946925.043ceeca.js} | 0 ...f1977.2ca84b17.js => a81f1977.814c48a8.js} | 0 ...1de49.15ceb938.js => a8a1de49.45ad518a.js} | 0 ...1bf2b.e0351d8e.js => a9f1bf2b.05f49c31.js} | 0 ...e3150.9c58221e.js => ab1e3150.a871429d.js} | 0 ...f391a.c706c921.js => ab5f391a.a76a79c2.js} | 0 ...b2b08.0189e217.js => ab9b2b08.b4b1bc6c.js} | 0 ...fbd6b.8b5b3d31.js => abdfbd6b.8d000702.js} | 0 ...59749.65238a07.js => ac259749.449c66a6.js} | 0 ...e8a11.5d5c7a94.js => ad0e8a11.f3536de7.js} | 0 ...fd01a.553d1d7c.js => adafd01a.c20c6fb1.js} | 0 ...ea6f3.e1785bef.js => adcea6f3.a039245d.js} | 0 ...a2092.e46f177a.js => adda2092.50a7cc5b.js} | 0 ...e7fac.82c11dd2.js => adee7fac.3baeb5ad.js} | 0 ...12ad6.3926856a.js => ae012ad6.6fe16a5d.js} | 0 ...d6317.79fa9f38.js => af0d6317.76ab411e.js} | 0 ...c1b4c.f67af5fa.js => af1c1b4c.a0294f47.js} | 0 ...95eb3.e75dd81d.js => af595eb3.842b7319.js} | 0 ...98dc1.222d2065.js => afe98dc1.6f79b7f2.js} | 0 ...ae788.d29c65f6.js => b0fae788.6f882feb.js} | 0 ...0f538.a1c8f31e.js => b210f538.a0ee22a7.js} | 0 ...e0418.e6a22290.js => b2ae0418.b534e97b.js} | 0 ...6acd7.bb42719b.js => b2b6acd7.bbac80b5.js} | 0 ...0342a.8add7127.js => b2f0342a.b355d21e.js} | 0 ...aef05.a4b71d5b.js => b3eaef05.8412ef54.js} | 0 ...9db2c.d78aec7f.js => b459db2c.19f2bd38.js} | 0 ...5a2f6.a6d05ec9.js => b4d5a2f6.f5816246.js} | 0 ...3226a.02cea9d6.js => b4e3226a.bc523c07.js} | 0 ...5335c.dc20ce03.js => b555335c.e7dc13c7.js} | 0 ...6e4a0.5b3dae7b.js => b626e4a0.f81f9112.js} | 0 ...43ad7.2b634dae.js => b6543ad7.9d025675.js} | 0 ...89f11.96035c9b.js => b7589f11.82299892.js} | 0 ...ed113.f73ca3ae.js => b80ed113.259f81c1.js} | 0 ...53938.09660dbe.js => b9e53938.eb4b1ad8.js} | 0 ...86bac.0962b437.js => ba486bac.650b3845.js} | 0 ...816a3.31e93539.js => bab816a3.87a855e0.js} | 0 ...20a2e.95c21ddb.js => bae20a2e.02f6dd33.js} | 0 ...68c08.86c2de43.js => bb568c08.f27a3117.js} | 0 ...3c9a4.696586ec.js => bb73c9a4.93e91590.js} | 0 ...3cca1.60ae92d7.js => bbd3cca1.aef6a8ed.js} | 0 ...db369.15458a6f.js => bcedb369.cdf7eea2.js} | 0 ...8cc4a.de396c4b.js => bcf8cc4a.d38e4e70.js} | 0 ...b2066.db770a28.js => bd4b2066.fd0225e8.js} | 0 ...3d396.b363b27d.js => bda3d396.5edf335f.js} | 0 ...7dfef.28a7f679.js => bdc7dfef.3edacb5c.js} | 0 ...9e40f.e28d47a6.js => be39e40f.457d3ab7.js} | 0 ...2a7d3.beb68eab.js => be52a7d3.788a84fa.js} | 0 ...d235e.6cd4c19e.js => be5d235e.a3464337.js} | 0 ...ecf1a.2e12f385.js => be7ecf1a.14d7c437.js} | 0 ...ce3d7.0b38e322.js => beace3d7.7d42e1eb.js} | 0 ...a7391.4023b8a0.js => befa7391.0d06d447.js} | 0 ...c635a.39a9f0ef.js => c0bc635a.9fb0423d.js} | 0 ...4081e.ddabdf43.js => c0d4081e.e493fe8b.js} | 0 ...f4942.5ba5117d.js => c18f4942.8bc2228b.js} | 0 ...cd62e.d76f0676.js => c1bcd62e.9b7d677e.js} | 0 ...9e30a.3ca553fa.js => c1f9e30a.1bed24c9.js} | 0 ...3d637.6ec3e784.js => c213d637.d0e59b97.js} | 0 ...b1329.39673696.js => c2bb1329.57d407f6.js} | 0 ...17032.0e7e6c6c.js => c4c17032.8426facc.js} | 0 ...f2964.39d072c2.js => c4ef2964.74fabd11.js} | 0 ...5d8e4.32b0fbe2.js => c4f5d8e4.96ed4b1c.js} | 0 ...7f3af.6772d889.js => c5e7f3af.ad8d8a9c.js} | 0 ...20e67.b58be073.js => c6720e67.c3424972.js} | 0 ...ceeae.208cda4c.js => c6eceeae.519f125e.js} | 0 ...d9e4e.09e284f7.js => c74d9e4e.d40f58b3.js} | 0 ...08fc7.08b30d57.js => c7608fc7.c240f7a8.js} | 0 ...3b066.f3277716.js => c783b066.b7c51c91.js} | 0 ...17e4b.79027534.js => c7d17e4b.16eec067.js} | 0 ...1aa7f.8bb8b76b.js => c811aa7f.e0f03d23.js} | 0 ...555e2.cb670667.js => c82555e2.61a9e50c.js} | 0 ...1df9f.21f69ae5.js => c9f1df9f.8bc4d21a.js} | 0 ...95e88.b38b3264.js => ca195e88.77f93795.js} | 0 ...eeb9f.fc3c9fb4.js => ca9eeb9f.e9b60657.js} | 0 ...7ffaf.57008bbd.js => cad7ffaf.f4fc657a.js} | 0 ...6a971.aef49918.js => cb66a971.363c2b62.js} | 0 ...11013.2e893fa9.js => cbb11013.a80337b1.js} | 0 ...f4c0b.104dd278.js => cbdf4c0b.a2f083eb.js} | 0 ...e32ef.4e32dd56.js => cc3e32ef.ab152464.js} | 0 ...f7f5b.c2c4690d.js => ccef7f5b.74088521.js} | 0 ...43648.29be0867.js => cd443648.ee8bbc8a.js} | 0 ...07f23.6f32b33b.js => cd907f23.45b3f3ce.js} | 0 ...38c9b.f1a33d49.js => cdb38c9b.e4356878.js} | 0 ...1c8e6.c41a88bb.js => ce91c8e6.cf97113c.js} | 0 ...a34bd.27fa8625.js => cf4a34bd.faeead3f.js} | 0 ...c7470.01b4b191.js => cf8c7470.970f8384.js} | 0 ...7834c.42dfb131.js => d0a7834c.a38b4967.js} | 0 ...67098.b93b1aae.js => d1167098.3072182b.js} | 0 ...ff093.bcb46f87.js => d12ff093.ee2a26bb.js} | 0 ...d5dce.20d22983.js => d14d5dce.0e7fe3fe.js} | 0 ...77c27.a0ec1b0e.js => d2477c27.16619108.js} | 0 ...1eeaf.f0f56d52.js => d311eeaf.166569c6.js} | 0 ...0f50b.6de93987.js => d320f50b.0a470227.js} | 0 ...4dc66.01f05377.js => d324dc66.f0bc0000.js} | 0 ...d7f17.93ed6e74.js => d37d7f17.17794289.js} | 0 ...04b7a.d9ddfa7d.js => d3a04b7a.f40d173f.js} | 0 ...0217b.453fc825.js => d460217b.c728ec33.js} | 0 ...8f144.a78c46f3.js => d648f144.de48a12e.js} | 0 ...ca407.8f8af95e.js => d64ca407.dd9abdfa.js} | 0 ...09953.f62cb74a.js => d6c09953.5ea7556f.js} | 0 ...fea11.0d573265.js => d73fea11.22dcb3fd.js} | 0 ...c8cd6.0e20714d.js => d85c8cd6.f83aba48.js} | 0 ...1ec13.f7e95192.js => d8b1ec13.0114c465.js} | 0 ...3d873.53e101eb.js => d8c3d873.d05c428a.js} | 0 ...c45f5.017da7cd.js => d91c45f5.46f93fba.js} | 0 ...151db.102421d5.js => da0151db.bdb4565f.js} | 0 ...3f618.5ee6e032.js => da63f618.985fac08.js} | 0 ...d9ff9.373dec35.js => daad9ff9.524220f4.js} | 0 ...962c5.14b8112d.js => dac962c5.3b37b5ad.js} | 0 ...5c4c8.9af7eb8e.js => db35c4c8.d34ee3c9.js} | 0 ...0a197.ee0db7b1.js => db40a197.4e2dffa1.js} | 0 ...aebef.be147ae3.js => db9aebef.e9cfa80c.js} | 0 ...780e2.e28041fc.js => dfb780e2.60ff12e7.js} | 0 ...45e2f.e3649aee.js => e0945e2f.89af6fcd.js} | 0 ...11089.d2bc3504.js => e1411089.3c43d8f7.js} | 0 ...1c7c7.3df5dc29.js => e181c7c7.a11eb3df.js} | 0 ...68c94.977c6f73.js => e2968c94.6b119c01.js} | 0 ...8c0f5.7c7dfcc1.js => e378c0f5.32c5c5ff.js} | 0 ...d76ff.e73f93ea.js => e40d76ff.9b9f2f3b.js} | 0 ...baca5.327953b6.js => e44baca5.bcf1da4b.js} | 0 ...f129a.bb01ea7c.js => e47f129a.e3f88657.js} | 0 ...76f82.77a153f1.js => e4976f82.37dbe207.js} | 0 ...98d56.9c21a0e0.js => e4b98d56.4482f968.js} | 0 ...c6f88.0e281ead.js => e4fc6f88.054f3015.js} | 0 ...dbd59.7a058f2e.js => e50dbd59.ef31087b.js} | 0 ...314b3.542f386b.js => e53314b3.4d66216b.js} | 0 ...b1169.c4a702fd.js => e53b1169.a4ecc61b.js} | 0 ...9d204.2bee4099.js => e549d204.7893753f.js} | 0 ...a5f3e.363ebf91.js => e56a5f3e.6d853965.js} | 0 ...8e1c1.8db7e150.js => e578e1c1.b22f5faf.js} | 0 ...3212a.fbb9cc5e.js => e623212a.381d04d5.js} | 0 ...615c7.a4ed3143.js => e6b615c7.d1a198d4.js} | 0 ...a2122.398a30c5.js => e78a2122.26f3623e.js} | 0 ...51ecb.5a56eff5.js => e7f51ecb.8962f3ed.js} | 0 ...4cc90.96d7d582.js => e9e4cc90.a6bb9f1b.js} | 0 ...eeea3.53022e2d.js => ea0eeea3.555bae08.js} | 0 ...0d811.77718e5d.js => eab0d811.c7621329.js} | 0 ...8af53.38113368.js => eab8af53.20b14131.js} | 0 ...e11f2.09fcbb0c.js => eade11f2.feff4e46.js} | 0 ...4c34d.c210d030.js => eaf4c34d.71e1f0fd.js} | 0 ...47e60.7dd5d89c.js => eb547e60.50531564.js} | 0 ...622c4.b4826555.js => ebb622c4.4ccdb0e6.js} | 0 ...9c133.14f7173d.js => ec69c133.3782382c.js} | 0 ...cdc07.d65d856c.js => ed3cdc07.4d4fa5fb.js} | 0 ...d899f.0060d831.js => edfd899f.de18242c.js} | 0 ...c428b.92dd16e9.js => ee1c428b.3adfcbc4.js} | 0 ...3c882.9416f2d9.js => eea3c882.dc5cc6b0.js} | 0 ...854ec.32591a9d.js => ef9854ec.fefb65d5.js} | 0 ...8a79b.c7e5cf70.js => efe8a79b.fa128f9b.js} | 0 ...ffb6e.1f4098d1.js => f01ffb6e.43212ade.js} | 0 ...823fb.9e7aa272.js => f03823fb.4ba07fdf.js} | 0 ...4aa7c.0b12e6a9.js => f074aa7c.bd9c7ea0.js} | 0 ...220bc.cc59a389.js => f13220bc.e9386aee.js} | 0 ...e5025.e617df84.js => f1ae5025.15045e43.js} | 0 ...320f4.d6606a2d.js => f1f320f4.911ba8a5.js} | 0 ...8d75b.6ca1136c.js => f288d75b.626660f3.js} | 0 ...d0f82.52393f4d.js => f31d0f82.c0a4a2b4.js} | 0 ...225f5.33e7d841.js => f3b225f5.ce684c39.js} | 0 ...020a8.e4fe82b8.js => f41020a8.b3d636b1.js} | 0 ...6c772.398404f6.js => f426c772.09247914.js} | 0 ...1240f.f2740b42.js => f501240f.17a038a2.js} | 0 ...bfb03.33f7eb1a.js => f5ebfb03.fea60696.js} | 0 ...7dcbe.eef0b6e2.js => f657dcbe.0736759d.js} | 0 ...b2e96.0a83047d.js => f67b2e96.58f2ea39.js} | 0 ...7b097.3a360eb8.js => f7b7b097.19f5b67a.js} | 0 ...72c68.bf09c0e3.js => f8372c68.0f79ebf2.js} | 0 ...e3eac.879c2f06.js => f88e3eac.37ba2c78.js} | 0 ...53133.92ba9a13.js => f9153133.190cf32c.js} | 0 ...2c8aa.9d146c14.js => f982c8aa.e760febe.js} | 0 ...337df.5388f247.js => f99337df.20d9a3f4.js} | 0 ...f8c77.b640db01.js => fa3f8c77.81c4c560.js} | 0 ...4c33d.b1b446ef.js => faf4c33d.9b0e50dd.js} | 0 ...9c5cf.3a95b7ae.js => fb19c5cf.74191882.js} | 0 ...8c6dd.aa7e4a45.js => fb88c6dd.61a4fbdc.js} | 0 ...288fc.919a1a02.js => fb9288fc.5ed8f0be.js} | 0 ...f3453.ad698353.js => fbbf3453.a9041cf1.js} | 0 ...45d88.567b1cc3.js => fc545d88.7a5f78b1.js} | 0 ...3e544.3b2344f4.js => fcc3e544.a402d458.js} | 0 ...b1eb4.828af532.js => fceb1eb4.86ddac18.js} | 0 ...6dfbe.dea46851.js => fd46dfbe.aa778832.js} | 0 ...ab4b0.90bc39a6.js => fd5ab4b0.862d4305.js} | 0 ...c2799.ddcf13ce.js => fd8c2799.30f6e49a.js} | 0 ...e7c0b.1ccb9204.js => fdee7c0b.23e7d577.js} | 0 ...67c26.245d2408.js => fea67c26.a320f249.js} | 0 ...30dd7.7141e5c7.js => fec30dd7.24251431.js} | 0 ...e1fde.3c8424e2.js => fefe1fde.4af61eb9.js} | 0 ...f8c10.6f74150f.js => ffcf8c10.84fafb31.js} | 0 .../js/{main.2f2285b9.js => main.75363ba5.js} | 2 +- ...CENSE.txt => main.75363ba5.js.LICENSE.txt} | 0 ...n.ece7b6fa.js => runtime~main.22f4314c.js} | 2 +- ...{styles.11bf9c0d.js => styles.222b8810.js} | 0 docs/advanced-navigation/index.html | 36 +++++++++---------- docs/app-launch/index.html | 36 +++++++++---------- docs/basic-navigation/index.html | 36 +++++++++---------- docs/before-you-start/index.html | 36 +++++++++---------- docs/bottomTabs/index.html | 36 +++++++++---------- docs/community-libraries/index.html | 36 +++++++++---------- docs/customBackNavigation/index.html | 36 +++++++++---------- docs/externalComponent/index.html | 36 +++++++++---------- docs/functionalComponents/index.html | 36 +++++++++---------- docs/installing/index.html | 36 +++++++++---------- docs/meta-contributing/index.html | 36 +++++++++---------- docs/modal/index.html | 36 +++++++++---------- docs/overlay/index.html | 36 +++++++++---------- docs/passing-data-to-components/index.html | 36 +++++++++---------- docs/playground-app/index.html | 36 +++++++++---------- docs/root/index.html | 36 +++++++++---------- docs/screen-lifecycle/index.html | 36 +++++++++---------- docs/showcases/index.html | 36 +++++++++---------- docs/sideMenu-disable/index.html | 36 +++++++++---------- docs/sideMenu/index.html | 36 +++++++++---------- docs/stack-backButton/index.html | 36 +++++++++---------- docs/stack-backNavigation/index.html | 36 +++++++++---------- docs/stack-buttons/index.html | 36 +++++++++---------- docs/stack-programmatically/index.html | 36 +++++++++---------- docs/stack/index.html | 36 +++++++++---------- docs/style-animations/index.html | 36 +++++++++---------- docs/style-constants/index.html | 36 +++++++++---------- docs/style-fonts/index.html | 36 +++++++++---------- docs/style-options/index.html | 36 +++++++++---------- docs/style-orientation/index.html | 36 +++++++++---------- docs/style-statusBar/index.html | 36 +++++++++---------- docs/style-theme/index.html | 36 +++++++++---------- docs/third-party-mobx/index.html | 36 +++++++++---------- docs/third-party-react-context/index.html | 36 +++++++++---------- .../index.html | 36 +++++++++---------- docs/third-party-typescript/index.html | 36 +++++++++---------- index.html | 16 ++++----- next/api/component/index.html | 36 +++++++++---------- next/api/events/index.html | 36 +++++++++---------- next/api/layout-bottomTabs/index.html | 36 +++++++++---------- next/api/layout-component/index.html | 36 +++++++++---------- next/api/layout-layout/index.html | 36 +++++++++---------- next/api/layout-sideMenu/index.html | 36 +++++++++---------- next/api/layout-splitView/index.html | 36 +++++++++---------- next/api/layout-stack/index.html | 36 +++++++++---------- next/api/modal/index.html | 36 +++++++++---------- next/api/options-animations/index.html | 36 +++++++++---------- next/api/options-api/index.html | 36 +++++++++---------- next/api/options-backButton/index.html | 36 +++++++++---------- next/api/options-background/index.html | 36 +++++++++---------- next/api/options-bottomTab/index.html | 36 +++++++++---------- next/api/options-bottomTabs/index.html | 36 +++++++++---------- next/api/options-button/index.html | 36 +++++++++---------- next/api/options-fab/index.html | 36 +++++++++---------- .../api/options-hardwareBackButton/index.html | 36 +++++++++---------- next/api/options-iconBackground/index.html | 36 +++++++++---------- next/api/options-iconInsets/index.html | 36 +++++++++---------- next/api/options-imageResource/index.html | 36 +++++++++---------- next/api/options-largeTitle/index.html | 36 +++++++++---------- next/api/options-layout/index.html | 36 +++++++++---------- next/api/options-migration/index.html | 36 +++++++++---------- next/api/options-modal/index.html | 36 +++++++++---------- next/api/options-navigationBar/index.html | 36 +++++++++---------- next/api/options-overlay/index.html | 36 +++++++++---------- next/api/options-preview/index.html | 36 +++++++++---------- next/api/options-root/index.html | 36 +++++++++---------- .../options-scrollEdgeAppearance/index.html | 36 +++++++++---------- next/api/options-sideMenu/index.html | 36 +++++++++---------- next/api/options-sideMenuSide/index.html | 36 +++++++++---------- next/api/options-splitView/index.html | 36 +++++++++---------- next/api/options-stack/index.html | 36 +++++++++---------- next/api/options-statusBar/index.html | 36 +++++++++---------- next/api/options-subtitle/index.html | 36 +++++++++---------- next/api/options-title/index.html | 36 +++++++++---------- next/api/overlay/index.html | 36 +++++++++---------- next/api/root/index.html | 36 +++++++++---------- next/api/sideMenu-api/index.html | 36 +++++++++---------- next/api/stack/index.html | 36 +++++++++---------- next/api/topBar-searchBar/index.html | 36 +++++++++---------- next/docs/advanced-navigation/index.html | 36 +++++++++---------- next/docs/app-launch/index.html | 36 +++++++++---------- next/docs/basic-navigation/index.html | 36 +++++++++---------- next/docs/before-you-start/index.html | 36 +++++++++---------- next/docs/bottomTabs/index.html | 36 +++++++++---------- next/docs/community-libraries/index.html | 36 +++++++++---------- next/docs/customBackNavigation/index.html | 36 +++++++++---------- next/docs/externalComponent/index.html | 36 +++++++++---------- next/docs/functionalComponents/index.html | 36 +++++++++---------- next/docs/installing/index.html | 36 +++++++++---------- next/docs/meta-contributing/index.html | 36 +++++++++---------- next/docs/modal/index.html | 36 +++++++++---------- next/docs/overlay/index.html | 36 +++++++++---------- .../passing-data-to-components/index.html | 36 +++++++++---------- next/docs/playground-app/index.html | 36 +++++++++---------- next/docs/root/index.html | 36 +++++++++---------- next/docs/screen-lifecycle/index.html | 36 +++++++++---------- next/docs/showcases/index.html | 36 +++++++++---------- next/docs/sideMenu-disable/index.html | 36 +++++++++---------- next/docs/sideMenu/index.html | 36 +++++++++---------- next/docs/stack-backButton/index.html | 36 +++++++++---------- next/docs/stack-backNavigation/index.html | 36 +++++++++---------- next/docs/stack-buttons/index.html | 36 +++++++++---------- next/docs/stack-programmatically/index.html | 36 +++++++++---------- next/docs/stack/index.html | 36 +++++++++---------- next/docs/style-animations/index.html | 36 +++++++++---------- next/docs/style-constants/index.html | 36 +++++++++---------- next/docs/style-fonts/index.html | 36 +++++++++---------- next/docs/style-options/index.html | 36 +++++++++---------- next/docs/style-orientation/index.html | 36 +++++++++---------- next/docs/style-statusBar/index.html | 36 +++++++++---------- next/docs/style-theme/index.html | 36 +++++++++---------- next/docs/third-party-mobx/index.html | 36 +++++++++---------- .../docs/third-party-react-context/index.html | 36 +++++++++---------- .../index.html | 36 +++++++++---------- next/docs/third-party-typescript/index.html | 36 +++++++++---------- search/index.html | 24 ++++++------- showcase/index.html | 28 +++++++-------- 1101 files changed, 9700 insertions(+), 9700 deletions(-) rename assets/js/{01236e21.143d7e40.js => 01236e21.1ac81261.js} (100%) rename assets/js/{01766c3c.74a98e17.js => 01766c3c.f303fff4.js} (100%) rename assets/js/{0219fded.7b6a26dc.js => 0219fded.c03b7e66.js} (100%) rename assets/js/{02481282.9277b640.js => 02481282.6abaa2f5.js} (100%) rename assets/js/{033ffa26.91cd8ab4.js => 033ffa26.24a137ed.js} (100%) rename assets/js/{03637775.c0f11620.js => 03637775.773dc71b.js} (100%) rename assets/js/{03694375.1434b1ae.js => 03694375.90a26649.js} (100%) rename assets/js/{03936653.353dcf04.js => 03936653.3c06bcf7.js} (100%) rename assets/js/{03a973b6.0143cb29.js => 03a973b6.8901e852.js} (100%) rename assets/js/{042403e6.c8242cfa.js => 042403e6.3d20ae69.js} (100%) rename assets/js/{046dea04.f9b09012.js => 046dea04.70c2205b.js} (100%) rename assets/js/{04c9bdec.c4848187.js => 04c9bdec.61852e6b.js} (100%) rename assets/js/{0504968a.b1c2f338.js => 0504968a.62cecc3f.js} (100%) rename assets/js/{05e7be59.0f0a700e.js => 05e7be59.6e3c076b.js} (100%) rename assets/js/{06428749.4684191a.js => 06428749.de557e73.js} (100%) rename assets/js/{0795c4a5.ee33bc1d.js => 0795c4a5.6edaf4ed.js} (100%) rename assets/js/{07a5a5a7.cea8b129.js => 07a5a5a7.0d5a22c2.js} (100%) rename assets/js/{07d02486.4278941d.js => 07d02486.77491eaa.js} (100%) rename assets/js/{083097f6.7a65eccd.js => 083097f6.d12e5121.js} (100%) rename assets/js/{08c29a07.5b3555ab.js => 08c29a07.49fb0f12.js} (100%) rename assets/js/{08f59eb1.5adcaf92.js => 08f59eb1.27cbf0e3.js} (100%) rename assets/js/{0933de78.28838324.js => 0933de78.83577c3c.js} (100%) rename assets/js/{0960b525.70766d9e.js => 0960b525.ada101e3.js} (100%) rename assets/js/{09ef251f.e47008ff.js => 09ef251f.0bfddf67.js} (100%) rename assets/js/{0a7ae8c6.f67a4f21.js => 0a7ae8c6.7c5519bb.js} (100%) rename assets/js/{0a9c912f.063d5745.js => 0a9c912f.322c0fe3.js} (100%) rename assets/js/{0ac59e0b.e1c8b9c4.js => 0ac59e0b.b152e4f0.js} (100%) rename assets/js/{0af206b1.114c0077.js => 0af206b1.cfc25de7.js} (100%) rename assets/js/{0b88b93d.13b8cd1a.js => 0b88b93d.79caa19c.js} (100%) rename assets/js/{0c893413.0fa54120.js => 0c893413.b82044dc.js} (100%) rename assets/js/{0d5a540d.129cd21b.js => 0d5a540d.4742cd6c.js} (100%) rename assets/js/{0d9971fc.413d1fe9.js => 0d9971fc.637ef44c.js} (100%) rename assets/js/{0da03481.9b993480.js => 0da03481.265ef927.js} (100%) rename assets/js/{0dd89b11.bec9340b.js => 0dd89b11.a3a718e2.js} (100%) rename assets/js/{0deecaa0.2ad6d771.js => 0deecaa0.ba6bde4b.js} (100%) rename assets/js/{0df7ea6e.66fb6fe5.js => 0df7ea6e.74a1a253.js} (100%) rename assets/js/{0e403cd5.7ca3305d.js => 0e403cd5.a61c4b89.js} (100%) rename assets/js/{0e88a1db.48cee85a.js => 0e88a1db.6e2ee6bc.js} (100%) rename assets/js/{0eac805a.0e228a20.js => 0eac805a.42800a6d.js} (100%) rename assets/js/{0ebf8c0a.336412c0.js => 0ebf8c0a.138c9cb3.js} (100%) rename assets/js/{0f6c7edf.48293b3b.js => 0f6c7edf.31e1e897.js} (100%) rename assets/js/{0fa6c028.e271ad22.js => 0fa6c028.2779c912.js} (100%) rename assets/js/{1.db09b3e8.js => 1.e351c036.js} (100%) rename assets/js/{1064a535.a3873912.js => 1064a535.f71d5953.js} (100%) rename assets/js/{10f6d5b6.78b140a8.js => 10f6d5b6.ef898f1c.js} (100%) rename assets/js/{110d3381.8e1e2e37.js => 110d3381.d8c7bc4c.js} (100%) rename assets/js/{121d2742.8fe0c3a6.js => 121d2742.080e3e9b.js} (100%) rename assets/js/{1316cfa0.a76e154d.js => 1316cfa0.2fc6927a.js} (100%) rename assets/js/{137941bc.599a4279.js => 137941bc.b8f4b148.js} (100%) rename assets/js/{141d4650.56352b6e.js => 141d4650.c382b43b.js} (100%) rename assets/js/{1472bf54.189c85f9.js => 1472bf54.5432663c.js} (100%) rename assets/js/{148da5a8.511f381e.js => 148da5a8.77c7c862.js} (100%) rename assets/js/{1568d0d5.a1cc6667.js => 1568d0d5.7de1629e.js} (100%) rename assets/js/{168ff25c.05db6a9b.js => 168ff25c.f02691ee.js} (100%) rename assets/js/{16dbfa7d.bf9f402a.js => 16dbfa7d.720485c6.js} (100%) rename assets/js/{16e299d4.ba152dec.js => 16e299d4.64ccaea4.js} (100%) rename assets/js/{17510ebe.e45d6352.js => 17510ebe.3ddbb25c.js} (100%) rename assets/js/{17896441.a14e03c4.js => 17896441.a93d10a6.js} (100%) rename assets/js/{1809070c.9509b280.js => 1809070c.a85567a5.js} (100%) rename assets/js/{18ec5a2b.dc0eb954.js => 18ec5a2b.9946ed4d.js} (100%) rename assets/js/{19174d1e.cd6d311d.js => 19174d1e.74c023b3.js} (100%) rename assets/js/{19286aee.bf5c3415.js => 19286aee.ea4c218b.js} (100%) rename assets/js/{1ab674d3.42054cdf.js => 1ab674d3.812eec10.js} (100%) rename assets/js/{1ac20142.9030002f.js => 1ac20142.f4971419.js} (100%) rename assets/js/{1bc08b45.b63e8505.js => 1bc08b45.eee0f7a3.js} (100%) rename assets/js/{1bc687dd.741a6f05.js => 1bc687dd.dd402a05.js} (100%) rename assets/js/{1c82c02e.22095890.js => 1c82c02e.f25fa847.js} (100%) rename assets/js/{1d268f7b.8739f0f2.js => 1d268f7b.286bdb3e.js} (100%) rename assets/js/{1d6ec27d.889b91d7.js => 1d6ec27d.8d0dacfc.js} (100%) rename assets/js/{1e700b69.ac6e9e51.js => 1e700b69.94bac2ca.js} (100%) rename assets/js/{1f05559d.96d57c84.js => 1f05559d.07cc2ddb.js} (100%) rename assets/js/{1f96651f.e712d6f0.js => 1f96651f.83275744.js} (100%) rename assets/js/{2.e086b3d3.js => 2.42d12bcd.js} (99%) rename assets/js/{2.e086b3d3.js.LICENSE.txt => 2.42d12bcd.js.LICENSE.txt} (100%) rename assets/js/{2052c8bf.c6259a92.js => 2052c8bf.720e0843.js} (100%) rename assets/js/{20ba5dc4.eda7aac9.js => 20ba5dc4.a7b3a3fe.js} (100%) rename assets/js/{2174d7ad.74cd536c.js => 2174d7ad.d857c065.js} (100%) rename assets/js/{21f705f8.231710e7.js => 21f705f8.e1480f1e.js} (100%) rename assets/js/{224d62cb.e45a001c.js => 224d62cb.592a604b.js} (100%) rename assets/js/{225ed1f6.69488e6c.js => 225ed1f6.b2fe862e.js} (100%) rename assets/js/{229cc33d.00ea9bcc.js => 229cc33d.8eda4b7f.js} (100%) rename assets/js/{22f62845.20c6ab00.js => 22f62845.5ce9829d.js} (100%) rename assets/js/{230b1eeb.b420a3bf.js => 230b1eeb.8f4479db.js} (100%) rename assets/js/{23364b07.0c1faef6.js => 23364b07.9d55db0b.js} (100%) rename assets/js/{2351c769.794ff28c.js => 2351c769.bdfe7354.js} (100%) rename assets/js/{247738c9.88ad4e2b.js => 247738c9.46f4f49a.js} (100%) rename assets/js/{25d8378a.e4d377d0.js => 25d8378a.e6408425.js} (100%) rename assets/js/{26eea951.53aee9c3.js => 26eea951.4b90dbef.js} (100%) rename assets/js/{27767c4e.2bc751e6.js => 27767c4e.afe5eabb.js} (100%) rename assets/js/{277f3e44.0da9feae.js => 277f3e44.acd0d6fb.js} (100%) rename assets/js/{27c72f74.c1388822.js => 27c72f74.061fedf7.js} (100%) rename assets/js/{27e70a48.67e6e817.js => 27e70a48.f3969a67.js} (100%) rename assets/js/{284505a6.130e9147.js => 284505a6.48010abd.js} (100%) rename assets/js/{29a86ae9.872fc26d.js => 29a86ae9.334b31e1.js} (100%) rename assets/js/{2acb663b.0755eecd.js => 2acb663b.80af43b4.js} (100%) rename assets/js/{2adc064f.d68c3fb3.js => 2adc064f.791d894d.js} (100%) rename assets/js/{2ba78b99.450557e6.js => 2ba78b99.cd71661c.js} (100%) rename assets/js/{2bfdf9e1.844efd42.js => 2bfdf9e1.cd932d65.js} (100%) rename assets/js/{2c39de7d.21987181.js => 2c39de7d.0470ad67.js} (100%) rename assets/js/{2c73c4ce.1b036c8e.js => 2c73c4ce.d48a23ef.js} (100%) rename assets/js/{2c7836e6.c766f4a7.js => 2c7836e6.57aa2a72.js} (100%) rename assets/js/{2cd645c9.a52392aa.js => 2cd645c9.77bbb468.js} (100%) rename assets/js/{2dc37949.17a824d3.js => 2dc37949.10f7bf25.js} (100%) rename assets/js/{2e38527b.6e65f944.js => 2e38527b.a2040f34.js} (100%) rename assets/js/{2e6c07ac.5c4c0789.js => 2e6c07ac.503d8387.js} (100%) rename assets/js/{2e98f0ad.f4927e93.js => 2e98f0ad.c982f62c.js} (100%) rename assets/js/{2eccfab5.d05d9f4b.js => 2eccfab5.2d0d3059.js} (100%) rename assets/js/{2ef5a19c.5ba8f7ba.js => 2ef5a19c.f203fccd.js} (100%) rename assets/js/{2efb2482.c419ef8a.js => 2efb2482.1127574d.js} (100%) rename assets/js/{2fd4abc7.f027514a.js => 2fd4abc7.595f2ea1.js} (100%) rename assets/js/{2fded03d.de783620.js => 2fded03d.85a825e2.js} (100%) rename assets/js/{300bb418.927c3866.js => 300bb418.4955dc9b.js} (100%) rename assets/js/{30e9c26f.241d96f1.js => 30e9c26f.4f6bf9fc.js} (100%) rename assets/js/{31a43934.69f0f5b0.js => 31a43934.0dc7ef5d.js} (100%) rename assets/js/{325a1917.dc04bb4e.js => 325a1917.ef5a8784.js} (100%) rename assets/js/{32dd1b94.a4ad45ec.js => 32dd1b94.ba2f21d8.js} (100%) rename assets/js/{32fb468f.056054b9.js => 32fb468f.a2c5249a.js} (100%) rename assets/js/{33f38c8c.7d9850bf.js => 33f38c8c.40527a23.js} (100%) rename assets/js/{349e8d4a.a3210e4b.js => 349e8d4a.8f2511d3.js} (100%) rename assets/js/{34dc379b.98eaeb2e.js => 34dc379b.1e741e95.js} (100%) rename assets/js/{36283c57.2314f1bb.js => 36283c57.1e1783ac.js} (100%) rename assets/js/{365a98ea.3aa54095.js => 365a98ea.f0b2c346.js} (100%) rename assets/js/{3668d48f.3f9a8191.js => 3668d48f.1c7a3685.js} (100%) rename assets/js/{3772e865.0da4b737.js => 3772e865.8b0a484e.js} (100%) rename assets/js/{386ca56c.f6cb5bd3.js => 386ca56c.64923550.js} (100%) rename assets/js/{3918bdf1.7e37da4b.js => 3918bdf1.b039af7e.js} (100%) rename assets/js/{3a53bf1a.3ae82d9d.js => 3a53bf1a.bf298b34.js} (100%) rename assets/js/{3a69f308.fd8bf0bc.js => 3a69f308.873e96c0.js} (100%) rename assets/js/{3aa54180.f4696613.js => 3aa54180.7e129cbb.js} (100%) rename assets/js/{3aaae8c2.28aaa112.js => 3aaae8c2.9e4a2c0d.js} (100%) rename assets/js/{3acffe63.83324a49.js => 3acffe63.6bb8259f.js} (100%) rename assets/js/{3bcd1d8e.8c7ed942.js => 3bcd1d8e.db208a99.js} (100%) rename assets/js/{3c659cae.17a7bc7f.js => 3c659cae.51eeb741.js} (100%) rename assets/js/{3c8c2bf8.c0e0245b.js => 3c8c2bf8.22a2fa42.js} (100%) rename assets/js/{3dec5134.1127e95a.js => 3dec5134.d23f1348.js} (100%) rename assets/js/{3e3e6ec9.b2fefd84.js => 3e3e6ec9.a5e0ff92.js} (100%) rename assets/js/{3e84ded7.3d234679.js => 3e84ded7.1afd9035.js} (100%) rename assets/js/{3ed77703.82741f94.js => 3ed77703.32c3798b.js} (100%) rename assets/js/{3ef95f29.dfc573db.js => 3ef95f29.a26fbc06.js} (100%) rename assets/js/{40e89655.c551e89a.js => 40e89655.336b0b26.js} (100%) rename assets/js/{41193e56.73d1b787.js => 41193e56.e5969cd7.js} (100%) rename assets/js/{4226e2c2.fc48bed1.js => 4226e2c2.9c292e9e.js} (100%) rename assets/js/{4288bfb7.7d662ca1.js => 4288bfb7.68a153c4.js} (100%) rename assets/js/{43257ae2.c13d8b1f.js => 43257ae2.3bf4d161.js} (100%) rename assets/js/{43d32eee.cc4104cc.js => 43d32eee.7a86038b.js} (100%) rename assets/js/{43d660c3.4c05681a.js => 43d660c3.21c8e3d8.js} (100%) rename assets/js/{449f6c51.0c9b6999.js => 449f6c51.83c1fc48.js} (100%) rename assets/js/{44e087e9.94464a87.js => 44e087e9.b3f3ff26.js} (100%) rename assets/js/{4513538c.bdaf04fa.js => 4513538c.86393762.js} (100%) rename assets/js/{454ed5cc.256c7579.js => 454ed5cc.38a87b58.js} (100%) rename assets/js/{46435fbd.26b327b4.js => 46435fbd.092fbdbe.js} (100%) rename assets/js/{466a5eab.fe6941af.js => 466a5eab.b905e9e7.js} (100%) rename assets/js/{46bec9c2.f9ea0ff1.js => 46bec9c2.d986abd9.js} (100%) rename assets/js/{46f83c70.d7fd11da.js => 46f83c70.c1560c5f.js} (100%) rename assets/js/{471dc5a0.7fdcf3fa.js => 471dc5a0.8c693bbf.js} (100%) rename assets/js/{47b574fd.eb1be317.js => 47b574fd.b05a5899.js} (100%) rename assets/js/{4881a286.3038deab.js => 4881a286.54ef4ae9.js} (100%) rename assets/js/{48fd24b5.64a63b6f.js => 48fd24b5.0c3f87a4.js} (100%) rename assets/js/{495121d7.e0545f7d.js => 495121d7.15e37147.js} (100%) rename assets/js/{49dbe183.49f4c402.js => 49dbe183.64fbdcba.js} (100%) rename assets/js/{4a6001c6.fe55291d.js => 4a6001c6.612de358.js} (100%) rename assets/js/{4a6249b7.5ab4a4c3.js => 4a6249b7.710c243e.js} (100%) rename assets/js/{4aaef72d.0b160e63.js => 4aaef72d.079d8f38.js} (100%) rename assets/js/{4af4128a.62250dc2.js => 4af4128a.0bd822df.js} (100%) rename assets/js/{4af4c56b.7d3de52a.js => 4af4c56b.bb03fcc8.js} (100%) rename assets/js/{4b843adc.6ba05533.js => 4b843adc.268b8d76.js} (100%) rename assets/js/{4c165ffd.1e1341a0.js => 4c165ffd.b3e599e2.js} (100%) rename assets/js/{4c2b683c.5a5e0f51.js => 4c2b683c.3b21949a.js} (100%) rename assets/js/{4e290c7d.e2c9ad4c.js => 4e290c7d.1a704a1f.js} (100%) rename assets/js/{4e57bc4b.44c75058.js => 4e57bc4b.0b0bf4de.js} (100%) rename assets/js/{4e8c4aff.c3b21830.js => 4e8c4aff.b47a4e9d.js} (100%) rename assets/js/{4e9cf07e.48cb062f.js => 4e9cf07e.45a55b35.js} (100%) rename assets/js/{4f219231.a4286c1c.js => 4f219231.648e997e.js} (100%) rename assets/js/{4f53deb4.bbcd0c6c.js => 4f53deb4.bea1914b.js} (100%) rename assets/js/{4f95cddb.a4954403.js => 4f95cddb.edf4618f.js} (100%) rename assets/js/{4f9dda28.641de565.js => 4f9dda28.b9fbdb65.js} (100%) rename assets/js/{514caecc.b06e4565.js => 514caecc.3dc7ba46.js} (100%) rename assets/js/{51a7f34b.98cf97d8.js => 51a7f34b.428ba8c3.js} (100%) rename assets/js/{52a0cead.c8099cc9.js => 52a0cead.9dcf4a73.js} (100%) rename assets/js/{532c3d82.e03f5caa.js => 532c3d82.d0f0b267.js} (100%) rename assets/js/{532fd2f5.8b018fad.js => 532fd2f5.5cd0ad07.js} (100%) rename assets/js/{535fb627.43c8e936.js => 535fb627.506bcb5c.js} (100%) rename assets/js/{5369bc20.e0f6d9b8.js => 5369bc20.a6f8aace.js} (100%) rename assets/js/{54e20c5d.cb7fdc36.js => 54e20c5d.11466dd2.js} (100%) rename assets/js/{552.0745ce7f.js => 552.90c7804d.js} (99%) rename assets/js/{552.0745ce7f.js.LICENSE.txt => 552.90c7804d.js.LICENSE.txt} (100%) rename assets/js/{553.b8c8fa90.js => 553.19d25723.js} (100%) rename assets/js/{554.8dfc4b8e.js => 554.f23626fe.js} (100%) rename assets/js/{555.580abe34.js => 555.bf99fa84.js} (100%) rename assets/js/{555388fc.e1ecd822.js => 555388fc.db6dfd87.js} (100%) rename assets/js/{556.81365057.js => 556.e6e6f3e0.js} (100%) rename assets/js/{55671c81.1696261a.js => 55671c81.cfcb2123.js} (100%) rename assets/js/{557.18d5674d.js => 557.4ca44bd5.js} (100%) rename assets/js/{5591dbb5.8a858900.js => 5591dbb5.08d5ae51.js} (100%) rename assets/js/{55c5045f.83e34703.js => 55c5045f.66d4b307.js} (100%) rename assets/js/{55f40575.3f992557.js => 55f40575.0be17da0.js} (100%) rename assets/js/{56845d16.49a56796.js => 56845d16.b8f0899c.js} (100%) rename assets/js/{570f2039.22d0c210.js => 570f2039.ec16120d.js} (100%) rename assets/js/{57a388cd.9e9a6b0e.js => 57a388cd.9a89292e.js} (100%) rename assets/js/{581e4720.83733738.js => 581e4720.d15f3640.js} (100%) rename assets/js/{596f251d.fc11a1da.js => 596f251d.c85af4e7.js} (100%) rename assets/js/{59f5955d.066991f9.js => 59f5955d.786ec4ec.js} (100%) rename assets/js/{5ad5f28b.4711c0f3.js => 5ad5f28b.181dc8ea.js} (100%) rename assets/js/{5aeb685e.d0fbe632.js => 5aeb685e.2ecf93e3.js} (100%) rename assets/js/{5b706e4b.bbb6de1e.js => 5b706e4b.2f98f873.js} (100%) rename assets/js/{5c07861d.8f52e3b9.js => 5c07861d.513569b4.js} (100%) rename assets/js/{5cdb87ed.43b6e3d7.js => 5cdb87ed.6f7aa93d.js} (100%) rename assets/js/{5db053d3.ede42421.js => 5db053d3.52fff96c.js} (100%) rename assets/js/{5e36bea9.74a41d4c.js => 5e36bea9.ed8b2a34.js} (100%) rename assets/js/{5e716ae9.9f72f20c.js => 5e716ae9.7078191f.js} (100%) rename assets/js/{5ebcd5d2.772c5a96.js => 5ebcd5d2.6993a83b.js} (100%) rename assets/js/{5f1a894f.50e1172f.js => 5f1a894f.2bfa9ede.js} (100%) rename assets/js/{5f57d2d2.2db45bca.js => 5f57d2d2.5212ee9d.js} (100%) rename assets/js/{5f8b000f.431b6b12.js => 5f8b000f.085e43f4.js} (100%) rename assets/js/{5f9a6bc5.d6708d2b.js => 5f9a6bc5.228e7f78.js} (100%) rename assets/js/{60cae097.6775ee38.js => 60cae097.c6bf2012.js} (100%) rename assets/js/{60e856fd.47e6f86f.js => 60e856fd.205d19a0.js} (100%) rename assets/js/{614d5726.15dcec86.js => 614d5726.6724c6cb.js} (100%) rename assets/js/{61a162a2.0d3e6973.js => 61a162a2.71ade98b.js} (100%) rename assets/js/{61b7a2d8.d2b48f67.js => 61b7a2d8.44067845.js} (100%) rename assets/js/{62851422.85fb51da.js => 62851422.726fcad3.js} (100%) rename assets/js/{628cd644.df4e85b3.js => 628cd644.b6617acc.js} (100%) rename assets/js/{62dfd26a.4974f68e.js => 62dfd26a.047a2875.js} (100%) rename assets/js/{6314e686.2dd075cf.js => 6314e686.51747faa.js} (100%) rename assets/js/{633054aa.e343b69d.js => 633054aa.01653b1d.js} (100%) rename assets/js/{63b7161b.cb4345b0.js => 63b7161b.7036d7f1.js} (100%) rename assets/js/{6443e343.e12e97ce.js => 6443e343.e1db0e1a.js} (100%) rename assets/js/{64b524e9.16990186.js => 64b524e9.e2b31e7e.js} (100%) rename assets/js/{65ee8ae4.3c959999.js => 65ee8ae4.5362aeae.js} (100%) rename assets/js/{67246f5a.b910231c.js => 67246f5a.0404fe1b.js} (100%) rename assets/js/{67505168.3efd1af0.js => 67505168.9c59145b.js} (100%) rename assets/js/{67b33350.acc6474a.js => 67b33350.14902cc7.js} (100%) rename assets/js/{67d24e69.fc7ce31b.js => 67d24e69.d7f3ce48.js} (100%) rename assets/js/{686ece5a.13de5707.js => 686ece5a.39a490b7.js} (100%) rename assets/js/{68c97b35.eb2ae974.js => 68c97b35.738ab2c3.js} (100%) rename assets/js/{68e92148.aeb2e4bb.js => 68e92148.c7bf89a4.js} (100%) rename assets/js/{6928e096.bcdde1e8.js => 6928e096.239533f7.js} (100%) rename assets/js/{69bda1fb.1302c613.js => 69bda1fb.4442e97c.js} (100%) rename assets/js/{6af19526.cd40c809.js => 6af19526.ec56a82f.js} (100%) rename assets/js/{6b713b47.a40539fe.js => 6b713b47.1de274ec.js} (100%) rename assets/js/{6bd8488f.5d5e3151.js => 6bd8488f.cd951895.js} (100%) rename assets/js/{6c4025a1.95e56040.js => 6c4025a1.4aad6ec6.js} (100%) rename assets/js/{6c57f576.e0142295.js => 6c57f576.e5437d07.js} (100%) rename assets/js/{6cb6f1fd.6630359e.js => 6cb6f1fd.37ff3c85.js} (100%) rename assets/js/{6cff0fac.816c42cc.js => 6cff0fac.5f30ab69.js} (100%) rename assets/js/{6db0eab6.3b2739cf.js => 6db0eab6.c206d920.js} (100%) rename assets/js/{6e560846.3e0cccff.js => 6e560846.1db94dad.js} (100%) rename assets/js/{6e57f868.d9e0ce27.js => 6e57f868.549eaf68.js} (100%) rename assets/js/{6e59b9bc.28ea3e2a.js => 6e59b9bc.4c6d4d33.js} (100%) rename assets/js/{6f0558fb.6a20714a.js => 6f0558fb.0b190588.js} (100%) rename assets/js/{6f7d33a4.6a8d0955.js => 6f7d33a4.f187091c.js} (100%) rename assets/js/{70ed012e.b8a68977.js => 70ed012e.f51b52cc.js} (100%) rename assets/js/{70f656fe.84de9052.js => 70f656fe.62ce6637.js} (100%) rename assets/js/{71056d45.89a98a43.js => 71056d45.2d1d9ed9.js} (100%) rename assets/js/{710f1fb8.2d29c1a5.js => 710f1fb8.14da69cd.js} (100%) rename assets/js/{71e954ff.3a3dcf7f.js => 71e954ff.11cf7f6a.js} (100%) rename assets/js/{71eeb0e0.af184b70.js => 71eeb0e0.eeb707a3.js} (100%) rename assets/js/{71f6628b.1d9d50fd.js => 71f6628b.d46773ac.js} (100%) rename assets/js/{722925cc.408b8736.js => 722925cc.8793b306.js} (100%) rename assets/js/{724a65ab.207f7144.js => 724a65ab.22054382.js} (100%) rename assets/js/{72991a83.50ef73f4.js => 72991a83.8e1cf88a.js} (100%) rename assets/js/{7337198d.1d86688f.js => 7337198d.9a8ab994.js} (100%) rename assets/js/{733afe39.cfa248e0.js => 733afe39.bd069fbf.js} (100%) rename assets/js/{733b44b2.854e5dc3.js => 733b44b2.dad96a2b.js} (100%) rename assets/js/{737e874d.01a64ef1.js => 737e874d.543ed28e.js} (100%) rename assets/js/{745e1426.ef526c8e.js => 745e1426.32ea0dc7.js} (100%) rename assets/js/{75e4e133.62578949.js => 75e4e133.05f0d4e8.js} (100%) rename assets/js/{765f58ca.c971728d.js => 765f58ca.c001d239.js} (100%) rename assets/js/{7695e191.19b6a2d7.js => 7695e191.b4aee299.js} (100%) rename assets/js/{76cc1cd4.e38e7bbb.js => 76cc1cd4.d641a8df.js} (100%) rename assets/js/{796634c9.0d266bfd.js => 796634c9.8cf99c33.js} (100%) rename assets/js/{796af274.73bd9f5e.js => 796af274.d5a34df9.js} (100%) rename assets/js/{797fb45b.480dbed3.js => 797fb45b.f19ec835.js} (100%) rename assets/js/{79f4c125.d4695e80.js => 79f4c125.a82bb567.js} (100%) rename assets/js/{7a768154.ad1e3f72.js => 7a768154.d3dd91f8.js} (100%) rename assets/js/{7aba8a28.08943ccc.js => 7aba8a28.0b72feb1.js} (100%) rename assets/js/{7b0045c0.936131ad.js => 7b0045c0.284d9139.js} (100%) rename assets/js/{7b0b4d35.b104e1fa.js => 7b0b4d35.07186106.js} (100%) rename assets/js/{7bcc5fb1.5db643f4.js => 7bcc5fb1.893e6021.js} (100%) rename assets/js/{7c23e770.1f6fd456.js => 7c23e770.f6c1cf09.js} (100%) rename assets/js/{7ce7658d.e2792598.js => 7ce7658d.665ad30c.js} (100%) rename assets/js/{7d1b4d68.66f171b1.js => 7d1b4d68.0100675b.js} (100%) rename assets/js/{7e37b14a.11ac39d0.js => 7e37b14a.101e1d85.js} (100%) rename assets/js/{7e5462e7.2b8d1a32.js => 7e5462e7.d62a6bbb.js} (100%) rename assets/js/{7fbdd563.769b6c07.js => 7fbdd563.906c968e.js} (100%) rename assets/js/{805c86b6.d5520fac.js => 805c86b6.1ce2af26.js} (100%) rename assets/js/{819bd6dd.68bcfbc8.js => 819bd6dd.af34a594.js} (100%) rename assets/js/{82023ef6.7c092bbb.js => 82023ef6.e2f17f17.js} (100%) rename assets/js/{8291813c.8f92fc00.js => 8291813c.d6da063b.js} (100%) rename assets/js/{834b1b34.3a5ece5a.js => 834b1b34.4440c9c4.js} (100%) rename assets/js/{83a912f8.601759f3.js => 83a912f8.021e05db.js} (100%) rename assets/js/{841634ee.309e5aaa.js => 841634ee.c12bc63f.js} (100%) rename assets/js/{845e6efd.a8b2467f.js => 845e6efd.b8b3f9f9.js} (100%) rename assets/js/{846f84ed.bccc70e9.js => 846f84ed.90c03515.js} (100%) rename assets/js/{84fa3108.8b6bcf3f.js => 84fa3108.23a683e0.js} (100%) rename assets/js/{8541c64a.10490cf6.js => 8541c64a.77ceed78.js} (100%) rename assets/js/{858297e5.9cff2905.js => 858297e5.9fd13792.js} (100%) rename assets/js/{85e160d3.bf9cdf61.js => 85e160d3.d18af7a1.js} (100%) rename assets/js/{87db15d5.a5f2d4e9.js => 87db15d5.17874dfa.js} (100%) rename assets/js/{88aeac7e.cc3fef8f.js => 88aeac7e.7b512b83.js} (100%) rename assets/js/{8a2191c9.85e8398f.js => 8a2191c9.b77f2e1b.js} (100%) rename assets/js/{8a3423d8.03bbad7f.js => 8a3423d8.4180d836.js} (100%) rename assets/js/{8a425469.a7f9793e.js => 8a425469.91c68e50.js} (100%) rename assets/js/{8a6fa54b.d57877c1.js => 8a6fa54b.c55cc043.js} (100%) rename assets/js/{8b004f25.c8300abc.js => 8b004f25.cbd1daab.js} (100%) rename assets/js/{8bcfbda9.ad5c1914.js => 8bcfbda9.7d6abbd2.js} (100%) rename assets/js/{8cc6dc47.3c8bbc1b.js => 8cc6dc47.e3c19f2a.js} (100%) rename assets/js/{8dc6a573.b2f6e26f.js => 8dc6a573.ae6aea00.js} (100%) rename assets/js/{8e316003.aa41154b.js => 8e316003.a39389f6.js} (100%) rename assets/js/{8fcfcbe4.5fd3fd6b.js => 8fcfcbe4.3662f590.js} (100%) rename assets/js/{9258ad63.7a0ba271.js => 9258ad63.1ccd1ee8.js} (100%) rename assets/js/{927c8cb1.087a137b.js => 927c8cb1.cadc3a23.js} (100%) rename assets/js/{92d57007.90b60814.js => 92d57007.972fd129.js} (100%) rename assets/js/{92f4c895.f44b62d1.js => 92f4c895.70227b86.js} (100%) rename assets/js/{93011a86.5734fb3a.js => 93011a86.97e5ffcb.js} (100%) rename assets/js/{9308bd2a.790f3d80.js => 9308bd2a.03fa838d.js} (100%) rename assets/js/{93298ec8.3d58fd2d.js => 93298ec8.926da05a.js} (100%) rename assets/js/{935f2afb.a71d4820.js => 935f2afb.dd000f3a.js} (100%) rename assets/js/{936799cc.a79edc84.js => 936799cc.9bc9ea77.js} (100%) rename assets/js/{936803e8.6cfebb36.js => 936803e8.9407d3f5.js} (100%) rename assets/js/{93710a9c.3f3bdf3a.js => 93710a9c.41221962.js} (100%) rename assets/js/{93923fbf.af8d1dca.js => 93923fbf.4aed0602.js} (100%) rename assets/js/{944dcb7a.17f076fd.js => 944dcb7a.a1adbd3f.js} (100%) rename assets/js/{94d3795c.6a22c2d4.js => 94d3795c.be91d56c.js} (100%) rename assets/js/{9506a041.119f3c94.js => 9506a041.8a906999.js} (100%) rename assets/js/{95a27607.a3b824c7.js => 95a27607.8965ef49.js} (100%) rename assets/js/{96528293.91ecfd26.js => 96528293.6cef076f.js} (100%) rename assets/js/{96dc5664.a95edaff.js => 96dc5664.dbfcf8d5.js} (100%) rename assets/js/{96e43b42.33016623.js => 96e43b42.e2d6eec2.js} (100%) rename assets/js/{970e6d70.1a61d1ec.js => 970e6d70.c39ccd5e.js} (100%) rename assets/js/{9753faba.8c7db914.js => 9753faba.7dcaac49.js} (100%) rename assets/js/{979c6429.826cc644.js => 979c6429.82ded961.js} (100%) rename assets/js/{9848e2c7.7921ed09.js => 9848e2c7.b5e84a82.js} (100%) rename assets/js/{98ca2ed8.c9f6f7e2.js => 98ca2ed8.fe0cf4a1.js} (100%) rename assets/js/{98d54e16.e9f3533f.js => 98d54e16.32d0683e.js} (100%) rename assets/js/{994993c6.bff47442.js => 994993c6.3101ffac.js} (100%) rename assets/js/{995a79a6.3237f4b3.js => 995a79a6.fc54b3a8.js} (100%) rename assets/js/{99d058c7.4a56eab1.js => 99d058c7.82ee9efc.js} (100%) rename assets/js/{9a1d62bb.02d81693.js => 9a1d62bb.38e9b459.js} (100%) rename assets/js/{9a961523.9429fd3b.js => 9a961523.e693d23b.js} (100%) rename assets/js/{9af69400.ca16d11c.js => 9af69400.84a09307.js} (100%) rename assets/js/{9b17d7b9.039b1229.js => 9b17d7b9.ad18394a.js} (100%) rename assets/js/{9b23e258.41885fcf.js => 9b23e258.8bb65e3c.js} (100%) rename assets/js/{9c09aad4.3d3c36a3.js => 9c09aad4.bbd87b29.js} (100%) rename assets/js/{9c24692c.887dfa5c.js => 9c24692c.8f807bdd.js} (100%) rename assets/js/{9c28178f.7075e9fe.js => 9c28178f.4e3c54e4.js} (100%) rename assets/js/{9d1c590d.ba7c1c1e.js => 9d1c590d.94c79f9f.js} (100%) rename assets/js/{9d2aa5af.425bad04.js => 9d2aa5af.df0c65fc.js} (100%) rename assets/js/{9d9742d5.106e2325.js => 9d9742d5.a38b7781.js} (100%) rename assets/js/{9dab56b4.62607c3a.js => 9dab56b4.1dbb201c.js} (100%) rename assets/js/{9dbc2d3e.17b57951.js => 9dbc2d3e.a97914c2.js} (100%) rename assets/js/{9e2dc38c.5b72710e.js => 9e2dc38c.043d1953.js} (100%) rename assets/js/{9e5670e9.8df6a17a.js => 9e5670e9.d3cfdddf.js} (100%) rename assets/js/{9fc72eed.2d88cd02.js => 9fc72eed.f8d04078.js} (100%) rename assets/js/{9fe53ea0.dc37308d.js => 9fe53ea0.ed9f004f.js} (100%) rename assets/js/{a0417692.8808069c.js => a0417692.c26f015d.js} (100%) rename assets/js/{a0f7a70e.dec341f2.js => a0f7a70e.25afae36.js} (100%) rename assets/js/{a176cfd4.16698138.js => a176cfd4.8a7eb354.js} (100%) rename assets/js/{a199a65b.5cd5ec4c.js => a199a65b.425c9e58.js} (100%) rename assets/js/{a26227d1.7ce812c4.js => a26227d1.3156c160.js} (100%) rename assets/js/{a271911a.7407cdb7.js => a271911a.601b16a3.js} (100%) rename assets/js/{a29dd78e.4782a0c0.js => a29dd78e.610f804c.js} (100%) rename assets/js/{a33aee09.f8bb41e9.js => a33aee09.b048b922.js} (100%) rename assets/js/{a39e3a9c.0aac7cb2.js => a39e3a9c.ab8f5473.js} (100%) rename assets/js/{a45819f0.d0c1b279.js => a45819f0.546b099c.js} (100%) rename assets/js/{a489e737.104a163a.js => a489e737.d04b570a.js} (100%) rename assets/js/{a5202fb3.61e014f0.js => a5202fb3.86c614f4.js} (100%) rename assets/js/{a55e9ae3.e62dd267.js => a55e9ae3.5bf096fc.js} (100%) rename assets/js/{a5b7f128.5901eeb2.js => a5b7f128.3320a5fc.js} (100%) rename assets/js/{a5e9e7a1.09f6a06a.js => a5e9e7a1.b2e22c9f.js} (100%) rename assets/js/{a63f633b.2fac5df8.js => a63f633b.8b58bc2a.js} (100%) rename assets/js/{a6946925.638dfdec.js => a6946925.043ceeca.js} (100%) rename assets/js/{a81f1977.2ca84b17.js => a81f1977.814c48a8.js} (100%) rename assets/js/{a8a1de49.15ceb938.js => a8a1de49.45ad518a.js} (100%) rename assets/js/{a9f1bf2b.e0351d8e.js => a9f1bf2b.05f49c31.js} (100%) rename assets/js/{ab1e3150.9c58221e.js => ab1e3150.a871429d.js} (100%) rename assets/js/{ab5f391a.c706c921.js => ab5f391a.a76a79c2.js} (100%) rename assets/js/{ab9b2b08.0189e217.js => ab9b2b08.b4b1bc6c.js} (100%) rename assets/js/{abdfbd6b.8b5b3d31.js => abdfbd6b.8d000702.js} (100%) rename assets/js/{ac259749.65238a07.js => ac259749.449c66a6.js} (100%) rename assets/js/{ad0e8a11.5d5c7a94.js => ad0e8a11.f3536de7.js} (100%) rename assets/js/{adafd01a.553d1d7c.js => adafd01a.c20c6fb1.js} (100%) rename assets/js/{adcea6f3.e1785bef.js => adcea6f3.a039245d.js} (100%) rename assets/js/{adda2092.e46f177a.js => adda2092.50a7cc5b.js} (100%) rename assets/js/{adee7fac.82c11dd2.js => adee7fac.3baeb5ad.js} (100%) rename assets/js/{ae012ad6.3926856a.js => ae012ad6.6fe16a5d.js} (100%) rename assets/js/{af0d6317.79fa9f38.js => af0d6317.76ab411e.js} (100%) rename assets/js/{af1c1b4c.f67af5fa.js => af1c1b4c.a0294f47.js} (100%) rename assets/js/{af595eb3.e75dd81d.js => af595eb3.842b7319.js} (100%) rename assets/js/{afe98dc1.222d2065.js => afe98dc1.6f79b7f2.js} (100%) rename assets/js/{b0fae788.d29c65f6.js => b0fae788.6f882feb.js} (100%) rename assets/js/{b210f538.a1c8f31e.js => b210f538.a0ee22a7.js} (100%) rename assets/js/{b2ae0418.e6a22290.js => b2ae0418.b534e97b.js} (100%) rename assets/js/{b2b6acd7.bb42719b.js => b2b6acd7.bbac80b5.js} (100%) rename assets/js/{b2f0342a.8add7127.js => b2f0342a.b355d21e.js} (100%) rename assets/js/{b3eaef05.a4b71d5b.js => b3eaef05.8412ef54.js} (100%) rename assets/js/{b459db2c.d78aec7f.js => b459db2c.19f2bd38.js} (100%) rename assets/js/{b4d5a2f6.a6d05ec9.js => b4d5a2f6.f5816246.js} (100%) rename assets/js/{b4e3226a.02cea9d6.js => b4e3226a.bc523c07.js} (100%) rename assets/js/{b555335c.dc20ce03.js => b555335c.e7dc13c7.js} (100%) rename assets/js/{b626e4a0.5b3dae7b.js => b626e4a0.f81f9112.js} (100%) rename assets/js/{b6543ad7.2b634dae.js => b6543ad7.9d025675.js} (100%) rename assets/js/{b7589f11.96035c9b.js => b7589f11.82299892.js} (100%) rename assets/js/{b80ed113.f73ca3ae.js => b80ed113.259f81c1.js} (100%) rename assets/js/{b9e53938.09660dbe.js => b9e53938.eb4b1ad8.js} (100%) rename assets/js/{ba486bac.0962b437.js => ba486bac.650b3845.js} (100%) rename assets/js/{bab816a3.31e93539.js => bab816a3.87a855e0.js} (100%) rename assets/js/{bae20a2e.95c21ddb.js => bae20a2e.02f6dd33.js} (100%) rename assets/js/{bb568c08.86c2de43.js => bb568c08.f27a3117.js} (100%) rename assets/js/{bb73c9a4.696586ec.js => bb73c9a4.93e91590.js} (100%) rename assets/js/{bbd3cca1.60ae92d7.js => bbd3cca1.aef6a8ed.js} (100%) rename assets/js/{bcedb369.15458a6f.js => bcedb369.cdf7eea2.js} (100%) rename assets/js/{bcf8cc4a.de396c4b.js => bcf8cc4a.d38e4e70.js} (100%) rename assets/js/{bd4b2066.db770a28.js => bd4b2066.fd0225e8.js} (100%) rename assets/js/{bda3d396.b363b27d.js => bda3d396.5edf335f.js} (100%) rename assets/js/{bdc7dfef.28a7f679.js => bdc7dfef.3edacb5c.js} (100%) rename assets/js/{be39e40f.e28d47a6.js => be39e40f.457d3ab7.js} (100%) rename assets/js/{be52a7d3.beb68eab.js => be52a7d3.788a84fa.js} (100%) rename assets/js/{be5d235e.6cd4c19e.js => be5d235e.a3464337.js} (100%) rename assets/js/{be7ecf1a.2e12f385.js => be7ecf1a.14d7c437.js} (100%) rename assets/js/{beace3d7.0b38e322.js => beace3d7.7d42e1eb.js} (100%) rename assets/js/{befa7391.4023b8a0.js => befa7391.0d06d447.js} (100%) rename assets/js/{c0bc635a.39a9f0ef.js => c0bc635a.9fb0423d.js} (100%) rename assets/js/{c0d4081e.ddabdf43.js => c0d4081e.e493fe8b.js} (100%) rename assets/js/{c18f4942.5ba5117d.js => c18f4942.8bc2228b.js} (100%) rename assets/js/{c1bcd62e.d76f0676.js => c1bcd62e.9b7d677e.js} (100%) rename assets/js/{c1f9e30a.3ca553fa.js => c1f9e30a.1bed24c9.js} (100%) rename assets/js/{c213d637.6ec3e784.js => c213d637.d0e59b97.js} (100%) rename assets/js/{c2bb1329.39673696.js => c2bb1329.57d407f6.js} (100%) rename assets/js/{c4c17032.0e7e6c6c.js => c4c17032.8426facc.js} (100%) rename assets/js/{c4ef2964.39d072c2.js => c4ef2964.74fabd11.js} (100%) rename assets/js/{c4f5d8e4.32b0fbe2.js => c4f5d8e4.96ed4b1c.js} (100%) rename assets/js/{c5e7f3af.6772d889.js => c5e7f3af.ad8d8a9c.js} (100%) rename assets/js/{c6720e67.b58be073.js => c6720e67.c3424972.js} (100%) rename assets/js/{c6eceeae.208cda4c.js => c6eceeae.519f125e.js} (100%) rename assets/js/{c74d9e4e.09e284f7.js => c74d9e4e.d40f58b3.js} (100%) rename assets/js/{c7608fc7.08b30d57.js => c7608fc7.c240f7a8.js} (100%) rename assets/js/{c783b066.f3277716.js => c783b066.b7c51c91.js} (100%) rename assets/js/{c7d17e4b.79027534.js => c7d17e4b.16eec067.js} (100%) rename assets/js/{c811aa7f.8bb8b76b.js => c811aa7f.e0f03d23.js} (100%) rename assets/js/{c82555e2.cb670667.js => c82555e2.61a9e50c.js} (100%) rename assets/js/{c9f1df9f.21f69ae5.js => c9f1df9f.8bc4d21a.js} (100%) rename assets/js/{ca195e88.b38b3264.js => ca195e88.77f93795.js} (100%) rename assets/js/{ca9eeb9f.fc3c9fb4.js => ca9eeb9f.e9b60657.js} (100%) rename assets/js/{cad7ffaf.57008bbd.js => cad7ffaf.f4fc657a.js} (100%) rename assets/js/{cb66a971.aef49918.js => cb66a971.363c2b62.js} (100%) rename assets/js/{cbb11013.2e893fa9.js => cbb11013.a80337b1.js} (100%) rename assets/js/{cbdf4c0b.104dd278.js => cbdf4c0b.a2f083eb.js} (100%) rename assets/js/{cc3e32ef.4e32dd56.js => cc3e32ef.ab152464.js} (100%) rename assets/js/{ccef7f5b.c2c4690d.js => ccef7f5b.74088521.js} (100%) rename assets/js/{cd443648.29be0867.js => cd443648.ee8bbc8a.js} (100%) rename assets/js/{cd907f23.6f32b33b.js => cd907f23.45b3f3ce.js} (100%) rename assets/js/{cdb38c9b.f1a33d49.js => cdb38c9b.e4356878.js} (100%) rename assets/js/{ce91c8e6.c41a88bb.js => ce91c8e6.cf97113c.js} (100%) rename assets/js/{cf4a34bd.27fa8625.js => cf4a34bd.faeead3f.js} (100%) rename assets/js/{cf8c7470.01b4b191.js => cf8c7470.970f8384.js} (100%) rename assets/js/{d0a7834c.42dfb131.js => d0a7834c.a38b4967.js} (100%) rename assets/js/{d1167098.b93b1aae.js => d1167098.3072182b.js} (100%) rename assets/js/{d12ff093.bcb46f87.js => d12ff093.ee2a26bb.js} (100%) rename assets/js/{d14d5dce.20d22983.js => d14d5dce.0e7fe3fe.js} (100%) rename assets/js/{d2477c27.a0ec1b0e.js => d2477c27.16619108.js} (100%) rename assets/js/{d311eeaf.f0f56d52.js => d311eeaf.166569c6.js} (100%) rename assets/js/{d320f50b.6de93987.js => d320f50b.0a470227.js} (100%) rename assets/js/{d324dc66.01f05377.js => d324dc66.f0bc0000.js} (100%) rename assets/js/{d37d7f17.93ed6e74.js => d37d7f17.17794289.js} (100%) rename assets/js/{d3a04b7a.d9ddfa7d.js => d3a04b7a.f40d173f.js} (100%) rename assets/js/{d460217b.453fc825.js => d460217b.c728ec33.js} (100%) rename assets/js/{d648f144.a78c46f3.js => d648f144.de48a12e.js} (100%) rename assets/js/{d64ca407.8f8af95e.js => d64ca407.dd9abdfa.js} (100%) rename assets/js/{d6c09953.f62cb74a.js => d6c09953.5ea7556f.js} (100%) rename assets/js/{d73fea11.0d573265.js => d73fea11.22dcb3fd.js} (100%) rename assets/js/{d85c8cd6.0e20714d.js => d85c8cd6.f83aba48.js} (100%) rename assets/js/{d8b1ec13.f7e95192.js => d8b1ec13.0114c465.js} (100%) rename assets/js/{d8c3d873.53e101eb.js => d8c3d873.d05c428a.js} (100%) rename assets/js/{d91c45f5.017da7cd.js => d91c45f5.46f93fba.js} (100%) rename assets/js/{da0151db.102421d5.js => da0151db.bdb4565f.js} (100%) rename assets/js/{da63f618.5ee6e032.js => da63f618.985fac08.js} (100%) rename assets/js/{daad9ff9.373dec35.js => daad9ff9.524220f4.js} (100%) rename assets/js/{dac962c5.14b8112d.js => dac962c5.3b37b5ad.js} (100%) rename assets/js/{db35c4c8.9af7eb8e.js => db35c4c8.d34ee3c9.js} (100%) rename assets/js/{db40a197.ee0db7b1.js => db40a197.4e2dffa1.js} (100%) rename assets/js/{db9aebef.be147ae3.js => db9aebef.e9cfa80c.js} (100%) rename assets/js/{dfb780e2.e28041fc.js => dfb780e2.60ff12e7.js} (100%) rename assets/js/{e0945e2f.e3649aee.js => e0945e2f.89af6fcd.js} (100%) rename assets/js/{e1411089.d2bc3504.js => e1411089.3c43d8f7.js} (100%) rename assets/js/{e181c7c7.3df5dc29.js => e181c7c7.a11eb3df.js} (100%) rename assets/js/{e2968c94.977c6f73.js => e2968c94.6b119c01.js} (100%) rename assets/js/{e378c0f5.7c7dfcc1.js => e378c0f5.32c5c5ff.js} (100%) rename assets/js/{e40d76ff.e73f93ea.js => e40d76ff.9b9f2f3b.js} (100%) rename assets/js/{e44baca5.327953b6.js => e44baca5.bcf1da4b.js} (100%) rename assets/js/{e47f129a.bb01ea7c.js => e47f129a.e3f88657.js} (100%) rename assets/js/{e4976f82.77a153f1.js => e4976f82.37dbe207.js} (100%) rename assets/js/{e4b98d56.9c21a0e0.js => e4b98d56.4482f968.js} (100%) rename assets/js/{e4fc6f88.0e281ead.js => e4fc6f88.054f3015.js} (100%) rename assets/js/{e50dbd59.7a058f2e.js => e50dbd59.ef31087b.js} (100%) rename assets/js/{e53314b3.542f386b.js => e53314b3.4d66216b.js} (100%) rename assets/js/{e53b1169.c4a702fd.js => e53b1169.a4ecc61b.js} (100%) rename assets/js/{e549d204.2bee4099.js => e549d204.7893753f.js} (100%) rename assets/js/{e56a5f3e.363ebf91.js => e56a5f3e.6d853965.js} (100%) rename assets/js/{e578e1c1.8db7e150.js => e578e1c1.b22f5faf.js} (100%) rename assets/js/{e623212a.fbb9cc5e.js => e623212a.381d04d5.js} (100%) rename assets/js/{e6b615c7.a4ed3143.js => e6b615c7.d1a198d4.js} (100%) rename assets/js/{e78a2122.398a30c5.js => e78a2122.26f3623e.js} (100%) rename assets/js/{e7f51ecb.5a56eff5.js => e7f51ecb.8962f3ed.js} (100%) rename assets/js/{e9e4cc90.96d7d582.js => e9e4cc90.a6bb9f1b.js} (100%) rename assets/js/{ea0eeea3.53022e2d.js => ea0eeea3.555bae08.js} (100%) rename assets/js/{eab0d811.77718e5d.js => eab0d811.c7621329.js} (100%) rename assets/js/{eab8af53.38113368.js => eab8af53.20b14131.js} (100%) rename assets/js/{eade11f2.09fcbb0c.js => eade11f2.feff4e46.js} (100%) rename assets/js/{eaf4c34d.c210d030.js => eaf4c34d.71e1f0fd.js} (100%) rename assets/js/{eb547e60.7dd5d89c.js => eb547e60.50531564.js} (100%) rename assets/js/{ebb622c4.b4826555.js => ebb622c4.4ccdb0e6.js} (100%) rename assets/js/{ec69c133.14f7173d.js => ec69c133.3782382c.js} (100%) rename assets/js/{ed3cdc07.d65d856c.js => ed3cdc07.4d4fa5fb.js} (100%) rename assets/js/{edfd899f.0060d831.js => edfd899f.de18242c.js} (100%) rename assets/js/{ee1c428b.92dd16e9.js => ee1c428b.3adfcbc4.js} (100%) rename assets/js/{eea3c882.9416f2d9.js => eea3c882.dc5cc6b0.js} (100%) rename assets/js/{ef9854ec.32591a9d.js => ef9854ec.fefb65d5.js} (100%) rename assets/js/{efe8a79b.c7e5cf70.js => efe8a79b.fa128f9b.js} (100%) rename assets/js/{f01ffb6e.1f4098d1.js => f01ffb6e.43212ade.js} (100%) rename assets/js/{f03823fb.9e7aa272.js => f03823fb.4ba07fdf.js} (100%) rename assets/js/{f074aa7c.0b12e6a9.js => f074aa7c.bd9c7ea0.js} (100%) rename assets/js/{f13220bc.cc59a389.js => f13220bc.e9386aee.js} (100%) rename assets/js/{f1ae5025.e617df84.js => f1ae5025.15045e43.js} (100%) rename assets/js/{f1f320f4.d6606a2d.js => f1f320f4.911ba8a5.js} (100%) rename assets/js/{f288d75b.6ca1136c.js => f288d75b.626660f3.js} (100%) rename assets/js/{f31d0f82.52393f4d.js => f31d0f82.c0a4a2b4.js} (100%) rename assets/js/{f3b225f5.33e7d841.js => f3b225f5.ce684c39.js} (100%) rename assets/js/{f41020a8.e4fe82b8.js => f41020a8.b3d636b1.js} (100%) rename assets/js/{f426c772.398404f6.js => f426c772.09247914.js} (100%) rename assets/js/{f501240f.f2740b42.js => f501240f.17a038a2.js} (100%) rename assets/js/{f5ebfb03.33f7eb1a.js => f5ebfb03.fea60696.js} (100%) rename assets/js/{f657dcbe.eef0b6e2.js => f657dcbe.0736759d.js} (100%) rename assets/js/{f67b2e96.0a83047d.js => f67b2e96.58f2ea39.js} (100%) rename assets/js/{f7b7b097.3a360eb8.js => f7b7b097.19f5b67a.js} (100%) rename assets/js/{f8372c68.bf09c0e3.js => f8372c68.0f79ebf2.js} (100%) rename assets/js/{f88e3eac.879c2f06.js => f88e3eac.37ba2c78.js} (100%) rename assets/js/{f9153133.92ba9a13.js => f9153133.190cf32c.js} (100%) rename assets/js/{f982c8aa.9d146c14.js => f982c8aa.e760febe.js} (100%) rename assets/js/{f99337df.5388f247.js => f99337df.20d9a3f4.js} (100%) rename assets/js/{fa3f8c77.b640db01.js => fa3f8c77.81c4c560.js} (100%) rename assets/js/{faf4c33d.b1b446ef.js => faf4c33d.9b0e50dd.js} (100%) rename assets/js/{fb19c5cf.3a95b7ae.js => fb19c5cf.74191882.js} (100%) rename assets/js/{fb88c6dd.aa7e4a45.js => fb88c6dd.61a4fbdc.js} (100%) rename assets/js/{fb9288fc.919a1a02.js => fb9288fc.5ed8f0be.js} (100%) rename assets/js/{fbbf3453.ad698353.js => fbbf3453.a9041cf1.js} (100%) rename assets/js/{fc545d88.567b1cc3.js => fc545d88.7a5f78b1.js} (100%) rename assets/js/{fcc3e544.3b2344f4.js => fcc3e544.a402d458.js} (100%) rename assets/js/{fceb1eb4.828af532.js => fceb1eb4.86ddac18.js} (100%) rename assets/js/{fd46dfbe.dea46851.js => fd46dfbe.aa778832.js} (100%) rename assets/js/{fd5ab4b0.90bc39a6.js => fd5ab4b0.862d4305.js} (100%) rename assets/js/{fd8c2799.ddcf13ce.js => fd8c2799.30f6e49a.js} (100%) rename assets/js/{fdee7c0b.1ccb9204.js => fdee7c0b.23e7d577.js} (100%) rename assets/js/{fea67c26.245d2408.js => fea67c26.a320f249.js} (100%) rename assets/js/{fec30dd7.7141e5c7.js => fec30dd7.24251431.js} (100%) rename assets/js/{fefe1fde.3c8424e2.js => fefe1fde.4af61eb9.js} (100%) rename assets/js/{ffcf8c10.6f74150f.js => ffcf8c10.84fafb31.js} (100%) rename assets/js/{main.2f2285b9.js => main.75363ba5.js} (99%) rename assets/js/{main.2f2285b9.js.LICENSE.txt => main.75363ba5.js.LICENSE.txt} (100%) rename assets/js/{runtime~main.ece7b6fa.js => runtime~main.22f4314c.js} (63%) rename assets/js/{styles.11bf9c0d.js => styles.222b8810.js} (100%) diff --git a/404.html b/404.html index f30a40e91c5..1d2b22406ed 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 dd4fd767f11..f831f4bcfc6 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 f15e27fc4e3..b3795f45b7c 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 7bbcd8c2a68..6efa59e1772 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 3835ba5bdfb..9252725f0b3 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 07a1a4314ae..a00820019ba 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 31ad665d740..77f6315d50d 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 3ffdaaec72e..236f2c5ec10 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 f2186118928..f193d061652 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 9be36da9ab1..7c5f914aa4d 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 56528702c60..ae7eb0f9c2b 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 0ea98063cf7..f802a979a8d 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 fdd1dfbfe01..84a15351b10 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 5ff9180480c..bc75043d02c 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 953ecc620d7..ee0d9e8b684 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 e21150f7779..2ce6f73ec0e 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 65f8267b4f2..03694ec1f5a 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 52ebd2ec152..71453f8b36d 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 413738a8997..da65c82b321 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 afe9d3194f0..3910f06cc41 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 68b106d232b..4ca93a001c2 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 512c46345f5..750f8b5bec0 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 be50fd97cd9..503e4b4a3ea 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 56ed17e45ce..78a0a4f24fc 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 20dd38dedcf..d93198b0845 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 a4927336073..b2e01fb2499 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 c31c24d7613..927bbe830a7 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 27216ede6bf..51fd44e031a 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 44f3231d79d..18e53d9a1dc 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 064d0f1f496..bee117d80d5 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 962e8858e1b..e2e3e9f0f50 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 e05497d904f..45680ae6a23 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 7602215af28..bd77178feca 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 892f9c48000..a90ecfe7472 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 ed070c26aee..242e3dfe6a6 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 4848e1f5492..a3fff08a591 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 bfa6bf0f3d6..47d08266215 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 aea600a7423..c57c46bc966 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 78294120a69..10c5f604c15 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 e6e620f8a04..5553e1e87f6 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 603c36125f7..53b0ac3890e 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 12940b61065..d588c295452 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 41f443bd4ec..43d358bc241 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 ffe73f0963e..b554a6d5f5e 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 cb6bd8e612f..1319916b357 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 7b0726da358..eb613614b8c 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 8902eb74071..d0c126c298d 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 22a93f1d361..473593323dd 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 ba9786839d4..12b8d67879b 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 9cb5ca99f32..11e4e7a4438 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 23c65f51c16..9008f724aed 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 7b33ea2d7ca..60aaad699c9 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 b1dedba7be9..a00f15138a4 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 47c1a279bb5..9aeb9eee14d 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 f058f062be8..817eab3e761 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 bbdd3f736b1..274bf840afc 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 c67929fbd45..3f18f0916f2 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 14e0456041d..8f354514b92 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 27654f714de..27aed9ce49d 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 e107c6b7f65..b663a9857ab 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 ac5b04d2bec..0e5107ca9f7 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 be562859d4b..3217bb9d43b 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 c169e426f62..a8df1ed5dd1 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 9f8c6b57755..cabf2800bf1 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 4f67f3ba634..10abcd4aa9b 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 0725f09df46..265ab7096e5 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 24d4a1e1db6..ebdf97cefbb 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 aa9f212840b..10b049663b6 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 1a42875d24a..128d7ee61cb 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 339593e993a..41afaed79ae 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 e372ae5aa3a..ae158800e3b 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 783875c0b84..329d4b58cab 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 6cd969ee49c..f678a795650 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 1e7388077a8..38d531d27a7 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 e544e41eb57..e3cc0ec1b5d 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 bef1b596fe1..c55ace85cf0 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 c9894d61615..b7bb55488a9 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 5f6995bde67..d49bd098e39 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 278a987ebc4..b854604cadc 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 d71f1185802..315af22d65c 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 d1bd466c33d..63b3e89a033 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 e52cce997d6..382f9a2734c 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 679ac3f98ec..d0f847379a0 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 dd580534391..6c6325b211d 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 f848302ae67..d5287ae064c 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 d33a5fe2b73..b6dc650713c 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 ce55f9f2d7d..585c186f702 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 3a5181d8b94..56b25d509c4 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 54b502565bd..1f04d3e652f 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 d14affb2e76..6254ee865b7 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 5cf2528ab05..e1117caaf7d 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 c51a7d46b34..2f4e05b228a 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 956942d67d9..8f66f72349c 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 77dab8e1eab..1bfd5168c9d 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 0c2a491f67e..80a53931db3 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 69bd362fcf8..31c34193a23 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 419f76658b1..1fe4b6fc489 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 8704f4fecc8..a99b22819e5 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 e42fd2e3151..09e05d2440a 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 200d7021738..1cec7fc07ce 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 29a16a1db3d..cfb1526a63b 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 2cad935c122..4c87c87351c 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 bc1d5f8e50b..0d397a127d0 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 c60b9ada023..6e3b8b5afb6 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 8a9d6d75c46..7c216ba8e0e 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 1ad2c57c3bb..82a024df8b8 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 2e122cdff18..648e606b669 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 9fafccbc193..131beb82052 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 35dfe19fb7e..4b1a1388d97 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 085d2736458..1934638e0dc 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 c8bf7a2c2e8..3d80a2abbd9 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 a72c73a78a4..dd185f39a30 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 9719fa2065a..d13657e78a3 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 98c041c49de..267639205c6 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 7880b110ac6..87a124aef51 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 fc2e619aef6..ec762949184 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 6a58c46eaed..a8d54d2e7f3 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 667ae8ca017..9e013720ccb 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 28ea0ad2d8a..a1072894126 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 62b8a8e3397..b0ecae767a7 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 2d9f36bbf46..fc696281de1 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 0a32f31c0cf..84b072569bb 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 e19d8016134..03be7ae41a4 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 f5a44ff2bd6..9589e7e4f88 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 b01830b4ba4..ae5eb45d04f 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 0bd117c2cb0..b56d8420e8c 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 149c4d6a8c4..ee8b07aeea1 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 0521e7e5de3..f7ec06e42e3 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 3ea6ab0c348..53f05cb50e0 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 991d5bc5c22..5636860f181 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 71fd658cedf..dd6dfe24382 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 22f7542220e..9dc89551ed4 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 b3da48ba5c8..e0a210f237a 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 78accb8a357..78bd68cdb7b 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 22c5f7f4a90..ed32e5f9979 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 f5130cc3fb0..2853b8f41f5 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 a55a5291dfc..6e19ab9f854 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 9b02f28bebe..b0637692b85 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 e6062b38fff..8b15a788e68 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 ea9ba394c37..ef7cbe7ff6b 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 aaa7b14010c..72ebcc84156 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 2ef9a3bef52..7ba2005d1dd 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 c984ab35f85..826502a4448 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 413d2dc8d8c..bf13add2881 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 ef23d4d5caf..dcc87f60bdb 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 7ba9a718f23..5d8eb836d0f 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 9c28f7fcebe..2dcd60d318f 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 eee8fe9d17f..7ee63b954c7 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 074c16015aa..207d9114faa 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 114232585cb..8e503ed4391 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 b0e6102fb4c..a0a8dad9316 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 f218a69eb7f..d6538f1875d 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 b2896254501..4ad9abf3d13 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 e40f103e705..ec8c4c8e3e2 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 5b4c44e811e..f63a4dfa589 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 56cac19c98b..5dee45c11f6 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 160164351b2..499bb246013 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 c90daf10f48..684a3fc5bb7 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 6a05eb091a2..8e6deb78295 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 8fce0b6c410..8155b6f9e90 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 868cdf2d783..725d8e8a796 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 dac0b12d28b..9b1bba884b2 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 0343e9a2fb4..b6b5b890001 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 9f7d390ac50..4af28ca61ae 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 60c4dae399f..e2a88473c6e 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 e6df18203e6..52d1c162a69 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 1d4b52347b0..6cdba379ab6 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 0b10ef5326e..e2b106fb4ce 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 b0942989f3f..0e7d681d91f 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 316d3f8bf6c..785aa548487 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 6ca30e64729..d7151611591 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 d914160ff34..519c41bd310 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 fdc2a4cc552..9af3e016bc2 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 28f963a2016..afed1f6446b 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 1e674b8651f..0ccdc952b81 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 dc55df8e98c..1fd5258a561 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 b2f5013b1f2..a2a13ac0958 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 f1766d5a95d..e789c4d35ed 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 f5ed6a819b9..4bdccafc3e3 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 304a25c9c94..cd51edb0e70 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 75952f89740..9065e57b1ea 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 b2039e2aa0c..48089ee772a 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 df38f6f0aab..bb0f0ca276a 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 5ce1c65108f..09609b27b74 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 03484ffb1d1..62fe792c6a7 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 72f659857b0..9b7c544f032 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 8b6fe6ac72c..a64a37e9624 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 017818d1a82..3bba159545a 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 3c173a776de..ef0e9f636b7 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 10e3fa66adb..d7bc93d46f0 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 56da9536e30..03639333984 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 83ecee670c8..ad4d0d34f9f 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 4e3c896e7af..9bd53a2fab9 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 0507ffd93ab..af306a3fad4 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 8ae7633ff86..8f48193601e 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 391d0c6a2e5..a651e115f55 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 3614b4cac33..4c7ed7a5b62 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 4bf4c3cfd25..772add319c6 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 a22d4b200d6..584a11af853 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 9bfd7f6c59c..2c83e54c935 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 5d46d1dbbc1..31526e2b242 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 8ea5e519aab..557d02a501e 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 6aa07377987..a76cc79cead 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 ba7b088f8c4..e10e5ea3921 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 ded7cfa0fac..3ec4af08327 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 ca1d8e930c3..d3315261da5 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 1cabf61df1e..27219117fde 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 75b85962df6..206275cafd6 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 5b32de9ffb0..b957ff9e785 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 30c975e9a49..6f3e8ebd025 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 b20d0f1cecc..38da2f78f80 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 a0bc056d6b0..bf67cdab65f 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 18897f51137..e8e2cd65daf 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 cb61aeb3f13..7471701b8ad 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 70c59cad5e0..3905e131050 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 ae6bd85b847..260d400f7e3 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 dd5d8bcb0ab..f0ff286f7c5 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 69079a36723..23994b15782 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 57775de2671..e9f6c307e1b 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 ed90529d996..b7073672e61 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 fd1ba9c7f8b..e402f19bb67 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 c1ad8168627..7585e5ead90 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 1d14f3793fc..d8335b2ad3a 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 a4dfe5916f3..aece2e86e0e 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 5f605ec6978..711034b1c7c 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 5a18e312580..11fa313d632 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 280290acf90..ded31241e02 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 da343186ad9..79cfabe9b70 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 52bf61b1301..1a09c5f464a 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 4441852bf4a..91cb0dd7757 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 5ee79141023..9f91a134e36 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 b31a61b77ae..202153e985e 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 4e227615a13..9daf0f1cbab 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 3f2b34c2e72..c94ea0ea8ea 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 f154e7c95b3..133393aae63 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 db921d0708f..bc56758f342 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 5c26a80c8a5..778503e391f 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 69ab4ff0b66..eeb72dd6755 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 e0cedd29e56..53671530a1a 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 f885b37a23f..5a7ffe591fb 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 170375a82cf..0d6c32aae19 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 7c8ba35fb7d..39633d6092b 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 94f1c0e6082..45b07a94ae1 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 c8bec5498ac..0f5d7e4f00e 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 9480ff31d17..b54cc14750a 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 b6a79769069..1bb1cc01a1d 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 8a87868baa3..6506b850565 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 2c878473005..8e064f1caaf 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 461fbaaa01b..88d5902e62a 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 5c68f9d06cb..39b2498263c 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 6eee1e0b6ef..fc2f759bc20 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 5ded26a6c2b..ef5e3e37694 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 7dd31c148f3..22d5119b936 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 49b8a325648..1d501f20179 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 68fc153477c..cf244dc3208 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 11dc1091f29..05af5268361 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 0deec99798d..1532eac48e5 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 fc358705f7e..1212c4c3f47 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 f6b9ff3de4f..a2025de03bd 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 5f94e87f3bb..0d197edf1de 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 65152c8b0ed..ef84be83f24 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 91902f567e5..43286523c32 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 5c5083e619d..ce839954523 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 46d4464bf0d..ae4c9fcdfab 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 943b3fbd139..05e83581f5d 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 fbf5d28a85b..22e79e11215 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 f9cf4a7ce2d..8bdbeff7dbe 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 f66a548bd97..b2c064e1de7 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 2d357a37b42..157d0d74806 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 2235fa9772e..64bed6289ce 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 3392be3265c..305854df54d 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 baa33e2b83f..91824a40829 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 5227afd0ac3..937aa2356e2 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 362623e2246..ac93e1a5a56 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 3d45b4b4dd5..3c61cf84296 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 37682e65858..70b8eb1348e 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 e9ef87be4c3..ab82249bddb 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 63b60bdf109..64b3b3f7353 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 b97f5fba37a..8cad84a1996 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 18d00426cbe..a30f4b60d9e 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 673f9550609..687ac2189cc 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 427ec16e9b0..d257b558584 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 982ba2da393..30d3b776f23 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 f45387e0978..8378d4c0a40 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 a7691fdef1b..fcc82de8371 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 5a092b5947d..ea9f604b88c 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 59a96d1f4f3..5d3c11154ec 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 aae63bc439f..e18f89dc332 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 1c32655e006..2f6c7677c70 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 57c7661dd73..568630cf417 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 92cc3ab861f..43ea36dec58 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 44c3360c7e8..30d252eb2b1 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 51a6ec05e1b..af395ca02ae 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 23e24fc23a7..cc9f6bb9751 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 e6adae2ba38..42e47798fe8 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 a67d6d1760f..50c77711286 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 98d00622487..185ca3e0b20 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 9c1f3bef497..746a74d56d5 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 f4d0f4828f5..cd7841f7b60 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 4e849a35953..019d1f6b793 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 d9156cae4e8..983632be35a 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 10aaf074a9e..ccf901883c0 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 6b158ed3a30..e67bab0619c 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 76b784c6679..2d9751b5079 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 162c8591686..1a5f7cd5710 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 e82937dbcd4..d5e9696b0cd 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 044b1e5f725..8f10d83469f 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 19ed7c35aaf..2de55ad9b17 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 c02a0cb4fc4..5688f3be576 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 5f0c1dc37fd..fc89bdd188c 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 90a9631075b..7900547e698 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 9871a943122..2649c8e7099 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 865076889b7..37b38c515ba 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 e8f20d994ba..c692b77c12a 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 0eae30ff313..b88466e6d22 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 71ddb15cb57..cfd40b00c8e 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 5be36a97fc3..325a47c3e16 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 4643ef28665..28191b3fe31 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 d97426d1527..51b8a4f4c83 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 1191225ef97..a036051d423 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 45f632fba20..0c8c3469b77 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 80f89ca7ac9..a118c9a7127 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 2758a754670..dbea37dd893 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 4420901d622..359da10df76 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 b43647a09eb..71a2ea094cd 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 525f7ac740b..8d52d3abbf2 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 bc753f829dd..51959efe6b5 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 235da60f9a6..f92ba8c9333 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 ecdda2da35c..e717b917ed5 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 cbe92024710..c8583fe83e1 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 2a263cca955..7c46e016f6d 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 bfaec655b39..41aa21f5b96 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 904b23d7f5c..99240c492e7 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 20636be5116..e29f0d4b000 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 820be1c8443..3e7150d9945 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 fa1ab064dce..e3c375a1076 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 9f99731f5ab..09198f79451 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 b09f186db65..5ad70c46564 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 63534887389..940b75d20e7 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 a50ec33e1fe..241789882cd 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 7119040dcac..a9fbc08c993 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 66d70c90399..f02161c9bcf 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 6498774ce51..5e9a7b47161 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 61186ad5f32..d33e7331e50 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 a02ddeb90cf..d8d573b9ee2 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 5634dd5e4c3..ad6356d486c 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 40f8af35bf6..f647477d8e2 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 83736f11868..fb6ded1aaa9 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 de31f83144b..2693c025865 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 3ddb0eb205a..0f1976a172a 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 c4bd6dcafb9..6e3096f0d0b 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 b6b556e7aec..abe2e9361b5 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 aa6a3157f51..4c65fe1ebaf 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 b982ca9597e..247a851309a 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 ad12f6dedfa..cd48a5293d7 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 52dcf4e5c8d..2fc3fba5338 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 7d3f84638bc..0d0be14db14 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 a29925490d1..8e01d848ed0 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 674263a1fa3..298521d74fa 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 60fdebda7d0..9ce253d0b44 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 e944b60e38b..a931e2130f3 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 1d6b423d704..30ae41f2212 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 f98a8ffe0ce..bf0bfe53cff 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 d82f955544e..318bae3379d 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 e385e75d839..5b96d05769d 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 2daa76662c5..bada3cab6a7 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 c1ddbd2abc0..871ef005f0e 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 01567c3ce49..0e7b91d1b7b 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 70d5c5448b0..fd55fe8dd89 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 13b47164b32..e7765bfe090 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 85283c3b285..064c4394777 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 7d7d0c26d02..19ae04e660e 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 362d7a35303..02a6952a00d 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 ec375a06b06..673354af79d 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 8cad00f5883..f61fbd05d29 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 053f5bc5391..a4ff2865663 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 9ad0173244f..9fc1a00cc6d 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 8a509085b3e..7fdfddca9a0 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 4ae31c0ecaa..ebfac04e740 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 3bdc3fced79..b9ede433490 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 6df8de7ac8e..14e2730e570 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 bc9a81df3dd..2e305de57d7 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 bf2000fed4a..15dc4d9e837 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 ca0e6d8f017..f76b931832c 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 73fb95cf4d3..5dbcefa61d4 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 373d4e02912..03e8b815e6e 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 5901e73e232..ba04a0166c3 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 4eb02afbec5..41b135b4c94 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 d79a6b758cb..2d0b7a83379 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 a7387bf8fd7..5fad043c2c8 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 65179c8ba70..cebea94977e 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 51d48a44b11..c2ffc06fe42 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 21e8b99b4bc..1cf43fee9dd 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 9ffbc1e479e..adab6998c21 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 ed467360714..72b125d4f96 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 4b06fa2f714..e4ff614a202 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 f7445bb5724..a5f3be639bc 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 1e25520384c..654ceecc786 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 e95fe766fc0..76a5d341db3 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 4675ce2531f..6e140fa7a5e 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 b69a7fea9da..414ddc52c6d 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 c1d3ce9e072..39ee727168f 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 20c49b84b7d..e10e805e9ba 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 ca8dc61299c..5541c9bc53b 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 b32dc7a2e1c..4e32c7647ab 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 845324069f4..ca197951082 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 283a37d8a11..27c19e469cd 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 586de03eac8..c3a4a1f719d 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 d1594aa95e8..9e6b147ddaf 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 b62a7d7e41a..08f38a92bf5 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 c0a126a7d2a..26e8a7eee02 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 99a200742cc..7199c161430 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 6380605ff8b..d6c726f63ab 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 31b433399ba..904f29d3152 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 b19ee9f9771..9bc85387650 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 6a0b0b2c162..8f5be54bcfa 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 70739fe9e9c..7d1ed705e68 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 68a994e7829..80516aae24b 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 9429e232cd9..0c3c3cf21fd 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 dae10c678da..844aa9a112f 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 73c3db6596a..d5ed3b11a8e 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 b71af0328ec..05c8ce5bb22 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 a691376ce05..5a9aade449d 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.143d7e40.js b/assets/js/01236e21.1ac81261.js similarity index 100% rename from assets/js/01236e21.143d7e40.js rename to assets/js/01236e21.1ac81261.js diff --git a/assets/js/01766c3c.74a98e17.js b/assets/js/01766c3c.f303fff4.js similarity index 100% rename from assets/js/01766c3c.74a98e17.js rename to assets/js/01766c3c.f303fff4.js diff --git a/assets/js/0219fded.7b6a26dc.js b/assets/js/0219fded.c03b7e66.js similarity index 100% rename from assets/js/0219fded.7b6a26dc.js rename to assets/js/0219fded.c03b7e66.js diff --git a/assets/js/02481282.9277b640.js b/assets/js/02481282.6abaa2f5.js similarity index 100% rename from assets/js/02481282.9277b640.js rename to assets/js/02481282.6abaa2f5.js diff --git a/assets/js/033ffa26.91cd8ab4.js b/assets/js/033ffa26.24a137ed.js similarity index 100% rename from assets/js/033ffa26.91cd8ab4.js rename to assets/js/033ffa26.24a137ed.js diff --git a/assets/js/03637775.c0f11620.js b/assets/js/03637775.773dc71b.js similarity index 100% rename from assets/js/03637775.c0f11620.js rename to assets/js/03637775.773dc71b.js diff --git a/assets/js/03694375.1434b1ae.js b/assets/js/03694375.90a26649.js similarity index 100% rename from assets/js/03694375.1434b1ae.js rename to assets/js/03694375.90a26649.js diff --git a/assets/js/03936653.353dcf04.js b/assets/js/03936653.3c06bcf7.js similarity index 100% rename from assets/js/03936653.353dcf04.js rename to assets/js/03936653.3c06bcf7.js diff --git a/assets/js/03a973b6.0143cb29.js b/assets/js/03a973b6.8901e852.js similarity index 100% rename from assets/js/03a973b6.0143cb29.js rename to assets/js/03a973b6.8901e852.js diff --git a/assets/js/042403e6.c8242cfa.js b/assets/js/042403e6.3d20ae69.js similarity index 100% rename from assets/js/042403e6.c8242cfa.js rename to assets/js/042403e6.3d20ae69.js diff --git a/assets/js/046dea04.f9b09012.js b/assets/js/046dea04.70c2205b.js similarity index 100% rename from assets/js/046dea04.f9b09012.js rename to assets/js/046dea04.70c2205b.js diff --git a/assets/js/04c9bdec.c4848187.js b/assets/js/04c9bdec.61852e6b.js similarity index 100% rename from assets/js/04c9bdec.c4848187.js rename to assets/js/04c9bdec.61852e6b.js diff --git a/assets/js/0504968a.b1c2f338.js b/assets/js/0504968a.62cecc3f.js similarity index 100% rename from assets/js/0504968a.b1c2f338.js rename to assets/js/0504968a.62cecc3f.js diff --git a/assets/js/05e7be59.0f0a700e.js b/assets/js/05e7be59.6e3c076b.js similarity index 100% rename from assets/js/05e7be59.0f0a700e.js rename to assets/js/05e7be59.6e3c076b.js diff --git a/assets/js/06428749.4684191a.js b/assets/js/06428749.de557e73.js similarity index 100% rename from assets/js/06428749.4684191a.js rename to assets/js/06428749.de557e73.js diff --git a/assets/js/0795c4a5.ee33bc1d.js b/assets/js/0795c4a5.6edaf4ed.js similarity index 100% rename from assets/js/0795c4a5.ee33bc1d.js rename to assets/js/0795c4a5.6edaf4ed.js diff --git a/assets/js/07a5a5a7.cea8b129.js b/assets/js/07a5a5a7.0d5a22c2.js similarity index 100% rename from assets/js/07a5a5a7.cea8b129.js rename to assets/js/07a5a5a7.0d5a22c2.js diff --git a/assets/js/07d02486.4278941d.js b/assets/js/07d02486.77491eaa.js similarity index 100% rename from assets/js/07d02486.4278941d.js rename to assets/js/07d02486.77491eaa.js diff --git a/assets/js/083097f6.7a65eccd.js b/assets/js/083097f6.d12e5121.js similarity index 100% rename from assets/js/083097f6.7a65eccd.js rename to assets/js/083097f6.d12e5121.js diff --git a/assets/js/08c29a07.5b3555ab.js b/assets/js/08c29a07.49fb0f12.js similarity index 100% rename from assets/js/08c29a07.5b3555ab.js rename to assets/js/08c29a07.49fb0f12.js diff --git a/assets/js/08f59eb1.5adcaf92.js b/assets/js/08f59eb1.27cbf0e3.js similarity index 100% rename from assets/js/08f59eb1.5adcaf92.js rename to assets/js/08f59eb1.27cbf0e3.js diff --git a/assets/js/0933de78.28838324.js b/assets/js/0933de78.83577c3c.js similarity index 100% rename from assets/js/0933de78.28838324.js rename to assets/js/0933de78.83577c3c.js diff --git a/assets/js/0960b525.70766d9e.js b/assets/js/0960b525.ada101e3.js similarity index 100% rename from assets/js/0960b525.70766d9e.js rename to assets/js/0960b525.ada101e3.js diff --git a/assets/js/09ef251f.e47008ff.js b/assets/js/09ef251f.0bfddf67.js similarity index 100% rename from assets/js/09ef251f.e47008ff.js rename to assets/js/09ef251f.0bfddf67.js diff --git a/assets/js/0a7ae8c6.f67a4f21.js b/assets/js/0a7ae8c6.7c5519bb.js similarity index 100% rename from assets/js/0a7ae8c6.f67a4f21.js rename to assets/js/0a7ae8c6.7c5519bb.js diff --git a/assets/js/0a9c912f.063d5745.js b/assets/js/0a9c912f.322c0fe3.js similarity index 100% rename from assets/js/0a9c912f.063d5745.js rename to assets/js/0a9c912f.322c0fe3.js diff --git a/assets/js/0ac59e0b.e1c8b9c4.js b/assets/js/0ac59e0b.b152e4f0.js similarity index 100% rename from assets/js/0ac59e0b.e1c8b9c4.js rename to assets/js/0ac59e0b.b152e4f0.js diff --git a/assets/js/0af206b1.114c0077.js b/assets/js/0af206b1.cfc25de7.js similarity index 100% rename from assets/js/0af206b1.114c0077.js rename to assets/js/0af206b1.cfc25de7.js diff --git a/assets/js/0b88b93d.13b8cd1a.js b/assets/js/0b88b93d.79caa19c.js similarity index 100% rename from assets/js/0b88b93d.13b8cd1a.js rename to assets/js/0b88b93d.79caa19c.js diff --git a/assets/js/0c893413.0fa54120.js b/assets/js/0c893413.b82044dc.js similarity index 100% rename from assets/js/0c893413.0fa54120.js rename to assets/js/0c893413.b82044dc.js diff --git a/assets/js/0d5a540d.129cd21b.js b/assets/js/0d5a540d.4742cd6c.js similarity index 100% rename from assets/js/0d5a540d.129cd21b.js rename to assets/js/0d5a540d.4742cd6c.js diff --git a/assets/js/0d9971fc.413d1fe9.js b/assets/js/0d9971fc.637ef44c.js similarity index 100% rename from assets/js/0d9971fc.413d1fe9.js rename to assets/js/0d9971fc.637ef44c.js diff --git a/assets/js/0da03481.9b993480.js b/assets/js/0da03481.265ef927.js similarity index 100% rename from assets/js/0da03481.9b993480.js rename to assets/js/0da03481.265ef927.js diff --git a/assets/js/0dd89b11.bec9340b.js b/assets/js/0dd89b11.a3a718e2.js similarity index 100% rename from assets/js/0dd89b11.bec9340b.js rename to assets/js/0dd89b11.a3a718e2.js diff --git a/assets/js/0deecaa0.2ad6d771.js b/assets/js/0deecaa0.ba6bde4b.js similarity index 100% rename from assets/js/0deecaa0.2ad6d771.js rename to assets/js/0deecaa0.ba6bde4b.js diff --git a/assets/js/0df7ea6e.66fb6fe5.js b/assets/js/0df7ea6e.74a1a253.js similarity index 100% rename from assets/js/0df7ea6e.66fb6fe5.js rename to assets/js/0df7ea6e.74a1a253.js diff --git a/assets/js/0e403cd5.7ca3305d.js b/assets/js/0e403cd5.a61c4b89.js similarity index 100% rename from assets/js/0e403cd5.7ca3305d.js rename to assets/js/0e403cd5.a61c4b89.js diff --git a/assets/js/0e88a1db.48cee85a.js b/assets/js/0e88a1db.6e2ee6bc.js similarity index 100% rename from assets/js/0e88a1db.48cee85a.js rename to assets/js/0e88a1db.6e2ee6bc.js diff --git a/assets/js/0eac805a.0e228a20.js b/assets/js/0eac805a.42800a6d.js similarity index 100% rename from assets/js/0eac805a.0e228a20.js rename to assets/js/0eac805a.42800a6d.js diff --git a/assets/js/0ebf8c0a.336412c0.js b/assets/js/0ebf8c0a.138c9cb3.js similarity index 100% rename from assets/js/0ebf8c0a.336412c0.js rename to assets/js/0ebf8c0a.138c9cb3.js diff --git a/assets/js/0f6c7edf.48293b3b.js b/assets/js/0f6c7edf.31e1e897.js similarity index 100% rename from assets/js/0f6c7edf.48293b3b.js rename to assets/js/0f6c7edf.31e1e897.js diff --git a/assets/js/0fa6c028.e271ad22.js b/assets/js/0fa6c028.2779c912.js similarity index 100% rename from assets/js/0fa6c028.e271ad22.js rename to assets/js/0fa6c028.2779c912.js diff --git a/assets/js/1.db09b3e8.js b/assets/js/1.e351c036.js similarity index 100% rename from assets/js/1.db09b3e8.js rename to assets/js/1.e351c036.js diff --git a/assets/js/1064a535.a3873912.js b/assets/js/1064a535.f71d5953.js similarity index 100% rename from assets/js/1064a535.a3873912.js rename to assets/js/1064a535.f71d5953.js diff --git a/assets/js/10f6d5b6.78b140a8.js b/assets/js/10f6d5b6.ef898f1c.js similarity index 100% rename from assets/js/10f6d5b6.78b140a8.js rename to assets/js/10f6d5b6.ef898f1c.js diff --git a/assets/js/110d3381.8e1e2e37.js b/assets/js/110d3381.d8c7bc4c.js similarity index 100% rename from assets/js/110d3381.8e1e2e37.js rename to assets/js/110d3381.d8c7bc4c.js diff --git a/assets/js/121d2742.8fe0c3a6.js b/assets/js/121d2742.080e3e9b.js similarity index 100% rename from assets/js/121d2742.8fe0c3a6.js rename to assets/js/121d2742.080e3e9b.js diff --git a/assets/js/1316cfa0.a76e154d.js b/assets/js/1316cfa0.2fc6927a.js similarity index 100% rename from assets/js/1316cfa0.a76e154d.js rename to assets/js/1316cfa0.2fc6927a.js diff --git a/assets/js/137941bc.599a4279.js b/assets/js/137941bc.b8f4b148.js similarity index 100% rename from assets/js/137941bc.599a4279.js rename to assets/js/137941bc.b8f4b148.js diff --git a/assets/js/141d4650.56352b6e.js b/assets/js/141d4650.c382b43b.js similarity index 100% rename from assets/js/141d4650.56352b6e.js rename to assets/js/141d4650.c382b43b.js diff --git a/assets/js/1472bf54.189c85f9.js b/assets/js/1472bf54.5432663c.js similarity index 100% rename from assets/js/1472bf54.189c85f9.js rename to assets/js/1472bf54.5432663c.js diff --git a/assets/js/148da5a8.511f381e.js b/assets/js/148da5a8.77c7c862.js similarity index 100% rename from assets/js/148da5a8.511f381e.js rename to assets/js/148da5a8.77c7c862.js diff --git a/assets/js/1568d0d5.a1cc6667.js b/assets/js/1568d0d5.7de1629e.js similarity index 100% rename from assets/js/1568d0d5.a1cc6667.js rename to assets/js/1568d0d5.7de1629e.js diff --git a/assets/js/168ff25c.05db6a9b.js b/assets/js/168ff25c.f02691ee.js similarity index 100% rename from assets/js/168ff25c.05db6a9b.js rename to assets/js/168ff25c.f02691ee.js diff --git a/assets/js/16dbfa7d.bf9f402a.js b/assets/js/16dbfa7d.720485c6.js similarity index 100% rename from assets/js/16dbfa7d.bf9f402a.js rename to assets/js/16dbfa7d.720485c6.js diff --git a/assets/js/16e299d4.ba152dec.js b/assets/js/16e299d4.64ccaea4.js similarity index 100% rename from assets/js/16e299d4.ba152dec.js rename to assets/js/16e299d4.64ccaea4.js diff --git a/assets/js/17510ebe.e45d6352.js b/assets/js/17510ebe.3ddbb25c.js similarity index 100% rename from assets/js/17510ebe.e45d6352.js rename to assets/js/17510ebe.3ddbb25c.js diff --git a/assets/js/17896441.a14e03c4.js b/assets/js/17896441.a93d10a6.js similarity index 100% rename from assets/js/17896441.a14e03c4.js rename to assets/js/17896441.a93d10a6.js diff --git a/assets/js/1809070c.9509b280.js b/assets/js/1809070c.a85567a5.js similarity index 100% rename from assets/js/1809070c.9509b280.js rename to assets/js/1809070c.a85567a5.js diff --git a/assets/js/18ec5a2b.dc0eb954.js b/assets/js/18ec5a2b.9946ed4d.js similarity index 100% rename from assets/js/18ec5a2b.dc0eb954.js rename to assets/js/18ec5a2b.9946ed4d.js diff --git a/assets/js/19174d1e.cd6d311d.js b/assets/js/19174d1e.74c023b3.js similarity index 100% rename from assets/js/19174d1e.cd6d311d.js rename to assets/js/19174d1e.74c023b3.js diff --git a/assets/js/19286aee.bf5c3415.js b/assets/js/19286aee.ea4c218b.js similarity index 100% rename from assets/js/19286aee.bf5c3415.js rename to assets/js/19286aee.ea4c218b.js diff --git a/assets/js/1ab674d3.42054cdf.js b/assets/js/1ab674d3.812eec10.js similarity index 100% rename from assets/js/1ab674d3.42054cdf.js rename to assets/js/1ab674d3.812eec10.js diff --git a/assets/js/1ac20142.9030002f.js b/assets/js/1ac20142.f4971419.js similarity index 100% rename from assets/js/1ac20142.9030002f.js rename to assets/js/1ac20142.f4971419.js diff --git a/assets/js/1bc08b45.b63e8505.js b/assets/js/1bc08b45.eee0f7a3.js similarity index 100% rename from assets/js/1bc08b45.b63e8505.js rename to assets/js/1bc08b45.eee0f7a3.js diff --git a/assets/js/1bc687dd.741a6f05.js b/assets/js/1bc687dd.dd402a05.js similarity index 100% rename from assets/js/1bc687dd.741a6f05.js rename to assets/js/1bc687dd.dd402a05.js diff --git a/assets/js/1c82c02e.22095890.js b/assets/js/1c82c02e.f25fa847.js similarity index 100% rename from assets/js/1c82c02e.22095890.js rename to assets/js/1c82c02e.f25fa847.js diff --git a/assets/js/1d268f7b.8739f0f2.js b/assets/js/1d268f7b.286bdb3e.js similarity index 100% rename from assets/js/1d268f7b.8739f0f2.js rename to assets/js/1d268f7b.286bdb3e.js diff --git a/assets/js/1d6ec27d.889b91d7.js b/assets/js/1d6ec27d.8d0dacfc.js similarity index 100% rename from assets/js/1d6ec27d.889b91d7.js rename to assets/js/1d6ec27d.8d0dacfc.js diff --git a/assets/js/1e700b69.ac6e9e51.js b/assets/js/1e700b69.94bac2ca.js similarity index 100% rename from assets/js/1e700b69.ac6e9e51.js rename to assets/js/1e700b69.94bac2ca.js diff --git a/assets/js/1f05559d.96d57c84.js b/assets/js/1f05559d.07cc2ddb.js similarity index 100% rename from assets/js/1f05559d.96d57c84.js rename to assets/js/1f05559d.07cc2ddb.js diff --git a/assets/js/1f96651f.e712d6f0.js b/assets/js/1f96651f.83275744.js similarity index 100% rename from assets/js/1f96651f.e712d6f0.js rename to assets/js/1f96651f.83275744.js diff --git a/assets/js/2.e086b3d3.js b/assets/js/2.42d12bcd.js similarity index 99% rename from assets/js/2.e086b3d3.js rename to assets/js/2.42d12bcd.js index 073bdc0fa58..9df8c7af40d 100644 --- a/assets/js/2.e086b3d3.js +++ b/assets/js/2.42d12bcd.js @@ -1,2 +1,2 @@ -/*! For license information please see 2.e086b3d3.js.LICENSE.txt */ +/*! For license information please see 2.42d12bcd.js.LICENSE.txt */ (window.webpackJsonp=window.webpackJsonp||[]).push([[2],{629:function(e,t,n){"use strict";var r=n(0),o=n(630);t.a=function(){const e=Object(r.useContext)(o.a);if(null==e)throw new Error("`useUserPreferencesContext` is used outside of `Layout` Component.");return e}},630:function(e,t,n){"use strict";var r=n(0);const o=Object(r.createContext)(void 0);t.a=o},639:function(e,t,n){"use strict";var r=n(3),o=n(0),a=n.n(o),c=n(628),i=n(638),l=n(633),s=n(21),u=n(635);function m(e){let{activeBasePath:t,activeBaseRegex:n,to:o,href:c,label:s,activeClassName:u="navbar__link--active",prependBaseUrlToHref:m,...f}=e;const d=Object(l.a)(o),p=Object(l.a)(t),h=Object(l.a)(c,{forcePrependBaseUrl:!0});return a.a.createElement(i.a,Object(r.a)({},c?{href:m?h:c}:{isNavLink:!0,activeClassName:u,to:d,...t||n?{isActive:(e,t)=>n?new RegExp(n).test(t.pathname):t.pathname.startsWith(p)}:null},f),s)}function f(e){var t;let{items:n,position:i,className:l,...s}=e;const u=Object(o.useRef)(null),f=Object(o.useRef)(null),[d,p]=Object(o.useState)(!1);Object(o.useEffect)((()=>{const e=e=>{u.current&&!u.current.contains(e.target)&&p(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e)}}),[u]);const h=function(e,t){return void 0===t&&(t=!1),Object(c.a)({"navbar__item navbar__link":!t,dropdown__link:t},e)};return n?a.a.createElement("div",{ref:u,className:Object(c.a)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--left":"left"===i,"dropdown--right":"right"===i,"dropdown--show":d})},a.a.createElement(m,Object(r.a)({className:h(l)},s,{onClick:s.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),p(!d))}}),null!==(t=s.children)&&void 0!==t?t:s.label),a.a.createElement("ul",{ref:f,className:"dropdown__menu"},n.map(((e,t)=>{let{className:o,...c}=e;return a.a.createElement("li",{key:t},a.a.createElement(m,Object(r.a)({onKeyDown:e=>{if(t===n.length-1&&"Tab"===e.key){e.preventDefault(),p(!1);const t=u.current.nextElementSibling;t&&t.focus()}},activeClassName:"dropdown__link--active",className:h(o,!0)},c)))})))):a.a.createElement(m,Object(r.a)({className:h(l)},s))}function d(e){var t,n,i;let{items:l,className:f,position:d,...p}=e;const h=Object(o.useRef)(null),{pathname:v}=Object(s.useLocation)(),[b,y]=Object(o.useState)((()=>{var e;return null===(e=!(null!=l&&l.some((e=>Object(u.isSamePath)(e.to,v)))))||void 0===e||e})),g=function(e,t){return void 0===t&&(t=!1),Object(c.a)("menu__link",{"menu__link--sublist":t},e)};if(!l)return a.a.createElement("li",{className:"menu__list-item"},a.a.createElement(m,Object(r.a)({className:g(f)},p)));const O=null!==(t=h.current)&&void 0!==t&&t.scrollHeight?`${null===(n=h.current)||void 0===n?void 0:n.scrollHeight}px`:void 0;return a.a.createElement("li",{className:Object(c.a)("menu__list-item",{"menu__list-item--collapsed":b})},a.a.createElement(m,Object(r.a)({role:"button",className:g(f,!0)},p,{onClick:e=>{e.preventDefault(),y((e=>!e))}}),null!==(i=p.children)&&void 0!==i?i:p.label),a.a.createElement("ul",{className:"menu__list",ref:h,style:{height:b?void 0:O}},l.map(((e,t)=>{let{className:n,...o}=e;return a.a.createElement("li",{className:"menu__list-item",key:t},a.a.createElement(m,Object(r.a)({activeClassName:"menu__link--active",className:g(n)},o,{onClick:p.onClick})))}))))}t.a=function(e){let{mobile:t=!1,...n}=e;const r=t?d:f;return a.a.createElement(r,n)}},641:function(e,t,n){"use strict";var r=n(0),o=n.n(r),a=n(628),c=n(636),i=n(21),l=n(57),s=n.n(l);function u(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}var m=function(){const e=Object(r.useRef)(null),t=Object(i.useLocation)();return Object(r.useEffect)((()=>{t.hash||u(e.current)}),[t.pathname]),o.a.createElement("div",{ref:e},o.a.createElement("a",{href:"#main",className:s.a.skipToContent,onClick:e=>{e.preventDefault();const t=document.querySelector("main:first-of-type")||document.querySelector(".main-wrapper");t&&u(t)}},o.a.createElement(c.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")))},f=n(635),d=n(629),p=n(58),h=n.n(p);var v=function(){const{isAnnouncementBarClosed:e,closeAnnouncementBar:t}=Object(d.a)(),{announcementBar:n}=Object(f.useThemeConfig)();if(!n)return null;const{content:r,backgroundColor:i,textColor:l,isCloseable:s}=n;return!r||s&&e?null:o.a.createElement("div",{className:h.a.announcementBar,style:{backgroundColor:i,color:l},role:"banner"},o.a.createElement("div",{className:Object(a.a)(h.a.announcementBarContent,{[h.a.announcementBarCloseable]:s}),dangerouslySetInnerHTML:{__html:r}}),s?o.a.createElement("button",{type:"button",className:h.a.announcementBarClose,onClick:t,"aria-label":Object(c.b)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"})},o.a.createElement("span",{"aria-hidden":"true"},"\xd7")):null)},b=n(3),y=n(24),g=n(16),O=n(633),S=n(638),E=n(22),j=n(655),w=n(644),k=n(637);function I(){const{locale:e,tags:t}=function(){const{i18n:e}=Object(g.default)(),t=Object(k.useAllDocsData)(),n=Object(k.useActivePluginAndVersion)(),r=Object(f.useDocsPreferredVersionByPluginId)(),o=[f.DEFAULT_SEARCH_TAG,...Object.keys(t).map((function(e){var o,a;const c=(null==n||null===(o=n.activePlugin)||void 0===o?void 0:o.pluginId)===e?n.activeVersion:void 0,i=r[e],l=t[e].versions.find((e=>e.isLast)),s=null!==(a=null!=c?c:i)&&void 0!==a?a:l;return Object(f.docVersionSearchTag)(e,s.name)}))];return{locale:e.currentLocale,tags:o}}();return[`language:${e}`,t.map((e=>`docusaurus_tag:${e}`))]}let P=null;function C(e){let{hit:t,children:n}=e;return o.a.createElement(S.a,{to:t.url},n)}function D(e){let{state:t,onClose:n}=e;const{generateSearchPageLink:r}=Object(j.a)();return o.a.createElement(S.a,{to:r(t.query),onClick:n},"See all ",t.context.nbHits," results")}function _(e){var t,a;let{contextualSearch:l,...s}=e;const{siteMetadata:u}=Object(g.default)(),m=I(),f=null!==(t=null===(a=s.searchParameters)||void 0===a?void 0:a.facetFilters)&&void 0!==t?t:[],d=l?[...m,...f]:f,p={...s.searchParameters,facetFilters:d},{withBaseUrl:h}=Object(O.b)(),v=Object(i.useHistory)(),S=Object(r.useRef)(null),j=Object(r.useRef)(null),[k,_]=Object(r.useState)(!1),[N,A]=Object(r.useState)(null),T=Object(r.useCallback)((()=>P?Promise.resolve():Promise.all([n.e(555).then(n.bind(null,755)),Promise.all([n.e(0),n.e(556)]).then(n.bind(null,756)),n.e(0).then(n.t.bind(null,626,7))]).then((e=>{let[{DocSearchModal:t}]=e;P=t}))),[]),x=Object(r.useCallback)((()=>{T().then((()=>{S.current=document.createElement("div"),document.body.insertBefore(S.current,document.body.firstChild),_(!0)}))}),[T,_]),L=Object(r.useCallback)((()=>{_(!1),S.current.remove()}),[_]),R=Object(r.useCallback)((e=>{T().then((()=>{_(!0),A(e.key)}))}),[T,_,A]),M=Object(r.useRef)({navigate(e){let{itemUrl:t}=e;v.push(t)}}).current,q=Object(r.useRef)((e=>e.map((e=>{const t=document.createElement("a");return t.href=e.url,{...e,url:h(`${t.pathname}${t.hash}`)}})))).current,B=Object(r.useMemo)((()=>e=>o.a.createElement(D,Object(b.a)({},e,{onClose:L}))),[L]),H=Object(r.useCallback)((e=>(e.addAlgoliaAgent("docusaurus",u.docusaurusVersion),e)),[u.docusaurusVersion]);Object(w.c)({isOpen:k,onOpen:x,onClose:L,onInput:R,searchButtonRef:j});const F=Object(c.b)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"});return o.a.createElement(o.a.Fragment,null,o.a.createElement(E.a,null,o.a.createElement("link",{rel:"preconnect",href:`https://${s.appId}-dsn.algolia.net`,crossOrigin:"anonymous"})),o.a.createElement(w.a,{onTouchStart:T,onFocus:T,onMouseOver:T,onClick:x,ref:j,translations:{buttonText:F,buttonAriaLabel:F}}),k&&Object(y.createPortal)(o.a.createElement(P,Object(b.a)({onClose:L,initialScrollY:window.scrollY,initialQuery:N,navigator:M,transformItems:q,hitComponent:C,resultsFooterComponent:B,transformSearchClient:H},s,{searchParameters:p})),S.current))}var N=function(){const{siteConfig:e}=Object(g.default)();return o.a.createElement(_,e.themeConfig.algolia)},A=n(684),T=n.n(A),x=n(59),L=n.n(x);const R=e=>{let{icon:t,style:n}=e;return o.a.createElement("span",{className:Object(a.a)(L.a.toggle,L.a.dark),style:n},t)},M=e=>{let{icon:t,style:n}=e;return o.a.createElement("span",{className:Object(a.a)(L.a.toggle,L.a.light),style:n},t)};var q=function(e){const{colorMode:{switchConfig:{darkIcon:t,darkIconStyle:n,lightIcon:r,lightIconStyle:a}}}=Object(f.useThemeConfig)(),{isClient:c}=Object(g.default)();return o.a.createElement(T.a,Object(b.a)({disabled:!c,icons:{checked:o.a.createElement(R,{icon:t,style:n}),unchecked:o.a.createElement(M,{icon:r,style:a})}},e))},B=n(645),H=n(657);var F=e=>{const t=Object(i.useLocation)(),[n,o]=Object(r.useState)(e),a=Object(r.useRef)(!1),[c,l]=Object(r.useState)(0),[s,u]=Object(r.useState)(0),m=Object(r.useCallback)((e=>{null!==e&&u(e.getBoundingClientRect().height)}),[]);return Object(H.a)((t=>{let{scrollY:n}=t;if(!e)return;if(n=c?o(!1):n+i{e&&c&&o(!0)}),[t.pathname]),Object(r.useEffect)((()=>{e&&t.hash&&(a.current=!0)}),[t.hash]),{navbarRef:m,isNavbarVisible:n}},U=n(658),V=n(659),$=n(639);var K=e=>{let{width:t=20,height:n=20,...r}=e;return o.a.createElement("svg",Object(b.a)({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",width:t,height:n},r),o.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 z(e){let{mobile:t,dropdownItemsBefore:n,dropdownItemsAfter:r,...a}=e;const{i18n:{currentLocale:c,locales:i,localeConfigs:l}}=Object(g.default)(),s=Object(f.useAlternatePageUtils)();function u(e){return l[e].label}const m=[...n,...i.map((e=>{const t=`pathname://${s.createUrl({locale:e,fullyQualified:!1})}`;return{isNavLink:!0,label:u(e),to:t,target:"_self",autoAddBaseUrl:!1,className:e===c?"dropdown__link--active":""}})),...r],d=t?"Languages":u(c);return o.a.createElement($.a,Object(b.a)({},a,{href:"#",mobile:t,label:o.a.createElement("span",null,o.a.createElement(K,{style:{verticalAlign:"text-bottom",marginRight:5}}),o.a.createElement("span",null,d)),items:m}))}var J=n(60),W=n.n(J);function X(e){let{mobile:t}=e;return t?null:o.a.createElement("div",{className:W.a.searchWrapper},o.a.createElement(N,null))}const Q={default:()=>$.a,localeDropdown:()=>z,search:()=>X,docsVersion:()=>n(689).default,docsVersionDropdown:()=>n(690).default,doc:()=>n(691).default};function Z(e){let{type:t,...n}=e;const r=function(e){void 0===e&&(e="default");const t=Q[e];if(!t)throw new Error(`No NavbarItem component found for type=${e}.`);return t()}(t);return o.a.createElement(r,n)}var G=n(660),Y=n(662),ee=n(62),te=n.n(ee);const ne="right";var re=function(){const{navbar:{items:e,hideOnScroll:t,style:n},colorMode:{disableSwitch:c}}=Object(f.useThemeConfig)(),[i,l]=Object(r.useState)(!1),{isDarkTheme:s,setLightTheme:u,setDarkTheme:m}=Object(B.a)(),{navbarRef:d,isNavbarVisible:p}=F(t);Object(U.a)(i);const h=Object(r.useCallback)((()=>{l(!0)}),[l]),v=Object(r.useCallback)((()=>{l(!1)}),[l]),y=Object(r.useCallback)((e=>e.target.checked?m():u()),[u,m]),g=Object(V.a)();Object(r.useEffect)((()=>{g===V.b.desktop&&l(!1)}),[g]);const O=e.some((e=>"search"===e.type)),{leftItems:S,rightItems:E}=function(e){return{leftItems:e.filter((e=>{var t;return"left"===(null!==(t=e.position)&&void 0!==t?t:ne)})),rightItems:e.filter((e=>{var t;return"right"===(null!==(t=e.position)&&void 0!==t?t:ne)}))}}(e);return o.a.createElement("nav",{ref:d,className:Object(a.a)("navbar","navbar--fixed-top",{"navbar--dark":"dark"===n,"navbar--primary":"primary"===n,"navbar-sidebar--show":i,[te.a.navbarHideable]:t,[te.a.navbarHidden]:t&&!p})},o.a.createElement("div",{className:"navbar__inner"},o.a.createElement("div",{className:"navbar__items"},null!=e&&0!==e.length&&o.a.createElement("button",{"aria-label":"Navigation bar toggle",className:"navbar__toggle",type:"button",tabIndex:0,onClick:h,onKeyDown:h},o.a.createElement(Y.a,null)),o.a.createElement(G.a,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:Object(a.a)("navbar__title")}),S.map(((e,t)=>o.a.createElement(Z,Object(b.a)({},e,{key:t}))))),o.a.createElement("div",{className:"navbar__items navbar__items--right"},E.map(((e,t)=>o.a.createElement(Z,Object(b.a)({},e,{key:t})))),!c&&o.a.createElement(q,{className:te.a.displayOnlyInLargeViewport,"aria-label":"Dark mode toggle",checked:s,onChange:y}),!O&&o.a.createElement(N,null))),o.a.createElement("div",{role:"presentation",className:"navbar-sidebar__backdrop",onClick:v}),o.a.createElement("div",{className:"navbar-sidebar"},o.a.createElement("div",{className:"navbar-sidebar__brand"},o.a.createElement(G.a,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title",onClick:v}),!c&&i&&o.a.createElement(q,{"aria-label":"Dark mode toggle in sidebar",checked:s,onChange:y})),o.a.createElement("div",{className:"navbar-sidebar__items"},o.a.createElement("div",{className:"menu"},o.a.createElement("ul",{className:"menu__list"},e.map(((e,t)=>o.a.createElement(Z,Object(b.a)({mobile:!0},e,{onClick:v,key:t})))))))))},oe=n(63),ae=n.n(oe),ce=n(661);function ie(e){let{to:t,href:n,label:r,prependBaseUrlToHref:a,...c}=e;const i=Object(O.a)(t),l=Object(O.a)(n,{forcePrependBaseUrl:!0});return o.a.createElement(S.a,Object(b.a)({className:"footer__link-item"},n?{href:a?l:n}:{to:i},c),r)}const le=e=>{let{sources:t,alt:n}=e;return o.a.createElement(ce.a,{className:"footer__logo",alt:n,sources:t})};var se=function(){const{footer:e}=Object(f.useThemeConfig)(),{copyright:t,links:n=[],logo:r={}}=e||{},c={light:Object(O.a)(r.src),dark:Object(O.a)(r.srcDark||r.src)};return e?o.a.createElement("footer",{className:Object(a.a)("footer",{"footer--dark":"dark"===e.style})},o.a.createElement("div",{className:"container"},n&&n.length>0&&o.a.createElement("div",{className:"row footer__links"},n.map(((e,t)=>o.a.createElement("div",{key:t,className:"col footer__col"},null!=e.title?o.a.createElement("h4",{className:"footer__title"},e.title):null,null!=e.items&&Array.isArray(e.items)&&e.items.length>0?o.a.createElement("ul",{className:"footer__items"},e.items.map(((e,t)=>e.html?o.a.createElement("li",{key:t,className:"footer__item",dangerouslySetInnerHTML:{__html:e.html}}):o.a.createElement("li",{key:e.href||e.to,className:"footer__item"},o.a.createElement(ie,e))))):null)))),(r||t)&&o.a.createElement("div",{className:"footer__bottom text--center"},r&&(r.src||r.srcDark)&&o.a.createElement("div",{className:"margin-bottom--sm"},r.href?o.a.createElement(S.a,{href:r.href,className:ae.a.footerLogoLink},o.a.createElement(le,{alt:r.alt,sources:c})):o.a.createElement(le,{alt:r.alt,sources:c})),t?o.a.createElement("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:t}}):null))):null},ue=n(8);const me="light",fe="dark",de=e=>e===fe?fe:me,pe=e=>{try{localStorage.setItem("theme",de(e))}catch(t){console.error(t)}};var he=()=>{const{colorMode:{defaultMode:e,disableSwitch:t,respectPrefersColorScheme:n}}=Object(f.useThemeConfig)(),[o,a]=Object(r.useState)((e=>ue.a.canUseDOM?de(document.documentElement.getAttribute("data-theme")):de(e))(e)),c=Object(r.useCallback)((()=>{a(me),pe(me)}),[]),i=Object(r.useCallback)((()=>{a(fe),pe(fe)}),[]);return Object(r.useEffect)((()=>{document.documentElement.setAttribute("data-theme",de(o))}),[o]),Object(r.useEffect)((()=>{if(!t)try{const e=localStorage.getItem("theme");null!==e&&a(de(e))}catch(e){console.error(e)}}),[a]),Object(r.useEffect)((()=>{t&&!n||window.matchMedia("(prefers-color-scheme: dark)").addListener((e=>{let{matches:t}=e;a(t?fe:me)}))}),[]),{isDarkTheme:o===fe,setLightTheme:c,setDarkTheme:i}},ve=n(656);var be=function(e){const{isDarkTheme:t,setLightTheme:n,setDarkTheme:r}=he();return o.a.createElement(ve.a.Provider,{value:{isDarkTheme:t,setLightTheme:n,setDarkTheme:r}},e.children)};const ye="docusaurus.tab.";var ge=()=>{const[e,t]=Object(r.useState)({}),n=Object(r.useCallback)(((e,t)=>{try{localStorage.setItem(`${ye}${e}`,t)}catch(n){console.error(n)}}),[]);return Object(r.useEffect)((()=>{try{const e={};for(let t=0;t{t((t=>({...t,[e]:r}))),n(e,r)}}};const Oe="docusaurus.announcement.dismiss",Se="docusaurus.announcement.id";var Ee=()=>{const{announcementBar:e}=Object(f.useThemeConfig)(),[t,n]=Object(r.useState)(!0),o=Object(r.useCallback)((()=>{localStorage.setItem(Oe,"true"),n(!0)}),[]);return Object(r.useEffect)((()=>{if(!e)return;const{id:t}=e;let r=localStorage.getItem(Se);"annoucement-bar"===r&&(r="announcement-bar");const o=t!==r;localStorage.setItem(Se,t),o&&localStorage.setItem(Oe,"false"),(o||"false"===localStorage.getItem(Oe))&&n(!1)}),[]),{isAnnouncementBarClosed:t,closeAnnouncementBar:o}},je=n(630);var we=function(e){const{tabGroupChoices:t,setTabGroupChoices:n}=ge(),{isAnnouncementBarClosed:r,closeAnnouncementBar:a}=Ee();return o.a.createElement(je.a.Provider,{value:{tabGroupChoices:t,setTabGroupChoices:n,isAnnouncementBarClosed:r,closeAnnouncementBar:a}},e.children)};function ke(e){let{children:t}=e;return o.a.createElement(be,null,o.a.createElement(we,null,o.a.createElement(f.DocsPreferredVersionContextProvider,null,t)))}function Ie(e){let{locale:t,version:n,tag:r}=e;const a=t;return o.a.createElement(E.a,null,a&&o.a.createElement("meta",{name:"docsearch:language",content:a}),n&&o.a.createElement("meta",{name:"docsearch:version",content:n}),r&&o.a.createElement("meta",{name:"docsearch:docusaurus_tag",content:r}))}var Pe=n(663);function Ce(){const{i18n:{defaultLocale:e,locales:t}}=Object(g.default)(),n=Object(f.useAlternatePageUtils)();return o.a.createElement(E.a,null,t.map((e=>o.a.createElement("link",{key:e,rel:"alternate",href:n.createUrl({locale:e,fullyQualified:!0}),hrefLang:e}))),o.a.createElement("link",{rel:"alternate",href:n.createUrl({locale:e,fullyQualified:!0}),hrefLang:"x-default"}))}function De(e){let{permalink:t}=e;const{siteConfig:{url:n}}=Object(g.default)(),r=function(){const{siteConfig:{url:e}}=Object(g.default)(),{pathname:t}=Object(i.useLocation)();return e+Object(O.a)(t)}(),a=t?`${n}${t}`:r;return o.a.createElement(E.a,null,o.a.createElement("meta",{property:"og:url",content:a}),o.a.createElement("link",{rel:"canonical",href:a}))}function _e(e){const{siteConfig:t,i18n:{currentLocale:n,localeConfigs:r}}=Object(g.default)(),{favicon:a,themeConfig:{image:c,metadatas:i}}=t,{title:l,description:s,image:u,keywords:m,searchMetadatas:d}=e,p=Object(O.a)(a),h=n,v=r[n].direction;return o.a.createElement(o.a.Fragment,null,o.a.createElement(E.a,null,o.a.createElement("html",{lang:h,dir:v}),a&&o.a.createElement("link",{rel:"shortcut icon",href:p})),o.a.createElement(Pe.a,{title:l,description:s,keywords:m,image:u||c}),o.a.createElement(De,null),o.a.createElement(Ce,null),o.a.createElement(Ie,Object(b.a)({tag:f.DEFAULT_SEARCH_TAG,locale:n},d)),o.a.createElement(E.a,null,i.map(((e,t)=>o.a.createElement("meta",Object(b.a)({key:`metadata_${t}`},e))))))}n(64);var Ne=function(){Object(r.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)}}),[])};n(65);t.a=function(e){const{children:t,noFooter:n,wrapperClassName:r}=e;return Ne(),o.a.createElement(ke,null,o.a.createElement(_e,e),o.a.createElement(m,null),o.a.createElement(v,null),o.a.createElement(re,null),o.a.createElement("div",{className:Object(a.a)("main-wrapper",r)},t),!n&&o.a.createElement(se,null))}},644:function(e,t,n){"use strict";n.d(t,"a",(function(){return b})),n.d(t,"b",(function(){return Fn})),n.d(t,"c",(function(){return Un}));var r=n(0),o=n.n(r);n(24);function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function u(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a=[],c=!0,i=!1;try{for(n=n.call(e);!(c=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);c=!0);}catch(e){i=!0,o=e}finally{try{c||null==n.return||n.return()}finally{if(i)throw o}}return a}}(e,t)||f(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 m(e){return function(e){if(Array.isArray(e))return d(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||f(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 f(e,t){if(e){if("string"==typeof e)return d(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?d(e,t):void 0}}function d(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);n=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function L(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function R(e){for(var t=1;t=3||2===n&&r>=4||1===n&&r>=10);function a(t,n,r){if(o&&void 0!==r){var a=r[0].__autocomplete_algoliaCredentials,c={"X-Algolia-Application-Id":a.appId,"X-Algolia-API-Key":a.apiKey};e.apply(void 0,[t].concat(A(n),[{headers:c}]))}else e.apply(void 0,[t].concat(A(n)))}return{init:function(t,n){e("init",{appId:t,apiKey:n})},setUserToken:function(t){e("setUserToken",t)},clickedObjectIDsAfterSearch:function(){for(var e=arguments.length,t=new Array(e),n=0;n0&&a("clickedObjectIDsAfterSearch",q(t),t[0].items)},clickedObjectIDs:function(){for(var e=arguments.length,t=new Array(e),n=0;n0&&a("clickedObjectIDs",q(t),t[0].items)},clickedFilters:function(){for(var t=arguments.length,n=new Array(t),r=0;r0&&e.apply(void 0,["clickedFilters"].concat(n))},convertedObjectIDsAfterSearch:function(){for(var e=arguments.length,t=new Array(e),n=0;n0&&a("convertedObjectIDsAfterSearch",q(t),t[0].items)},convertedObjectIDs:function(){for(var e=arguments.length,t=new Array(e),n=0;n0&&a("convertedObjectIDs",q(t),t[0].items)},convertedFilters:function(){for(var t=arguments.length,n=new Array(t),r=0;r0&&e.apply(void 0,["convertedFilters"].concat(n))},viewedObjectIDs:function(){for(var e=arguments.length,t=new Array(e),n=0;n0&&t.reduce((function(e,t){var n=t.items,r=x(t,_);return[].concat(A(e),A(function(e){for(var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:20,n=[],r=0;r0&&e.apply(void 0,["viewedFilters"].concat(n))}}}function H(e){var t=e.items.reduce((function(e,t){var n;return e[t.__autocomplete_indexName]=(null!==(n=e[t.__autocomplete_indexName])&&void 0!==n?n:[]).concat(t),e}),{});return Object.keys(t).map((function(e){return{index:e,items:t[e],algoliaSource:["autocomplete"]}}))}function F(e){return e.objectID&&e.__autocomplete_indexName&&e.__autocomplete_queryID}function U(e){return U="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},U(e)}function V(e){return function(e){if(Array.isArray(e))return $(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){if("string"==typeof e)return $(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?$(e,t):void 0}}(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 $(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n0&&X({onItemsChange:r,items:n,insights:i,state:t}))}}),0);return{name:"aa.algoliaInsightsPlugin",subscribe:function(e){var t=e.setContext,n=e.onSelect,r=e.onActive;c("addAlgoliaAgent","insights-plugin"),t({algoliaInsightsPlugin:{__algoliaSearchParameters:{clickAnalytics:!0},insights:i}}),n((function(e){var t=e.item,n=e.state,r=e.event;F(t)&&o({state:n,event:r,insights:i,item:t,insightsEvents:[z({eventName:"Item Selected"},P({item:t,items:l.current}))]})})),r((function(e){var t=e.item,n=e.state,r=e.event;F(t)&&a({state:n,event:r,insights:i,item:t,insightsEvents:[z({eventName:"Item Active"},P({item:t,items:l.current}))]})}))},onStateChange:function(e){var t=e.state;s({state:t})},__autocomplete_pluginOptions:e}}function Z(e,t){var n=t;return{then:function(t,r){return Z(e.then(Y(t,n,e),Y(r,n,e)),n)},catch:function(t){return Z(e.catch(Y(t,n,e)),n)},finally:function(t){return t&&n.onCancelList.push(t),Z(e.finally(Y(t&&function(){return n.onCancelList=[],t()},n,e)),n)},cancel:function(){n.isCanceled=!0;var e=n.onCancelList;n.onCancelList=[],e.forEach((function(e){e()}))},isCanceled:function(){return!0===n.isCanceled}}}function G(e){return Z(e,{isCanceled:!1,onCancelList:[]})}function Y(e,t,n){return e?function(n){return t.isCanceled?n:e(n)}:n}function ee(e,t,n,r){if(!n)return null;if(e<0&&(null===t||null!==r&&0===t))return n+e;var o=(null===t?-1:t)+e;return o<=-1||o>=n?null===r?null:0:o}function te(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function ne(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n0},reshape:function(e){return e.sources}},e),{},{id:null!==(n=e.id)&&void 0!==n?n:"autocomplete-".concat(S++),plugins:o,initialState:be({activeItemId:null,query:"",completion:null,collections:[],isOpen:!1,status:"idle",context:{}},e.initialState),onStateChange:function(t){var n;null===(n=e.onStateChange)||void 0===n||n.call(e,t),o.forEach((function(e){var n;return null===(n=e.onStateChange)||void 0===n?void 0:n.call(e,t)}))},onSubmit:function(t){var n;null===(n=e.onSubmit)||void 0===n||n.call(e,t),o.forEach((function(e){var n;return null===(n=e.onSubmit)||void 0===n?void 0:n.call(e,t)}))},onReset:function(t){var n;null===(n=e.onReset)||void 0===n||n.call(e,t),o.forEach((function(e){var n;return null===(n=e.onReset)||void 0===n?void 0:n.call(e,t)}))},getSources:function(n){return Promise.all([].concat(function(e){return function(e){if(Array.isArray(e))return he(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){if("string"==typeof e)return he(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?he(e,t):void 0}}(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.")}()}(o.map((function(e){return e.getSources}))),[e.getSources]).filter(Boolean).map((function(e){return function(e,t){var n=[];return Promise.resolve(e(t)).then((function(e){return Promise.all(e.filter((function(e){return Boolean(e)})).map((function(e){if(e.sourceId,n.includes(e.sourceId))throw new Error("[Autocomplete] The `sourceId` ".concat(JSON.stringify(e.sourceId)," is not unique."));n.push(e.sourceId);var t={getItemInputValue:function(e){return e.state.query},getItemUrl:function(){},onSelect:function(e){(0,e.setIsOpen)(!1)},onActive:k,onResolve:k};Object.keys(t).forEach((function(e){t[e].__default=!0}));var r=ne(ne({},t),e);return Promise.resolve(r)})))}))}(e,n)}))).then((function(e){return O(e)})).then((function(e){return e.map((function(e){return be(be({},e),{},{onSelect:function(n){e.onSelect(n),t.forEach((function(e){var t;return null===(t=e.onSelect)||void 0===t?void 0:t.call(e,n)}))},onActive:function(n){e.onActive(n),t.forEach((function(e){var t;return null===(t=e.onActive)||void 0===t?void 0:t.call(e,n)}))},onResolve:function(n){e.onResolve(n),t.forEach((function(e){var t;return null===(t=e.onResolve)||void 0===t?void 0:t.call(e,n)}))}})}))}))},navigator:be({navigate:function(e){var t=e.itemUrl;r.location.assign(t)},navigateNewTab:function(e){var t=e.itemUrl,n=r.open(t,"_blank","noopener");null==n||n.focus()},navigateNewWindow:function(e){var t=e.itemUrl;r.open(t,"_blank","noopener")}},e.navigator)})}function Oe(e){return Oe="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},Oe(e)}function Se(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Ee(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,Te);He&&o.environment.clearTimeout(He);var s=l.setCollections,u=l.setIsOpen,m=l.setQuery,f=l.setActiveItemId,d=l.setStatus;if(m(a),f(o.defaultActiveItemId),!a&&!1===o.openOnFocus){var p,h=i.getState().collections.map((function(e){return Le(Le({},e),{},{items:[]})}));d("idle"),s(h),u(null!==(p=r.isOpen)&&void 0!==p?p:o.shouldPanelOpen({state:i.getState()}));var v=G(Fe(h).then((function(){return Promise.resolve()})));return i.pendingRequests.add(v)}d("loading"),He=o.environment.setTimeout((function(){d("stalled")}),o.stallThreshold);var b=G(Fe(o.getSources(Le({query:a,refresh:c,state:i.getState()},l)).then((function(e){return Promise.all(e.map((function(e){return Promise.resolve(e.getItems(Le({query:a,refresh:c,state:i.getState()},l))).then((function(t){return function(e,t,n){if(o=e,Boolean(null==o?void 0:o.execute)){var r="algolia"===e.requesterId?Object.assign.apply(Object,[{}].concat(Ce(Object.keys(n.context).map((function(e){var t;return null===(t=n.context[e])||void 0===t?void 0:t.__algoliaSearchParameters}))))):{};return Ie(Ie({},e),{},{requests:e.queries.map((function(n){return{query:"algolia"===e.requesterId?Ie(Ie({},n),{},{params:Ie(Ie({},r),n.params)}):n,sourceId:t,transformResponse:e.transformResponse}}))})}var o;return{items:e,sourceId:t}}(t,e.sourceId,i.getState())}))}))).then(Ne).then((function(t){return function(e,t,n){return t.map((function(t){var r,o=e.filter((function(e){return e.sourceId===t.sourceId})),a=o.map((function(e){return e.items})),c=o[0].transformResponse,i=c?c({results:r=a,hits:r.map((function(e){return e.hits})).filter(Boolean),facetHits:r.map((function(e){var t;return null===(t=e.facetHits)||void 0===t?void 0:t.map((function(e){return{label:e.value,count:e.count,_highlightResult:{label:{value:e.highlighted}}}}))})).filter(Boolean)}):a;return t.onResolve({source:t,results:a,items:i,state:n.getState()}),i.every(Boolean),'The `getItems` function from source "'.concat(t.sourceId,'" must return an array of items but returned ').concat(JSON.stringify(void 0),".\n\nDid you forget to return items?\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems"),{source:t,items:i}}))}(t,e,i)})).then((function(e){return function(e){var t=e.props,n=e.state,r=e.collections.reduce((function(e,t){return Ee(Ee({},e),{},je({},t.source.sourceId,Ee(Ee({},t.source),{},{getItems:function(){return O(t.items)}})))}),{}),o=t.plugins.reduce((function(e,t){return t.reshape?t.reshape(e):e}),{sourcesBySourceId:r,state:n}).sourcesBySourceId;return O(t.reshape({sourcesBySourceId:o,sources:Object.values(o),state:n})).filter(Boolean).map((function(e){return{source:e,items:e.getItems()}}))}({collections:e,props:o,state:i.getState()})}))})))).then((function(e){var n;d("idle"),s(e);var m=o.shouldPanelOpen({state:i.getState()});u(null!==(n=r.isOpen)&&void 0!==n?n:o.openOnFocus&&!a&&m||m);var f=ae(i.getState());if(null!==i.getState().activeItemId&&f){var p=f.item,h=f.itemInputValue,v=f.itemUrl,b=f.source;b.onActive(Le({event:t,item:p,itemInputValue:h,itemUrl:v,refresh:c,source:b,state:i.getState()},l))}})).finally((function(){d("idle"),He&&o.environment.clearTimeout(He)}));return i.pendingRequests.add(b)}function Ve(e){return Ve="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},Ve(e)}var $e=["event","props","refresh","store"];function Ke(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function ze(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function ct(e){var t=e.props,n=e.refresh,r=e.store,o=at(e,Xe),a=function(e,t){return void 0!==t?"".concat(e,"-").concat(t):e};return{getEnvironmentProps:function(e){var n=e.inputElement,o=e.formElement,a=e.panelElement;function c(e){!r.getState().isOpen&&r.pendingRequests.isEmpty()||e.target===n||!1===[o,a].some((function(t){return(n=t)===(r=e.target)||n.contains(r);var n,r}))&&(r.dispatch("blur",null),t.debug||r.pendingRequests.cancelAll())}return rt({onTouchStart:c,onMouseDown:c,onTouchMove:function(e){!1!==r.getState().isOpen&&n===t.environment.document.activeElement&&e.target!==n&&n.blur()}},at(e,Qe))},getRootProps:function(e){return rt({role:"combobox","aria-expanded":r.getState().isOpen,"aria-haspopup":"listbox","aria-owns":r.getState().isOpen?"".concat(t.id,"-list"):void 0,"aria-labelledby":"".concat(t.id,"-label")},e)},getFormProps:function(e){return e.inputElement,rt({action:"",noValidate:!0,role:"search",onSubmit:function(a){var c;a.preventDefault(),t.onSubmit(rt({event:a,refresh:n,state:r.getState()},o)),r.dispatch("submit",null),null===(c=e.inputElement)||void 0===c||c.blur()},onReset:function(a){var c;a.preventDefault(),t.onReset(rt({event:a,refresh:n,state:r.getState()},o)),r.dispatch("reset",null),null===(c=e.inputElement)||void 0===c||c.focus()}},at(e,Ze))},getLabelProps:function(e){var n=e||{},r=n.sourceIndex,o=at(n,Ye);return rt({htmlFor:"".concat(a(t.id,r),"-input"),id:"".concat(a(t.id,r),"-label")},o)},getInputProps:function(e){var a;function c(e){(t.openOnFocus||Boolean(r.getState().query))&&Ue(rt({event:e,props:t,query:r.getState().completion||r.getState().query,refresh:n,store:r},o)),r.dispatch("focus",null)}var i=e||{},l=(i.inputElement,i.maxLength),s=void 0===l?512:l,u=at(i,Ge),m=ae(r.getState()),f=function(e){return Boolean(e&&e.match(ce))}((null===(a=t.environment.navigator)||void 0===a?void 0:a.userAgent)||""),d=null!=m&&m.itemUrl&&!f?"go":"search";return rt({"aria-autocomplete":"both","aria-activedescendant":r.getState().isOpen&&null!==r.getState().activeItemId?"".concat(t.id,"-item-").concat(r.getState().activeItemId):void 0,"aria-controls":r.getState().isOpen?"".concat(t.id,"-list"):void 0,"aria-labelledby":"".concat(t.id,"-label"),value:r.getState().completion||r.getState().query,id:"".concat(t.id,"-input"),autoComplete:"off",autoCorrect:"off",autoCapitalize:"off",enterKeyHint:d,spellCheck:"false",autoFocus:t.autoFocus,placeholder:t.placeholder,maxLength:s,type:"search",onChange:function(e){Ue(rt({event:e,props:t,query:e.currentTarget.value.slice(0,s),refresh:n,store:r},o))},onKeyDown:function(e){!function(e){var t=e.event,n=e.props,r=e.refresh,o=e.store,a=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,$e);if("ArrowUp"===t.key||"ArrowDown"===t.key){var c=function(){var e=n.environment.document.getElementById("".concat(n.id,"-item-").concat(o.getState().activeItemId));e&&(e.scrollIntoViewIfNeeded?e.scrollIntoViewIfNeeded(!1):e.scrollIntoView(!1))},i=function(){var e=ae(o.getState());if(null!==o.getState().activeItemId&&e){var n=e.item,c=e.itemInputValue,i=e.itemUrl,l=e.source;l.onActive(ze({event:t,item:n,itemInputValue:c,itemUrl:i,refresh:r,source:l,state:o.getState()},a))}};t.preventDefault(),!1===o.getState().isOpen&&(n.openOnFocus||Boolean(o.getState().query))?Ue(ze({event:t,props:n,query:o.getState().query,refresh:r,store:o},a)).then((function(){o.dispatch(t.key,{nextActiveItemId:n.defaultActiveItemId}),i(),setTimeout(c,0)})):(o.dispatch(t.key,{}),i(),c())}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(n.debug||o.pendingRequests.cancelAll());t.preventDefault();var l=ae(o.getState()),s=l.item,u=l.itemInputValue,m=l.itemUrl,f=l.source;if(t.metaKey||t.ctrlKey)void 0!==m&&(f.onSelect(ze({event:t,item:s,itemInputValue:u,itemUrl:m,refresh:r,source:f,state:o.getState()},a)),n.navigator.navigateNewTab({itemUrl:m,item:s,state:o.getState()}));else if(t.shiftKey)void 0!==m&&(f.onSelect(ze({event:t,item:s,itemInputValue:u,itemUrl:m,refresh:r,source:f,state:o.getState()},a)),n.navigator.navigateNewWindow({itemUrl:m,item:s,state:o.getState()}));else if(t.altKey);else{if(void 0!==m)return f.onSelect(ze({event:t,item:s,itemInputValue:u,itemUrl:m,refresh:r,source:f,state:o.getState()},a)),void n.navigator.navigate({itemUrl:m,item:s,state:o.getState()});Ue(ze({event:t,nextState:{isOpen:!1},props:n,query:u,refresh:r,store:o},a)).then((function(){f.onSelect(ze({event:t,item:s,itemInputValue:u,itemUrl:m,refresh:r,source:f,state:o.getState()},a))}))}}}(rt({event:e,props:t,refresh:n,store:r},o))},onFocus:c,onBlur:k,onClick:function(n){e.inputElement!==t.environment.document.activeElement||r.getState().isOpen||c(n)}},u)},getPanelProps:function(e){return rt({onMouseDown:function(e){e.preventDefault()},onMouseLeave:function(){r.dispatch("mouseleave",null)}},e)},getListProps:function(e){var n=e||{},r=n.sourceIndex,o=at(n,et);return rt({role:"listbox","aria-labelledby":"".concat(a(t.id,r),"-label"),id:"".concat(a(t.id,r),"-list")},o)},getItemProps:function(e){var c=e.item,i=e.source,l=e.sourceIndex,s=at(e,tt);return rt({id:"".concat(a(t.id,l),"-item-").concat(c.__autocomplete_id),role:"option","aria-selected":r.getState().activeItemId===c.__autocomplete_id,onMouseMove:function(e){if(c.__autocomplete_id!==r.getState().activeItemId){r.dispatch("mousemove",c.__autocomplete_id);var t=ae(r.getState());if(null!==r.getState().activeItemId&&t){var a=t.item,i=t.itemInputValue,l=t.itemUrl,s=t.source;s.onActive(rt({event:e,item:a,itemInputValue:i,itemUrl:l,refresh:n,source:s,state:r.getState()},o))}}},onMouseDown:function(e){e.preventDefault()},onClick:function(e){var a=i.getItemInputValue({item:c,state:r.getState()}),l=i.getItemUrl({item:c,state:r.getState()});(l?Promise.resolve():Ue(rt({event:e,nextState:{isOpen:!1},props:t,query:a,refresh:n,store:r},o))).then((function(){i.onSelect(rt({event:e,item:c,itemInputValue:a,itemUrl:l,refresh:n,source:i,state:r.getState()},o))}))}},s)}}}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 lt(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function st(e){for(var t=1;t0&&o.a.createElement("div",{className:"DocSearch-NoResults-Prefill-List"},o.a.createElement("p",{className:"DocSearch-Help"},l,":"),o.a.createElement("ul",null,h.slice(0,3).reduce((function(e,t){return[].concat(m(e),[o.a.createElement("li",{key:t},o.a.createElement("button",{className:"DocSearch-Prefill",key:t,type:"button",onClick:function(){r.setQuery(t.toLowerCase()+" "),r.refresh(),r.inputRef.current.focus()}},t))])}),[]))),r.getMissingResultsUrl&&o.a.createElement("p",{className:"DocSearch-Help"},"".concat(f," "),o.a.createElement("a",{href:r.getMissingResultsUrl({query:r.state.query}),target:"_blank",rel:"noopener noreferrer"},p)))}var Ft=["hit","attribute","tagName"];function Ut(e,t){return t.split(".").reduce((function(e,t){return null!=e&&e[t]?e[t]:null}),e)}function Vt(e){var t=e.hit,n=e.attribute,o=e.tagName,a=void 0===o?"span":o,i=s(e,Ft);return Object(r.createElement)(a,c(c({},i),{},{dangerouslySetInnerHTML:{__html:Ut(t,"_snippetResult.".concat(n,".value"))||Ut(t,n)}}))}function $t(e){return e.collection&&0!==e.collection.items.length?o.a.createElement("section",{className:"DocSearch-Hits"},o.a.createElement("div",{className:"DocSearch-Hit-source"},e.title),o.a.createElement("ul",e.getListProps(),e.collection.items.map((function(t,n){return o.a.createElement(Kt,l({key:[e.title,t.objectID].join(":"),item:t,index:n},e))})))):null}function Kt(e){var t=e.item,n=e.index,r=e.renderIcon,a=e.renderAction,c=e.getItemProps,i=e.onItemClick,s=e.collection,m=e.hitComponent,f=u(o.a.useState(!1),2),d=f[0],p=f[1],h=u(o.a.useState(!1),2),v=h[0],b=h[1],y=o.a.useRef(null),g=m;return o.a.createElement("li",l({className:["DocSearch-Hit",t.__docsearch_parent&&"DocSearch-Hit--Child",d&&"DocSearch-Hit--deleting",v&&"DocSearch-Hit--favoriting"].filter(Boolean).join(" "),onTransitionEnd:function(){y.current&&y.current()}},c({item:t,source:s.source,onClick:function(e){i(t,e)}})),o.a.createElement(g,{hit:t},o.a.createElement("div",{className:"DocSearch-Hit-Container"},r({item:t,index:n}),t.hierarchy[t.type]&&"lvl1"===t.type&&o.a.createElement("div",{className:"DocSearch-Hit-content-wrapper"},o.a.createElement(Vt,{className:"DocSearch-Hit-title",hit:t,attribute:"hierarchy.lvl1"}),t.content&&o.a.createElement(Vt,{className:"DocSearch-Hit-path",hit:t,attribute:"content"})),t.hierarchy[t.type]&&("lvl2"===t.type||"lvl3"===t.type||"lvl4"===t.type||"lvl5"===t.type||"lvl6"===t.type)&&o.a.createElement("div",{className:"DocSearch-Hit-content-wrapper"},o.a.createElement(Vt,{className:"DocSearch-Hit-title",hit:t,attribute:"hierarchy.".concat(t.type)}),o.a.createElement(Vt,{className:"DocSearch-Hit-path",hit:t,attribute:"hierarchy.lvl1"})),"content"===t.type&&o.a.createElement("div",{className:"DocSearch-Hit-content-wrapper"},o.a.createElement(Vt,{className:"DocSearch-Hit-title",hit:t,attribute:"content"}),o.a.createElement(Vt,{className:"DocSearch-Hit-path",hit:t,attribute:"hierarchy.lvl1"})),a({item:t,runDeleteTransition:function(e){p(!0),y.current=e},runFavoriteTransition:function(e){b(!0),y.current=e}}))))}function zt(e,t,n){return e.reduce((function(e,r){var o=t(r);return e.hasOwnProperty(o)||(e[o]=[]),e[o].length<(n||5)&&e[o].push(r),e}),{})}function Jt(e){return e}function Wt(e){return 1===e.button||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey}function Xt(){}var Qt=/(|<\/mark>)/g,Zt=RegExp(Qt.source);function Gt(e){var t,n,r=e;if(!r.__docsearch_parent&&!e._highlightResult)return e.hierarchy.lvl0;var o=r.__docsearch_parent?null===(t=r.__docsearch_parent)||void 0===t||null===(t=t._highlightResult)||void 0===t||null===(t=t.hierarchy)||void 0===t?void 0:t.lvl0:null===(n=e._highlightResult)||void 0===n||null===(n=n.hierarchy)||void 0===n?void 0:n.lvl0;return o?o.value&&Zt.test(o.value)?o.value.replace(Qt,""):o.value:e.hierarchy.lvl0}function Yt(e){return o.a.createElement("div",{className:"DocSearch-Dropdown-Container"},e.state.collections.map((function(t){if(0===t.items.length)return null;var n=Gt(t.items[0]);return o.a.createElement($t,l({},e,{key:t.source.sourceId,title:n,collection:t,renderIcon:function(e){var n,r=e.item,a=e.index;return o.a.createElement(o.a.Fragment,null,r.__docsearch_parent&&o.a.createElement("svg",{className:"DocSearch-Hit-Tree",viewBox:"0 0 24 54"},o.a.createElement("g",{stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"},r.__docsearch_parent!==(null===(n=t.items[a+1])||void 0===n?void 0:n.__docsearch_parent)?o.a.createElement("path",{d:"M8 6v21M20 27H8.3"}):o.a.createElement("path",{d:"M8 6v42M20 27H8.3"}))),o.a.createElement("div",{className:"DocSearch-Hit-icon"},o.a.createElement(At,{type:r.type})))},renderAction:function(){return o.a.createElement("div",{className:"DocSearch-Hit-action"},o.a.createElement(_t,null))}}))})),e.resultsFooterComponent&&o.a.createElement("section",{className:"DocSearch-HitsFooter"},o.a.createElement(e.resultsFooterComponent,{state:e.state})))}var en=["translations"];function tn(e){var t=e.translations,n=void 0===t?{}:t,r=s(e,en),a=n.recentSearchesTitle,c=void 0===a?"Recent":a,i=n.noRecentSearchesText,u=void 0===i?"No recent searches":i,m=n.saveRecentSearchButtonTitle,f=void 0===m?"Save this search":m,d=n.removeRecentSearchButtonTitle,p=void 0===d?"Remove this search from history":d,h=n.favoriteSearchesTitle,v=void 0===h?"Favorite":h,b=n.removeFavoriteSearchButtonTitle,y=void 0===b?"Remove this search from favorites":b;return"idle"===r.state.status&&!1===r.hasCollections?r.disableUserPersonalization?null:o.a.createElement("div",{className:"DocSearch-StartScreen"},o.a.createElement("p",{className:"DocSearch-Help"},u)):!1===r.hasCollections?null:o.a.createElement("div",{className:"DocSearch-Dropdown-Container"},o.a.createElement($t,l({},r,{title:c,collection:r.state.collections[0],renderIcon:function(){return o.a.createElement("div",{className:"DocSearch-Hit-icon"},o.a.createElement(Ct,null))},renderAction:function(e){var t=e.item,n=e.runFavoriteTransition,a=e.runDeleteTransition;return o.a.createElement(o.a.Fragment,null,o.a.createElement("div",{className:"DocSearch-Hit-action"},o.a.createElement("button",{className:"DocSearch-Hit-action-button",title:f,type:"submit",onClick:function(e){e.preventDefault(),e.stopPropagation(),n((function(){r.favoriteSearches.add(t),r.recentSearches.remove(t),r.refresh()}))}},o.a.createElement(Lt,null))),o.a.createElement("div",{className:"DocSearch-Hit-action"},o.a.createElement("button",{className:"DocSearch-Hit-action-button",title:p,type:"submit",onClick:function(e){e.preventDefault(),e.stopPropagation(),a((function(){r.recentSearches.remove(t),r.refresh()}))}},o.a.createElement(Dt,null))))}})),o.a.createElement($t,l({},r,{title:v,collection:r.state.collections[1],renderIcon:function(){return o.a.createElement("div",{className:"DocSearch-Hit-icon"},o.a.createElement(Lt,null))},renderAction:function(e){var t=e.item,n=e.runDeleteTransition;return o.a.createElement("div",{className:"DocSearch-Hit-action"},o.a.createElement("button",{className:"DocSearch-Hit-action-button",title:y,type:"submit",onClick:function(e){e.preventDefault(),e.stopPropagation(),n((function(){r.favoriteSearches.remove(t),r.refresh()}))}},o.a.createElement(Dt,null)))}})))}var nn=["translations"],rn=o.a.memo((function(e){var t=e.translations,n=void 0===t?{}:t,r=s(e,nn);if("error"===r.state.status)return o.a.createElement(qt,{translations:null==n?void 0:n.errorScreen});var a=r.state.collections.some((function(e){return e.items.length>0}));return r.state.query?!1===a?o.a.createElement(Ht,l({},r,{translations:null==n?void 0:n.noResultsScreen})):o.a.createElement(Yt,r):o.a.createElement(tn,l({},r,{hasCollections:a,translations:null==n?void 0:n.startScreen}))}),(function(e,t){return"loading"===t.state.status||"stalled"===t.state.status})),on=["translations"];function an(e){var t=e.translations,n=void 0===t?{}:t,r=s(e,on),a=n.resetButtonTitle,c=void 0===a?"Clear the query":a,i=n.resetButtonAriaLabel,u=void 0===i?"Clear the query":i,m=n.cancelButtonText,f=void 0===m?"Cancel":m,d=n.cancelButtonAriaLabel,p=void 0===d?"Cancel":d,v=n.searchInputLabel,b=void 0===v?"Search":v,y=r.getFormProps({inputElement:r.inputRef.current}).onReset;return o.a.useEffect((function(){r.autoFocus&&r.inputRef.current&&r.inputRef.current.focus()}),[r.autoFocus,r.inputRef]),o.a.useEffect((function(){r.isFromSelection&&r.inputRef.current&&r.inputRef.current.select()}),[r.isFromSelection,r.inputRef]),o.a.createElement(o.a.Fragment,null,o.a.createElement("form",{className:"DocSearch-Form",onSubmit:function(e){e.preventDefault()},onReset:y},o.a.createElement("label",l({className:"DocSearch-MagnifierLabel"},r.getLabelProps()),o.a.createElement(h,null),o.a.createElement("span",{className:"DocSearch-VisuallyHiddenForAccessibility"},b)),o.a.createElement("div",{className:"DocSearch-LoadingIndicator"},o.a.createElement(Pt,null)),o.a.createElement("input",l({className:"DocSearch-Input",ref:r.inputRef},r.getInputProps({inputElement:r.inputRef.current,autoFocus:r.autoFocus,maxLength:64}))),o.a.createElement("button",{type:"reset",title:c,className:"DocSearch-Reset","aria-label":u,hidden:!r.state.query},o.a.createElement(Dt,null))),o.a.createElement("button",{className:"DocSearch-Cancel",type:"reset","aria-label":p,onClick:r.onClose},f))}var cn=["_highlightResult","_snippetResult"];function ln(e){var t=e.key,n=e.limit,r=void 0===n?5:n,o=function(e){return!1===function(){var e="__TEST_KEY__";try{return localStorage.setItem(e,""),localStorage.removeItem(e),!0}catch(e){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):[]}}}(t),a=o.getItem().slice(0,r);return{add:function(e){var t=e,n=(t._highlightResult,t._snippetResult,s(t,cn)),c=a.findIndex((function(e){return e.objectID===n.objectID}));c>-1&&a.splice(c,1),a.unshift(n),a=a.slice(0,r),o.setItem(a)},remove:function(e){a=a.filter((function(t){return t.objectID!==e.objectID})),o.setItem(a)},getAll:function(){return a}}}function sn(e){const t=`algoliasearch-client-js-${e.key}`;let n;const r=()=>(void 0===n&&(n=e.localStorage||window.localStorage),n),o=()=>JSON.parse(r().getItem(t)||"{}"),a=e=>{r().setItem(t,JSON.stringify(e))};return{get:(t,n,r={miss:()=>Promise.resolve()})=>Promise.resolve().then((()=>{(()=>{const t=e.timeToLive?1e3*e.timeToLive:null,n=o(),r=Object.fromEntries(Object.entries(n).filter((([,e])=>void 0!==e.timestamp)));if(a(r),!t)return;const c=Object.fromEntries(Object.entries(r).filter((([,e])=>{const n=(new Date).getTime();return!(e.timestamp+tPromise.all([e?e.value:n(),void 0!==e]))).then((([e,t])=>Promise.all([e,t||r.miss(e)]))).then((([e])=>e)),set:(e,n)=>Promise.resolve().then((()=>{const a=o();return a[JSON.stringify(e)]={timestamp:(new Date).getTime(),value:n},r().setItem(t,JSON.stringify(a)),n})),delete:e=>Promise.resolve().then((()=>{const n=o();delete n[JSON.stringify(e)],r().setItem(t,JSON.stringify(n))})),clear:()=>Promise.resolve().then((()=>{r().removeItem(t)}))}}function un(e){const t=[...e.caches],n=t.shift();return void 0===n?{get:(e,t,n={miss:()=>Promise.resolve()})=>t().then((e=>Promise.all([e,n.miss(e)]))).then((([e])=>e)),set:(e,t)=>Promise.resolve(t),delete:e=>Promise.resolve(),clear:()=>Promise.resolve()}:{get:(e,r,o={miss:()=>Promise.resolve()})=>n.get(e,r,o).catch((()=>un({caches:t}).get(e,r,o))),set:(e,r)=>n.set(e,r).catch((()=>un({caches:t}).set(e,r))),delete:e=>n.delete(e).catch((()=>un({caches:t}).delete(e))),clear:()=>n.clear().catch((()=>un({caches:t}).clear()))}}function mn(e={serializable:!0}){let t={};return{get(n,r,o={miss:()=>Promise.resolve()}){const a=JSON.stringify(n);if(a in t)return Promise.resolve(e.serializable?JSON.parse(t[a]):t[a]);const c=r(),i=o&&o.miss||(()=>Promise.resolve());return c.then((e=>i(e))).then((()=>c))},set:(n,r)=>(t[JSON.stringify(n)]=e.serializable?JSON.stringify(r):r,Promise.resolve(r)),delete:e=>(delete t[JSON.stringify(e)],Promise.resolve()),clear:()=>(t={},Promise.resolve())}}function fn(e){let t=e.length-1;for(;t>0;t--){const n=Math.floor(Math.random()*(t+1)),r=e[t];e[t]=e[n],e[n]=r}return e}function dn(e,t){return t?(Object.keys(t).forEach((n=>{e[n]=t[n](e)})),e):e}function pn(e,...t){let n=0;return e.replace(/%s/g,(()=>encodeURIComponent(t[n++])))}const hn={WithinQueryParameters:0,WithinHeaders:1};function vn(e,t){const n=e||{},r=n.data||{};return Object.keys(n).forEach((e=>{-1===["timeout","headers","queryParameters","data","cacheable"].indexOf(e)&&(r[e]=n[e])})),{data:Object.entries(r).length>0?r:void 0,timeout:n.timeout||t,headers:n.headers||{},queryParameters:n.queryParameters||{},cacheable:n.cacheable}}const bn={Read:1,Write:2,Any:3};function yn(e,t=1){return{...e,status:t,lastUpdate:Date.now()}}function gn(e){return"string"==typeof e?{protocol:"https",url:e,accept:bn.Any}:{protocol:e.protocol||"https",url:e.url,accept:e.accept||bn.Any}}const On="GET",Sn="POST";function En(e,t,n,r){const o=[],a=function(e,t){if(e.method===On||void 0===e.data&&void 0===t.data)return;const n=Array.isArray(e.data)?e.data:{...e.data,...t.data};return JSON.stringify(n)}(n,r),c=function(e,t){const n={...e.headers,...t.headers},r={};return Object.keys(n).forEach((e=>{const t=n[e];r[e.toLowerCase()]=t})),r}(e,r),i=n.method,l=n.method!==On?{}:{...n.data,...r.data},s={"x-algolia-agent":e.userAgent.value,...e.queryParameters,...l,...r.queryParameters};let u=0;const m=(t,l)=>{const f=t.pop();if(void 0===f)throw{name:"RetryError",message:"Unreachable hosts - your application id may be incorrect. If the error persists, contact support@algolia.com.",transporterStackTrace:In(o)};const d={data:a,headers:c,method:i,url:wn(f,n.path,s),connectTimeout:l(u,e.timeouts.connect),responseTimeout:l(u,r.timeout)},p=e=>{const n={request:d,response:e,host:f,triesLeft:t.length};return o.push(n),n},h={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(n){const r=p(n);return n.isTimedOut&&u++,Promise.all([e.logger.info("Retryable failure",Pn(r)),e.hostsCache.set(f,yn(f,n.isTimedOut?3:2))]).then((()=>m(t,l)))},onFail(e){throw p(e),function({content:e,status:t},n){let r=e;try{r=JSON.parse(e).message}catch(e){}return function(e,t,n){return{name:"ApiError",message:e,status:t,transporterStackTrace:n}}(r,t,n)}(e,In(o))}};return e.requester.send(d).then((e=>((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))(e,h)))};return function(e,t){return Promise.all(t.map((t=>e.get(t,(()=>Promise.resolve(yn(t))))))).then((e=>{const n=e.filter((e=>function(e){return 1===e.status||Date.now()-e.lastUpdate>12e4}(e))),r=e.filter((e=>function(e){return 3===e.status&&Date.now()-e.lastUpdate<=12e4}(e))),o=[...n,...r];return{getTimeout:(e,t)=>(0===r.length&&0===e?1:r.length+3+e)*t,statelessHosts:o.length>0?o.map((e=>gn(e))):t}}))}(e.hostsCache,t).then((e=>m([...e.statelessHosts].reverse(),e.getTimeout)))}function jn(e){const t={value:`Algolia for JavaScript (${e})`,add(e){const n=`; ${e.segment}${void 0!==e.version?` (${e.version})`:""}`;return-1===t.value.indexOf(n)&&(t.value=`${t.value}${n}`),t}};return t}function wn(e,t,n){const r=kn(n);let o=`${e.protocol}://${e.url}/${"/"===t.charAt(0)?t.substr(1):t}`;return r.length&&(o+=`?${r}`),o}function kn(e){return Object.keys(e).map((t=>{return pn("%s=%s",t,(n=e[t],"[object Object]"===Object.prototype.toString.call(n)||"[object Array]"===Object.prototype.toString.call(n)?JSON.stringify(e[t]):e[t]));var n})).join("&")}function In(e){return e.map((e=>Pn(e)))}function Pn(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 Cn=e=>{const t=e.appId,n=function(e,t,n){const r={"x-algolia-api-key":n,"x-algolia-application-id":t};return{headers:()=>e===hn.WithinHeaders?r:{},queryParameters:()=>e===hn.WithinQueryParameters?r:{}}}(void 0!==e.authMode?e.authMode:hn.WithinHeaders,t,e.apiKey),r=function(e){const{hostsCache:t,logger:n,requester:r,requestsCache:o,responsesCache:a,timeouts:c,userAgent:i,hosts:l,queryParameters:s,headers:u}=e,m={hostsCache:t,logger:n,requester:r,requestsCache:o,responsesCache:a,timeouts:c,userAgent:i,headers:u,queryParameters:s,hosts:l.map((e=>gn(e))),read(e,t){const n=vn(t,m.timeouts.read),r=()=>En(m,m.hosts.filter((e=>!!(e.accept&bn.Read))),e,n);if(!0!==(void 0!==n.cacheable?n.cacheable:e.cacheable))return r();const o={request:e,mappedRequestOptions:n,transporter:{queryParameters:m.queryParameters,headers:m.headers}};return m.responsesCache.get(o,(()=>m.requestsCache.get(o,(()=>m.requestsCache.set(o,r()).then((e=>Promise.all([m.requestsCache.delete(o),e])),(e=>Promise.all([m.requestsCache.delete(o),Promise.reject(e)]))).then((([e,t])=>t))))),{miss:e=>m.responsesCache.set(o,e)})},write:(e,t)=>En(m,m.hosts.filter((e=>!!(e.accept&bn.Write))),e,vn(t,m.timeouts.write))};return m}({hosts:[{url:`${t}-dsn.algolia.net`,accept:bn.Read},{url:`${t}.algolia.net`,accept:bn.Write}].concat(fn([{url:`${t}-1.algolianet.com`},{url:`${t}-2.algolianet.com`},{url:`${t}-3.algolianet.com`}])),...e,headers:{...n.headers(),"content-type":"application/x-www-form-urlencoded",...e.headers},queryParameters:{...n.queryParameters(),...e.queryParameters}}),o={transporter:r,appId:t,addAlgoliaAgent(e,t){r.userAgent.add({segment:e,version:t})},clearCache:()=>Promise.all([r.requestsCache.clear(),r.responsesCache.clear()]).then((()=>{}))};return dn(o,e.methods)},Dn=e=>(t,n)=>t.method===On?e.transporter.read(t,n):e.transporter.write(t,n),_n=e=>(t,n={})=>dn({transporter:e.transporter,appId:e.appId,indexName:t},n.methods),Nn=e=>(t,n)=>{const r=t.map((e=>({...e,params:kn(e.params||{})})));return e.transporter.read({method:Sn,path:"1/indexes/*/queries",data:{requests:r},cacheable:!0},n)},An=e=>(t,n)=>Promise.all(t.map((t=>{const{facetName:r,facetQuery:o,...a}=t.params;return _n(e)(t.indexName,{methods:{searchForFacetValues:Ln}}).searchForFacetValues(r,o,{...n,...a})}))),Tn=e=>(t,n,r)=>e.transporter.read({method:Sn,path:pn("1/answers/%s/prediction",e.indexName),data:{query:t,queryLanguages:n},cacheable:!0},r),xn=e=>(t,n)=>e.transporter.read({method:Sn,path:pn("1/indexes/%s/query",e.indexName),data:{query:t},cacheable:!0},n),Ln=e=>(t,n,r)=>e.transporter.read({method:Sn,path:pn("1/indexes/%s/facets/%s/query",e.indexName,t),data:{facetQuery:n},cacheable:!0},r),Rn=1,Mn=2,qn=3;function Bn(e,t,n){const r={appId:e,apiKey:t,timeouts:{connect:1,read:2,write:30},requester:{send:e=>new Promise((t=>{const n=new XMLHttpRequest;n.open(e.method,e.url,!0),Object.keys(e.headers).forEach((t=>n.setRequestHeader(t,e.headers[t])));const r=(e,r)=>setTimeout((()=>{n.abort(),t({status:0,content:r,isTimedOut:!0})}),1e3*e),o=r(e.connectTimeout,"Connection timeout");let a;n.onreadystatechange=()=>{n.readyState>n.OPENED&&void 0===a&&(clearTimeout(o),a=r(e.responseTimeout,"Socket timeout"))},n.onerror=()=>{0===n.status&&(clearTimeout(o),clearTimeout(a),t({content:n.responseText||"Network request failed",status:n.status,isTimedOut:!1}))},n.onload=()=>{clearTimeout(o),clearTimeout(a),t({content:n.responseText,status:n.status,isTimedOut:!1})},n.send(e.data)}))},logger:(o=qn,{debug:(e,t)=>(Rn>=o&&console.debug(e,t),Promise.resolve()),info:(e,t)=>(Mn>=o&&console.info(e,t),Promise.resolve()),error:(e,t)=>(console.error(e,t),Promise.resolve())}),responsesCache:mn(),requestsCache:mn({serializable:!1}),hostsCache:un({caches:[sn({key:`4.19.1-${e}`}),mn()]}),userAgent:jn("4.19.1").add({segment:"Browser",version:"lite"}),authMode:hn.WithinQueryParameters};var o;return Cn({...r,...n,methods:{search:Nn,searchForFacetValues:An,multipleQueries:Nn,multipleSearchForFacetValues:An,customRequest:Dn,initIndex:e=>t=>_n(e)(t,{methods:{search:xn,searchForFacetValues:Ln,findAnswers:Tn}})}})}Bn.version="4.19.1";var Hn=["footer","searchBox"];function Fn(e){var t=e.appId,n=e.apiKey,r=e.indexName,a=e.placeholder,i=void 0===a?"Search docs":a,m=e.searchParameters,f=e.maxResultsPerGroup,d=e.onClose,p=void 0===d?Xt:d,h=e.transformItems,v=void 0===h?Jt:h,b=e.hitComponent,y=void 0===b?It:b,g=e.resultsFooterComponent,O=void 0===g?function(){return null}:g,S=e.navigator,E=e.initialScrollY,j=void 0===E?0:E,w=e.transformSearchClient,k=void 0===w?Jt:w,I=e.disableUserPersonalization,P=void 0!==I&&I,C=e.initialQuery,D=void 0===C?"":C,_=e.translations,N=void 0===_?{}:_,A=e.getMissingResultsUrl,T=e.insights,x=void 0!==T&&T,L=N.footer,R=N.searchBox,M=s(N,Hn),q=u(o.a.useState({query:"",collections:[],completion:null,context:{},isOpen:!1,activeItemId:null,status:"idle"}),2),B=q[0],H=q[1],F=o.a.useRef(null),U=o.a.useRef(null),V=o.a.useRef(null),$=o.a.useRef(null),K=o.a.useRef(null),z=o.a.useRef(10),J=o.a.useRef("undefined"!=typeof window?window.getSelection().toString().slice(0,64):"").current,W=o.a.useRef(D||J).current,X=function(e,t,n){return o.a.useMemo((function(){var r=Bn(e,t);return r.addAlgoliaAgent("docsearch","3.6.2"),!1===/docsearch.js \(.*\)/.test(r.transporter.userAgent.value)&&r.addAlgoliaAgent("docsearch-react","3.6.2"),n(r)}),[e,t,n])}(t,n,k),Q=o.a.useRef(ln({key:"__DOCSEARCH_FAVORITE_SEARCHES__".concat(r),limit:10})).current,Z=o.a.useRef(ln({key:"__DOCSEARCH_RECENT_SEARCHES__".concat(r),limit:0===Q.getAll().length?7:4})).current,G=o.a.useCallback((function(e){if(!P){var t="content"===e.type?e.__docsearch_parent:e;t&&-1===Q.getAll().findIndex((function(e){return e.objectID===t.objectID}))&&Z.add(t)}}),[Q,Z,P]),Y=o.a.useCallback((function(e){if(B.context.algoliaInsightsPlugin&&e.__autocomplete_id){var t=e,n={eventName:"Item Selected",index:t.__autocomplete_indexName,items:[t],positions:[e.__autocomplete_id],queryID:t.__autocomplete_queryID};B.context.algoliaInsightsPlugin.insights.clickedObjectIDsAfterSearch(n)}}),[B.context.algoliaInsightsPlugin]),ee=o.a.useMemo((function(){return Et({id:"docsearch",defaultActiveItemId:0,placeholder:i,openOnFocus:!0,initialState:{query:W,context:{searchSuggestions:[]}},insights:x,navigator:S,onStateChange:function(e){H(e.state)},getSources:function(e){var o=e.query,a=e.state,i=e.setContext,l=e.setStatus;if(!o)return P?[]:[{sourceId:"recentSearches",onSelect:function(e){var t=e.item,n=e.event;G(t),Wt(n)||p()},getItemUrl:function(e){return e.item.url},getItems:function(){return Z.getAll()}},{sourceId:"favoriteSearches",onSelect:function(e){var t=e.item,n=e.event;G(t),Wt(n)||p()},getItemUrl:function(e){return e.item.url},getItems:function(){return Q.getAll()}}];var s=Boolean(x);return X.search([{query:o,indexName:r,params:c({attributesToRetrieve:["hierarchy.lvl0","hierarchy.lvl1","hierarchy.lvl2","hierarchy.lvl3","hierarchy.lvl4","hierarchy.lvl5","hierarchy.lvl6","content","type","url"],attributesToSnippet:["hierarchy.lvl1:".concat(z.current),"hierarchy.lvl2:".concat(z.current),"hierarchy.lvl3:".concat(z.current),"hierarchy.lvl4:".concat(z.current),"hierarchy.lvl5:".concat(z.current),"hierarchy.lvl6:".concat(z.current),"content:".concat(z.current)],snippetEllipsisText:"\u2026",highlightPreTag:"",highlightPostTag:"",hitsPerPage:20,clickAnalytics:s},m)}]).catch((function(e){throw"RetryError"===e.name&&l("error"),e})).then((function(e){var o=e.results[0],l=o.hits,u=o.nbHits,m=zt(l,(function(e){return Gt(e)}),f);a.context.searchSuggestions.length0&&(re(),K.current&&K.current.focus())}),[W,re]),o.a.useEffect((function(){function e(){if(U.current){var e=.01*window.innerHeight;U.current.style.setProperty("--docsearch-vh","".concat(e,"px"))}}return e(),window.addEventListener("resize",e),function(){window.removeEventListener("resize",e)}}),[]),o.a.createElement("div",l({ref:F},ne({"aria-expanded":!0}),{className:["DocSearch","DocSearch-Container","stalled"===B.status&&"DocSearch-Container--Stalled","error"===B.status&&"DocSearch-Container--Errored"].filter(Boolean).join(" "),role:"button",tabIndex:0,onMouseDown:function(e){e.target===e.currentTarget&&p()}}),o.a.createElement("div",{className:"DocSearch-Modal",ref:U},o.a.createElement("header",{className:"DocSearch-SearchBar",ref:V},o.a.createElement(an,l({},ee,{state:B,autoFocus:0===W.length,inputRef:K,isFromSelection:Boolean(W)&&W===J,translations:R,onClose:p}))),o.a.createElement("div",{className:"DocSearch-Dropdown",ref:$},o.a.createElement(rn,l({},ee,{indexName:r,state:B,hitComponent:y,resultsFooterComponent:O,disableUserPersonalization:P,recentSearches:Z,favoriteSearches:Q,inputRef:K,translations:M,getMissingResultsUrl:A,onItemClick:function(e,t){Y(e),G(e),Wt(t)||p()}}))),o.a.createElement("footer",{className:"DocSearch-Footer"},o.a.createElement(kt,{translations:L}))))}function Un(e){var t=e.isOpen,n=e.onOpen,r=e.onClose,a=e.onInput,c=e.searchButtonRef;o.a.useEffect((function(){function e(e){var o;(27===e.keyCode&&t||"k"===(null===(o=e.key)||void 0===o?void 0:o.toLowerCase())&&(e.metaKey||e.ctrlKey)||!function(e){var t=e.target,n=t.tagName;return t.isContentEditable||"INPUT"===n||"SELECT"===n||"TEXTAREA"===n}(e)&&"/"===e.key&&!t)&&(e.preventDefault(),t?r():document.body.classList.contains("DocSearch--active")||document.body.classList.contains("DocSearch--active")||n()),c&&c.current===document.activeElement&&a&&/[a-zA-Z0-9]/.test(String.fromCharCode(e.keyCode))&&a(e)}return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}}),[t,n,r,a,c])}},645:function(e,t,n){"use strict";var r=n(0),o=n(656);t.a=function(){const e=Object(r.useContext)(o.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}},655:function(e,t,n){"use strict";var r=n(21),o=n(8),a=n(16);t.a=function(){const e=Object(r.useHistory)(),t=Object(r.useLocation)(),{siteConfig:{baseUrl:n}={}}=Object(a.default)();return{searchValue:o.a.canUseDOM&&new URLSearchParams(t.search).get("q")||"",updateSearchPath:n=>{const r=new URLSearchParams(t.search);n?r.set("q",n):r.delete("q"),e.replace({search:r.toString()})},generateSearchPageLink:e=>`${n}search?q=${encodeURIComponent(e)}`}}},656:function(e,t,n){"use strict";var r=n(0);const o=n.n(r).a.createContext(void 0);t.a=o},657:function(e,t,n){"use strict";var r=n(0),o=n(8);const a=()=>({scrollX:o.a.canUseDOM?window.pageXOffset:0,scrollY:o.a.canUseDOM?window.pageYOffset:0});t.a=function(e,t){void 0===t&&(t=[]);const[n,o]=Object(r.useState)(a()),c=()=>{const t=a();o(t),e&&e(t)};return Object(r.useEffect)((()=>{const e={passive:!0};return window.addEventListener("scroll",c,e),()=>window.removeEventListener("scroll",c,e)}),t),n}},658:function(e,t,n){"use strict";var r=n(0);t.a=function(e){void 0===e&&(e=!0),Object(r.useEffect)((()=>(document.body.style.overflow=e?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[e])}},659:function(e,t,n){"use strict";n.d(t,"b",(function(){return a}));var r=n(0),o=n(8);const a={desktop:"desktop",mobile:"mobile"};t.a=function(){const e=o.a.canUseDOM;function t(){if(e)return window.innerWidth>996?a.desktop:a.mobile}const[n,c]=Object(r.useState)(t);return Object(r.useEffect)((()=>{if(e)return window.addEventListener("resize",n),()=>window.removeEventListener("resize",n);function n(){c(t())}}),[]),n}},660:function(e,t,n){"use strict";var r=n(3),o=n(0),a=n.n(o),c=n(638),i=n(661),l=n(633),s=n(16),u=n(635);t.a=e=>{const{isClient:t}=Object(s.default)(),{navbar:{title:n,logo:o={src:""}}}=Object(u.useThemeConfig)(),{imageClassName:m,titleClassName:f,...d}=e,p=Object(l.a)(o.href||"/"),h={light:Object(l.a)(o.src),dark:Object(l.a)(o.srcDark||o.src)};return a.a.createElement(c.a,Object(r.a)({to:p},d,o.target&&{target:o.target}),o.src&&a.a.createElement(i.a,{key:t,className:m,sources:h,alt:o.alt||n||"Logo"}),null!=n&&a.a.createElement("strong",{className:f},n))}},661:function(e,t,n){"use strict";var r=n(3),o=n(0),a=n.n(o),c=n(628),i=n(16),l=n(645),s=n(61),u=n.n(s);t.a=e=>{const{isClient:t}=Object(i.default)(),{isDarkTheme:n}=Object(l.a)(),{sources:o,className:s,alt:m="",...f}=e,d=t?n?["dark"]:["light"]:["light","dark"];return a.a.createElement(a.a.Fragment,null,d.map((e=>a.a.createElement("img",Object(r.a)({key:e,src:o[e],alt:m,className:Object(c.a)(u.a.themedImage,u.a[`themedImage--${e}`],s)},f)))))}},662:function(e,t,n){"use strict";var r=n(3),o=n(0),a=n.n(o);t.a=e=>{let{width:t=30,height:n=30,className:o,...c}=e;return a.a.createElement("svg",Object(r.a)({"aria-label":"Menu",className:o,width:t,height:n,viewBox:"0 0 30 30",role:"img",focusable:"false"},c),a.a.createElement("title",null,"Menu"),a.a.createElement("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"}))}},684:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=Object.assign||function(e){for(var t=1;tthis.startX&&(this.setState({checked:!0}),this.startX=t,this.activated=tn?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,r)&&(n[r]=e[r]);return n}(t,["className","icons"])),a=(0,i.default)("react-toggle",{"react-toggle--checked":this.state.checked,"react-toggle--focus":this.state.hasFocus,"react-toggle--disabled":this.props.disabled},n);return c.default.createElement("div",{className:a,onClick:this.handleClick,onTouchStart:this.handleTouchStart,onTouchMove:this.handleTouchMove,onTouchEnd:this.handleTouchEnd},c.default.createElement("div",{className:"react-toggle-track"},c.default.createElement("div",{className:"react-toggle-track-check"},this.getIcon("checked")),c.default.createElement("div",{className:"react-toggle-track-x"},this.getIcon("unchecked"))),c.default.createElement("div",{className:"react-toggle-thumb"}),c.default.createElement("input",r({},o,{ref:function(t){e.input=t},onFocus:this.handleFocus,onBlur:this.handleBlur,className:"react-toggle-screenreader-only",type:"checkbox"})))}}]),t}(a.PureComponent);t.default=d,d.displayName="Toggle",d.defaultProps={icons:{checked:c.default.createElement(s.default,null),unchecked:c.default.createElement(u.default,null)}},d.propTypes={checked:l.default.bool,disabled:l.default.bool,defaultChecked:l.default.bool,onChange:l.default.func,onFocus:l.default.func,onBlur:l.default.func,className:l.default.string,name:l.default.string,value:l.default.string,id:l.default.string,"aria-labelledby":l.default.string,"aria-label":l.default.string,icons:l.default.oneOfType([l.default.bool,l.default.shape({checked:l.default.node,unchecked:l.default.node})])}},685:function(e,t,n){var r;!function(){"use strict";var n={}.hasOwnProperty;function o(){for(var e="",t=0;t0){var n=t[0];return{x:n.clientX,y:n.clientY}}var r=e.pageX;if(void 0!==r)return{x:r,y:e.pageY}}return{x:0,y:0}}},689:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return u}));var r=n(3),o=n(0),a=n.n(o),c=n(639),i=n(637),l=n(635);const s=e=>e.docs.find((t=>t.id===e.mainDocId));function u(e){var t;let{label:n,to:o,docsPluginId:u,...m}=e;const f=Object(i.useActiveVersion)(u),{preferredVersion:d}=Object(l.useDocsPreferredVersion)(u),p=Object(i.useLatestVersion)(u),h=null!==(t=null!=f?f:d)&&void 0!==t?t:p,v=null!=n?n:h.label,b=null!=o?o:s(h).path;return a.a.createElement(c.a,Object(r.a)({},m,{label:v,to:b}))}},690:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return u}));var r=n(3),o=n(0),a=n.n(o),c=n(639),i=n(637),l=n(635);const s=e=>e.docs.find((t=>t.id===e.mainDocId));function u(e){var t,n;let{mobile:o,docsPluginId:u,dropdownActiveClassDisabled:m,dropdownItemsBefore:f,dropdownItemsAfter:d,...p}=e;const h=Object(i.useActiveDocContext)(u),v=Object(i.useVersions)(u),b=Object(i.useLatestVersion)(u),{preferredVersion:y,savePreferredVersionName:g}=Object(l.useDocsPreferredVersion)(u);const O=null!==(t=null!==(n=h.activeVersion)&&void 0!==n?n:y)&&void 0!==t?t:b,S=o?"Versions":O.label,E=o?void 0:s(O).path;return a.a.createElement(c.a,Object(r.a)({},p,{mobile:o,label:S,to:E,items:function(){const e=v.map((e=>{const t=(null==h?void 0:h.alternateDocVersions[e.name])||s(e);return{isNavLink:!0,label:e.label,to:t.path,isActive:()=>e===(null==h?void 0:h.activeVersion),onClick:()=>{g(e.name)}}})),t=[...f,...e,...d];if(!(t.length<=1))return t}(),isActive:m?()=>!1:void 0}))}},691:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return u}));var r=n(3),o=n(0),a=n.n(o),c=n(639),i=n(637),l=n(628),s=n(635);function u(e){var t;let{docId:n,activeSidebarClassName:o,label:u,docsPluginId:m,...f}=e;const{activeVersion:d,activeDoc:p}=Object(i.useActiveDocContext)(m),{preferredVersion:h}=Object(s.useDocsPreferredVersion)(m),v=Object(i.useLatestVersion)(m),b=null!==(t=null!=d?d:h)&&void 0!==t?t:v,y=b.docs.find((e=>e.id===n));if(!y)throw new Error(`DocNavbarItem: couldn't find any doc with id=${n} in version ${b.name}.\nAvailable docIds=\n- ${b.docs.join("\n- ")}`);return a.a.createElement(c.a,Object(r.a)({exact:!0},f,{className:Object(l.a)(f.className,{[o]:p&&p.sidebar===y.sidebar}),label:null!=u?u:y.id,to:y.path}))}}}]); \ No newline at end of file diff --git a/assets/js/2.e086b3d3.js.LICENSE.txt b/assets/js/2.42d12bcd.js.LICENSE.txt similarity index 100% rename from assets/js/2.e086b3d3.js.LICENSE.txt rename to assets/js/2.42d12bcd.js.LICENSE.txt diff --git a/assets/js/2052c8bf.c6259a92.js b/assets/js/2052c8bf.720e0843.js similarity index 100% rename from assets/js/2052c8bf.c6259a92.js rename to assets/js/2052c8bf.720e0843.js diff --git a/assets/js/20ba5dc4.eda7aac9.js b/assets/js/20ba5dc4.a7b3a3fe.js similarity index 100% rename from assets/js/20ba5dc4.eda7aac9.js rename to assets/js/20ba5dc4.a7b3a3fe.js diff --git a/assets/js/2174d7ad.74cd536c.js b/assets/js/2174d7ad.d857c065.js similarity index 100% rename from assets/js/2174d7ad.74cd536c.js rename to assets/js/2174d7ad.d857c065.js diff --git a/assets/js/21f705f8.231710e7.js b/assets/js/21f705f8.e1480f1e.js similarity index 100% rename from assets/js/21f705f8.231710e7.js rename to assets/js/21f705f8.e1480f1e.js diff --git a/assets/js/224d62cb.e45a001c.js b/assets/js/224d62cb.592a604b.js similarity index 100% rename from assets/js/224d62cb.e45a001c.js rename to assets/js/224d62cb.592a604b.js diff --git a/assets/js/225ed1f6.69488e6c.js b/assets/js/225ed1f6.b2fe862e.js similarity index 100% rename from assets/js/225ed1f6.69488e6c.js rename to assets/js/225ed1f6.b2fe862e.js diff --git a/assets/js/229cc33d.00ea9bcc.js b/assets/js/229cc33d.8eda4b7f.js similarity index 100% rename from assets/js/229cc33d.00ea9bcc.js rename to assets/js/229cc33d.8eda4b7f.js diff --git a/assets/js/22f62845.20c6ab00.js b/assets/js/22f62845.5ce9829d.js similarity index 100% rename from assets/js/22f62845.20c6ab00.js rename to assets/js/22f62845.5ce9829d.js diff --git a/assets/js/230b1eeb.b420a3bf.js b/assets/js/230b1eeb.8f4479db.js similarity index 100% rename from assets/js/230b1eeb.b420a3bf.js rename to assets/js/230b1eeb.8f4479db.js diff --git a/assets/js/23364b07.0c1faef6.js b/assets/js/23364b07.9d55db0b.js similarity index 100% rename from assets/js/23364b07.0c1faef6.js rename to assets/js/23364b07.9d55db0b.js diff --git a/assets/js/2351c769.794ff28c.js b/assets/js/2351c769.bdfe7354.js similarity index 100% rename from assets/js/2351c769.794ff28c.js rename to assets/js/2351c769.bdfe7354.js diff --git a/assets/js/247738c9.88ad4e2b.js b/assets/js/247738c9.46f4f49a.js similarity index 100% rename from assets/js/247738c9.88ad4e2b.js rename to assets/js/247738c9.46f4f49a.js diff --git a/assets/js/25d8378a.e4d377d0.js b/assets/js/25d8378a.e6408425.js similarity index 100% rename from assets/js/25d8378a.e4d377d0.js rename to assets/js/25d8378a.e6408425.js diff --git a/assets/js/26eea951.53aee9c3.js b/assets/js/26eea951.4b90dbef.js similarity index 100% rename from assets/js/26eea951.53aee9c3.js rename to assets/js/26eea951.4b90dbef.js diff --git a/assets/js/27767c4e.2bc751e6.js b/assets/js/27767c4e.afe5eabb.js similarity index 100% rename from assets/js/27767c4e.2bc751e6.js rename to assets/js/27767c4e.afe5eabb.js diff --git a/assets/js/277f3e44.0da9feae.js b/assets/js/277f3e44.acd0d6fb.js similarity index 100% rename from assets/js/277f3e44.0da9feae.js rename to assets/js/277f3e44.acd0d6fb.js diff --git a/assets/js/27c72f74.c1388822.js b/assets/js/27c72f74.061fedf7.js similarity index 100% rename from assets/js/27c72f74.c1388822.js rename to assets/js/27c72f74.061fedf7.js diff --git a/assets/js/27e70a48.67e6e817.js b/assets/js/27e70a48.f3969a67.js similarity index 100% rename from assets/js/27e70a48.67e6e817.js rename to assets/js/27e70a48.f3969a67.js diff --git a/assets/js/284505a6.130e9147.js b/assets/js/284505a6.48010abd.js similarity index 100% rename from assets/js/284505a6.130e9147.js rename to assets/js/284505a6.48010abd.js diff --git a/assets/js/29a86ae9.872fc26d.js b/assets/js/29a86ae9.334b31e1.js similarity index 100% rename from assets/js/29a86ae9.872fc26d.js rename to assets/js/29a86ae9.334b31e1.js diff --git a/assets/js/2acb663b.0755eecd.js b/assets/js/2acb663b.80af43b4.js similarity index 100% rename from assets/js/2acb663b.0755eecd.js rename to assets/js/2acb663b.80af43b4.js diff --git a/assets/js/2adc064f.d68c3fb3.js b/assets/js/2adc064f.791d894d.js similarity index 100% rename from assets/js/2adc064f.d68c3fb3.js rename to assets/js/2adc064f.791d894d.js diff --git a/assets/js/2ba78b99.450557e6.js b/assets/js/2ba78b99.cd71661c.js similarity index 100% rename from assets/js/2ba78b99.450557e6.js rename to assets/js/2ba78b99.cd71661c.js diff --git a/assets/js/2bfdf9e1.844efd42.js b/assets/js/2bfdf9e1.cd932d65.js similarity index 100% rename from assets/js/2bfdf9e1.844efd42.js rename to assets/js/2bfdf9e1.cd932d65.js diff --git a/assets/js/2c39de7d.21987181.js b/assets/js/2c39de7d.0470ad67.js similarity index 100% rename from assets/js/2c39de7d.21987181.js rename to assets/js/2c39de7d.0470ad67.js diff --git a/assets/js/2c73c4ce.1b036c8e.js b/assets/js/2c73c4ce.d48a23ef.js similarity index 100% rename from assets/js/2c73c4ce.1b036c8e.js rename to assets/js/2c73c4ce.d48a23ef.js diff --git a/assets/js/2c7836e6.c766f4a7.js b/assets/js/2c7836e6.57aa2a72.js similarity index 100% rename from assets/js/2c7836e6.c766f4a7.js rename to assets/js/2c7836e6.57aa2a72.js diff --git a/assets/js/2cd645c9.a52392aa.js b/assets/js/2cd645c9.77bbb468.js similarity index 100% rename from assets/js/2cd645c9.a52392aa.js rename to assets/js/2cd645c9.77bbb468.js diff --git a/assets/js/2dc37949.17a824d3.js b/assets/js/2dc37949.10f7bf25.js similarity index 100% rename from assets/js/2dc37949.17a824d3.js rename to assets/js/2dc37949.10f7bf25.js diff --git a/assets/js/2e38527b.6e65f944.js b/assets/js/2e38527b.a2040f34.js similarity index 100% rename from assets/js/2e38527b.6e65f944.js rename to assets/js/2e38527b.a2040f34.js diff --git a/assets/js/2e6c07ac.5c4c0789.js b/assets/js/2e6c07ac.503d8387.js similarity index 100% rename from assets/js/2e6c07ac.5c4c0789.js rename to assets/js/2e6c07ac.503d8387.js diff --git a/assets/js/2e98f0ad.f4927e93.js b/assets/js/2e98f0ad.c982f62c.js similarity index 100% rename from assets/js/2e98f0ad.f4927e93.js rename to assets/js/2e98f0ad.c982f62c.js diff --git a/assets/js/2eccfab5.d05d9f4b.js b/assets/js/2eccfab5.2d0d3059.js similarity index 100% rename from assets/js/2eccfab5.d05d9f4b.js rename to assets/js/2eccfab5.2d0d3059.js diff --git a/assets/js/2ef5a19c.5ba8f7ba.js b/assets/js/2ef5a19c.f203fccd.js similarity index 100% rename from assets/js/2ef5a19c.5ba8f7ba.js rename to assets/js/2ef5a19c.f203fccd.js diff --git a/assets/js/2efb2482.c419ef8a.js b/assets/js/2efb2482.1127574d.js similarity index 100% rename from assets/js/2efb2482.c419ef8a.js rename to assets/js/2efb2482.1127574d.js diff --git a/assets/js/2fd4abc7.f027514a.js b/assets/js/2fd4abc7.595f2ea1.js similarity index 100% rename from assets/js/2fd4abc7.f027514a.js rename to assets/js/2fd4abc7.595f2ea1.js diff --git a/assets/js/2fded03d.de783620.js b/assets/js/2fded03d.85a825e2.js similarity index 100% rename from assets/js/2fded03d.de783620.js rename to assets/js/2fded03d.85a825e2.js diff --git a/assets/js/300bb418.927c3866.js b/assets/js/300bb418.4955dc9b.js similarity index 100% rename from assets/js/300bb418.927c3866.js rename to assets/js/300bb418.4955dc9b.js diff --git a/assets/js/30e9c26f.241d96f1.js b/assets/js/30e9c26f.4f6bf9fc.js similarity index 100% rename from assets/js/30e9c26f.241d96f1.js rename to assets/js/30e9c26f.4f6bf9fc.js diff --git a/assets/js/31a43934.69f0f5b0.js b/assets/js/31a43934.0dc7ef5d.js similarity index 100% rename from assets/js/31a43934.69f0f5b0.js rename to assets/js/31a43934.0dc7ef5d.js diff --git a/assets/js/325a1917.dc04bb4e.js b/assets/js/325a1917.ef5a8784.js similarity index 100% rename from assets/js/325a1917.dc04bb4e.js rename to assets/js/325a1917.ef5a8784.js diff --git a/assets/js/32dd1b94.a4ad45ec.js b/assets/js/32dd1b94.ba2f21d8.js similarity index 100% rename from assets/js/32dd1b94.a4ad45ec.js rename to assets/js/32dd1b94.ba2f21d8.js diff --git a/assets/js/32fb468f.056054b9.js b/assets/js/32fb468f.a2c5249a.js similarity index 100% rename from assets/js/32fb468f.056054b9.js rename to assets/js/32fb468f.a2c5249a.js diff --git a/assets/js/33f38c8c.7d9850bf.js b/assets/js/33f38c8c.40527a23.js similarity index 100% rename from assets/js/33f38c8c.7d9850bf.js rename to assets/js/33f38c8c.40527a23.js diff --git a/assets/js/349e8d4a.a3210e4b.js b/assets/js/349e8d4a.8f2511d3.js similarity index 100% rename from assets/js/349e8d4a.a3210e4b.js rename to assets/js/349e8d4a.8f2511d3.js diff --git a/assets/js/34dc379b.98eaeb2e.js b/assets/js/34dc379b.1e741e95.js similarity index 100% rename from assets/js/34dc379b.98eaeb2e.js rename to assets/js/34dc379b.1e741e95.js diff --git a/assets/js/36283c57.2314f1bb.js b/assets/js/36283c57.1e1783ac.js similarity index 100% rename from assets/js/36283c57.2314f1bb.js rename to assets/js/36283c57.1e1783ac.js diff --git a/assets/js/365a98ea.3aa54095.js b/assets/js/365a98ea.f0b2c346.js similarity index 100% rename from assets/js/365a98ea.3aa54095.js rename to assets/js/365a98ea.f0b2c346.js diff --git a/assets/js/3668d48f.3f9a8191.js b/assets/js/3668d48f.1c7a3685.js similarity index 100% rename from assets/js/3668d48f.3f9a8191.js rename to assets/js/3668d48f.1c7a3685.js diff --git a/assets/js/3772e865.0da4b737.js b/assets/js/3772e865.8b0a484e.js similarity index 100% rename from assets/js/3772e865.0da4b737.js rename to assets/js/3772e865.8b0a484e.js diff --git a/assets/js/386ca56c.f6cb5bd3.js b/assets/js/386ca56c.64923550.js similarity index 100% rename from assets/js/386ca56c.f6cb5bd3.js rename to assets/js/386ca56c.64923550.js diff --git a/assets/js/3918bdf1.7e37da4b.js b/assets/js/3918bdf1.b039af7e.js similarity index 100% rename from assets/js/3918bdf1.7e37da4b.js rename to assets/js/3918bdf1.b039af7e.js diff --git a/assets/js/3a53bf1a.3ae82d9d.js b/assets/js/3a53bf1a.bf298b34.js similarity index 100% rename from assets/js/3a53bf1a.3ae82d9d.js rename to assets/js/3a53bf1a.bf298b34.js diff --git a/assets/js/3a69f308.fd8bf0bc.js b/assets/js/3a69f308.873e96c0.js similarity index 100% rename from assets/js/3a69f308.fd8bf0bc.js rename to assets/js/3a69f308.873e96c0.js diff --git a/assets/js/3aa54180.f4696613.js b/assets/js/3aa54180.7e129cbb.js similarity index 100% rename from assets/js/3aa54180.f4696613.js rename to assets/js/3aa54180.7e129cbb.js diff --git a/assets/js/3aaae8c2.28aaa112.js b/assets/js/3aaae8c2.9e4a2c0d.js similarity index 100% rename from assets/js/3aaae8c2.28aaa112.js rename to assets/js/3aaae8c2.9e4a2c0d.js diff --git a/assets/js/3acffe63.83324a49.js b/assets/js/3acffe63.6bb8259f.js similarity index 100% rename from assets/js/3acffe63.83324a49.js rename to assets/js/3acffe63.6bb8259f.js diff --git a/assets/js/3bcd1d8e.8c7ed942.js b/assets/js/3bcd1d8e.db208a99.js similarity index 100% rename from assets/js/3bcd1d8e.8c7ed942.js rename to assets/js/3bcd1d8e.db208a99.js diff --git a/assets/js/3c659cae.17a7bc7f.js b/assets/js/3c659cae.51eeb741.js similarity index 100% rename from assets/js/3c659cae.17a7bc7f.js rename to assets/js/3c659cae.51eeb741.js diff --git a/assets/js/3c8c2bf8.c0e0245b.js b/assets/js/3c8c2bf8.22a2fa42.js similarity index 100% rename from assets/js/3c8c2bf8.c0e0245b.js rename to assets/js/3c8c2bf8.22a2fa42.js diff --git a/assets/js/3dec5134.1127e95a.js b/assets/js/3dec5134.d23f1348.js similarity index 100% rename from assets/js/3dec5134.1127e95a.js rename to assets/js/3dec5134.d23f1348.js diff --git a/assets/js/3e3e6ec9.b2fefd84.js b/assets/js/3e3e6ec9.a5e0ff92.js similarity index 100% rename from assets/js/3e3e6ec9.b2fefd84.js rename to assets/js/3e3e6ec9.a5e0ff92.js diff --git a/assets/js/3e84ded7.3d234679.js b/assets/js/3e84ded7.1afd9035.js similarity index 100% rename from assets/js/3e84ded7.3d234679.js rename to assets/js/3e84ded7.1afd9035.js diff --git a/assets/js/3ed77703.82741f94.js b/assets/js/3ed77703.32c3798b.js similarity index 100% rename from assets/js/3ed77703.82741f94.js rename to assets/js/3ed77703.32c3798b.js diff --git a/assets/js/3ef95f29.dfc573db.js b/assets/js/3ef95f29.a26fbc06.js similarity index 100% rename from assets/js/3ef95f29.dfc573db.js rename to assets/js/3ef95f29.a26fbc06.js diff --git a/assets/js/40e89655.c551e89a.js b/assets/js/40e89655.336b0b26.js similarity index 100% rename from assets/js/40e89655.c551e89a.js rename to assets/js/40e89655.336b0b26.js diff --git a/assets/js/41193e56.73d1b787.js b/assets/js/41193e56.e5969cd7.js similarity index 100% rename from assets/js/41193e56.73d1b787.js rename to assets/js/41193e56.e5969cd7.js diff --git a/assets/js/4226e2c2.fc48bed1.js b/assets/js/4226e2c2.9c292e9e.js similarity index 100% rename from assets/js/4226e2c2.fc48bed1.js rename to assets/js/4226e2c2.9c292e9e.js diff --git a/assets/js/4288bfb7.7d662ca1.js b/assets/js/4288bfb7.68a153c4.js similarity index 100% rename from assets/js/4288bfb7.7d662ca1.js rename to assets/js/4288bfb7.68a153c4.js diff --git a/assets/js/43257ae2.c13d8b1f.js b/assets/js/43257ae2.3bf4d161.js similarity index 100% rename from assets/js/43257ae2.c13d8b1f.js rename to assets/js/43257ae2.3bf4d161.js diff --git a/assets/js/43d32eee.cc4104cc.js b/assets/js/43d32eee.7a86038b.js similarity index 100% rename from assets/js/43d32eee.cc4104cc.js rename to assets/js/43d32eee.7a86038b.js diff --git a/assets/js/43d660c3.4c05681a.js b/assets/js/43d660c3.21c8e3d8.js similarity index 100% rename from assets/js/43d660c3.4c05681a.js rename to assets/js/43d660c3.21c8e3d8.js diff --git a/assets/js/449f6c51.0c9b6999.js b/assets/js/449f6c51.83c1fc48.js similarity index 100% rename from assets/js/449f6c51.0c9b6999.js rename to assets/js/449f6c51.83c1fc48.js diff --git a/assets/js/44e087e9.94464a87.js b/assets/js/44e087e9.b3f3ff26.js similarity index 100% rename from assets/js/44e087e9.94464a87.js rename to assets/js/44e087e9.b3f3ff26.js diff --git a/assets/js/4513538c.bdaf04fa.js b/assets/js/4513538c.86393762.js similarity index 100% rename from assets/js/4513538c.bdaf04fa.js rename to assets/js/4513538c.86393762.js diff --git a/assets/js/454ed5cc.256c7579.js b/assets/js/454ed5cc.38a87b58.js similarity index 100% rename from assets/js/454ed5cc.256c7579.js rename to assets/js/454ed5cc.38a87b58.js diff --git a/assets/js/46435fbd.26b327b4.js b/assets/js/46435fbd.092fbdbe.js similarity index 100% rename from assets/js/46435fbd.26b327b4.js rename to assets/js/46435fbd.092fbdbe.js diff --git a/assets/js/466a5eab.fe6941af.js b/assets/js/466a5eab.b905e9e7.js similarity index 100% rename from assets/js/466a5eab.fe6941af.js rename to assets/js/466a5eab.b905e9e7.js diff --git a/assets/js/46bec9c2.f9ea0ff1.js b/assets/js/46bec9c2.d986abd9.js similarity index 100% rename from assets/js/46bec9c2.f9ea0ff1.js rename to assets/js/46bec9c2.d986abd9.js diff --git a/assets/js/46f83c70.d7fd11da.js b/assets/js/46f83c70.c1560c5f.js similarity index 100% rename from assets/js/46f83c70.d7fd11da.js rename to assets/js/46f83c70.c1560c5f.js diff --git a/assets/js/471dc5a0.7fdcf3fa.js b/assets/js/471dc5a0.8c693bbf.js similarity index 100% rename from assets/js/471dc5a0.7fdcf3fa.js rename to assets/js/471dc5a0.8c693bbf.js diff --git a/assets/js/47b574fd.eb1be317.js b/assets/js/47b574fd.b05a5899.js similarity index 100% rename from assets/js/47b574fd.eb1be317.js rename to assets/js/47b574fd.b05a5899.js diff --git a/assets/js/4881a286.3038deab.js b/assets/js/4881a286.54ef4ae9.js similarity index 100% rename from assets/js/4881a286.3038deab.js rename to assets/js/4881a286.54ef4ae9.js diff --git a/assets/js/48fd24b5.64a63b6f.js b/assets/js/48fd24b5.0c3f87a4.js similarity index 100% rename from assets/js/48fd24b5.64a63b6f.js rename to assets/js/48fd24b5.0c3f87a4.js diff --git a/assets/js/495121d7.e0545f7d.js b/assets/js/495121d7.15e37147.js similarity index 100% rename from assets/js/495121d7.e0545f7d.js rename to assets/js/495121d7.15e37147.js diff --git a/assets/js/49dbe183.49f4c402.js b/assets/js/49dbe183.64fbdcba.js similarity index 100% rename from assets/js/49dbe183.49f4c402.js rename to assets/js/49dbe183.64fbdcba.js diff --git a/assets/js/4a6001c6.fe55291d.js b/assets/js/4a6001c6.612de358.js similarity index 100% rename from assets/js/4a6001c6.fe55291d.js rename to assets/js/4a6001c6.612de358.js diff --git a/assets/js/4a6249b7.5ab4a4c3.js b/assets/js/4a6249b7.710c243e.js similarity index 100% rename from assets/js/4a6249b7.5ab4a4c3.js rename to assets/js/4a6249b7.710c243e.js diff --git a/assets/js/4aaef72d.0b160e63.js b/assets/js/4aaef72d.079d8f38.js similarity index 100% rename from assets/js/4aaef72d.0b160e63.js rename to assets/js/4aaef72d.079d8f38.js diff --git a/assets/js/4af4128a.62250dc2.js b/assets/js/4af4128a.0bd822df.js similarity index 100% rename from assets/js/4af4128a.62250dc2.js rename to assets/js/4af4128a.0bd822df.js diff --git a/assets/js/4af4c56b.7d3de52a.js b/assets/js/4af4c56b.bb03fcc8.js similarity index 100% rename from assets/js/4af4c56b.7d3de52a.js rename to assets/js/4af4c56b.bb03fcc8.js diff --git a/assets/js/4b843adc.6ba05533.js b/assets/js/4b843adc.268b8d76.js similarity index 100% rename from assets/js/4b843adc.6ba05533.js rename to assets/js/4b843adc.268b8d76.js diff --git a/assets/js/4c165ffd.1e1341a0.js b/assets/js/4c165ffd.b3e599e2.js similarity index 100% rename from assets/js/4c165ffd.1e1341a0.js rename to assets/js/4c165ffd.b3e599e2.js diff --git a/assets/js/4c2b683c.5a5e0f51.js b/assets/js/4c2b683c.3b21949a.js similarity index 100% rename from assets/js/4c2b683c.5a5e0f51.js rename to assets/js/4c2b683c.3b21949a.js diff --git a/assets/js/4e290c7d.e2c9ad4c.js b/assets/js/4e290c7d.1a704a1f.js similarity index 100% rename from assets/js/4e290c7d.e2c9ad4c.js rename to assets/js/4e290c7d.1a704a1f.js diff --git a/assets/js/4e57bc4b.44c75058.js b/assets/js/4e57bc4b.0b0bf4de.js similarity index 100% rename from assets/js/4e57bc4b.44c75058.js rename to assets/js/4e57bc4b.0b0bf4de.js diff --git a/assets/js/4e8c4aff.c3b21830.js b/assets/js/4e8c4aff.b47a4e9d.js similarity index 100% rename from assets/js/4e8c4aff.c3b21830.js rename to assets/js/4e8c4aff.b47a4e9d.js diff --git a/assets/js/4e9cf07e.48cb062f.js b/assets/js/4e9cf07e.45a55b35.js similarity index 100% rename from assets/js/4e9cf07e.48cb062f.js rename to assets/js/4e9cf07e.45a55b35.js diff --git a/assets/js/4f219231.a4286c1c.js b/assets/js/4f219231.648e997e.js similarity index 100% rename from assets/js/4f219231.a4286c1c.js rename to assets/js/4f219231.648e997e.js diff --git a/assets/js/4f53deb4.bbcd0c6c.js b/assets/js/4f53deb4.bea1914b.js similarity index 100% rename from assets/js/4f53deb4.bbcd0c6c.js rename to assets/js/4f53deb4.bea1914b.js diff --git a/assets/js/4f95cddb.a4954403.js b/assets/js/4f95cddb.edf4618f.js similarity index 100% rename from assets/js/4f95cddb.a4954403.js rename to assets/js/4f95cddb.edf4618f.js diff --git a/assets/js/4f9dda28.641de565.js b/assets/js/4f9dda28.b9fbdb65.js similarity index 100% rename from assets/js/4f9dda28.641de565.js rename to assets/js/4f9dda28.b9fbdb65.js diff --git a/assets/js/514caecc.b06e4565.js b/assets/js/514caecc.3dc7ba46.js similarity index 100% rename from assets/js/514caecc.b06e4565.js rename to assets/js/514caecc.3dc7ba46.js diff --git a/assets/js/51a7f34b.98cf97d8.js b/assets/js/51a7f34b.428ba8c3.js similarity index 100% rename from assets/js/51a7f34b.98cf97d8.js rename to assets/js/51a7f34b.428ba8c3.js diff --git a/assets/js/52a0cead.c8099cc9.js b/assets/js/52a0cead.9dcf4a73.js similarity index 100% rename from assets/js/52a0cead.c8099cc9.js rename to assets/js/52a0cead.9dcf4a73.js diff --git a/assets/js/532c3d82.e03f5caa.js b/assets/js/532c3d82.d0f0b267.js similarity index 100% rename from assets/js/532c3d82.e03f5caa.js rename to assets/js/532c3d82.d0f0b267.js diff --git a/assets/js/532fd2f5.8b018fad.js b/assets/js/532fd2f5.5cd0ad07.js similarity index 100% rename from assets/js/532fd2f5.8b018fad.js rename to assets/js/532fd2f5.5cd0ad07.js diff --git a/assets/js/535fb627.43c8e936.js b/assets/js/535fb627.506bcb5c.js similarity index 100% rename from assets/js/535fb627.43c8e936.js rename to assets/js/535fb627.506bcb5c.js diff --git a/assets/js/5369bc20.e0f6d9b8.js b/assets/js/5369bc20.a6f8aace.js similarity index 100% rename from assets/js/5369bc20.e0f6d9b8.js rename to assets/js/5369bc20.a6f8aace.js diff --git a/assets/js/54e20c5d.cb7fdc36.js b/assets/js/54e20c5d.11466dd2.js similarity index 100% rename from assets/js/54e20c5d.cb7fdc36.js rename to assets/js/54e20c5d.11466dd2.js diff --git a/assets/js/552.0745ce7f.js b/assets/js/552.90c7804d.js similarity index 99% rename from assets/js/552.0745ce7f.js rename to assets/js/552.90c7804d.js index 84c5d134c55..088e1881482 100644 --- a/assets/js/552.0745ce7f.js +++ b/assets/js/552.90c7804d.js @@ -1,2 +1,2 @@ -/*! For license information please see 552.0745ce7f.js.LICENSE.txt */ +/*! For license information please see 552.90c7804d.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(740),o=r.n(c),u=r(628),h=r(22),f=r(638),l=r(8),m=r(635),d=r(16),p=r(637),v=r(655),g=r(641),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(u.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 _!==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),S=s()(e,t),N=o()(S,r,{hitsPerPage:15,advancedSyntax:!0,disjunctiveFacets:["language","docusaurus_tag"]});N.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[A,H]=Object(n.useState)(null),Q=Object(n.useRef)(0),T=Object(n.useRef)(l.a.canUseDOM&&new IntersectionObserver((e=>{const{isIntersecting:t,boundingClientRect:{y:r}}=e[0];t&&Q.current>r&&w({type:"advance"}),Q.current=r}),{threshold:1})),C=()=>_?Object(y.b)({id:"theme.SearchPage.existingResultsTitle",message:'Search results for "{query}"',description:"The search page title for non-empty query"},{query:_}):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),N.addDisjunctiveFacetRefinement("docusaurus_tag","default"),N.addDisjunctiveFacetRefinement("language",a),Object.entries(R.searchVersions).forEach((e=>{let[t,r]=e;N.addDisjunctiveFacetRefinement("docusaurus_tag",`docs-${t}-${r}`)})),N.setQuery(_).setPage(e).search()};return Object(n.useEffect)((()=>{if(A)return T.current.observe(A),()=>{T.current.unobserve(A)}}),[A]),Object(n.useEffect)((()=>{P(_),w({type:"reset"}),_&&(w({type:"loading"}),setTimeout((()=>{D()}),300))}),[_,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(u.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(e.target.value),value:_,autoComplete:"off",autoFocus:!0})),R.versioningEnabled&&i.a.createElement(b,{docsSearchVersionsHelpers:R})),i.a.createElement("div",{className:Object(u.a)("row","margin-vert--sm")},i.a.createElement("div",{className:Object(u.a)("col","col--8",F.a.searchResultsColumn)},!!O.totalResults&&i.a.createElement("strong",null,c(O.totalResults))),i.a.createElement("div",{className:Object(u.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}}))}))):[_&&!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...")))))}},640:function(e,t,r){"use strict";e.exports=function(e,t){if(Array.isArray(e))for(var r=0;r0}},649: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}},650: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}),{})}},664: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,o,u;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=(u=r.slice()).length,o=0;o0&&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)}},665: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}})}},666:function(e,t,r){"use strict";function n(e){e=e||{},this.params=e.params||[]}n.prototype={constructor:n,addParams:function(e){var t=this.params.slice();return t.push(e),new n({params:t})},removeParams:function(e){return new n({params:this.params.filter((function(t){return t.$$id!==e}))})},addFrequentlyBoughtTogether:function(e){return this.addParams(Object.assign({},e,{model:"bought-together"}))},addRelatedProducts:function(e){return this.addParams(Object.assign({},e,{model:"related-products"}))},addTrendingItems:function(e){return this.addParams(Object.assign({},e,{model:"trending-items"}))},addTrendingFacets:function(e){return this.addParams(Object.assign({},e,{model:"trending-facets"}))},addLookingSimilar:function(e){return this.addParams(Object.assign({},e,{model:"looking-similar"}))},_buildQueries:function(e,t){return this.params.filter((function(e){return void 0===t[e.$$id]})).map((function(t){var r=Object.assign({},t,{indexName:e,threshold:t.threshold||0});return delete r.$$id,r}))}},e.exports=n},667:function(e,t,r){"use strict";function n(e,t){this._state=e,this._rawResults={};var r=this;e.params.forEach((function(e){var n=e.$$id;r[n]=t[n],r._rawResults[n]=t[n]}))}n.prototype={constructor:n},e.exports=n},668:function(e,t,r){"use strict";var n=r(650),i=r(640),a=r(744),s=r(643),c=r(648),o=r(649),u=r(745),h=r(746),f=r(747);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=u(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,u(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 o(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=u(r),o=void 0!==(a=this.numericRefinements[e][t],s=c,i(a,(function(e){return l(e,s)})));return n&&o},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?o(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},669:function(e,t,r){"use strict";var n=r(748),i=r(650),a=r(647),s=r(640),c=r(749),o=r(670),u=r(643),h=r(671),f=a.escapeFacetValue,l=a.unescapeFacetValue,m=r(750);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 o=this;Object.keys(a).forEach((function(e){o[e]=a[e]}));var h=u({persistHierarchicalRootCount:!1},r);Object.keys(h).forEach((function(e){o[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],u=(r=e.hierarchicalFacets,n=t,s(r,(function(e){return(e.attributes||[]).indexOf(n)>-1})));if(u){var h=u.attributes.indexOf(t),f=c(e.hierarchicalFacets,(function(e){return e.name===u.name}));o.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],o.disjunctiveFacets[l]={name:t,data:i,exhaustive:a.exhaustiveFacetsCount},p(o.disjunctiveFacets[l],a.facets_stats,t)),d&&(l=v[t],o.facets[l]={name:t,data:i,exhaustive:a.exhaustiveFacetsCount},p(o.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(o.hierarchicalFacets[r],(function(e){return e.attribute===t}));if(-1===m)return;o.hierarchicalFacets[r][m].data=u({},o.hierarchicalFacets[r][m].data,f)}else{r=g[t];var d=a.facets&&a.facets[t]||{};o.disjunctiveFacets[r]={name:t,data:i({},f,d),exhaustive:n.exhaustiveFacetsCount},p(o.disjunctiveFacets[r],n.facets_stats,t),e.disjunctiveFacetsRefinements[t]&&e.disjunctiveFacetsRefinements[t].forEach((function(n){!o.disjunctiveFacets[r].data[n]&&e.disjunctiveFacetsRefinements[t].indexOf(l(n))>-1&&(o.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 u=r[t],h=c(e.hierarchicalFacets,(function(e){return e.name===n.name})),f=c(o.hierarchicalFacets[h],(function(e){return e.attribute===t}));if(-1!==f){var l={};if(s.length>0&&!o.persistHierarchicalRootCount){var m=s[0].split(a)[0];l[m]=o.hierarchicalFacets[h][f].data[m]}o.hierarchicalFacets[h][f].data=i(l,u,o.hierarchicalFacets[h][f].data)}})),y++}))})),Object.keys(e.facetsExcludes).forEach((function(t){var r=e.facetsExcludes[t],n=v[t];o.facets[n]={name:t,data:R[t],exhaustive:a.exhaustiveFacetsCount},r.forEach((function(e){o.facets[n]=o.facets[n]||{name:t},o.facets[n].data=o.facets[n].data||{},o.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),o=e._state._getHierarchicalFacetSeparator(c),u=l(e._state.getHierarchicalRefinement(t)[0]||"");0===u.indexOf(c.rootPath)&&(u=u.replace(c.rootPath+o,""));var h=u.split(o);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,o=a&&a.exhaustive||!1;return{type:t,attributeName:r,name:n,count:c,exhaustive:o}}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.hide||[],a=(t.order||[]).reduce((function(e,t,r){return e[t]=r,e}),{});e.forEach((function(e){var t=e.path||e.name,s=i.indexOf(t)>-1;s||void 0===a[t]?s||n.push(e):r[a[t]]=e})),r=r.filter((function(e){return e}));var s,c=t.sortRemainingBy;return"hidden"===c?r:(s="alpha"===c?[["path","name"],["asc","asc"]]:[["count"],["desc"]],r.concat(h(n,s[0],s[1])))}(e,r)}if(Array.isArray(a.sortBy)){var n=o(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),o=s(n,(function(e){return e.name===t})),u=c.reduce((function(e,t){var r=e&&s(e.data,(function(e){return e.name===t}));return void 0!==r?r:e}),o),h=u&&u.count||0,f=u&&u.exhaustive||!1,l=u&&u.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},670:function(e,t,r){"use strict";var n=r(640);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)}),[[],[]])}},671: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}))}},672:function(e,t,r){"use strict";e.exports="3.22.5"},740:function(e,t,r){"use strict";var n=r(741),i=r(666),a=r(667),s=r(668),c=r(669);function o(e,t,r,i){return new n(e,t,r,i)}o.version=r(672),o.AlgoliaSearchHelper=n,o.SearchParameters=s,o.RecommendParameters=i,o.SearchResults=c,o.RecommendResults=a,e.exports=o},741:function(e,t,r){"use strict";var n=r(664),i=r(742),a=r(647).escapeFacetValue,s=r(665),c=r(643),o=r(648),u=r(649),h=r(666),f=r(667),l=r(743),m=r(668),d=r(669),p=r(751),v=r(672);function g(e,t,r,n){"function"==typeof e.addAlgoliaAgent&&e.addAlgoliaAgent("JS Helper ("+v+")"),this.setClient(e);var i=r||{};i.index=t,this.state=m.make(i),this.recommendState=new h({params:i.recommendState}),this.lastResults=null,this.lastRecommendResults=null,this._queryId=0,this._recommendQueryId=0,this._lastQueryIdReceived=-1,this._lastRecommendQueryIdReceived=-1,this.derivedHelpers=[],this._currentNbQueries=0,this._currentNbRecommendQueries=0,this._searchResultsOptions=n,this._recommendCache={}}function y(e){if(e<0)throw new Error("Page requested below 0.");return this._change({state:this.state.setPage(e),isPageReset:!1}),this}function R(){return this.state.page}s(g,n),g.prototype.search=function(){return this._search({onlyWithDerivedHelpers:!1}),this},g.prototype.searchOnlyWithDerivedHelpers=function(){return this._search({onlyWithDerivedHelpers:!0}),this},g.prototype.recommend=function(){return this._recommend(),this},g.prototype.getQuery=function(){var e=this.state;return l._getHitsSearchParams(e)},g.prototype.searchOnce=function(e,t){var r=e?this.state.setQueryParameters(e):this.state,n=l._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 d(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 d(r,e.results),r)})).catch((function(e){i._currentNbQueries--,0===i._currentNbQueries&&i.emit("searchQueueEmpty"),t(e,null,r)}))},g.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:u(l._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)},g.prototype.searchForFacetValues=function(e,t,r,n){var i="function"==typeof this.client.searchForFacetValues&&"function"!=typeof this.client.searchForFacets,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||{}),o=c.isDisjunctiveFacet(e),u=l.getSearchForFacetQuery(e,t,r,c);this._currentNbQueries++;var h,f=this;return i?h=this.client.searchForFacetValues([{indexName:c.index,params:u}]):s?h=this.client.initIndex(c.index).searchForFacetValues(u):(delete u.facetName,h=this.client.search([{type:"facet",facet:e,indexName:c.index,params:u}]).then((function(e){return e.results[0]}))),this.emit("searchForFacetValues",{state:c,facet:e,query:t}),h.then((function(t){return f._currentNbQueries--,0===f._currentNbQueries&&f.emit("searchQueueEmpty"),(t=Array.isArray(t)?t[0]:t).facetHits.forEach((function(t){t.escapedValue=a(t.value),t.isRefined=o?c.isDisjunctiveFacetRefined(e,t.escapedValue):c.isFacetRefined(e,t.escapedValue)})),t}),(function(e){throw f._currentNbQueries--,0===f._currentNbQueries&&f.emit("searchQueueEmpty"),e}))},g.prototype.setQuery=function(e){return this._change({state:this.state.resetPage().setQuery(e),isPageReset:!0}),this},g.prototype.clearRefinements=function(e){return this._change({state:this.state.resetPage().clearRefinements(e),isPageReset:!0}),this},g.prototype.clearTags=function(){return this._change({state:this.state.resetPage().clearTags(),isPageReset:!0}),this},g.prototype.addDisjunctiveFacetRefinement=function(e,t){return this._change({state:this.state.resetPage().addDisjunctiveFacetRefinement(e,t),isPageReset:!0}),this},g.prototype.addDisjunctiveRefine=function(){return this.addDisjunctiveFacetRefinement.apply(this,arguments)},g.prototype.addHierarchicalFacetRefinement=function(e,t){return this._change({state:this.state.resetPage().addHierarchicalFacetRefinement(e,t),isPageReset:!0}),this},g.prototype.addNumericRefinement=function(e,t,r){return this._change({state:this.state.resetPage().addNumericRefinement(e,t,r),isPageReset:!0}),this},g.prototype.addFacetRefinement=function(e,t){return this._change({state:this.state.resetPage().addFacetRefinement(e,t),isPageReset:!0}),this},g.prototype.addRefine=function(){return this.addFacetRefinement.apply(this,arguments)},g.prototype.addFacetExclusion=function(e,t){return this._change({state:this.state.resetPage().addExcludeRefinement(e,t),isPageReset:!0}),this},g.prototype.addExclude=function(){return this.addFacetExclusion.apply(this,arguments)},g.prototype.addTag=function(e){return this._change({state:this.state.resetPage().addTagRefinement(e),isPageReset:!0}),this},g.prototype.addFrequentlyBoughtTogether=function(e){return this._recommendChange({state:this.recommendState.addFrequentlyBoughtTogether(e)}),this},g.prototype.addRelatedProducts=function(e){return this._recommendChange({state:this.recommendState.addRelatedProducts(e)}),this},g.prototype.addTrendingItems=function(e){return this._recommendChange({state:this.recommendState.addTrendingItems(e)}),this},g.prototype.addTrendingFacets=function(e){return this._recommendChange({state:this.recommendState.addTrendingFacets(e)}),this},g.prototype.addLookingSimilar=function(e){return this._recommendChange({state:this.recommendState.addLookingSimilar(e)}),this},g.prototype.removeNumericRefinement=function(e,t,r){return this._change({state:this.state.resetPage().removeNumericRefinement(e,t,r),isPageReset:!0}),this},g.prototype.removeDisjunctiveFacetRefinement=function(e,t){return this._change({state:this.state.resetPage().removeDisjunctiveFacetRefinement(e,t),isPageReset:!0}),this},g.prototype.removeDisjunctiveRefine=function(){return this.removeDisjunctiveFacetRefinement.apply(this,arguments)},g.prototype.removeHierarchicalFacetRefinement=function(e){return this._change({state:this.state.resetPage().removeHierarchicalFacetRefinement(e),isPageReset:!0}),this},g.prototype.removeFacetRefinement=function(e,t){return this._change({state:this.state.resetPage().removeFacetRefinement(e,t),isPageReset:!0}),this},g.prototype.removeRefine=function(){return this.removeFacetRefinement.apply(this,arguments)},g.prototype.removeFacetExclusion=function(e,t){return this._change({state:this.state.resetPage().removeExcludeRefinement(e,t),isPageReset:!0}),this},g.prototype.removeExclude=function(){return this.removeFacetExclusion.apply(this,arguments)},g.prototype.removeTag=function(e){return this._change({state:this.state.resetPage().removeTagRefinement(e),isPageReset:!0}),this},g.prototype.removeFrequentlyBoughtTogether=function(e){return this._recommendChange({state:this.recommendState.removeParams(e)}),this},g.prototype.removeRelatedProducts=function(e){return this._recommendChange({state:this.recommendState.removeParams(e)}),this},g.prototype.removeTrendingItems=function(e){return this._recommendChange({state:this.recommendState.removeParams(e)}),this},g.prototype.removeTrendingFacets=function(e){return this._recommendChange({state:this.recommendState.removeParams(e)}),this},g.prototype.removeLookingSimilar=function(e){return this._recommendChange({state:this.recommendState.removeParams(e)}),this},g.prototype.toggleFacetExclusion=function(e,t){return this._change({state:this.state.resetPage().toggleExcludeFacetRefinement(e,t),isPageReset:!0}),this},g.prototype.toggleExclude=function(){return this.toggleFacetExclusion.apply(this,arguments)},g.prototype.toggleRefinement=function(e,t){return this.toggleFacetRefinement(e,t)},g.prototype.toggleFacetRefinement=function(e,t){return this._change({state:this.state.resetPage().toggleFacetRefinement(e,t),isPageReset:!0}),this},g.prototype.toggleRefine=function(){return this.toggleFacetRefinement.apply(this,arguments)},g.prototype.toggleTag=function(e){return this._change({state:this.state.resetPage().toggleTagRefinement(e),isPageReset:!0}),this},g.prototype.nextPage=function(){var e=this.state.page||0;return this.setPage(e+1)},g.prototype.previousPage=function(){var e=this.state.page||0;return this.setPage(e-1)},g.prototype.setCurrentPage=y,g.prototype.setPage=y,g.prototype.setIndex=function(e){return this._change({state:this.state.resetPage().setIndex(e),isPageReset:!0}),this},g.prototype.setQueryParameter=function(e,t){return this._change({state:this.state.resetPage().setQueryParameter(e,t),isPageReset:!0}),this},g.prototype.setState=function(e){return this._change({state:m.make(e),isPageReset:!1}),this},g.prototype.overrideStateWithoutTriggeringChangeEvent=function(e){return this.state=new m(e),this},g.prototype.hasRefinements=function(e){return!!o(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))},g.prototype.isExcluded=function(e,t){return this.state.isExcludeRefined(e,t)},g.prototype.isDisjunctiveRefined=function(e,t){return this.state.isDisjunctiveFacetRefined(e,t)},g.prototype.hasTag=function(e){return this.state.isTagRefined(e)},g.prototype.isTagRefined=function(){return this.hasTagRefinements.apply(this,arguments)},g.prototype.getIndex=function(){return this.state.index},g.prototype.getCurrentPage=R,g.prototype.getPage=R,g.prototype.getTags=function(){return this.state.tagRefinements},g.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},g.prototype.getNumericRefinement=function(e,t){return this.state.getNumericRefinement(e,t)},g.prototype.getHierarchicalFacetBreadcrumb=function(e){return this.state.getHierarchicalFacetBreadcrumb(e)},g.prototype._search=function(e){var t=this.state,r=[],n=[];e.onlyWithDerivedHelpers||(n=l._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?l._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})}},g.prototype._recommend=function(){var e=this.state,t=this.recommendState,r=this.getIndex(),n=[{state:t,index:r,helper:this}],i=t.params.map((function(e){return e.$$id}));this.emit("fetch",{recommend:{state:t,results:this.lastRecommendResults}});var a=this._recommendCache,s=this.derivedHelpers.map((function(t){var r=t.getModifiedState(e).index;if(!r)return[];var s=t.getModifiedRecommendState(new h);return n.push({state:s,index:r,helper:t}),i=Array.prototype.concat.apply(i,s.params.map((function(e){return e.$$id}))),t.emit("fetch",{recommend:{state:s,results:t.lastRecommendResults}}),s._buildQueries(r,a)})),c=Array.prototype.concat.apply(this.recommendState._buildQueries(r,a),s);if(0!==c.length)if(c.length>0&&void 0===this.client.getRecommendations)console.warn("Please update algoliasearch/lite to the latest version in order to use recommend widgets.");else{var o=this._recommendQueryId++;this._currentNbRecommendQueries++;try{this.client.getRecommendations(c).then(this._dispatchRecommendResponse.bind(this,o,n,i)).catch(this._dispatchRecommendError.bind(this,o))}catch(u){this.emit("error",{error:u})}}},g.prototype._dispatchAlgoliaResponse=function(e,t,r){var n=this;if(!(t0},g.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}))},g.prototype._recommendChange=function(e){var t=e.state;t!==this.recommendState&&(this.recommendState=t,this.emit("recommend:change",{search:{results:this.lastResults,state:this.state},recommend:{results:this.lastRecommendResults,state:this.recommendState}}))},g.prototype.clearCache=function(){return this.client.clearCache&&this.client.clearCache(),this},g.prototype.setClient=function(e){return this.client===e||("function"==typeof e.addAlgoliaAgent&&e.addAlgoliaAgent("JS Helper ("+v+")"),this.client=e),this},g.prototype.getClient=function(){return this.client},g.prototype.derive=function(e,t){var r=new i(this,e,t);return this.derivedHelpers.push(r),r},g.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)},g.prototype.hasPendingRequests=function(){return this._currentNbQueries>0},e.exports=g},742:function(e,t,r){"use strict";var n=r(664);function i(e,t,r){this.main=e,this.fn=t,this.recommendFn=r,this.lastResults=null,this.lastRecommendResults=null}r(665)(i,n),i.prototype.detach=function(){this.removeAllListeners(),this.main.detachDerivedHelper(this)},i.prototype.getModifiedState=function(e){return this.fn(e)},i.prototype.getModifiedRecommendState=function(e){return this.recommendFn(e)},e.exports=i},743:function(e,t,r){"use strict";var n=r(643);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 o=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)})}),[]);o.forEach((function(n,s){var c=a._getDisjunctiveFacetSearchParams(t,n.attribute,0===s);function u(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!u(e)}));r.length>0&&e.push(r)}return"string"!=typeof t||u(t)||e.push(t),e}),[]),f=o[s-1];s>0?c.facetFilters=h.concat(f.attribute+":"+f.value):h.length>0?c.facetFilters=h:delete c.facetFilters,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),o={};return t.length>0&&(o.facets=t.indexOf("*")>-1?["*"]:t),c.length>0&&(o.tagFilters=c),r.length>0&&(o.facetFilters=r),s.length>0&&(o.numericFilters=s),i(n({},e.getQueryParams(),o))},_getDisjunctiveFacetSearchParams:function(e,t,r){var s=a._getFacetFilters(e,t,r),c=a._getNumericFilters(e,t),o=a._getTagFilters(e),u={hitsPerPage:0,page:0,analytics:!1,clickAnalytics:!1};o.length>0&&(u.tagFilters=o);var h=e.getHierarchicalFacetByName(t);return u.facets=h?a._getDisjunctiveHierarchicalFacetAttribute(e,h,r):t,c.length>0&&(u.numericFilters=c),s.length>0&&(u.facetFilters=s),i(n({},e.getQueryParams(),u))},_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,o,u=e.getHierarchicalFacetByName(i),h=e._getHierarchicalFacetSeparator(u),f=e._getHierarchicalRootPath(u);if(t===i){if(-1===a.indexOf(h)||!f&&!0===r||f&&f.split(h).length===a.split(h).length)return;f?(o=f.split(h).length-1,a=f):(o=a.split(h).length-2,a=a.slice(0,a.lastIndexOf(h))),s=u.attributes[o]}else o=a.split(h).length-1,s=u.attributes[o];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,o={facetQuery:t,facetName:e};return"number"==typeof r&&(o.maxFacetHits=r),i(n({},a._getHitsSearchParams(c),o))}};e.exports=a},744: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}))}},745: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.")}},746:function(e,t,r){"use strict";e.exports=function(e){return null!==e&&/^[a-zA-Z0-9_-]{1,64}$/.test(e)}},747:function(e,t,r){"use strict";var n=r(650),i=r(648),a=r(649),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},748:function(e,t,r){"use strict";e.exports=function(e){return Array.isArray(e)?e.filter(Boolean):[]}},749: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=u;mt.avgOfIndices?1:-1}))}(t,e.length).reduce((function(t,r){var a=n(i(e),(function(e){return e.objectID===r.objectID}));return a?t.concat(a):t}),[])}},752:function(e,t){e.exports=function(e){return e.reduce((function(e,t){return e.concat(t)}),[])}},753:function(e,t,r){e.exports=function(){"use strict";function e(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,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 r(r){for(var n=1;n=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 o(){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 u(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),o=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),u=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, please reach out to the Algolia Support team: https://alg.li/support .",transporterStackTrace:O(s)};var m={data:c,headers:o,method:u,url:E(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){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(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 S=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,o=e.userAgent,u=e.hosts,h=e.queryParameters,f={hostsCache:t,logger:r,requester:n,requestsCache:a,responsesCache:s,timeouts:c,userAgent:o,headers:e.headers,queryParameters:h,hosts:u.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(u([{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)},N=function(e){return function(t,r){return t.method===F?e.transporter.read(t,r):e.transporter.write(t,r)}},A=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)}},Q=function(e){return function(t,i){return Promise.all(t.map((function(t){var a=t.params,s=a.facetName,c=a.facetQuery,o=n(a,["facetName","facetQuery"]);return A(e)(t.indexName,{methods:{searchForFacetValues:D}}).searchForFacetValues(s,c,r(r({},i),o))})))}},T=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)}},I=1,k=2,q=3,L=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 V(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=q,{debug:function(e,t){return I>=i&&console.debug(e,t),Promise.resolve()},info:function(e,t){return k>=i&&console.info(e,t),Promise.resolve()},error:function(e,t){return console.error(e,t),Promise.resolve()}}),responsesCache:o(),requestsCache:o({serializable:!1}),hostsCache:c({caches:[s({key:"".concat("4.24.0","-").concat(e)}),o()]}),userAgent:_("4.24.0").add({segment:"Browser",version:"lite"}),authMode:l.WithinQueryParameters};return S(r(r(r({},a),n),{},{methods:{search:H,searchForFacetValues:Q,multipleQueries:H,multipleSearchForFacetValues:Q,customRequest:N,initIndex:function(e){return function(t){return A(e)(t,{methods:{search:C,searchForFacetValues:D,findAnswers:T}})}},getRecommendations:L}}))}return V.version="4.24.0",V}()}}]); \ No newline at end of file diff --git a/assets/js/552.0745ce7f.js.LICENSE.txt b/assets/js/552.90c7804d.js.LICENSE.txt similarity index 100% rename from assets/js/552.0745ce7f.js.LICENSE.txt rename to assets/js/552.90c7804d.js.LICENSE.txt diff --git a/assets/js/553.b8c8fa90.js b/assets/js/553.19d25723.js similarity index 100% rename from assets/js/553.b8c8fa90.js rename to assets/js/553.19d25723.js diff --git a/assets/js/554.8dfc4b8e.js b/assets/js/554.f23626fe.js similarity index 100% rename from assets/js/554.8dfc4b8e.js rename to assets/js/554.f23626fe.js diff --git a/assets/js/555.580abe34.js b/assets/js/555.bf99fa84.js similarity index 100% rename from assets/js/555.580abe34.js rename to assets/js/555.bf99fa84.js diff --git a/assets/js/555388fc.e1ecd822.js b/assets/js/555388fc.db6dfd87.js similarity index 100% rename from assets/js/555388fc.e1ecd822.js rename to assets/js/555388fc.db6dfd87.js diff --git a/assets/js/556.81365057.js b/assets/js/556.e6e6f3e0.js similarity index 100% rename from assets/js/556.81365057.js rename to assets/js/556.e6e6f3e0.js diff --git a/assets/js/55671c81.1696261a.js b/assets/js/55671c81.cfcb2123.js similarity index 100% rename from assets/js/55671c81.1696261a.js rename to assets/js/55671c81.cfcb2123.js diff --git a/assets/js/557.18d5674d.js b/assets/js/557.4ca44bd5.js similarity index 100% rename from assets/js/557.18d5674d.js rename to assets/js/557.4ca44bd5.js diff --git a/assets/js/5591dbb5.8a858900.js b/assets/js/5591dbb5.08d5ae51.js similarity index 100% rename from assets/js/5591dbb5.8a858900.js rename to assets/js/5591dbb5.08d5ae51.js diff --git a/assets/js/55c5045f.83e34703.js b/assets/js/55c5045f.66d4b307.js similarity index 100% rename from assets/js/55c5045f.83e34703.js rename to assets/js/55c5045f.66d4b307.js diff --git a/assets/js/55f40575.3f992557.js b/assets/js/55f40575.0be17da0.js similarity index 100% rename from assets/js/55f40575.3f992557.js rename to assets/js/55f40575.0be17da0.js diff --git a/assets/js/56845d16.49a56796.js b/assets/js/56845d16.b8f0899c.js similarity index 100% rename from assets/js/56845d16.49a56796.js rename to assets/js/56845d16.b8f0899c.js diff --git a/assets/js/570f2039.22d0c210.js b/assets/js/570f2039.ec16120d.js similarity index 100% rename from assets/js/570f2039.22d0c210.js rename to assets/js/570f2039.ec16120d.js diff --git a/assets/js/57a388cd.9e9a6b0e.js b/assets/js/57a388cd.9a89292e.js similarity index 100% rename from assets/js/57a388cd.9e9a6b0e.js rename to assets/js/57a388cd.9a89292e.js diff --git a/assets/js/581e4720.83733738.js b/assets/js/581e4720.d15f3640.js similarity index 100% rename from assets/js/581e4720.83733738.js rename to assets/js/581e4720.d15f3640.js diff --git a/assets/js/596f251d.fc11a1da.js b/assets/js/596f251d.c85af4e7.js similarity index 100% rename from assets/js/596f251d.fc11a1da.js rename to assets/js/596f251d.c85af4e7.js diff --git a/assets/js/59f5955d.066991f9.js b/assets/js/59f5955d.786ec4ec.js similarity index 100% rename from assets/js/59f5955d.066991f9.js rename to assets/js/59f5955d.786ec4ec.js diff --git a/assets/js/5ad5f28b.4711c0f3.js b/assets/js/5ad5f28b.181dc8ea.js similarity index 100% rename from assets/js/5ad5f28b.4711c0f3.js rename to assets/js/5ad5f28b.181dc8ea.js diff --git a/assets/js/5aeb685e.d0fbe632.js b/assets/js/5aeb685e.2ecf93e3.js similarity index 100% rename from assets/js/5aeb685e.d0fbe632.js rename to assets/js/5aeb685e.2ecf93e3.js diff --git a/assets/js/5b706e4b.bbb6de1e.js b/assets/js/5b706e4b.2f98f873.js similarity index 100% rename from assets/js/5b706e4b.bbb6de1e.js rename to assets/js/5b706e4b.2f98f873.js diff --git a/assets/js/5c07861d.8f52e3b9.js b/assets/js/5c07861d.513569b4.js similarity index 100% rename from assets/js/5c07861d.8f52e3b9.js rename to assets/js/5c07861d.513569b4.js diff --git a/assets/js/5cdb87ed.43b6e3d7.js b/assets/js/5cdb87ed.6f7aa93d.js similarity index 100% rename from assets/js/5cdb87ed.43b6e3d7.js rename to assets/js/5cdb87ed.6f7aa93d.js diff --git a/assets/js/5db053d3.ede42421.js b/assets/js/5db053d3.52fff96c.js similarity index 100% rename from assets/js/5db053d3.ede42421.js rename to assets/js/5db053d3.52fff96c.js diff --git a/assets/js/5e36bea9.74a41d4c.js b/assets/js/5e36bea9.ed8b2a34.js similarity index 100% rename from assets/js/5e36bea9.74a41d4c.js rename to assets/js/5e36bea9.ed8b2a34.js diff --git a/assets/js/5e716ae9.9f72f20c.js b/assets/js/5e716ae9.7078191f.js similarity index 100% rename from assets/js/5e716ae9.9f72f20c.js rename to assets/js/5e716ae9.7078191f.js diff --git a/assets/js/5ebcd5d2.772c5a96.js b/assets/js/5ebcd5d2.6993a83b.js similarity index 100% rename from assets/js/5ebcd5d2.772c5a96.js rename to assets/js/5ebcd5d2.6993a83b.js diff --git a/assets/js/5f1a894f.50e1172f.js b/assets/js/5f1a894f.2bfa9ede.js similarity index 100% rename from assets/js/5f1a894f.50e1172f.js rename to assets/js/5f1a894f.2bfa9ede.js diff --git a/assets/js/5f57d2d2.2db45bca.js b/assets/js/5f57d2d2.5212ee9d.js similarity index 100% rename from assets/js/5f57d2d2.2db45bca.js rename to assets/js/5f57d2d2.5212ee9d.js diff --git a/assets/js/5f8b000f.431b6b12.js b/assets/js/5f8b000f.085e43f4.js similarity index 100% rename from assets/js/5f8b000f.431b6b12.js rename to assets/js/5f8b000f.085e43f4.js diff --git a/assets/js/5f9a6bc5.d6708d2b.js b/assets/js/5f9a6bc5.228e7f78.js similarity index 100% rename from assets/js/5f9a6bc5.d6708d2b.js rename to assets/js/5f9a6bc5.228e7f78.js diff --git a/assets/js/60cae097.6775ee38.js b/assets/js/60cae097.c6bf2012.js similarity index 100% rename from assets/js/60cae097.6775ee38.js rename to assets/js/60cae097.c6bf2012.js diff --git a/assets/js/60e856fd.47e6f86f.js b/assets/js/60e856fd.205d19a0.js similarity index 100% rename from assets/js/60e856fd.47e6f86f.js rename to assets/js/60e856fd.205d19a0.js diff --git a/assets/js/614d5726.15dcec86.js b/assets/js/614d5726.6724c6cb.js similarity index 100% rename from assets/js/614d5726.15dcec86.js rename to assets/js/614d5726.6724c6cb.js diff --git a/assets/js/61a162a2.0d3e6973.js b/assets/js/61a162a2.71ade98b.js similarity index 100% rename from assets/js/61a162a2.0d3e6973.js rename to assets/js/61a162a2.71ade98b.js diff --git a/assets/js/61b7a2d8.d2b48f67.js b/assets/js/61b7a2d8.44067845.js similarity index 100% rename from assets/js/61b7a2d8.d2b48f67.js rename to assets/js/61b7a2d8.44067845.js diff --git a/assets/js/62851422.85fb51da.js b/assets/js/62851422.726fcad3.js similarity index 100% rename from assets/js/62851422.85fb51da.js rename to assets/js/62851422.726fcad3.js diff --git a/assets/js/628cd644.df4e85b3.js b/assets/js/628cd644.b6617acc.js similarity index 100% rename from assets/js/628cd644.df4e85b3.js rename to assets/js/628cd644.b6617acc.js diff --git a/assets/js/62dfd26a.4974f68e.js b/assets/js/62dfd26a.047a2875.js similarity index 100% rename from assets/js/62dfd26a.4974f68e.js rename to assets/js/62dfd26a.047a2875.js diff --git a/assets/js/6314e686.2dd075cf.js b/assets/js/6314e686.51747faa.js similarity index 100% rename from assets/js/6314e686.2dd075cf.js rename to assets/js/6314e686.51747faa.js diff --git a/assets/js/633054aa.e343b69d.js b/assets/js/633054aa.01653b1d.js similarity index 100% rename from assets/js/633054aa.e343b69d.js rename to assets/js/633054aa.01653b1d.js diff --git a/assets/js/63b7161b.cb4345b0.js b/assets/js/63b7161b.7036d7f1.js similarity index 100% rename from assets/js/63b7161b.cb4345b0.js rename to assets/js/63b7161b.7036d7f1.js diff --git a/assets/js/6443e343.e12e97ce.js b/assets/js/6443e343.e1db0e1a.js similarity index 100% rename from assets/js/6443e343.e12e97ce.js rename to assets/js/6443e343.e1db0e1a.js diff --git a/assets/js/64b524e9.16990186.js b/assets/js/64b524e9.e2b31e7e.js similarity index 100% rename from assets/js/64b524e9.16990186.js rename to assets/js/64b524e9.e2b31e7e.js diff --git a/assets/js/65ee8ae4.3c959999.js b/assets/js/65ee8ae4.5362aeae.js similarity index 100% rename from assets/js/65ee8ae4.3c959999.js rename to assets/js/65ee8ae4.5362aeae.js diff --git a/assets/js/67246f5a.b910231c.js b/assets/js/67246f5a.0404fe1b.js similarity index 100% rename from assets/js/67246f5a.b910231c.js rename to assets/js/67246f5a.0404fe1b.js diff --git a/assets/js/67505168.3efd1af0.js b/assets/js/67505168.9c59145b.js similarity index 100% rename from assets/js/67505168.3efd1af0.js rename to assets/js/67505168.9c59145b.js diff --git a/assets/js/67b33350.acc6474a.js b/assets/js/67b33350.14902cc7.js similarity index 100% rename from assets/js/67b33350.acc6474a.js rename to assets/js/67b33350.14902cc7.js diff --git a/assets/js/67d24e69.fc7ce31b.js b/assets/js/67d24e69.d7f3ce48.js similarity index 100% rename from assets/js/67d24e69.fc7ce31b.js rename to assets/js/67d24e69.d7f3ce48.js diff --git a/assets/js/686ece5a.13de5707.js b/assets/js/686ece5a.39a490b7.js similarity index 100% rename from assets/js/686ece5a.13de5707.js rename to assets/js/686ece5a.39a490b7.js diff --git a/assets/js/68c97b35.eb2ae974.js b/assets/js/68c97b35.738ab2c3.js similarity index 100% rename from assets/js/68c97b35.eb2ae974.js rename to assets/js/68c97b35.738ab2c3.js diff --git a/assets/js/68e92148.aeb2e4bb.js b/assets/js/68e92148.c7bf89a4.js similarity index 100% rename from assets/js/68e92148.aeb2e4bb.js rename to assets/js/68e92148.c7bf89a4.js diff --git a/assets/js/6928e096.bcdde1e8.js b/assets/js/6928e096.239533f7.js similarity index 100% rename from assets/js/6928e096.bcdde1e8.js rename to assets/js/6928e096.239533f7.js diff --git a/assets/js/69bda1fb.1302c613.js b/assets/js/69bda1fb.4442e97c.js similarity index 100% rename from assets/js/69bda1fb.1302c613.js rename to assets/js/69bda1fb.4442e97c.js diff --git a/assets/js/6af19526.cd40c809.js b/assets/js/6af19526.ec56a82f.js similarity index 100% rename from assets/js/6af19526.cd40c809.js rename to assets/js/6af19526.ec56a82f.js diff --git a/assets/js/6b713b47.a40539fe.js b/assets/js/6b713b47.1de274ec.js similarity index 100% rename from assets/js/6b713b47.a40539fe.js rename to assets/js/6b713b47.1de274ec.js diff --git a/assets/js/6bd8488f.5d5e3151.js b/assets/js/6bd8488f.cd951895.js similarity index 100% rename from assets/js/6bd8488f.5d5e3151.js rename to assets/js/6bd8488f.cd951895.js diff --git a/assets/js/6c4025a1.95e56040.js b/assets/js/6c4025a1.4aad6ec6.js similarity index 100% rename from assets/js/6c4025a1.95e56040.js rename to assets/js/6c4025a1.4aad6ec6.js diff --git a/assets/js/6c57f576.e0142295.js b/assets/js/6c57f576.e5437d07.js similarity index 100% rename from assets/js/6c57f576.e0142295.js rename to assets/js/6c57f576.e5437d07.js diff --git a/assets/js/6cb6f1fd.6630359e.js b/assets/js/6cb6f1fd.37ff3c85.js similarity index 100% rename from assets/js/6cb6f1fd.6630359e.js rename to assets/js/6cb6f1fd.37ff3c85.js diff --git a/assets/js/6cff0fac.816c42cc.js b/assets/js/6cff0fac.5f30ab69.js similarity index 100% rename from assets/js/6cff0fac.816c42cc.js rename to assets/js/6cff0fac.5f30ab69.js diff --git a/assets/js/6db0eab6.3b2739cf.js b/assets/js/6db0eab6.c206d920.js similarity index 100% rename from assets/js/6db0eab6.3b2739cf.js rename to assets/js/6db0eab6.c206d920.js diff --git a/assets/js/6e560846.3e0cccff.js b/assets/js/6e560846.1db94dad.js similarity index 100% rename from assets/js/6e560846.3e0cccff.js rename to assets/js/6e560846.1db94dad.js diff --git a/assets/js/6e57f868.d9e0ce27.js b/assets/js/6e57f868.549eaf68.js similarity index 100% rename from assets/js/6e57f868.d9e0ce27.js rename to assets/js/6e57f868.549eaf68.js diff --git a/assets/js/6e59b9bc.28ea3e2a.js b/assets/js/6e59b9bc.4c6d4d33.js similarity index 100% rename from assets/js/6e59b9bc.28ea3e2a.js rename to assets/js/6e59b9bc.4c6d4d33.js diff --git a/assets/js/6f0558fb.6a20714a.js b/assets/js/6f0558fb.0b190588.js similarity index 100% rename from assets/js/6f0558fb.6a20714a.js rename to assets/js/6f0558fb.0b190588.js diff --git a/assets/js/6f7d33a4.6a8d0955.js b/assets/js/6f7d33a4.f187091c.js similarity index 100% rename from assets/js/6f7d33a4.6a8d0955.js rename to assets/js/6f7d33a4.f187091c.js diff --git a/assets/js/70ed012e.b8a68977.js b/assets/js/70ed012e.f51b52cc.js similarity index 100% rename from assets/js/70ed012e.b8a68977.js rename to assets/js/70ed012e.f51b52cc.js diff --git a/assets/js/70f656fe.84de9052.js b/assets/js/70f656fe.62ce6637.js similarity index 100% rename from assets/js/70f656fe.84de9052.js rename to assets/js/70f656fe.62ce6637.js diff --git a/assets/js/71056d45.89a98a43.js b/assets/js/71056d45.2d1d9ed9.js similarity index 100% rename from assets/js/71056d45.89a98a43.js rename to assets/js/71056d45.2d1d9ed9.js diff --git a/assets/js/710f1fb8.2d29c1a5.js b/assets/js/710f1fb8.14da69cd.js similarity index 100% rename from assets/js/710f1fb8.2d29c1a5.js rename to assets/js/710f1fb8.14da69cd.js diff --git a/assets/js/71e954ff.3a3dcf7f.js b/assets/js/71e954ff.11cf7f6a.js similarity index 100% rename from assets/js/71e954ff.3a3dcf7f.js rename to assets/js/71e954ff.11cf7f6a.js diff --git a/assets/js/71eeb0e0.af184b70.js b/assets/js/71eeb0e0.eeb707a3.js similarity index 100% rename from assets/js/71eeb0e0.af184b70.js rename to assets/js/71eeb0e0.eeb707a3.js diff --git a/assets/js/71f6628b.1d9d50fd.js b/assets/js/71f6628b.d46773ac.js similarity index 100% rename from assets/js/71f6628b.1d9d50fd.js rename to assets/js/71f6628b.d46773ac.js diff --git a/assets/js/722925cc.408b8736.js b/assets/js/722925cc.8793b306.js similarity index 100% rename from assets/js/722925cc.408b8736.js rename to assets/js/722925cc.8793b306.js diff --git a/assets/js/724a65ab.207f7144.js b/assets/js/724a65ab.22054382.js similarity index 100% rename from assets/js/724a65ab.207f7144.js rename to assets/js/724a65ab.22054382.js diff --git a/assets/js/72991a83.50ef73f4.js b/assets/js/72991a83.8e1cf88a.js similarity index 100% rename from assets/js/72991a83.50ef73f4.js rename to assets/js/72991a83.8e1cf88a.js diff --git a/assets/js/7337198d.1d86688f.js b/assets/js/7337198d.9a8ab994.js similarity index 100% rename from assets/js/7337198d.1d86688f.js rename to assets/js/7337198d.9a8ab994.js diff --git a/assets/js/733afe39.cfa248e0.js b/assets/js/733afe39.bd069fbf.js similarity index 100% rename from assets/js/733afe39.cfa248e0.js rename to assets/js/733afe39.bd069fbf.js diff --git a/assets/js/733b44b2.854e5dc3.js b/assets/js/733b44b2.dad96a2b.js similarity index 100% rename from assets/js/733b44b2.854e5dc3.js rename to assets/js/733b44b2.dad96a2b.js diff --git a/assets/js/737e874d.01a64ef1.js b/assets/js/737e874d.543ed28e.js similarity index 100% rename from assets/js/737e874d.01a64ef1.js rename to assets/js/737e874d.543ed28e.js diff --git a/assets/js/745e1426.ef526c8e.js b/assets/js/745e1426.32ea0dc7.js similarity index 100% rename from assets/js/745e1426.ef526c8e.js rename to assets/js/745e1426.32ea0dc7.js diff --git a/assets/js/75e4e133.62578949.js b/assets/js/75e4e133.05f0d4e8.js similarity index 100% rename from assets/js/75e4e133.62578949.js rename to assets/js/75e4e133.05f0d4e8.js diff --git a/assets/js/765f58ca.c971728d.js b/assets/js/765f58ca.c001d239.js similarity index 100% rename from assets/js/765f58ca.c971728d.js rename to assets/js/765f58ca.c001d239.js diff --git a/assets/js/7695e191.19b6a2d7.js b/assets/js/7695e191.b4aee299.js similarity index 100% rename from assets/js/7695e191.19b6a2d7.js rename to assets/js/7695e191.b4aee299.js diff --git a/assets/js/76cc1cd4.e38e7bbb.js b/assets/js/76cc1cd4.d641a8df.js similarity index 100% rename from assets/js/76cc1cd4.e38e7bbb.js rename to assets/js/76cc1cd4.d641a8df.js diff --git a/assets/js/796634c9.0d266bfd.js b/assets/js/796634c9.8cf99c33.js similarity index 100% rename from assets/js/796634c9.0d266bfd.js rename to assets/js/796634c9.8cf99c33.js diff --git a/assets/js/796af274.73bd9f5e.js b/assets/js/796af274.d5a34df9.js similarity index 100% rename from assets/js/796af274.73bd9f5e.js rename to assets/js/796af274.d5a34df9.js diff --git a/assets/js/797fb45b.480dbed3.js b/assets/js/797fb45b.f19ec835.js similarity index 100% rename from assets/js/797fb45b.480dbed3.js rename to assets/js/797fb45b.f19ec835.js diff --git a/assets/js/79f4c125.d4695e80.js b/assets/js/79f4c125.a82bb567.js similarity index 100% rename from assets/js/79f4c125.d4695e80.js rename to assets/js/79f4c125.a82bb567.js diff --git a/assets/js/7a768154.ad1e3f72.js b/assets/js/7a768154.d3dd91f8.js similarity index 100% rename from assets/js/7a768154.ad1e3f72.js rename to assets/js/7a768154.d3dd91f8.js diff --git a/assets/js/7aba8a28.08943ccc.js b/assets/js/7aba8a28.0b72feb1.js similarity index 100% rename from assets/js/7aba8a28.08943ccc.js rename to assets/js/7aba8a28.0b72feb1.js diff --git a/assets/js/7b0045c0.936131ad.js b/assets/js/7b0045c0.284d9139.js similarity index 100% rename from assets/js/7b0045c0.936131ad.js rename to assets/js/7b0045c0.284d9139.js diff --git a/assets/js/7b0b4d35.b104e1fa.js b/assets/js/7b0b4d35.07186106.js similarity index 100% rename from assets/js/7b0b4d35.b104e1fa.js rename to assets/js/7b0b4d35.07186106.js diff --git a/assets/js/7bcc5fb1.5db643f4.js b/assets/js/7bcc5fb1.893e6021.js similarity index 100% rename from assets/js/7bcc5fb1.5db643f4.js rename to assets/js/7bcc5fb1.893e6021.js diff --git a/assets/js/7c23e770.1f6fd456.js b/assets/js/7c23e770.f6c1cf09.js similarity index 100% rename from assets/js/7c23e770.1f6fd456.js rename to assets/js/7c23e770.f6c1cf09.js diff --git a/assets/js/7ce7658d.e2792598.js b/assets/js/7ce7658d.665ad30c.js similarity index 100% rename from assets/js/7ce7658d.e2792598.js rename to assets/js/7ce7658d.665ad30c.js diff --git a/assets/js/7d1b4d68.66f171b1.js b/assets/js/7d1b4d68.0100675b.js similarity index 100% rename from assets/js/7d1b4d68.66f171b1.js rename to assets/js/7d1b4d68.0100675b.js diff --git a/assets/js/7e37b14a.11ac39d0.js b/assets/js/7e37b14a.101e1d85.js similarity index 100% rename from assets/js/7e37b14a.11ac39d0.js rename to assets/js/7e37b14a.101e1d85.js diff --git a/assets/js/7e5462e7.2b8d1a32.js b/assets/js/7e5462e7.d62a6bbb.js similarity index 100% rename from assets/js/7e5462e7.2b8d1a32.js rename to assets/js/7e5462e7.d62a6bbb.js diff --git a/assets/js/7fbdd563.769b6c07.js b/assets/js/7fbdd563.906c968e.js similarity index 100% rename from assets/js/7fbdd563.769b6c07.js rename to assets/js/7fbdd563.906c968e.js diff --git a/assets/js/805c86b6.d5520fac.js b/assets/js/805c86b6.1ce2af26.js similarity index 100% rename from assets/js/805c86b6.d5520fac.js rename to assets/js/805c86b6.1ce2af26.js diff --git a/assets/js/819bd6dd.68bcfbc8.js b/assets/js/819bd6dd.af34a594.js similarity index 100% rename from assets/js/819bd6dd.68bcfbc8.js rename to assets/js/819bd6dd.af34a594.js diff --git a/assets/js/82023ef6.7c092bbb.js b/assets/js/82023ef6.e2f17f17.js similarity index 100% rename from assets/js/82023ef6.7c092bbb.js rename to assets/js/82023ef6.e2f17f17.js diff --git a/assets/js/8291813c.8f92fc00.js b/assets/js/8291813c.d6da063b.js similarity index 100% rename from assets/js/8291813c.8f92fc00.js rename to assets/js/8291813c.d6da063b.js diff --git a/assets/js/834b1b34.3a5ece5a.js b/assets/js/834b1b34.4440c9c4.js similarity index 100% rename from assets/js/834b1b34.3a5ece5a.js rename to assets/js/834b1b34.4440c9c4.js diff --git a/assets/js/83a912f8.601759f3.js b/assets/js/83a912f8.021e05db.js similarity index 100% rename from assets/js/83a912f8.601759f3.js rename to assets/js/83a912f8.021e05db.js diff --git a/assets/js/841634ee.309e5aaa.js b/assets/js/841634ee.c12bc63f.js similarity index 100% rename from assets/js/841634ee.309e5aaa.js rename to assets/js/841634ee.c12bc63f.js diff --git a/assets/js/845e6efd.a8b2467f.js b/assets/js/845e6efd.b8b3f9f9.js similarity index 100% rename from assets/js/845e6efd.a8b2467f.js rename to assets/js/845e6efd.b8b3f9f9.js diff --git a/assets/js/846f84ed.bccc70e9.js b/assets/js/846f84ed.90c03515.js similarity index 100% rename from assets/js/846f84ed.bccc70e9.js rename to assets/js/846f84ed.90c03515.js diff --git a/assets/js/84fa3108.8b6bcf3f.js b/assets/js/84fa3108.23a683e0.js similarity index 100% rename from assets/js/84fa3108.8b6bcf3f.js rename to assets/js/84fa3108.23a683e0.js diff --git a/assets/js/8541c64a.10490cf6.js b/assets/js/8541c64a.77ceed78.js similarity index 100% rename from assets/js/8541c64a.10490cf6.js rename to assets/js/8541c64a.77ceed78.js diff --git a/assets/js/858297e5.9cff2905.js b/assets/js/858297e5.9fd13792.js similarity index 100% rename from assets/js/858297e5.9cff2905.js rename to assets/js/858297e5.9fd13792.js diff --git a/assets/js/85e160d3.bf9cdf61.js b/assets/js/85e160d3.d18af7a1.js similarity index 100% rename from assets/js/85e160d3.bf9cdf61.js rename to assets/js/85e160d3.d18af7a1.js diff --git a/assets/js/87db15d5.a5f2d4e9.js b/assets/js/87db15d5.17874dfa.js similarity index 100% rename from assets/js/87db15d5.a5f2d4e9.js rename to assets/js/87db15d5.17874dfa.js diff --git a/assets/js/88aeac7e.cc3fef8f.js b/assets/js/88aeac7e.7b512b83.js similarity index 100% rename from assets/js/88aeac7e.cc3fef8f.js rename to assets/js/88aeac7e.7b512b83.js diff --git a/assets/js/8a2191c9.85e8398f.js b/assets/js/8a2191c9.b77f2e1b.js similarity index 100% rename from assets/js/8a2191c9.85e8398f.js rename to assets/js/8a2191c9.b77f2e1b.js diff --git a/assets/js/8a3423d8.03bbad7f.js b/assets/js/8a3423d8.4180d836.js similarity index 100% rename from assets/js/8a3423d8.03bbad7f.js rename to assets/js/8a3423d8.4180d836.js diff --git a/assets/js/8a425469.a7f9793e.js b/assets/js/8a425469.91c68e50.js similarity index 100% rename from assets/js/8a425469.a7f9793e.js rename to assets/js/8a425469.91c68e50.js diff --git a/assets/js/8a6fa54b.d57877c1.js b/assets/js/8a6fa54b.c55cc043.js similarity index 100% rename from assets/js/8a6fa54b.d57877c1.js rename to assets/js/8a6fa54b.c55cc043.js diff --git a/assets/js/8b004f25.c8300abc.js b/assets/js/8b004f25.cbd1daab.js similarity index 100% rename from assets/js/8b004f25.c8300abc.js rename to assets/js/8b004f25.cbd1daab.js diff --git a/assets/js/8bcfbda9.ad5c1914.js b/assets/js/8bcfbda9.7d6abbd2.js similarity index 100% rename from assets/js/8bcfbda9.ad5c1914.js rename to assets/js/8bcfbda9.7d6abbd2.js diff --git a/assets/js/8cc6dc47.3c8bbc1b.js b/assets/js/8cc6dc47.e3c19f2a.js similarity index 100% rename from assets/js/8cc6dc47.3c8bbc1b.js rename to assets/js/8cc6dc47.e3c19f2a.js diff --git a/assets/js/8dc6a573.b2f6e26f.js b/assets/js/8dc6a573.ae6aea00.js similarity index 100% rename from assets/js/8dc6a573.b2f6e26f.js rename to assets/js/8dc6a573.ae6aea00.js diff --git a/assets/js/8e316003.aa41154b.js b/assets/js/8e316003.a39389f6.js similarity index 100% rename from assets/js/8e316003.aa41154b.js rename to assets/js/8e316003.a39389f6.js diff --git a/assets/js/8fcfcbe4.5fd3fd6b.js b/assets/js/8fcfcbe4.3662f590.js similarity index 100% rename from assets/js/8fcfcbe4.5fd3fd6b.js rename to assets/js/8fcfcbe4.3662f590.js diff --git a/assets/js/9258ad63.7a0ba271.js b/assets/js/9258ad63.1ccd1ee8.js similarity index 100% rename from assets/js/9258ad63.7a0ba271.js rename to assets/js/9258ad63.1ccd1ee8.js diff --git a/assets/js/927c8cb1.087a137b.js b/assets/js/927c8cb1.cadc3a23.js similarity index 100% rename from assets/js/927c8cb1.087a137b.js rename to assets/js/927c8cb1.cadc3a23.js diff --git a/assets/js/92d57007.90b60814.js b/assets/js/92d57007.972fd129.js similarity index 100% rename from assets/js/92d57007.90b60814.js rename to assets/js/92d57007.972fd129.js diff --git a/assets/js/92f4c895.f44b62d1.js b/assets/js/92f4c895.70227b86.js similarity index 100% rename from assets/js/92f4c895.f44b62d1.js rename to assets/js/92f4c895.70227b86.js diff --git a/assets/js/93011a86.5734fb3a.js b/assets/js/93011a86.97e5ffcb.js similarity index 100% rename from assets/js/93011a86.5734fb3a.js rename to assets/js/93011a86.97e5ffcb.js diff --git a/assets/js/9308bd2a.790f3d80.js b/assets/js/9308bd2a.03fa838d.js similarity index 100% rename from assets/js/9308bd2a.790f3d80.js rename to assets/js/9308bd2a.03fa838d.js diff --git a/assets/js/93298ec8.3d58fd2d.js b/assets/js/93298ec8.926da05a.js similarity index 100% rename from assets/js/93298ec8.3d58fd2d.js rename to assets/js/93298ec8.926da05a.js diff --git a/assets/js/935f2afb.a71d4820.js b/assets/js/935f2afb.dd000f3a.js similarity index 100% rename from assets/js/935f2afb.a71d4820.js rename to assets/js/935f2afb.dd000f3a.js diff --git a/assets/js/936799cc.a79edc84.js b/assets/js/936799cc.9bc9ea77.js similarity index 100% rename from assets/js/936799cc.a79edc84.js rename to assets/js/936799cc.9bc9ea77.js diff --git a/assets/js/936803e8.6cfebb36.js b/assets/js/936803e8.9407d3f5.js similarity index 100% rename from assets/js/936803e8.6cfebb36.js rename to assets/js/936803e8.9407d3f5.js diff --git a/assets/js/93710a9c.3f3bdf3a.js b/assets/js/93710a9c.41221962.js similarity index 100% rename from assets/js/93710a9c.3f3bdf3a.js rename to assets/js/93710a9c.41221962.js diff --git a/assets/js/93923fbf.af8d1dca.js b/assets/js/93923fbf.4aed0602.js similarity index 100% rename from assets/js/93923fbf.af8d1dca.js rename to assets/js/93923fbf.4aed0602.js diff --git a/assets/js/944dcb7a.17f076fd.js b/assets/js/944dcb7a.a1adbd3f.js similarity index 100% rename from assets/js/944dcb7a.17f076fd.js rename to assets/js/944dcb7a.a1adbd3f.js diff --git a/assets/js/94d3795c.6a22c2d4.js b/assets/js/94d3795c.be91d56c.js similarity index 100% rename from assets/js/94d3795c.6a22c2d4.js rename to assets/js/94d3795c.be91d56c.js diff --git a/assets/js/9506a041.119f3c94.js b/assets/js/9506a041.8a906999.js similarity index 100% rename from assets/js/9506a041.119f3c94.js rename to assets/js/9506a041.8a906999.js diff --git a/assets/js/95a27607.a3b824c7.js b/assets/js/95a27607.8965ef49.js similarity index 100% rename from assets/js/95a27607.a3b824c7.js rename to assets/js/95a27607.8965ef49.js diff --git a/assets/js/96528293.91ecfd26.js b/assets/js/96528293.6cef076f.js similarity index 100% rename from assets/js/96528293.91ecfd26.js rename to assets/js/96528293.6cef076f.js diff --git a/assets/js/96dc5664.a95edaff.js b/assets/js/96dc5664.dbfcf8d5.js similarity index 100% rename from assets/js/96dc5664.a95edaff.js rename to assets/js/96dc5664.dbfcf8d5.js diff --git a/assets/js/96e43b42.33016623.js b/assets/js/96e43b42.e2d6eec2.js similarity index 100% rename from assets/js/96e43b42.33016623.js rename to assets/js/96e43b42.e2d6eec2.js diff --git a/assets/js/970e6d70.1a61d1ec.js b/assets/js/970e6d70.c39ccd5e.js similarity index 100% rename from assets/js/970e6d70.1a61d1ec.js rename to assets/js/970e6d70.c39ccd5e.js diff --git a/assets/js/9753faba.8c7db914.js b/assets/js/9753faba.7dcaac49.js similarity index 100% rename from assets/js/9753faba.8c7db914.js rename to assets/js/9753faba.7dcaac49.js diff --git a/assets/js/979c6429.826cc644.js b/assets/js/979c6429.82ded961.js similarity index 100% rename from assets/js/979c6429.826cc644.js rename to assets/js/979c6429.82ded961.js diff --git a/assets/js/9848e2c7.7921ed09.js b/assets/js/9848e2c7.b5e84a82.js similarity index 100% rename from assets/js/9848e2c7.7921ed09.js rename to assets/js/9848e2c7.b5e84a82.js diff --git a/assets/js/98ca2ed8.c9f6f7e2.js b/assets/js/98ca2ed8.fe0cf4a1.js similarity index 100% rename from assets/js/98ca2ed8.c9f6f7e2.js rename to assets/js/98ca2ed8.fe0cf4a1.js diff --git a/assets/js/98d54e16.e9f3533f.js b/assets/js/98d54e16.32d0683e.js similarity index 100% rename from assets/js/98d54e16.e9f3533f.js rename to assets/js/98d54e16.32d0683e.js diff --git a/assets/js/994993c6.bff47442.js b/assets/js/994993c6.3101ffac.js similarity index 100% rename from assets/js/994993c6.bff47442.js rename to assets/js/994993c6.3101ffac.js diff --git a/assets/js/995a79a6.3237f4b3.js b/assets/js/995a79a6.fc54b3a8.js similarity index 100% rename from assets/js/995a79a6.3237f4b3.js rename to assets/js/995a79a6.fc54b3a8.js diff --git a/assets/js/99d058c7.4a56eab1.js b/assets/js/99d058c7.82ee9efc.js similarity index 100% rename from assets/js/99d058c7.4a56eab1.js rename to assets/js/99d058c7.82ee9efc.js diff --git a/assets/js/9a1d62bb.02d81693.js b/assets/js/9a1d62bb.38e9b459.js similarity index 100% rename from assets/js/9a1d62bb.02d81693.js rename to assets/js/9a1d62bb.38e9b459.js diff --git a/assets/js/9a961523.9429fd3b.js b/assets/js/9a961523.e693d23b.js similarity index 100% rename from assets/js/9a961523.9429fd3b.js rename to assets/js/9a961523.e693d23b.js diff --git a/assets/js/9af69400.ca16d11c.js b/assets/js/9af69400.84a09307.js similarity index 100% rename from assets/js/9af69400.ca16d11c.js rename to assets/js/9af69400.84a09307.js diff --git a/assets/js/9b17d7b9.039b1229.js b/assets/js/9b17d7b9.ad18394a.js similarity index 100% rename from assets/js/9b17d7b9.039b1229.js rename to assets/js/9b17d7b9.ad18394a.js diff --git a/assets/js/9b23e258.41885fcf.js b/assets/js/9b23e258.8bb65e3c.js similarity index 100% rename from assets/js/9b23e258.41885fcf.js rename to assets/js/9b23e258.8bb65e3c.js diff --git a/assets/js/9c09aad4.3d3c36a3.js b/assets/js/9c09aad4.bbd87b29.js similarity index 100% rename from assets/js/9c09aad4.3d3c36a3.js rename to assets/js/9c09aad4.bbd87b29.js diff --git a/assets/js/9c24692c.887dfa5c.js b/assets/js/9c24692c.8f807bdd.js similarity index 100% rename from assets/js/9c24692c.887dfa5c.js rename to assets/js/9c24692c.8f807bdd.js diff --git a/assets/js/9c28178f.7075e9fe.js b/assets/js/9c28178f.4e3c54e4.js similarity index 100% rename from assets/js/9c28178f.7075e9fe.js rename to assets/js/9c28178f.4e3c54e4.js diff --git a/assets/js/9d1c590d.ba7c1c1e.js b/assets/js/9d1c590d.94c79f9f.js similarity index 100% rename from assets/js/9d1c590d.ba7c1c1e.js rename to assets/js/9d1c590d.94c79f9f.js diff --git a/assets/js/9d2aa5af.425bad04.js b/assets/js/9d2aa5af.df0c65fc.js similarity index 100% rename from assets/js/9d2aa5af.425bad04.js rename to assets/js/9d2aa5af.df0c65fc.js diff --git a/assets/js/9d9742d5.106e2325.js b/assets/js/9d9742d5.a38b7781.js similarity index 100% rename from assets/js/9d9742d5.106e2325.js rename to assets/js/9d9742d5.a38b7781.js diff --git a/assets/js/9dab56b4.62607c3a.js b/assets/js/9dab56b4.1dbb201c.js similarity index 100% rename from assets/js/9dab56b4.62607c3a.js rename to assets/js/9dab56b4.1dbb201c.js diff --git a/assets/js/9dbc2d3e.17b57951.js b/assets/js/9dbc2d3e.a97914c2.js similarity index 100% rename from assets/js/9dbc2d3e.17b57951.js rename to assets/js/9dbc2d3e.a97914c2.js diff --git a/assets/js/9e2dc38c.5b72710e.js b/assets/js/9e2dc38c.043d1953.js similarity index 100% rename from assets/js/9e2dc38c.5b72710e.js rename to assets/js/9e2dc38c.043d1953.js diff --git a/assets/js/9e5670e9.8df6a17a.js b/assets/js/9e5670e9.d3cfdddf.js similarity index 100% rename from assets/js/9e5670e9.8df6a17a.js rename to assets/js/9e5670e9.d3cfdddf.js diff --git a/assets/js/9fc72eed.2d88cd02.js b/assets/js/9fc72eed.f8d04078.js similarity index 100% rename from assets/js/9fc72eed.2d88cd02.js rename to assets/js/9fc72eed.f8d04078.js diff --git a/assets/js/9fe53ea0.dc37308d.js b/assets/js/9fe53ea0.ed9f004f.js similarity index 100% rename from assets/js/9fe53ea0.dc37308d.js rename to assets/js/9fe53ea0.ed9f004f.js diff --git a/assets/js/a0417692.8808069c.js b/assets/js/a0417692.c26f015d.js similarity index 100% rename from assets/js/a0417692.8808069c.js rename to assets/js/a0417692.c26f015d.js diff --git a/assets/js/a0f7a70e.dec341f2.js b/assets/js/a0f7a70e.25afae36.js similarity index 100% rename from assets/js/a0f7a70e.dec341f2.js rename to assets/js/a0f7a70e.25afae36.js diff --git a/assets/js/a176cfd4.16698138.js b/assets/js/a176cfd4.8a7eb354.js similarity index 100% rename from assets/js/a176cfd4.16698138.js rename to assets/js/a176cfd4.8a7eb354.js diff --git a/assets/js/a199a65b.5cd5ec4c.js b/assets/js/a199a65b.425c9e58.js similarity index 100% rename from assets/js/a199a65b.5cd5ec4c.js rename to assets/js/a199a65b.425c9e58.js diff --git a/assets/js/a26227d1.7ce812c4.js b/assets/js/a26227d1.3156c160.js similarity index 100% rename from assets/js/a26227d1.7ce812c4.js rename to assets/js/a26227d1.3156c160.js diff --git a/assets/js/a271911a.7407cdb7.js b/assets/js/a271911a.601b16a3.js similarity index 100% rename from assets/js/a271911a.7407cdb7.js rename to assets/js/a271911a.601b16a3.js diff --git a/assets/js/a29dd78e.4782a0c0.js b/assets/js/a29dd78e.610f804c.js similarity index 100% rename from assets/js/a29dd78e.4782a0c0.js rename to assets/js/a29dd78e.610f804c.js diff --git a/assets/js/a33aee09.f8bb41e9.js b/assets/js/a33aee09.b048b922.js similarity index 100% rename from assets/js/a33aee09.f8bb41e9.js rename to assets/js/a33aee09.b048b922.js diff --git a/assets/js/a39e3a9c.0aac7cb2.js b/assets/js/a39e3a9c.ab8f5473.js similarity index 100% rename from assets/js/a39e3a9c.0aac7cb2.js rename to assets/js/a39e3a9c.ab8f5473.js diff --git a/assets/js/a45819f0.d0c1b279.js b/assets/js/a45819f0.546b099c.js similarity index 100% rename from assets/js/a45819f0.d0c1b279.js rename to assets/js/a45819f0.546b099c.js diff --git a/assets/js/a489e737.104a163a.js b/assets/js/a489e737.d04b570a.js similarity index 100% rename from assets/js/a489e737.104a163a.js rename to assets/js/a489e737.d04b570a.js diff --git a/assets/js/a5202fb3.61e014f0.js b/assets/js/a5202fb3.86c614f4.js similarity index 100% rename from assets/js/a5202fb3.61e014f0.js rename to assets/js/a5202fb3.86c614f4.js diff --git a/assets/js/a55e9ae3.e62dd267.js b/assets/js/a55e9ae3.5bf096fc.js similarity index 100% rename from assets/js/a55e9ae3.e62dd267.js rename to assets/js/a55e9ae3.5bf096fc.js diff --git a/assets/js/a5b7f128.5901eeb2.js b/assets/js/a5b7f128.3320a5fc.js similarity index 100% rename from assets/js/a5b7f128.5901eeb2.js rename to assets/js/a5b7f128.3320a5fc.js diff --git a/assets/js/a5e9e7a1.09f6a06a.js b/assets/js/a5e9e7a1.b2e22c9f.js similarity index 100% rename from assets/js/a5e9e7a1.09f6a06a.js rename to assets/js/a5e9e7a1.b2e22c9f.js diff --git a/assets/js/a63f633b.2fac5df8.js b/assets/js/a63f633b.8b58bc2a.js similarity index 100% rename from assets/js/a63f633b.2fac5df8.js rename to assets/js/a63f633b.8b58bc2a.js diff --git a/assets/js/a6946925.638dfdec.js b/assets/js/a6946925.043ceeca.js similarity index 100% rename from assets/js/a6946925.638dfdec.js rename to assets/js/a6946925.043ceeca.js diff --git a/assets/js/a81f1977.2ca84b17.js b/assets/js/a81f1977.814c48a8.js similarity index 100% rename from assets/js/a81f1977.2ca84b17.js rename to assets/js/a81f1977.814c48a8.js diff --git a/assets/js/a8a1de49.15ceb938.js b/assets/js/a8a1de49.45ad518a.js similarity index 100% rename from assets/js/a8a1de49.15ceb938.js rename to assets/js/a8a1de49.45ad518a.js diff --git a/assets/js/a9f1bf2b.e0351d8e.js b/assets/js/a9f1bf2b.05f49c31.js similarity index 100% rename from assets/js/a9f1bf2b.e0351d8e.js rename to assets/js/a9f1bf2b.05f49c31.js diff --git a/assets/js/ab1e3150.9c58221e.js b/assets/js/ab1e3150.a871429d.js similarity index 100% rename from assets/js/ab1e3150.9c58221e.js rename to assets/js/ab1e3150.a871429d.js diff --git a/assets/js/ab5f391a.c706c921.js b/assets/js/ab5f391a.a76a79c2.js similarity index 100% rename from assets/js/ab5f391a.c706c921.js rename to assets/js/ab5f391a.a76a79c2.js diff --git a/assets/js/ab9b2b08.0189e217.js b/assets/js/ab9b2b08.b4b1bc6c.js similarity index 100% rename from assets/js/ab9b2b08.0189e217.js rename to assets/js/ab9b2b08.b4b1bc6c.js diff --git a/assets/js/abdfbd6b.8b5b3d31.js b/assets/js/abdfbd6b.8d000702.js similarity index 100% rename from assets/js/abdfbd6b.8b5b3d31.js rename to assets/js/abdfbd6b.8d000702.js diff --git a/assets/js/ac259749.65238a07.js b/assets/js/ac259749.449c66a6.js similarity index 100% rename from assets/js/ac259749.65238a07.js rename to assets/js/ac259749.449c66a6.js diff --git a/assets/js/ad0e8a11.5d5c7a94.js b/assets/js/ad0e8a11.f3536de7.js similarity index 100% rename from assets/js/ad0e8a11.5d5c7a94.js rename to assets/js/ad0e8a11.f3536de7.js diff --git a/assets/js/adafd01a.553d1d7c.js b/assets/js/adafd01a.c20c6fb1.js similarity index 100% rename from assets/js/adafd01a.553d1d7c.js rename to assets/js/adafd01a.c20c6fb1.js diff --git a/assets/js/adcea6f3.e1785bef.js b/assets/js/adcea6f3.a039245d.js similarity index 100% rename from assets/js/adcea6f3.e1785bef.js rename to assets/js/adcea6f3.a039245d.js diff --git a/assets/js/adda2092.e46f177a.js b/assets/js/adda2092.50a7cc5b.js similarity index 100% rename from assets/js/adda2092.e46f177a.js rename to assets/js/adda2092.50a7cc5b.js diff --git a/assets/js/adee7fac.82c11dd2.js b/assets/js/adee7fac.3baeb5ad.js similarity index 100% rename from assets/js/adee7fac.82c11dd2.js rename to assets/js/adee7fac.3baeb5ad.js diff --git a/assets/js/ae012ad6.3926856a.js b/assets/js/ae012ad6.6fe16a5d.js similarity index 100% rename from assets/js/ae012ad6.3926856a.js rename to assets/js/ae012ad6.6fe16a5d.js diff --git a/assets/js/af0d6317.79fa9f38.js b/assets/js/af0d6317.76ab411e.js similarity index 100% rename from assets/js/af0d6317.79fa9f38.js rename to assets/js/af0d6317.76ab411e.js diff --git a/assets/js/af1c1b4c.f67af5fa.js b/assets/js/af1c1b4c.a0294f47.js similarity index 100% rename from assets/js/af1c1b4c.f67af5fa.js rename to assets/js/af1c1b4c.a0294f47.js diff --git a/assets/js/af595eb3.e75dd81d.js b/assets/js/af595eb3.842b7319.js similarity index 100% rename from assets/js/af595eb3.e75dd81d.js rename to assets/js/af595eb3.842b7319.js diff --git a/assets/js/afe98dc1.222d2065.js b/assets/js/afe98dc1.6f79b7f2.js similarity index 100% rename from assets/js/afe98dc1.222d2065.js rename to assets/js/afe98dc1.6f79b7f2.js diff --git a/assets/js/b0fae788.d29c65f6.js b/assets/js/b0fae788.6f882feb.js similarity index 100% rename from assets/js/b0fae788.d29c65f6.js rename to assets/js/b0fae788.6f882feb.js diff --git a/assets/js/b210f538.a1c8f31e.js b/assets/js/b210f538.a0ee22a7.js similarity index 100% rename from assets/js/b210f538.a1c8f31e.js rename to assets/js/b210f538.a0ee22a7.js diff --git a/assets/js/b2ae0418.e6a22290.js b/assets/js/b2ae0418.b534e97b.js similarity index 100% rename from assets/js/b2ae0418.e6a22290.js rename to assets/js/b2ae0418.b534e97b.js diff --git a/assets/js/b2b6acd7.bb42719b.js b/assets/js/b2b6acd7.bbac80b5.js similarity index 100% rename from assets/js/b2b6acd7.bb42719b.js rename to assets/js/b2b6acd7.bbac80b5.js diff --git a/assets/js/b2f0342a.8add7127.js b/assets/js/b2f0342a.b355d21e.js similarity index 100% rename from assets/js/b2f0342a.8add7127.js rename to assets/js/b2f0342a.b355d21e.js diff --git a/assets/js/b3eaef05.a4b71d5b.js b/assets/js/b3eaef05.8412ef54.js similarity index 100% rename from assets/js/b3eaef05.a4b71d5b.js rename to assets/js/b3eaef05.8412ef54.js diff --git a/assets/js/b459db2c.d78aec7f.js b/assets/js/b459db2c.19f2bd38.js similarity index 100% rename from assets/js/b459db2c.d78aec7f.js rename to assets/js/b459db2c.19f2bd38.js diff --git a/assets/js/b4d5a2f6.a6d05ec9.js b/assets/js/b4d5a2f6.f5816246.js similarity index 100% rename from assets/js/b4d5a2f6.a6d05ec9.js rename to assets/js/b4d5a2f6.f5816246.js diff --git a/assets/js/b4e3226a.02cea9d6.js b/assets/js/b4e3226a.bc523c07.js similarity index 100% rename from assets/js/b4e3226a.02cea9d6.js rename to assets/js/b4e3226a.bc523c07.js diff --git a/assets/js/b555335c.dc20ce03.js b/assets/js/b555335c.e7dc13c7.js similarity index 100% rename from assets/js/b555335c.dc20ce03.js rename to assets/js/b555335c.e7dc13c7.js diff --git a/assets/js/b626e4a0.5b3dae7b.js b/assets/js/b626e4a0.f81f9112.js similarity index 100% rename from assets/js/b626e4a0.5b3dae7b.js rename to assets/js/b626e4a0.f81f9112.js diff --git a/assets/js/b6543ad7.2b634dae.js b/assets/js/b6543ad7.9d025675.js similarity index 100% rename from assets/js/b6543ad7.2b634dae.js rename to assets/js/b6543ad7.9d025675.js diff --git a/assets/js/b7589f11.96035c9b.js b/assets/js/b7589f11.82299892.js similarity index 100% rename from assets/js/b7589f11.96035c9b.js rename to assets/js/b7589f11.82299892.js diff --git a/assets/js/b80ed113.f73ca3ae.js b/assets/js/b80ed113.259f81c1.js similarity index 100% rename from assets/js/b80ed113.f73ca3ae.js rename to assets/js/b80ed113.259f81c1.js diff --git a/assets/js/b9e53938.09660dbe.js b/assets/js/b9e53938.eb4b1ad8.js similarity index 100% rename from assets/js/b9e53938.09660dbe.js rename to assets/js/b9e53938.eb4b1ad8.js diff --git a/assets/js/ba486bac.0962b437.js b/assets/js/ba486bac.650b3845.js similarity index 100% rename from assets/js/ba486bac.0962b437.js rename to assets/js/ba486bac.650b3845.js diff --git a/assets/js/bab816a3.31e93539.js b/assets/js/bab816a3.87a855e0.js similarity index 100% rename from assets/js/bab816a3.31e93539.js rename to assets/js/bab816a3.87a855e0.js diff --git a/assets/js/bae20a2e.95c21ddb.js b/assets/js/bae20a2e.02f6dd33.js similarity index 100% rename from assets/js/bae20a2e.95c21ddb.js rename to assets/js/bae20a2e.02f6dd33.js diff --git a/assets/js/bb568c08.86c2de43.js b/assets/js/bb568c08.f27a3117.js similarity index 100% rename from assets/js/bb568c08.86c2de43.js rename to assets/js/bb568c08.f27a3117.js diff --git a/assets/js/bb73c9a4.696586ec.js b/assets/js/bb73c9a4.93e91590.js similarity index 100% rename from assets/js/bb73c9a4.696586ec.js rename to assets/js/bb73c9a4.93e91590.js diff --git a/assets/js/bbd3cca1.60ae92d7.js b/assets/js/bbd3cca1.aef6a8ed.js similarity index 100% rename from assets/js/bbd3cca1.60ae92d7.js rename to assets/js/bbd3cca1.aef6a8ed.js diff --git a/assets/js/bcedb369.15458a6f.js b/assets/js/bcedb369.cdf7eea2.js similarity index 100% rename from assets/js/bcedb369.15458a6f.js rename to assets/js/bcedb369.cdf7eea2.js diff --git a/assets/js/bcf8cc4a.de396c4b.js b/assets/js/bcf8cc4a.d38e4e70.js similarity index 100% rename from assets/js/bcf8cc4a.de396c4b.js rename to assets/js/bcf8cc4a.d38e4e70.js diff --git a/assets/js/bd4b2066.db770a28.js b/assets/js/bd4b2066.fd0225e8.js similarity index 100% rename from assets/js/bd4b2066.db770a28.js rename to assets/js/bd4b2066.fd0225e8.js diff --git a/assets/js/bda3d396.b363b27d.js b/assets/js/bda3d396.5edf335f.js similarity index 100% rename from assets/js/bda3d396.b363b27d.js rename to assets/js/bda3d396.5edf335f.js diff --git a/assets/js/bdc7dfef.28a7f679.js b/assets/js/bdc7dfef.3edacb5c.js similarity index 100% rename from assets/js/bdc7dfef.28a7f679.js rename to assets/js/bdc7dfef.3edacb5c.js diff --git a/assets/js/be39e40f.e28d47a6.js b/assets/js/be39e40f.457d3ab7.js similarity index 100% rename from assets/js/be39e40f.e28d47a6.js rename to assets/js/be39e40f.457d3ab7.js diff --git a/assets/js/be52a7d3.beb68eab.js b/assets/js/be52a7d3.788a84fa.js similarity index 100% rename from assets/js/be52a7d3.beb68eab.js rename to assets/js/be52a7d3.788a84fa.js diff --git a/assets/js/be5d235e.6cd4c19e.js b/assets/js/be5d235e.a3464337.js similarity index 100% rename from assets/js/be5d235e.6cd4c19e.js rename to assets/js/be5d235e.a3464337.js diff --git a/assets/js/be7ecf1a.2e12f385.js b/assets/js/be7ecf1a.14d7c437.js similarity index 100% rename from assets/js/be7ecf1a.2e12f385.js rename to assets/js/be7ecf1a.14d7c437.js diff --git a/assets/js/beace3d7.0b38e322.js b/assets/js/beace3d7.7d42e1eb.js similarity index 100% rename from assets/js/beace3d7.0b38e322.js rename to assets/js/beace3d7.7d42e1eb.js diff --git a/assets/js/befa7391.4023b8a0.js b/assets/js/befa7391.0d06d447.js similarity index 100% rename from assets/js/befa7391.4023b8a0.js rename to assets/js/befa7391.0d06d447.js diff --git a/assets/js/c0bc635a.39a9f0ef.js b/assets/js/c0bc635a.9fb0423d.js similarity index 100% rename from assets/js/c0bc635a.39a9f0ef.js rename to assets/js/c0bc635a.9fb0423d.js diff --git a/assets/js/c0d4081e.ddabdf43.js b/assets/js/c0d4081e.e493fe8b.js similarity index 100% rename from assets/js/c0d4081e.ddabdf43.js rename to assets/js/c0d4081e.e493fe8b.js diff --git a/assets/js/c18f4942.5ba5117d.js b/assets/js/c18f4942.8bc2228b.js similarity index 100% rename from assets/js/c18f4942.5ba5117d.js rename to assets/js/c18f4942.8bc2228b.js diff --git a/assets/js/c1bcd62e.d76f0676.js b/assets/js/c1bcd62e.9b7d677e.js similarity index 100% rename from assets/js/c1bcd62e.d76f0676.js rename to assets/js/c1bcd62e.9b7d677e.js diff --git a/assets/js/c1f9e30a.3ca553fa.js b/assets/js/c1f9e30a.1bed24c9.js similarity index 100% rename from assets/js/c1f9e30a.3ca553fa.js rename to assets/js/c1f9e30a.1bed24c9.js diff --git a/assets/js/c213d637.6ec3e784.js b/assets/js/c213d637.d0e59b97.js similarity index 100% rename from assets/js/c213d637.6ec3e784.js rename to assets/js/c213d637.d0e59b97.js diff --git a/assets/js/c2bb1329.39673696.js b/assets/js/c2bb1329.57d407f6.js similarity index 100% rename from assets/js/c2bb1329.39673696.js rename to assets/js/c2bb1329.57d407f6.js diff --git a/assets/js/c4c17032.0e7e6c6c.js b/assets/js/c4c17032.8426facc.js similarity index 100% rename from assets/js/c4c17032.0e7e6c6c.js rename to assets/js/c4c17032.8426facc.js diff --git a/assets/js/c4ef2964.39d072c2.js b/assets/js/c4ef2964.74fabd11.js similarity index 100% rename from assets/js/c4ef2964.39d072c2.js rename to assets/js/c4ef2964.74fabd11.js diff --git a/assets/js/c4f5d8e4.32b0fbe2.js b/assets/js/c4f5d8e4.96ed4b1c.js similarity index 100% rename from assets/js/c4f5d8e4.32b0fbe2.js rename to assets/js/c4f5d8e4.96ed4b1c.js diff --git a/assets/js/c5e7f3af.6772d889.js b/assets/js/c5e7f3af.ad8d8a9c.js similarity index 100% rename from assets/js/c5e7f3af.6772d889.js rename to assets/js/c5e7f3af.ad8d8a9c.js diff --git a/assets/js/c6720e67.b58be073.js b/assets/js/c6720e67.c3424972.js similarity index 100% rename from assets/js/c6720e67.b58be073.js rename to assets/js/c6720e67.c3424972.js diff --git a/assets/js/c6eceeae.208cda4c.js b/assets/js/c6eceeae.519f125e.js similarity index 100% rename from assets/js/c6eceeae.208cda4c.js rename to assets/js/c6eceeae.519f125e.js diff --git a/assets/js/c74d9e4e.09e284f7.js b/assets/js/c74d9e4e.d40f58b3.js similarity index 100% rename from assets/js/c74d9e4e.09e284f7.js rename to assets/js/c74d9e4e.d40f58b3.js diff --git a/assets/js/c7608fc7.08b30d57.js b/assets/js/c7608fc7.c240f7a8.js similarity index 100% rename from assets/js/c7608fc7.08b30d57.js rename to assets/js/c7608fc7.c240f7a8.js diff --git a/assets/js/c783b066.f3277716.js b/assets/js/c783b066.b7c51c91.js similarity index 100% rename from assets/js/c783b066.f3277716.js rename to assets/js/c783b066.b7c51c91.js diff --git a/assets/js/c7d17e4b.79027534.js b/assets/js/c7d17e4b.16eec067.js similarity index 100% rename from assets/js/c7d17e4b.79027534.js rename to assets/js/c7d17e4b.16eec067.js diff --git a/assets/js/c811aa7f.8bb8b76b.js b/assets/js/c811aa7f.e0f03d23.js similarity index 100% rename from assets/js/c811aa7f.8bb8b76b.js rename to assets/js/c811aa7f.e0f03d23.js diff --git a/assets/js/c82555e2.cb670667.js b/assets/js/c82555e2.61a9e50c.js similarity index 100% rename from assets/js/c82555e2.cb670667.js rename to assets/js/c82555e2.61a9e50c.js diff --git a/assets/js/c9f1df9f.21f69ae5.js b/assets/js/c9f1df9f.8bc4d21a.js similarity index 100% rename from assets/js/c9f1df9f.21f69ae5.js rename to assets/js/c9f1df9f.8bc4d21a.js diff --git a/assets/js/ca195e88.b38b3264.js b/assets/js/ca195e88.77f93795.js similarity index 100% rename from assets/js/ca195e88.b38b3264.js rename to assets/js/ca195e88.77f93795.js diff --git a/assets/js/ca9eeb9f.fc3c9fb4.js b/assets/js/ca9eeb9f.e9b60657.js similarity index 100% rename from assets/js/ca9eeb9f.fc3c9fb4.js rename to assets/js/ca9eeb9f.e9b60657.js diff --git a/assets/js/cad7ffaf.57008bbd.js b/assets/js/cad7ffaf.f4fc657a.js similarity index 100% rename from assets/js/cad7ffaf.57008bbd.js rename to assets/js/cad7ffaf.f4fc657a.js diff --git a/assets/js/cb66a971.aef49918.js b/assets/js/cb66a971.363c2b62.js similarity index 100% rename from assets/js/cb66a971.aef49918.js rename to assets/js/cb66a971.363c2b62.js diff --git a/assets/js/cbb11013.2e893fa9.js b/assets/js/cbb11013.a80337b1.js similarity index 100% rename from assets/js/cbb11013.2e893fa9.js rename to assets/js/cbb11013.a80337b1.js diff --git a/assets/js/cbdf4c0b.104dd278.js b/assets/js/cbdf4c0b.a2f083eb.js similarity index 100% rename from assets/js/cbdf4c0b.104dd278.js rename to assets/js/cbdf4c0b.a2f083eb.js diff --git a/assets/js/cc3e32ef.4e32dd56.js b/assets/js/cc3e32ef.ab152464.js similarity index 100% rename from assets/js/cc3e32ef.4e32dd56.js rename to assets/js/cc3e32ef.ab152464.js diff --git a/assets/js/ccef7f5b.c2c4690d.js b/assets/js/ccef7f5b.74088521.js similarity index 100% rename from assets/js/ccef7f5b.c2c4690d.js rename to assets/js/ccef7f5b.74088521.js diff --git a/assets/js/cd443648.29be0867.js b/assets/js/cd443648.ee8bbc8a.js similarity index 100% rename from assets/js/cd443648.29be0867.js rename to assets/js/cd443648.ee8bbc8a.js diff --git a/assets/js/cd907f23.6f32b33b.js b/assets/js/cd907f23.45b3f3ce.js similarity index 100% rename from assets/js/cd907f23.6f32b33b.js rename to assets/js/cd907f23.45b3f3ce.js diff --git a/assets/js/cdb38c9b.f1a33d49.js b/assets/js/cdb38c9b.e4356878.js similarity index 100% rename from assets/js/cdb38c9b.f1a33d49.js rename to assets/js/cdb38c9b.e4356878.js diff --git a/assets/js/ce91c8e6.c41a88bb.js b/assets/js/ce91c8e6.cf97113c.js similarity index 100% rename from assets/js/ce91c8e6.c41a88bb.js rename to assets/js/ce91c8e6.cf97113c.js diff --git a/assets/js/cf4a34bd.27fa8625.js b/assets/js/cf4a34bd.faeead3f.js similarity index 100% rename from assets/js/cf4a34bd.27fa8625.js rename to assets/js/cf4a34bd.faeead3f.js diff --git a/assets/js/cf8c7470.01b4b191.js b/assets/js/cf8c7470.970f8384.js similarity index 100% rename from assets/js/cf8c7470.01b4b191.js rename to assets/js/cf8c7470.970f8384.js diff --git a/assets/js/d0a7834c.42dfb131.js b/assets/js/d0a7834c.a38b4967.js similarity index 100% rename from assets/js/d0a7834c.42dfb131.js rename to assets/js/d0a7834c.a38b4967.js diff --git a/assets/js/d1167098.b93b1aae.js b/assets/js/d1167098.3072182b.js similarity index 100% rename from assets/js/d1167098.b93b1aae.js rename to assets/js/d1167098.3072182b.js diff --git a/assets/js/d12ff093.bcb46f87.js b/assets/js/d12ff093.ee2a26bb.js similarity index 100% rename from assets/js/d12ff093.bcb46f87.js rename to assets/js/d12ff093.ee2a26bb.js diff --git a/assets/js/d14d5dce.20d22983.js b/assets/js/d14d5dce.0e7fe3fe.js similarity index 100% rename from assets/js/d14d5dce.20d22983.js rename to assets/js/d14d5dce.0e7fe3fe.js diff --git a/assets/js/d2477c27.a0ec1b0e.js b/assets/js/d2477c27.16619108.js similarity index 100% rename from assets/js/d2477c27.a0ec1b0e.js rename to assets/js/d2477c27.16619108.js diff --git a/assets/js/d311eeaf.f0f56d52.js b/assets/js/d311eeaf.166569c6.js similarity index 100% rename from assets/js/d311eeaf.f0f56d52.js rename to assets/js/d311eeaf.166569c6.js diff --git a/assets/js/d320f50b.6de93987.js b/assets/js/d320f50b.0a470227.js similarity index 100% rename from assets/js/d320f50b.6de93987.js rename to assets/js/d320f50b.0a470227.js diff --git a/assets/js/d324dc66.01f05377.js b/assets/js/d324dc66.f0bc0000.js similarity index 100% rename from assets/js/d324dc66.01f05377.js rename to assets/js/d324dc66.f0bc0000.js diff --git a/assets/js/d37d7f17.93ed6e74.js b/assets/js/d37d7f17.17794289.js similarity index 100% rename from assets/js/d37d7f17.93ed6e74.js rename to assets/js/d37d7f17.17794289.js diff --git a/assets/js/d3a04b7a.d9ddfa7d.js b/assets/js/d3a04b7a.f40d173f.js similarity index 100% rename from assets/js/d3a04b7a.d9ddfa7d.js rename to assets/js/d3a04b7a.f40d173f.js diff --git a/assets/js/d460217b.453fc825.js b/assets/js/d460217b.c728ec33.js similarity index 100% rename from assets/js/d460217b.453fc825.js rename to assets/js/d460217b.c728ec33.js diff --git a/assets/js/d648f144.a78c46f3.js b/assets/js/d648f144.de48a12e.js similarity index 100% rename from assets/js/d648f144.a78c46f3.js rename to assets/js/d648f144.de48a12e.js diff --git a/assets/js/d64ca407.8f8af95e.js b/assets/js/d64ca407.dd9abdfa.js similarity index 100% rename from assets/js/d64ca407.8f8af95e.js rename to assets/js/d64ca407.dd9abdfa.js diff --git a/assets/js/d6c09953.f62cb74a.js b/assets/js/d6c09953.5ea7556f.js similarity index 100% rename from assets/js/d6c09953.f62cb74a.js rename to assets/js/d6c09953.5ea7556f.js diff --git a/assets/js/d73fea11.0d573265.js b/assets/js/d73fea11.22dcb3fd.js similarity index 100% rename from assets/js/d73fea11.0d573265.js rename to assets/js/d73fea11.22dcb3fd.js diff --git a/assets/js/d85c8cd6.0e20714d.js b/assets/js/d85c8cd6.f83aba48.js similarity index 100% rename from assets/js/d85c8cd6.0e20714d.js rename to assets/js/d85c8cd6.f83aba48.js diff --git a/assets/js/d8b1ec13.f7e95192.js b/assets/js/d8b1ec13.0114c465.js similarity index 100% rename from assets/js/d8b1ec13.f7e95192.js rename to assets/js/d8b1ec13.0114c465.js diff --git a/assets/js/d8c3d873.53e101eb.js b/assets/js/d8c3d873.d05c428a.js similarity index 100% rename from assets/js/d8c3d873.53e101eb.js rename to assets/js/d8c3d873.d05c428a.js diff --git a/assets/js/d91c45f5.017da7cd.js b/assets/js/d91c45f5.46f93fba.js similarity index 100% rename from assets/js/d91c45f5.017da7cd.js rename to assets/js/d91c45f5.46f93fba.js diff --git a/assets/js/da0151db.102421d5.js b/assets/js/da0151db.bdb4565f.js similarity index 100% rename from assets/js/da0151db.102421d5.js rename to assets/js/da0151db.bdb4565f.js diff --git a/assets/js/da63f618.5ee6e032.js b/assets/js/da63f618.985fac08.js similarity index 100% rename from assets/js/da63f618.5ee6e032.js rename to assets/js/da63f618.985fac08.js diff --git a/assets/js/daad9ff9.373dec35.js b/assets/js/daad9ff9.524220f4.js similarity index 100% rename from assets/js/daad9ff9.373dec35.js rename to assets/js/daad9ff9.524220f4.js diff --git a/assets/js/dac962c5.14b8112d.js b/assets/js/dac962c5.3b37b5ad.js similarity index 100% rename from assets/js/dac962c5.14b8112d.js rename to assets/js/dac962c5.3b37b5ad.js diff --git a/assets/js/db35c4c8.9af7eb8e.js b/assets/js/db35c4c8.d34ee3c9.js similarity index 100% rename from assets/js/db35c4c8.9af7eb8e.js rename to assets/js/db35c4c8.d34ee3c9.js diff --git a/assets/js/db40a197.ee0db7b1.js b/assets/js/db40a197.4e2dffa1.js similarity index 100% rename from assets/js/db40a197.ee0db7b1.js rename to assets/js/db40a197.4e2dffa1.js diff --git a/assets/js/db9aebef.be147ae3.js b/assets/js/db9aebef.e9cfa80c.js similarity index 100% rename from assets/js/db9aebef.be147ae3.js rename to assets/js/db9aebef.e9cfa80c.js diff --git a/assets/js/dfb780e2.e28041fc.js b/assets/js/dfb780e2.60ff12e7.js similarity index 100% rename from assets/js/dfb780e2.e28041fc.js rename to assets/js/dfb780e2.60ff12e7.js diff --git a/assets/js/e0945e2f.e3649aee.js b/assets/js/e0945e2f.89af6fcd.js similarity index 100% rename from assets/js/e0945e2f.e3649aee.js rename to assets/js/e0945e2f.89af6fcd.js diff --git a/assets/js/e1411089.d2bc3504.js b/assets/js/e1411089.3c43d8f7.js similarity index 100% rename from assets/js/e1411089.d2bc3504.js rename to assets/js/e1411089.3c43d8f7.js diff --git a/assets/js/e181c7c7.3df5dc29.js b/assets/js/e181c7c7.a11eb3df.js similarity index 100% rename from assets/js/e181c7c7.3df5dc29.js rename to assets/js/e181c7c7.a11eb3df.js diff --git a/assets/js/e2968c94.977c6f73.js b/assets/js/e2968c94.6b119c01.js similarity index 100% rename from assets/js/e2968c94.977c6f73.js rename to assets/js/e2968c94.6b119c01.js diff --git a/assets/js/e378c0f5.7c7dfcc1.js b/assets/js/e378c0f5.32c5c5ff.js similarity index 100% rename from assets/js/e378c0f5.7c7dfcc1.js rename to assets/js/e378c0f5.32c5c5ff.js diff --git a/assets/js/e40d76ff.e73f93ea.js b/assets/js/e40d76ff.9b9f2f3b.js similarity index 100% rename from assets/js/e40d76ff.e73f93ea.js rename to assets/js/e40d76ff.9b9f2f3b.js diff --git a/assets/js/e44baca5.327953b6.js b/assets/js/e44baca5.bcf1da4b.js similarity index 100% rename from assets/js/e44baca5.327953b6.js rename to assets/js/e44baca5.bcf1da4b.js diff --git a/assets/js/e47f129a.bb01ea7c.js b/assets/js/e47f129a.e3f88657.js similarity index 100% rename from assets/js/e47f129a.bb01ea7c.js rename to assets/js/e47f129a.e3f88657.js diff --git a/assets/js/e4976f82.77a153f1.js b/assets/js/e4976f82.37dbe207.js similarity index 100% rename from assets/js/e4976f82.77a153f1.js rename to assets/js/e4976f82.37dbe207.js diff --git a/assets/js/e4b98d56.9c21a0e0.js b/assets/js/e4b98d56.4482f968.js similarity index 100% rename from assets/js/e4b98d56.9c21a0e0.js rename to assets/js/e4b98d56.4482f968.js diff --git a/assets/js/e4fc6f88.0e281ead.js b/assets/js/e4fc6f88.054f3015.js similarity index 100% rename from assets/js/e4fc6f88.0e281ead.js rename to assets/js/e4fc6f88.054f3015.js diff --git a/assets/js/e50dbd59.7a058f2e.js b/assets/js/e50dbd59.ef31087b.js similarity index 100% rename from assets/js/e50dbd59.7a058f2e.js rename to assets/js/e50dbd59.ef31087b.js diff --git a/assets/js/e53314b3.542f386b.js b/assets/js/e53314b3.4d66216b.js similarity index 100% rename from assets/js/e53314b3.542f386b.js rename to assets/js/e53314b3.4d66216b.js diff --git a/assets/js/e53b1169.c4a702fd.js b/assets/js/e53b1169.a4ecc61b.js similarity index 100% rename from assets/js/e53b1169.c4a702fd.js rename to assets/js/e53b1169.a4ecc61b.js diff --git a/assets/js/e549d204.2bee4099.js b/assets/js/e549d204.7893753f.js similarity index 100% rename from assets/js/e549d204.2bee4099.js rename to assets/js/e549d204.7893753f.js diff --git a/assets/js/e56a5f3e.363ebf91.js b/assets/js/e56a5f3e.6d853965.js similarity index 100% rename from assets/js/e56a5f3e.363ebf91.js rename to assets/js/e56a5f3e.6d853965.js diff --git a/assets/js/e578e1c1.8db7e150.js b/assets/js/e578e1c1.b22f5faf.js similarity index 100% rename from assets/js/e578e1c1.8db7e150.js rename to assets/js/e578e1c1.b22f5faf.js diff --git a/assets/js/e623212a.fbb9cc5e.js b/assets/js/e623212a.381d04d5.js similarity index 100% rename from assets/js/e623212a.fbb9cc5e.js rename to assets/js/e623212a.381d04d5.js diff --git a/assets/js/e6b615c7.a4ed3143.js b/assets/js/e6b615c7.d1a198d4.js similarity index 100% rename from assets/js/e6b615c7.a4ed3143.js rename to assets/js/e6b615c7.d1a198d4.js diff --git a/assets/js/e78a2122.398a30c5.js b/assets/js/e78a2122.26f3623e.js similarity index 100% rename from assets/js/e78a2122.398a30c5.js rename to assets/js/e78a2122.26f3623e.js diff --git a/assets/js/e7f51ecb.5a56eff5.js b/assets/js/e7f51ecb.8962f3ed.js similarity index 100% rename from assets/js/e7f51ecb.5a56eff5.js rename to assets/js/e7f51ecb.8962f3ed.js diff --git a/assets/js/e9e4cc90.96d7d582.js b/assets/js/e9e4cc90.a6bb9f1b.js similarity index 100% rename from assets/js/e9e4cc90.96d7d582.js rename to assets/js/e9e4cc90.a6bb9f1b.js diff --git a/assets/js/ea0eeea3.53022e2d.js b/assets/js/ea0eeea3.555bae08.js similarity index 100% rename from assets/js/ea0eeea3.53022e2d.js rename to assets/js/ea0eeea3.555bae08.js diff --git a/assets/js/eab0d811.77718e5d.js b/assets/js/eab0d811.c7621329.js similarity index 100% rename from assets/js/eab0d811.77718e5d.js rename to assets/js/eab0d811.c7621329.js diff --git a/assets/js/eab8af53.38113368.js b/assets/js/eab8af53.20b14131.js similarity index 100% rename from assets/js/eab8af53.38113368.js rename to assets/js/eab8af53.20b14131.js diff --git a/assets/js/eade11f2.09fcbb0c.js b/assets/js/eade11f2.feff4e46.js similarity index 100% rename from assets/js/eade11f2.09fcbb0c.js rename to assets/js/eade11f2.feff4e46.js diff --git a/assets/js/eaf4c34d.c210d030.js b/assets/js/eaf4c34d.71e1f0fd.js similarity index 100% rename from assets/js/eaf4c34d.c210d030.js rename to assets/js/eaf4c34d.71e1f0fd.js diff --git a/assets/js/eb547e60.7dd5d89c.js b/assets/js/eb547e60.50531564.js similarity index 100% rename from assets/js/eb547e60.7dd5d89c.js rename to assets/js/eb547e60.50531564.js diff --git a/assets/js/ebb622c4.b4826555.js b/assets/js/ebb622c4.4ccdb0e6.js similarity index 100% rename from assets/js/ebb622c4.b4826555.js rename to assets/js/ebb622c4.4ccdb0e6.js diff --git a/assets/js/ec69c133.14f7173d.js b/assets/js/ec69c133.3782382c.js similarity index 100% rename from assets/js/ec69c133.14f7173d.js rename to assets/js/ec69c133.3782382c.js diff --git a/assets/js/ed3cdc07.d65d856c.js b/assets/js/ed3cdc07.4d4fa5fb.js similarity index 100% rename from assets/js/ed3cdc07.d65d856c.js rename to assets/js/ed3cdc07.4d4fa5fb.js diff --git a/assets/js/edfd899f.0060d831.js b/assets/js/edfd899f.de18242c.js similarity index 100% rename from assets/js/edfd899f.0060d831.js rename to assets/js/edfd899f.de18242c.js diff --git a/assets/js/ee1c428b.92dd16e9.js b/assets/js/ee1c428b.3adfcbc4.js similarity index 100% rename from assets/js/ee1c428b.92dd16e9.js rename to assets/js/ee1c428b.3adfcbc4.js diff --git a/assets/js/eea3c882.9416f2d9.js b/assets/js/eea3c882.dc5cc6b0.js similarity index 100% rename from assets/js/eea3c882.9416f2d9.js rename to assets/js/eea3c882.dc5cc6b0.js diff --git a/assets/js/ef9854ec.32591a9d.js b/assets/js/ef9854ec.fefb65d5.js similarity index 100% rename from assets/js/ef9854ec.32591a9d.js rename to assets/js/ef9854ec.fefb65d5.js diff --git a/assets/js/efe8a79b.c7e5cf70.js b/assets/js/efe8a79b.fa128f9b.js similarity index 100% rename from assets/js/efe8a79b.c7e5cf70.js rename to assets/js/efe8a79b.fa128f9b.js diff --git a/assets/js/f01ffb6e.1f4098d1.js b/assets/js/f01ffb6e.43212ade.js similarity index 100% rename from assets/js/f01ffb6e.1f4098d1.js rename to assets/js/f01ffb6e.43212ade.js diff --git a/assets/js/f03823fb.9e7aa272.js b/assets/js/f03823fb.4ba07fdf.js similarity index 100% rename from assets/js/f03823fb.9e7aa272.js rename to assets/js/f03823fb.4ba07fdf.js diff --git a/assets/js/f074aa7c.0b12e6a9.js b/assets/js/f074aa7c.bd9c7ea0.js similarity index 100% rename from assets/js/f074aa7c.0b12e6a9.js rename to assets/js/f074aa7c.bd9c7ea0.js diff --git a/assets/js/f13220bc.cc59a389.js b/assets/js/f13220bc.e9386aee.js similarity index 100% rename from assets/js/f13220bc.cc59a389.js rename to assets/js/f13220bc.e9386aee.js diff --git a/assets/js/f1ae5025.e617df84.js b/assets/js/f1ae5025.15045e43.js similarity index 100% rename from assets/js/f1ae5025.e617df84.js rename to assets/js/f1ae5025.15045e43.js diff --git a/assets/js/f1f320f4.d6606a2d.js b/assets/js/f1f320f4.911ba8a5.js similarity index 100% rename from assets/js/f1f320f4.d6606a2d.js rename to assets/js/f1f320f4.911ba8a5.js diff --git a/assets/js/f288d75b.6ca1136c.js b/assets/js/f288d75b.626660f3.js similarity index 100% rename from assets/js/f288d75b.6ca1136c.js rename to assets/js/f288d75b.626660f3.js diff --git a/assets/js/f31d0f82.52393f4d.js b/assets/js/f31d0f82.c0a4a2b4.js similarity index 100% rename from assets/js/f31d0f82.52393f4d.js rename to assets/js/f31d0f82.c0a4a2b4.js diff --git a/assets/js/f3b225f5.33e7d841.js b/assets/js/f3b225f5.ce684c39.js similarity index 100% rename from assets/js/f3b225f5.33e7d841.js rename to assets/js/f3b225f5.ce684c39.js diff --git a/assets/js/f41020a8.e4fe82b8.js b/assets/js/f41020a8.b3d636b1.js similarity index 100% rename from assets/js/f41020a8.e4fe82b8.js rename to assets/js/f41020a8.b3d636b1.js diff --git a/assets/js/f426c772.398404f6.js b/assets/js/f426c772.09247914.js similarity index 100% rename from assets/js/f426c772.398404f6.js rename to assets/js/f426c772.09247914.js diff --git a/assets/js/f501240f.f2740b42.js b/assets/js/f501240f.17a038a2.js similarity index 100% rename from assets/js/f501240f.f2740b42.js rename to assets/js/f501240f.17a038a2.js diff --git a/assets/js/f5ebfb03.33f7eb1a.js b/assets/js/f5ebfb03.fea60696.js similarity index 100% rename from assets/js/f5ebfb03.33f7eb1a.js rename to assets/js/f5ebfb03.fea60696.js diff --git a/assets/js/f657dcbe.eef0b6e2.js b/assets/js/f657dcbe.0736759d.js similarity index 100% rename from assets/js/f657dcbe.eef0b6e2.js rename to assets/js/f657dcbe.0736759d.js diff --git a/assets/js/f67b2e96.0a83047d.js b/assets/js/f67b2e96.58f2ea39.js similarity index 100% rename from assets/js/f67b2e96.0a83047d.js rename to assets/js/f67b2e96.58f2ea39.js diff --git a/assets/js/f7b7b097.3a360eb8.js b/assets/js/f7b7b097.19f5b67a.js similarity index 100% rename from assets/js/f7b7b097.3a360eb8.js rename to assets/js/f7b7b097.19f5b67a.js diff --git a/assets/js/f8372c68.bf09c0e3.js b/assets/js/f8372c68.0f79ebf2.js similarity index 100% rename from assets/js/f8372c68.bf09c0e3.js rename to assets/js/f8372c68.0f79ebf2.js diff --git a/assets/js/f88e3eac.879c2f06.js b/assets/js/f88e3eac.37ba2c78.js similarity index 100% rename from assets/js/f88e3eac.879c2f06.js rename to assets/js/f88e3eac.37ba2c78.js diff --git a/assets/js/f9153133.92ba9a13.js b/assets/js/f9153133.190cf32c.js similarity index 100% rename from assets/js/f9153133.92ba9a13.js rename to assets/js/f9153133.190cf32c.js diff --git a/assets/js/f982c8aa.9d146c14.js b/assets/js/f982c8aa.e760febe.js similarity index 100% rename from assets/js/f982c8aa.9d146c14.js rename to assets/js/f982c8aa.e760febe.js diff --git a/assets/js/f99337df.5388f247.js b/assets/js/f99337df.20d9a3f4.js similarity index 100% rename from assets/js/f99337df.5388f247.js rename to assets/js/f99337df.20d9a3f4.js diff --git a/assets/js/fa3f8c77.b640db01.js b/assets/js/fa3f8c77.81c4c560.js similarity index 100% rename from assets/js/fa3f8c77.b640db01.js rename to assets/js/fa3f8c77.81c4c560.js diff --git a/assets/js/faf4c33d.b1b446ef.js b/assets/js/faf4c33d.9b0e50dd.js similarity index 100% rename from assets/js/faf4c33d.b1b446ef.js rename to assets/js/faf4c33d.9b0e50dd.js diff --git a/assets/js/fb19c5cf.3a95b7ae.js b/assets/js/fb19c5cf.74191882.js similarity index 100% rename from assets/js/fb19c5cf.3a95b7ae.js rename to assets/js/fb19c5cf.74191882.js diff --git a/assets/js/fb88c6dd.aa7e4a45.js b/assets/js/fb88c6dd.61a4fbdc.js similarity index 100% rename from assets/js/fb88c6dd.aa7e4a45.js rename to assets/js/fb88c6dd.61a4fbdc.js diff --git a/assets/js/fb9288fc.919a1a02.js b/assets/js/fb9288fc.5ed8f0be.js similarity index 100% rename from assets/js/fb9288fc.919a1a02.js rename to assets/js/fb9288fc.5ed8f0be.js diff --git a/assets/js/fbbf3453.ad698353.js b/assets/js/fbbf3453.a9041cf1.js similarity index 100% rename from assets/js/fbbf3453.ad698353.js rename to assets/js/fbbf3453.a9041cf1.js diff --git a/assets/js/fc545d88.567b1cc3.js b/assets/js/fc545d88.7a5f78b1.js similarity index 100% rename from assets/js/fc545d88.567b1cc3.js rename to assets/js/fc545d88.7a5f78b1.js diff --git a/assets/js/fcc3e544.3b2344f4.js b/assets/js/fcc3e544.a402d458.js similarity index 100% rename from assets/js/fcc3e544.3b2344f4.js rename to assets/js/fcc3e544.a402d458.js diff --git a/assets/js/fceb1eb4.828af532.js b/assets/js/fceb1eb4.86ddac18.js similarity index 100% rename from assets/js/fceb1eb4.828af532.js rename to assets/js/fceb1eb4.86ddac18.js diff --git a/assets/js/fd46dfbe.dea46851.js b/assets/js/fd46dfbe.aa778832.js similarity index 100% rename from assets/js/fd46dfbe.dea46851.js rename to assets/js/fd46dfbe.aa778832.js diff --git a/assets/js/fd5ab4b0.90bc39a6.js b/assets/js/fd5ab4b0.862d4305.js similarity index 100% rename from assets/js/fd5ab4b0.90bc39a6.js rename to assets/js/fd5ab4b0.862d4305.js diff --git a/assets/js/fd8c2799.ddcf13ce.js b/assets/js/fd8c2799.30f6e49a.js similarity index 100% rename from assets/js/fd8c2799.ddcf13ce.js rename to assets/js/fd8c2799.30f6e49a.js diff --git a/assets/js/fdee7c0b.1ccb9204.js b/assets/js/fdee7c0b.23e7d577.js similarity index 100% rename from assets/js/fdee7c0b.1ccb9204.js rename to assets/js/fdee7c0b.23e7d577.js diff --git a/assets/js/fea67c26.245d2408.js b/assets/js/fea67c26.a320f249.js similarity index 100% rename from assets/js/fea67c26.245d2408.js rename to assets/js/fea67c26.a320f249.js diff --git a/assets/js/fec30dd7.7141e5c7.js b/assets/js/fec30dd7.24251431.js similarity index 100% rename from assets/js/fec30dd7.7141e5c7.js rename to assets/js/fec30dd7.24251431.js diff --git a/assets/js/fefe1fde.3c8424e2.js b/assets/js/fefe1fde.4af61eb9.js similarity index 100% rename from assets/js/fefe1fde.3c8424e2.js rename to assets/js/fefe1fde.4af61eb9.js diff --git a/assets/js/ffcf8c10.6f74150f.js b/assets/js/ffcf8c10.84fafb31.js similarity index 100% rename from assets/js/ffcf8c10.6f74150f.js rename to assets/js/ffcf8c10.84fafb31.js diff --git a/assets/js/main.2f2285b9.js b/assets/js/main.75363ba5.js similarity index 99% rename from assets/js/main.2f2285b9.js rename to assets/js/main.75363ba5.js index 5ba86731c55..b9b79736acb 100644 --- a/assets/js/main.2f2285b9.js +++ b/assets/js/main.75363ba5.js @@ -1,2 +1,2 @@ -/*! For license information please see main.2f2285b9.js.LICENSE.txt */ +/*! For license information please see main.75363ba5.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(26),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
'};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-1?"[^"+l(e)+"]+?":l(t)+"|(?:(?!"+l(t)+")[^"+l(e)+"])+?"}function s(e){return encodeURI(e).replace(/[\/?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()}))}function c(e,t){for(var n=new Array(e.length),i=0;i=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,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,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){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(26),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(25))},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