diff --git a/src/index.d.ts b/src/index.d.ts
index ce5f43fd1a..c07c9273ec 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -52,6 +52,10 @@ declare module 'react-native-screens' {
onComponentRef?: (view: any) => void;
children?: React.ReactNode;
+ /**
+ * @description All children screens should have the same value of their "enabled" prop as their container.
+ */
+ enabled?: boolean;
/**
* @description A callback that gets called when the current screen will appear. This is called as soon as the transition begins.
*/
@@ -81,7 +85,7 @@ declare module 'react-native-screens' {
* @type "fullScreenModal" – will use "UIModalPresentationFullScreen" modal style on iOS and will fallback to "modal" on Android.
* @type "formSheet" – will use "UIModalPresentationFormSheet" modal style on iOS and will fallback to "modal" on Android.
*/
- stackPresentation: StackPresentationTypes;
+ stackPresentation?: StackPresentationTypes;
/**
* @description Allows for the customization of how the given screen should appear/dissapear when pushed or popped at the top of the stack. The following values are currently supported:
* @type "default" – uses a platform default animation
@@ -102,7 +106,12 @@ declare module 'react-native-screens' {
gestureEnabled?: boolean;
}
- export type ScreenContainerProps = ViewProps;
+ export interface ScreenContainerProps extends ViewProps {
+ /**
+ * @description A prop that gives users an option to switch between using Screens for the navigator (container). All children screens should have the same value of their "enabled" prop as their container.
+ */
+ enabled?: boolean;
+ }
export interface ScreenStackProps extends ViewProps {
transitioning?: number;
diff --git a/src/index.js b/src/index.js
index b94d03cfd2..0450972a0c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -13,11 +13,14 @@ export function screensEnabled() {
export class NativeScreen extends React.Component {
render() {
- const { active, style, ...rest } = this.props;
+ const { active, style, enabled = true, ...rest } = this.props;
return (
);
diff --git a/src/index.native.js b/src/index.native.js
index 29e35274cc..20e625e181 100644
--- a/src/index.native.js
+++ b/src/index.native.js
@@ -92,15 +92,17 @@ class Screen extends React.Component {
};
render() {
- if (!ENABLE_SCREENS) {
+ const { enabled = true } = this.props;
+
+ if (!ENABLE_SCREENS || !enabled) {
// Filter out active prop in this case because it is unused and
// can cause problems depending on react-native version:
// https://github.com/react-navigation/react-navigation/issues/4886
/* eslint-disable no-unused-vars */
- const { active, onComponentRef, ...props } = this.props;
+ const { active, enabled, onComponentRef, ...rest } = this.props;
- return ;
+ return ;
} else {
AnimatedNativeScreen =
AnimatedNativeScreen ||
@@ -108,13 +110,14 @@ class Screen extends React.Component {
// When using RN from master version is 0.0.0
if (version.minor >= 57 || version.minor === 0) {
- return ;
+ const { enabled, ...rest } = this.props;
+ return ;
} else {
// On RN version below 0.57 we need to wrap screen's children with an
// additional View because of a bug fixed in react-native/pull/20658 which
// was preventing a view from having both styles and some other props being
// "animated" (using Animated native driver)
- const { style, children, ...rest } = this.props;
+ const { style, children, enabled, ...rest } = this.props;
return (
;
+ const { enabled = true, ...rest } = this.props;
+
+ if (!ENABLE_SCREENS || !enabled) {
+ return ;
} else {
return ;
}