Bump version -> 2.0.0-alpha.32

This change fixes a bug when header property updates happens during or at the same time of stack transition, e.g., when we both pop a screen and change parent VC header properties. When this happens we trigger header update code, but because we used to compare current VC to visibleViewController, which at that moment points to controller that we are transitioning away from, the update would've been prevented. With this change instead of using visibleViewController to compare with updated VC, we check if there is transition happening (using transitransitionCoordinator property), and in such case we use topController which points to the controller we are transitioning to.

README.md

@@ -131,7 +131,7 @@ Screen stack component expects one or more `Screen` components as direct childre
 
 `StackScreen` extends the capabilities of `Screen` component to allow additional customizations and to make it possible to handle events such as using hardware back or back gesture to dismiss the top screen. Below is the list of additional properties that can be used for `Screen` component:
 
-#### `onDismiss`
+#### `onDismissed`
 
 A callback that gets called when the current screen is dismissed by hardware back (on Android) or dismiss gesture (swipe back or down). The callback takes no arguments.
 

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

@@ -16,7 +16,7 @@ import com.facebook.react.uimanager.PointerEvents;
 import com.facebook.react.uimanager.ReactPointerEventsView;
 import com.facebook.react.uimanager.UIManagerModule;
 
-public class Screen extends ViewGroup implements ReactPointerEventsView {
+public class Screen extends ViewGroup {
 
   public enum StackPresentation {
     PUSH,
@@ -52,6 +52,7 @@ public class Screen extends ViewGroup implements ReactPointerEventsView {
   private boolean mTransitioning;
   private StackPresentation mStackPresentation = StackPresentation.PUSH;
   private StackAnimation mStackAnimation = StackAnimation.DEFAULT;
+  private boolean mGestureEnabled = true;
 
   public Screen(ReactContext context) {
     super(context);
@@ -122,6 +123,10 @@ public class Screen extends ViewGroup implements ReactPointerEventsView {
     mStackAnimation = stackAnimation;
   }
 
+  public void setGestureEnabled(boolean gestureEnabled) {
+    mGestureEnabled = gestureEnabled;
+  }
+
   public StackAnimation getStackAnimation() {
     return mStackAnimation;
   }
@@ -130,11 +135,6 @@ public class Screen extends ViewGroup implements ReactPointerEventsView {
     return mStackPresentation;
   }
 
-  @Override
-  public PointerEvents getPointerEvents() {
-    return mTransitioning ? PointerEvents.NONE : PointerEvents.AUTO;
-  }
-
   @Override
   public void setLayerType(int layerType, @Nullable Paint paint) {
     // ignore - layer type is controlled by `transitioning` prop
@@ -169,4 +169,8 @@ public class Screen extends ViewGroup implements ReactPointerEventsView {
   public boolean isActive() {
     return mActive;
   }
+
+  public boolean isGestureEnabled() {
+    return mGestureEnabled;
+  }
 }

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

@@ -33,6 +33,7 @@ public class ScreenContainer<T extends ScreenFragment> extends ViewGroup {
   private boolean mIsTransitioning;
   private boolean mLayoutEnqueued = false;
 
+
   private final ChoreographerCompat.FrameCallback mFrameCallback = new ChoreographerCompat.FrameCallback() {
     @Override
     public void doFrame(long frameTimeNanos) {
@@ -40,9 +41,9 @@ public class ScreenContainer<T extends ScreenFragment> extends ViewGroup {
     }
   };
 
-  private final Runnable mLayoutRunnable = new Runnable() {
+  private final ChoreographerCompat.FrameCallback mLayoutCallback = new ChoreographerCompat.FrameCallback() {
     @Override
-    public void run() {
+    public void doFrame(long frameTimeNanos) {
       mLayoutEnqueued = false;
       measure(
               MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY),
@@ -66,9 +67,13 @@ public class ScreenContainer<T extends ScreenFragment> extends ViewGroup {
   public void requestLayout() {
     super.requestLayout();
 
-    if (!mLayoutEnqueued) {
+    if (!mLayoutEnqueued && mLayoutCallback != null) {
       mLayoutEnqueued = true;
-      post(mLayoutRunnable);
+      // we use NATIVE_ANIMATED_MODULE choreographer queue because it allows us to catch the current
+      // looper loop instead of enqueueing the update in the next loop causing a one frame delay.
+      ReactChoreographer.getInstance().postFrameCallback(
+              ReactChoreographer.CallbackType.NATIVE_ANIMATED_MODULE,
+              mLayoutCallback);
     }
   }
 

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

@@ -70,14 +70,16 @@ public class ScreenStack extends ScreenContainer<ScreenStackFragment> {
 
   @Override
   protected void onDetachedFromWindow() {
-    mFragmentManager.removeOnBackStackChangedListener(mBackStackListener);
-    mFragmentManager.unregisterFragmentLifecycleCallbacks(mLifecycleCallbacks);
-    if (!mFragmentManager.isStateSaved()) {
-      // state save means that the container where fragment manager was installed has been unmounted.
-      // This could happen as a result of dismissing nested stack. In such a case we don't need to
-      // reset back stack as it'd result in a crash caused by the fact the fragment manager is no
-      // longer attached.
-      mFragmentManager.popBackStack(BACK_STACK_TAG, FragmentManager.POP_BACK_STACK_INCLUSIVE);
+    if (mFragmentManager != null) {
+      mFragmentManager.removeOnBackStackChangedListener(mBackStackListener);
+      mFragmentManager.unregisterFragmentLifecycleCallbacks(mLifecycleCallbacks);
+      if (!mFragmentManager.isStateSaved()) {
+        // state save means that the container where fragment manager was installed has been unmounted.
+        // This could happen as a result of dismissing nested stack. In such a case we don't need to
+        // reset back stack as it'd result in a crash caused by the fact the fragment manager is no
+        // longer attached.
+        mFragmentManager.popBackStack(BACK_STACK_TAG, FragmentManager.POP_BACK_STACK_INCLUSIVE);
+      }
     }
     super.onDetachedFromWindow();
   }
@@ -241,7 +243,6 @@ public class ScreenStack extends ScreenContainer<ScreenStackFragment> {
     if (topScreen != firstScreen && topScreen.isDismissable()) {
       mFragmentManager
               .beginTransaction()
-              .hide(topScreen)
               .show(topScreen)
               .addToBackStack(BACK_STACK_TAG)
               .setPrimaryNavigationFragment(topScreen)

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

@@ -97,10 +97,6 @@ public class ScreenStackFragment extends ScreenFragment {
   }
 
   public boolean isDismissable() {
-    View child = mScreenView.getChildAt(0);
-    if (child instanceof ScreenStackHeaderConfig) {
-      return ((ScreenStackHeaderConfig) child).isDismissable();
-    }
-    return true;
+    return mScreenView.isGestureEnabled();
   }
 }

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

@@ -30,7 +30,6 @@ public class ScreenStackHeaderConfig extends ViewGroup {
   private float mTitleFontSize;
   private int mBackgroundColor;
   private boolean mIsHidden;
-  private boolean mGestureEnabled = true;
   private boolean mIsBackButtonHidden;
   private boolean mIsShadowHidden;
   private boolean mDestroyed;
@@ -51,6 +50,10 @@ public class ScreenStackHeaderConfig extends ViewGroup {
     setVisibility(View.GONE);
 
     mToolbar = new Toolbar(context);
+    // reset content insets to be 0 to allow react position custom navbar views. Note that this does
+    // not affect platform native back button as toolbar does not apply left inset when navigation
+    // button is specified
+    mToolbar.setContentInsetsAbsolute(0, 0);
 
     // set primary color as background by default
     TypedValue tv = new TypedValue();
@@ -111,10 +114,6 @@ public class ScreenStackHeaderConfig extends ViewGroup {
     return null;
   }
 
-  public boolean isDismissable() {
-    return mGestureEnabled;
-  }
-
   public void onUpdate() {
     Screen parent = (Screen) getParent();
     final ScreenStack stack = getScreenStack();
@@ -299,10 +298,6 @@ public class ScreenStackHeaderConfig extends ViewGroup {
     mIsShadowHidden = hideShadow;
   }
 
-  public void setGestureEnabled(boolean gestureEnabled) {
-    mGestureEnabled = gestureEnabled;
-  }
-
   public void setHideBackButton(boolean hideBackButton) {
     mIsBackButtonHidden = hideBackButton;
   }

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

@@ -99,11 +99,6 @@ public class ScreenStackHeaderConfigViewManager extends ViewGroupManager<ScreenS
     config.setHideShadow(hideShadow);
   }
 
-  @ReactProp(name = "gestureEnabled", defaultBoolean = true)
-  public void setGestureEnabled(ScreenStackHeaderConfig config, boolean gestureEnabled) {
-    config.setGestureEnabled(gestureEnabled);
-  }
-
   @ReactProp(name = "hideBackButton")
   public void setHideBackButton(ScreenStackHeaderConfig config, boolean hideBackButton) {
     config.setHideBackButton(hideBackButton);

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

@@ -43,18 +43,15 @@ public class ScreenStackHeaderSubview extends ReactViewGroup {
 
   @Override
   protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
-    if (changed && (mType == Type.CENTER || mType == Type.TITLE)) {
+    if (changed && (mType == Type.CENTER)) {
+      // if we want the view to be centered we need to account for the fact that right and left
+      // paddings may not be equal.
       Measurements measurements = new Measurements();
-      measurements.width = right - left;
-      if (mType == Type.CENTER) {
-        // if we want the view to be centered we need to account for the fact that right and left
-        // paddings may not be equal.
-        View parent = (View) getParent();
-        int parentWidth = parent.getWidth();
-        int rightPadding = parentWidth - right;
-        int leftPadding = left;
-        measurements.width = Math.max(0, parentWidth - 2 * Math.max(rightPadding, leftPadding));
-      }
+      View parent = (View) getParent();
+      int parentWidth = parent.getWidth();
+      int rightPadding = parentWidth - right;
+      int leftPadding = left;
+      measurements.width = Math.max(0, parentWidth - 2 * Math.max(rightPadding, leftPadding));
       measurements.height = bottom - top;
       mUIManager.setViewLocalData(getId(), measurements);
     }

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

@@ -57,6 +57,11 @@ public class ScreenViewManager extends ViewGroupManager<Screen> {
     }
   }
 
+  @ReactProp(name = "gestureEnabled", defaultBoolean = true)
+  public void setGestureEnabled(Screen view, boolean gestureEnabled) {
+    view.setGestureEnabled(gestureEnabled);
+  }
+
   @Nullable
   @Override
   public Map getExportedCustomDirectEventTypeConstants() {

createNativeStackNavigator.js

@@ -31,7 +31,9 @@ class StackView extends React.Component {
   };
 
   _onSceneFocus = (route, descriptor) => {
-    descriptor.options && descriptor.options.onAppear && descriptor.options.onAppear()
+    descriptor.options &&
+      descriptor.options.onAppear &&
+      descriptor.options.onAppear();
     this.props.navigation.dispatch(
       StackActions.completeTransition({ toChildKey: route.key })
     );
@@ -50,7 +52,6 @@ class StackView extends React.Component {
       headerBackTitle,
       headerBackTitleVisible,
       headerTintColor,
-      gestureEnabled,
       largeTitle,
       headerLargeTitleStyle,
       translucent,
@@ -75,7 +76,6 @@ class StackView extends React.Component {
         headerBackTitleStyle && headerBackTitleStyle.fontFamily,
       backTitleFontSize: headerBackTitleStyle && headerBackTitleStyle.fontSize,
       color: headerTintColor,
-      gestureEnabled: gestureEnabled === undefined ? true : gestureEnabled,
       largeTitle,
       largeTitleFontFamily:
         headerLargeTitleStyle && headerLargeTitleStyle.fontFamily,
@@ -191,6 +191,9 @@ class StackView extends React.Component {
         style={options.cardStyle}
         stackAnimation={stackAnimation}
         stackPresentation={stackPresentation}
+        gestureEnabled={
+          options.gestureEnabled === undefined ? true : options.gestureEnabled
+        }
         onAppear={() => this._onSceneFocus(route, descriptor)}
         onDismissed={() => this._removeScene(route)}>
         {this._renderHeaderConfig(index, route, descriptor)}

ios/RNSScreen.h

@@ -44,6 +44,7 @@ typedef NS_ENUM(NSInteger, RNSScreenStackAnimation) {
 @property (weak, nonatomic) UIView<RNSScreenContainerDelegate> *reactSuperview;
 @property (nonatomic, retain) UIViewController *controller;
 @property (nonatomic) BOOL active;
+@property (nonatomic) BOOL gestureEnabled;
 @property (nonatomic) RNSScreenStackAnimation stackAnimation;
 @property (nonatomic) RNSScreenStackPresentation stackPresentation;
 

ios/RNSScreen.m

@@ -26,6 +26,7 @@
     _controller = [[RNSScreen alloc] initWithView:self];
     _stackPresentation = RNSScreenStackPresentationPush;
     _stackAnimation = RNSScreenStackAnimationDefault;
+    _gestureEnabled = YES;
   }
 
   return self;
@@ -276,6 +277,7 @@
 RCT_EXPORT_MODULE()
 
 RCT_EXPORT_VIEW_PROPERTY(active, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(gestureEnabled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(stackPresentation, RNSScreenStackPresentation)
 RCT_EXPORT_VIEW_PROPERTY(stackAnimation, RNSScreenStackAnimation)
 RCT_EXPORT_VIEW_PROPERTY(onAppear, RCTDirectEventBlock);

ios/RNSScreenStack.m

@@ -102,16 +102,9 @@
   RCTRootContentView *rootView = (RCTRootContentView *)parent;
   [rootView.touchHandler cancel];
 
-  UIView *topView = _controller.viewControllers.lastObject.view;
-  RNSScreenStackHeaderConfig *config = nil;
-  for (UIView *subview in topView.reactSubviews) {
-    if ([subview isKindOfClass:[RNSScreenStackHeaderConfig class]]) {
-      config = (RNSScreenStackHeaderConfig*) subview;
-      break;
-    }
-  }
+  RNSScreenView *topScreen = (RNSScreenView *)_controller.viewControllers.lastObject.view;
 
-  return _controller.viewControllers.count > 1 && (config == nil || config.gestureEnabled);
+  return _controller.viewControllers.count > 1 && topScreen.gestureEnabled;
 }
 
 - (void)markChildUpdated

ios/RNSScreenStackHeaderConfig.h

@@ -23,7 +23,6 @@
 @property (nonatomic) BOOL hideBackButton;
 @property (nonatomic) BOOL hideShadow;
 @property (nonatomic) BOOL translucent;
-@property (nonatomic) BOOL gestureEnabled;
 
 + (void)willShowViewController:(UIViewController *)vc withConfig:(RNSScreenStackHeaderConfig*)config;
 

ios/RNSScreenStackHeaderConfig.m

@@ -60,7 +60,6 @@
     self.hidden = YES;
     _translucent = YES;
     _reactSubviews = [NSMutableArray new];
-    _gestureEnabled = YES;
   }
   return self;
 }
@@ -96,7 +95,16 @@
 {
   UIViewController *vc = _screenView.controller;
   UINavigationController *nav = (UINavigationController*) vc.parentViewController;
-  if (vc != nil && nav.visibleViewController == vc) {
+  UIViewController *nextVC = nav.visibleViewController;
+  if (nav.transitionCoordinator != nil) {
+    // if navigator is performing transition instead of allowing to update of `visibleConttroller`
+    // we look at `topController`. This is because during transitiong the `visibleController` won't
+    // point to the controller that is going to be revealed after transition. This check fixes the
+    // problem when config gets updated while the transition is ongoing.
+    nextVC = nav.topViewController;
+  }
+
+  if (vc != nil && nextVC == vc) {
     [RNSScreenStackHeaderConfig updateViewController:self.screenView.controller withConfig:self];
   }
 }
@@ -269,7 +277,7 @@
   [navctr setNavigationBarHidden:shouldHide animated:YES];
 #ifdef __IPHONE_13_0
   if (@available(iOS 13.0, *)) {
-    vc.modalInPresentation = !config.gestureEnabled;
+    vc.modalInPresentation = !config.screenView.gestureEnabled;
   }
 #endif
   if (shouldHide) {
@@ -454,7 +462,6 @@ RCT_EXPORT_VIEW_PROPERTY(hideShadow, BOOL)
 // `hidden` is an UIView property, we need to use different name internally
 RCT_REMAP_VIEW_PROPERTY(hidden, hide, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(translucent, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(gestureEnabled, BOOL)
 
 @end
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-screens",
-  "version": "2.0.0-alpha.26",
+  "version": "2.0.0-alpha.32",
   "description": "First incomplete navigation solution for your react-native app.",
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",