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 ; }