Bump version -> 2.0.0-alpha.23

This change fixes a problem in modal dismiss logic. The problem would occur when we had a nested stack that both have screens pushed and presented modally. In such case when we only wanted to pop one of the screens pushed (even though the screen was obscured by the one presented modally) we'd still run setModalViewControllers method. As a result that method could've find the navigato that is presenting the screens modally and trigger dismiss on them. This was the case because we used to only check in that method whether the top-most unchanged screen is presenting modals. We shouldn't only be checking whether the screen is presenting because it may be presenting modals that belong to a different stack that did not change.

To prevent the issue from happening we make sure that we run dismiss logic only when a change on a give stack occur. We verify that the list of presented VCs is not equal to the list of new controllers before we run push-stack or modal-stack presenting/dismiss logic.

On top of that change I also modified push logic to avoid running animation when the push stack is obscured by modals. This prevents some weird effects when you could see the end of animation after closing the modal immediately after pop done in the hidden stack.

createNativeStackNavigator.js

@@ -30,7 +30,8 @@ class StackView extends React.Component {
     this.props.navigation.dispatch(StackActions.pop({ key: route.key }));
   };
 
-  _onSceneFocus = route => {
+  _onSceneFocus = (route, descriptor) => {
+    descriptor.options && descriptor.options.onAppear && descriptor.options.onAppear()
     this.props.navigation.dispatch(
       StackActions.completeTransition({ toChildKey: route.key })
     );
@@ -96,7 +97,10 @@ class StackView extends React.Component {
 
     if (options.backButtonImage) {
       children.push(
-        <ScreenStackHeaderBackButtonImage source={options.backButtonImage} />
+        <ScreenStackHeaderBackButtonImage
+          key="backImage"
+          source={options.backButtonImage}
+        />
       );
     }
 
@@ -175,7 +179,7 @@ class StackView extends React.Component {
       }
     }
 
-    let stackAnimation;
+    let stackAnimation = options.stackAnimation;
     if (options.animationEnabled === false) {
       stackAnimation = 'none';
     }
@@ -187,7 +191,7 @@ class StackView extends React.Component {
         style={options.cardStyle}
         stackAnimation={stackAnimation}
         stackPresentation={stackPresentation}
-        onAppear={() => this._onSceneFocus(route)}
+        onAppear={() => this._onSceneFocus(route, descriptor)}
         onDismissed={() => this._removeScene(route)}>
         {this._renderHeaderConfig(index, route, descriptor)}
         <SceneView
@@ -218,7 +222,6 @@ const styles = StyleSheet.create({
 
 function createStackNavigator(routeConfigMap, stackConfig = {}) {
   const router = StackRouter(routeConfigMap, stackConfig);
-
   // Create a navigator with StackView as the view
   let Navigator = createNavigator(StackView, router, stackConfig);
   // if (!stackConfig.disableKeyboardHandling) {

ios/RNSScreenStack.m

@@ -137,12 +137,16 @@
 
 - (void)setModalViewControllers:(NSArray<UIViewController *> *)controllers
 {
+  // when there is no change we return immediately. This check is important because sometime we may
+  // accidently trigger modal dismiss if we don't verify to run the below code only when an actual
+  // change in the list of presented modal was made.
+  if ([_presentedModals isEqualToArray:controllers]) {
+    return;
+  }
+
   NSMutableArray<UIViewController *> *newControllers = [NSMutableArray arrayWithArray:controllers];
   [newControllers removeObjectsInArray:_presentedModals];
 
-  NSMutableArray<UIViewController *> *controllersToRemove = [NSMutableArray arrayWithArray:_presentedModals];
-  [controllersToRemove removeObjectsInArray:controllers];
-
   // find bottom-most controller that should stay on the stack for the duration of transition
   NSUInteger changeRootIndex = 0;
   UIViewController *changeRootController = _controller;
@@ -173,9 +177,6 @@
                              completion:nil];
       previous = next;
     }
-
-    [self->_presentedModals removeAllObjects];
-    [self->_presentedModals addObjectsFromArray:controllers];
   };
 
   if (changeRootController.presentedViewController) {
@@ -185,10 +186,16 @@
   } else {
     finish();
   }
+  [_presentedModals setArray:controllers];
 }
 
 - (void)setPushViewControllers:(NSArray<UIViewController *> *)controllers
 {
+  // when there is no change we return immediately
+  if ([_controller.viewControllers isEqualToArray:controllers]) {
+    return;
+  }
+
   UIViewController *top = controllers.lastObject;
   UIViewController *lastTop = _controller.viewControllers.lastObject;
 
@@ -198,7 +205,7 @@
   // controller is still there
   BOOL firstTimePush = ![lastTop isKindOfClass:[RNSScreen class]];
 
-  BOOL shouldAnimate = !firstTimePush && ((RNSScreenView *) lastTop.view).stackAnimation != RNSScreenStackAnimationNone;
+  BOOL shouldAnimate = !firstTimePush && ((RNSScreenView *) lastTop.view).stackAnimation != RNSScreenStackAnimationNone && !_controller.presentedViewController;
 
   if (firstTimePush) {
     // nothing pushed yet

package.json

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

src/screens.d.ts

@@ -3,21 +3,140 @@
 
 declare module 'react-native-screens' {
   import { ComponentClass } from 'react';
-  import { ViewProps, Animated } from 'react-native';
+  import { ViewProps, Animated, NativeSyntheticEvent, NativeTouchEvent, ImageProps } from 'react-native';
 
   export function useScreens(shouldUseScreens?: boolean): void;
   export function enableScreens(shouldEnableScreens?: boolean): void;
   export function screensEnabled(): boolean;
 
+  export type StackPresentationTypes = 'push' | 'modal' | 'transparentModal';
+  export type StackAnimationTypes = 'default' | 'fade' | 'flip' | 'none';
+
   export interface ScreenProps extends ViewProps {
     active?: 0 | 1 | Animated.AnimatedInterpolation;
     onComponentRef?: (view: any) => void;
+    children?: React.ReactNode;
+    onAppear?: (e: NativeSyntheticEvent<NativeTouchEvent>) => void;
+    /**
+     *@description 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.
+     */
+    onDismissed?: (e: NativeSyntheticEvent<NativeTouchEvent>) => void;
+    /**
+     * @type "push" – the new screen will be pushed onto a stack which on iOS means that the default animation will be slide from the side, the animation on Android may vary depending on the OS version and theme.
+     * @type "modal" – the new screen will be presented modally. In addition this allow for a nested stack to be rendered inside such screens
+     * @type "transparentModal" – the new screen will be presented modally but in addition the second to last screen will remain attached to the stack container such that if the top screen is non opaque the content below can still be seen. If "modal" is used instead the below screen will get unmounted as soon as the transition ends.
+     */
+    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 followin values are currently supported:
+     *  @type "default" – uses a platform default animation
+     *  @type "fade" – fades screen in or out
+     *  @type "flip" – flips the screen, requires stackPresentation: "modal" (iOS only)
+     *  @type "none" – the screen appears/dissapears without an animation
+     */
+    stackAnimation?: StackAnimationTypes;
   }
-  export const Screen: ComponentClass<ScreenProps>;
+
 
   export type ScreenContainerProps = ViewProps;
-  export const ScreenContainer: ComponentClass<ScreenContainerProps>;
+  
+  export interface ScreenStackProps extends ViewProps {
+    transitioning?: number;
+    progress?: number;
+  }
 
+  export interface ScreenStackHeaderConfigProps extends ViewProps {
+    /**
+     *@description String that representing screen title that will get rendered in the middle section of the header. On iOS the title is centered on the header while on Android it is aligned to the left and placed next to back button (if one is present).
+     */
+    title?: string;
+    /**
+     *@description When set to true the header will be hidden while the parent Screen is on the top of the stack. The default value is false.
+     */
+    hidden?: boolean;
+    /**
+     *@description Controls the color of items rendered on the header. This includes back icon, back text (iOS only) and title text. If you want the title to have different color use titleColor property.
+     */
+    color?: string;
+    /**
+     *@description Customize font family to be used for the title.
+     */
+    titleFontFamily?: string;
+    /**
+     *@description Customize the size of the font to be used for the title.
+     */
+    titleFontSize?: number;
+    /**
+     *@description Allows for setting text color of the title.
+     */
+    titleColor?: string;
+    /**
+     *@description Controlls the color of the navigation header.
+     */
+    backgroundColor?: string;
+    /**
+     * @description Boolean that allows for disabling drop shadow under navigation header. The default value is true.
+     */
+    hideShadow?: boolean;
+    /**
+     * @description If set to true the back button will not be rendered as a part of navigation header.
+     */
+    hideBackButton?: boolean;
+    /**
+     * @description When set to false the back swipe gesture will be disabled when the parent Screen is on top of the stack. The default value is true.
+     */
+    gestureEnabled?: boolean;
+    /**
+     * @host (iOS only)
+     * @description When set to true, it makes native navigation bar on iOS semi transparent with blur effect. It is a common way of presenting navigation bar introduced in iOS 11. The default value is false
+     */
+    translucent?: boolean;
+    /**
+     * @host (iOS only)
+     * @description Allows for controlling the string to be rendered next to back button. By default iOS uses the title of the previous screen.
+     */
+    backTitle?: string;
+    /**
+     * @host (iOS only)
+     * @description Allows for customizing font family to be used for back button title on iOS.
+     */
+    backTitleFontFamily?: string;
+    /**
+     * @host (iOS only)
+     * @description Allows for customizing font size to be used for back button title on iOS.
+     */
+    backTitleFontSize?: number;
+    /**
+     * @host (iOS only)
+     * @description When set to true it makes the title display using the large title effect.
+     */
+    largeTitle?: boolean;
+    /**
+     * @host (iOS only)
+     * @description Customize font family to be used for the large title.
+     */
+    largeTitleFontFamily?: string;
+    /**
+     * @host (iOS only)
+     * @description Customize the size of the font to be used for the large title.
+     */
+    largeTitleFontSize?: number;
+    /**
+     * Pass HeaderLeft, HeaderRight and HeaderTitle
+     */
+    children?: React.ReactNode;
+  }
+
+  export const Screen: ComponentClass<ScreenProps>;
+  export const ScreenContainer: ComponentClass<ScreenContainerProps>;
   export const NativeScreen: ComponentClass<ScreenProps>;
   export const NativeScreenContainer: ComponentClass<ScreenContainerProps>;
+  export const ScreenStack: ComponentClass<ScreenStackProps>;
+  export const ScreenStackHeaderBackButtonImage: ComponentClass<ImageProps>;
+  export const ScreenStackHeaderLeftView: ComponentClass<ViewProps>;
+  export const ScreenStackHeaderRightView: ComponentClass<ViewProps>;
+  export const ScreenStackHeaderTitleView: ComponentClass<ViewProps>;
+  export const ScreenStackHeaderConfig: ComponentClass<
+    ScreenStackHeaderConfigProps
+  >;
 }