feat: add optional screens per navigator

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;

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 (
       <View
-        style={[style, ENABLE_SCREENS && !active ? { display: 'none' } : null]}
+        style={[
+          style,
+          ENABLE_SCREENS && enabled && !active ? { display: 'none' } : null,
+        ]}
         {...rest}
       />
     );

src/index.native.js

@@ -92,29 +92,32 @@ 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 <Animated.View {...props} ref={this.setRef} />;
+      return <Animated.View {...rest} ref={this.setRef} />;
     } else {
       AnimatedNativeScreen =
         AnimatedNativeScreen ||
         Animated.createAnimatedComponent(ScreensNativeModules.NativeScreen);
 
       // When using RN from master version is 0.0.0
       if (version.minor >= 57 || version.minor === 0) {
-        return <AnimatedNativeScreen {...this.props} ref={this.setRef} />;
+        const { enabled, ...rest } = this.props;
+        return <AnimatedNativeScreen {...rest} ref={this.setRef} />;
       } 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 (
           <AnimatedNativeScreen
             {...rest}
@@ -130,8 +133,10 @@ class Screen extends React.Component {
 
 class ScreenContainer extends React.Component {
   render() {
-    if (!ENABLE_SCREENS) {
-      return <View {...this.props} />;
+    const { enabled = true, ...rest } = this.props;
+
+    if (!ENABLE_SCREENS || !enabled) {
+      return <View {...rest} />;
     } else {
       return <ScreensNativeModules.NativeScreenContainer {...this.props} />;
     }