From 33e875d0f20525a9683d109b168ba66d28e3d496 Mon Sep 17 00:00:00 2001
From: Wojciech Lewicki <wojciech.lewicki@swmansion.com>
Date: Wed, 16 Sep 2020 11:11:51 +0200
Subject: [PATCH] feat: add optional screens per navigator (#636)

Added enabled prop to give an option of enabling/disabling native RNScreens components per ScreenContainer and Screen (Screen must have the same value of enabled as its parent ScreenContainer).
---
 src/index.d.ts      | 13 +++++++++++--
 src/index.js        |  7 +++++--
 src/index.native.js | 19 ++++++++++++-------
 3 files changed, 28 insertions(+), 11 deletions(-)

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