feat: add optional navigators (#624)

Changed the behavior of active prop to contain 3 options (values):
- 0: Screen is inactive
- 1: Screen is active, but is not visible and is not the first responder, or is transitioning
- 2: Screen is active and on top

Added new prop `shouldUseActivityState` to differentiate between different implementations for other libraries to choose their implementation of the JS side.

Author: WoLewicki

Example/ios/Podfile.lock

@@ -304,7 +304,7 @@ PODS:
     - React
   - RNReanimated (1.10.1):
     - React
-  - RNScreens (2.12.0):
+  - RNScreens (2.13.0):
     - React-Core
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
@@ -484,7 +484,7 @@ SPEC CHECKSUMS:
   RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
   RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38
   RNReanimated: c2bb7438b57a3d987bb2e4e6e4bca94787e30b02
-  RNScreens: 4b488fdf9537bbce829e2910c8cce1d17f6d9be8
+  RNScreens: 13f23e5498fb4aa749d19a5eda7f8792fbb9d01f
   Yoga: 7d2edc5b410474191962e6dee88ee67f9b328b6b
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 

android/src/main/java/com/swmansion/rnscreens/Screen.java

@@ -36,6 +36,12 @@ public enum ReplaceAnimation {
     POP
   }
 
+  public enum ActivityState {
+    INACTIVE,
+    TRANSITIONING_OR_BELOW_TOP,
+    ON_TOP
+  }
+
   private static OnAttachStateChangeListener sShowSoftKeyboardOnAttach = new OnAttachStateChangeListener() {
 
     @Override
@@ -54,7 +60,7 @@ public void onViewDetachedFromWindow(View view) {
 
   private @Nullable ScreenFragment mFragment;
   private @Nullable ScreenContainer mContainer;
-  private boolean mActive;
+  private ActivityState mActivityState;
   private boolean mTransitioning;
   private StackPresentation mStackPresentation = StackPresentation.PUSH;
   private ReplaceAnimation mReplaceAnimation = ReplaceAnimation.POP;
@@ -222,18 +228,18 @@ protected void setFragment(ScreenFragment fragment) {
     return mContainer;
   }
 
-  public void setActive(boolean active) {
-    if (active == mActive) {
+  public void setActivityState(ActivityState activityState) {
+    if (activityState == mActivityState) {
       return;
     }
-    mActive = active;
+    mActivityState = activityState;
     if (mContainer != null) {
       mContainer.notifyChildUpdate();
     }
   }
 
-  public boolean isActive() {
-    return mActive;
+  public ActivityState getActivityState() {
+    return mActivityState;
   }
 
   public boolean isGestureEnabled() {

android/src/main/java/com/swmansion/rnscreens/ScreenContainer.java

@@ -208,12 +208,12 @@ protected void tryCommitTransaction() {
       mProcessingTransaction.runOnCommit(new Runnable() {
         @Override
         public void run() {
-         if (mProcessingTransaction == transaction) {
-           // we need to take into account that commit is initiated with some other transaction while
-           // the previous one is still processing. In this case mProcessingTransaction gets overwritten
-           // and we don't want to set it to null until the second transaction is finished.
-           mProcessingTransaction = null;
-         }
+          if (mProcessingTransaction == transaction) {
+            // we need to take into account that commit is initiated with some other transaction while
+            // the previous one is still processing. In this case mProcessingTransaction gets overwritten
+            // and we don't want to set it to null until the second transaction is finished.
+            mProcessingTransaction = null;
+          }
         }
       });
       mCurrentTransaction.commitAllowingStateLoss();
@@ -235,8 +235,8 @@ private void detachScreen(ScreenFragment screenFragment) {
     getOrCreateTransaction().remove(screenFragment);
   }
 
-  protected boolean isScreenActive(ScreenFragment screenFragment) {
-    return screenFragment.getScreen().isActive();
+  protected Screen.ActivityState getActivityState(ScreenFragment screenFragment) {
+    return screenFragment.getScreen().getActivityState();
   }
 
   protected boolean hasScreen(ScreenFragment screenFragment) {
@@ -335,8 +335,7 @@ protected void performUpdate() {
     Set<Fragment> orphaned = new HashSet<>(mFragmentManager.getFragments());
     for (int i = 0, size = mScreenFragments.size(); i < size; i++) {
       ScreenFragment screenFragment = mScreenFragments.get(i);
-      boolean isActive = isScreenActive(screenFragment);
-      if (!isActive && screenFragment.isAdded()) {
+      if (getActivityState(screenFragment) == Screen.ActivityState.INACTIVE && screenFragment.isAdded()) {
         detachScreen(screenFragment);
       }
       orphaned.remove(screenFragment);
@@ -352,28 +351,30 @@ protected void performUpdate() {
       }
     }
 
-    // detect if we are "transitioning" based on the number of active screens
-    int activeScreens = 0;
+    boolean transitioning = true;
+
     for (int i = 0, size = mScreenFragments.size(); i < size; i++) {
-      if (isScreenActive(mScreenFragments.get(i))) {
-        activeScreens += 1;
+      ScreenFragment screenFragment = mScreenFragments.get(i);
+      if (getActivityState(screenFragment) == Screen.ActivityState.ON_TOP) {
+        // if there is an "onTop" screen it means the transition has ended
+        transitioning = false;
       }
     }
-    boolean transitioning = activeScreens > 1;
 
     // attach newly activated screens
     boolean addedBefore = false;
     for (int i = 0, size = mScreenFragments.size(); i < size; i++) {
       ScreenFragment screenFragment = mScreenFragments.get(i);
-      boolean isActive = isScreenActive(screenFragment);
-      if (isActive && !screenFragment.isAdded()) {
+      Screen.ActivityState activityState = getActivityState(screenFragment);
+      if (activityState != Screen.ActivityState.INACTIVE && !screenFragment.isAdded()) {
         addedBefore = true;
         attachScreen(screenFragment);
-      } else if (isActive && addedBefore) {
+      } else if (activityState != Screen.ActivityState.INACTIVE && addedBefore) {
         moveToFront(screenFragment);
       }
       screenFragment.getScreen().setTransitioning(transitioning);
     }
+
     tryCommitTransaction();
   }
 }

android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.java

@@ -26,9 +26,15 @@ protected Screen createViewInstance(ThemedReactContext reactContext) {
     return new Screen(reactContext);
   }
 
-  @ReactProp(name = "active", defaultFloat = 0)
-  public void setActive(Screen view, float active) {
-    view.setActive(active != 0);
+  @ReactProp(name = "activityState")
+  public void setActivityState(Screen view, int activityState) {
+    if (activityState == 0) {
+      view.setActivityState(Screen.ActivityState.INACTIVE);
+    } else if (activityState == 1) {
+      view.setActivityState(Screen.ActivityState.TRANSITIONING_OR_BELOW_TOP);
+    } else if (activityState == 2) {
+      view.setActivityState(Screen.ActivityState.ON_TOP);
+    }
   }
 
   @ReactProp(name = "stackPresentation")

ios/RNSScreen.h

@@ -28,6 +28,12 @@ typedef NS_ENUM(NSInteger, RNSScreenReplaceAnimation) {
   RNSScreenReplaceAnimationPush,
 };
 
+typedef NS_ENUM(NSInteger, RNSActivityState) {
+  RNSActivityStateInactive = 0,
+  RNSActivityStateTransitioningOrBelowTop = 1,
+  RNSActivityStateOnTop = 2
+};
+
 @interface RCTConvert (RNSScreen)
 
 + (RNSScreenStackPresentation)RNSScreenStackPresentation:(id)json;
@@ -56,7 +62,7 @@ typedef NS_ENUM(NSInteger, RNSScreenReplaceAnimation) {
 @property (weak, nonatomic) UIView<RNSScreenContainerDelegate> *reactSuperview;
 @property (nonatomic, retain) UIViewController *controller;
 @property (nonatomic, readonly) BOOL dismissed;
-@property (nonatomic) BOOL active;
+@property (nonatomic) int activityState;
 @property (nonatomic) BOOL gestureEnabled;
 @property (nonatomic) RNSScreenStackAnimation stackAnimation;
 @property (nonatomic) RNSScreenStackPresentation stackPresentation;

ios/RNSScreen.m

@@ -58,10 +58,10 @@ - (void)updateBounds
   [_bridge.uiManager setSize:self.bounds.size forView:self];
 }
 
-- (void)setActive:(BOOL)active
+- (void)setActivityState:(int)activityState
 {
-  if (active != _active) {
-    _active = active;
+  if (activityState != _activityState) {
+    _activityState = activityState;
     [_reactSuperview markChildUpdated];
   }
 }
@@ -469,7 +469,7 @@ @implementation RNSScreenManager
 
 RCT_EXPORT_MODULE()
 
-RCT_EXPORT_VIEW_PROPERTY(active, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(activityState, int)
 RCT_EXPORT_VIEW_PROPERTY(gestureEnabled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(replaceAnimation, RNSScreenReplaceAnimation)
 RCT_EXPORT_VIEW_PROPERTY(stackPresentation, RNSScreenStackPresentation)

ios/RNSScreenContainer.m

@@ -42,8 +42,7 @@ - (UIViewController *)childViewControllerForStatusBarHidden
 - (UIViewController *)findActiveChildVC
 {
   for (UIViewController *childVC in self.childViewControllers) {
-    // condition should be changed when activityState is introduced to check for activityState == 2
-    if ([childVC isKindOfClass:[RNSScreen class]] && ((RNSScreenView *)((RNSScreen *)childVC.view)).active) {
+    if ([childVC isKindOfClass:[RNSScreen class]] && ((RNSScreenView *)((RNSScreen *)childVC.view)).activityState == RNSActivityStateOnTop) {
       return childVC;
     }
   }
@@ -146,59 +145,60 @@ - (void)attachScreen:(RNSScreenView *)screen atIndex:(NSInteger)index
 - (void)updateContainer
 {
   _needUpdate = NO;
-  BOOL activeScreenRemoved = NO;
+  BOOL screenRemoved = NO;
   // remove screens that are no longer active
   NSMutableSet *orphaned = [NSMutableSet setWithSet:_activeScreens];
   for (RNSScreenView *screen in _reactSubviews) {
-    if (!screen.active && [_activeScreens containsObject:screen]) {
-      activeScreenRemoved = YES;
+    if (screen.activityState == RNSActivityStateInactive && [_activeScreens containsObject:screen]) {
+      screenRemoved = YES;
       [self detachScreen:screen];
     }
     [orphaned removeObject:screen];
   }
   for (RNSScreenView *screen in orphaned) {
-    activeScreenRemoved = YES;
+    screenRemoved = YES;
     [self detachScreen:screen];
   }
 
   // detect if new screen is going to be activated
-  BOOL activeScreenAdded = NO;
+  BOOL screenAdded = NO;
   for (RNSScreenView *screen in _reactSubviews) {
-    if (screen.active && ![_activeScreens containsObject:screen]) {
-      activeScreenAdded = YES;
+    if (screen.activityState != RNSActivityStateInactive && ![_activeScreens containsObject:screen]) {
+      screenAdded = YES;
     }
   }
 
-
-  if (activeScreenAdded) {
+  if (screenAdded) {
     // add new screens in order they are placed in subviews array
     NSInteger index = 0;
     for (RNSScreenView *screen in _reactSubviews) {
-      if (screen.active) {
-        if ([_activeScreens containsObject:screen]) {
+      if (screen.activityState != RNSActivityStateInactive) {
+        if ([_activeScreens containsObject:screen] && screen.activityState == RNSActivityStateTransitioningOrBelowTop) {
           // for screens that were already active we want to mimick the effect UINavigationController
           // has when willMoveToWindow:nil is triggered before the animation starts
           [self prepareDetach:screen];
-          // disable interactions for the duration of transition
-          screen.userInteractionEnabled = NO;
-        } else {
+        } else if (![_activeScreens containsObject:screen]) {
           [self attachScreen:screen atIndex:index];
         }
         index += 1;
       }
     }
   }
 
-  // if we are down to one active screen it means the transitioning is over and we want to notify
-  // the transition has finished
-  if ((activeScreenRemoved || activeScreenAdded) && _activeScreens.count == 1) {
-    RNSScreenView *singleActiveScreen = [_activeScreens anyObject];
-    // restore interactions
-    singleActiveScreen.userInteractionEnabled = YES;
-    [singleActiveScreen notifyFinishTransitioning];
+  if (screenRemoved || screenAdded) {
+    // we disable interaction for the duration of the transition until one of the screens changes its state to "onTop"
+    self.userInteractionEnabled = NO;
+    
+    for (RNSScreenView *screen in _reactSubviews) {
+      if (screen.activityState == RNSActivityStateOnTop) {
+        // if there is an "onTop" screen it means the transition has ended so we restore interactions
+        self.userInteractionEnabled = YES;
+        [screen notifyFinishTransitioning];
+      }
+    }
   }
 
-  if ((activeScreenRemoved || activeScreenAdded) && _controller.presentedViewController == nil && _controller.presentingViewController == nil) {
+  if ((screenRemoved || screenAdded) && _controller.presentedViewController == nil && _controller.presentingViewController == nil) {
     // if user has reachability enabled (one hand use) and the window is slided down the below
     // method will force it to slide back up as it is expected to happen with UINavController when
     // we push or pop views.

src/index.d.ts

@@ -49,6 +49,7 @@ declare module 'react-native-screens' {
 
   export interface ScreenProps extends ViewProps {
     active?: 0 | 1 | Animated.AnimatedInterpolation;
+    activityState?: 0 | 1 | 2 | Animated.AnimatedInterpolation;
     children?: React.ReactNode;
     /**
      * @description All children screens should have the same value of their "enabled" prop as their container.
@@ -252,4 +253,5 @@ declare module 'react-native-screens' {
   export const ScreenStackHeaderRightView: ComponentClass<ViewProps>;
   export const ScreenStackHeaderCenterView: ComponentClass<ViewProps>;
   export const ScreenStackHeaderConfig: ComponentClass<ScreenStackHeaderConfigProps>;
+  export const shouldUseActivityState: boolean;
 }

src/index.native.js

@@ -27,6 +27,9 @@ function enableScreens(shouldEnableScreens = true) {
   }
 }
 
+// const that tells if the library should use new implementation, will be undefined for older versions
+const shouldUseActivityState = true;
+
 // we should remove this at some point
 function useScreens(shouldUseScreens = true) {
   console.warn('Method `useScreens` is deprecated, please use `enableScreens`');
@@ -110,8 +113,20 @@ class Screen extends React.Component {
 
       // When using RN from master version is 0.0.0
       if (version.minor >= 57 || version.minor === 0) {
-        const { enabled, ...rest } = this.props;
-        return <AnimatedNativeScreen {...rest} ref={this.setRef} />;
+        let { enabled, active, activityState, ...rest } = this.props;
+        if (active !== undefined && activityState === undefined) {
+          console.warn(
+            'It appears that you are using old version of react-navigation library. Please update @react-navigation/bottom-tabs, @react-navigation/stack and @react-navigation/drawer to version 5.10.0 or above to take full advantage of new functionality added to react-native-screens'
+          );
+          activityState = active !== 0 ? 2 : 0; // in the new version, we need one of the screens to have value of 2 after the transition
+        }
+        return (
+          <AnimatedNativeScreen
+            {...rest}
+            activityState={activityState}
+            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
@@ -214,4 +229,5 @@ module.exports = {
   enableScreens,
   useScreens,
   screensEnabled,
+  shouldUseActivityState,
 };