Bump version -> 2.0.0-alpha.28

This change fixes the issue with auto focusing text input fields inside native stack. Due to the fact we perform hide and show transactions in order to control back stack the hiding part would propagate visibility change event down the view hierarchy. As a result views would receive that visibility event and blur themselves resulting in textinput not getting the focus when the fragment mounts. It turns out however that for the back stack to function properly we don't need to run hide and show operation within the transaction because show is idempotent. So we change our back stack handling transaction to only call show.

Example/yarn.lock

@@ -1633,7 +1633,7 @@ combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@^2.19.0, commander@~2.20.0:
+commander@^2.19.0:
   version "2.20.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
   integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
@@ -1642,6 +1642,11 @@ commander@~2.13.0:
   version "2.13.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
 
+commander@~2.20.3:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -2487,9 +2492,9 @@ growly@^1.3.0:
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
 
 handlebars@^4.0.3:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.2.0.tgz#57ce8d2175b9bbb3d8b3cf3e4217b1aec8ddcb2e"
-  integrity sha512-Kb4xn5Qh1cxAKvQnzNWZ512DhABzyFNmsaJf3OAkWNa4NkaqWcNI8Tao8Tasi0/F4JD9oyG0YxuFyvyR57d+Gw==
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482"
+  integrity sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==
   dependencies:
     neo-async "^2.6.0"
     optimist "^0.6.1"
@@ -4806,7 +4811,7 @@ react-native-safe-area-view@^0.14.1:
     debounce "^1.2.0"
 
 "react-native-screens@file:..":
-  version "2.0.0-alpha.3"
+  version "2.0.0-alpha.22"
   dependencies:
     debounce "^1.2.0"
 
@@ -5761,11 +5766,11 @@ uglify-es@^3.1.9:
     source-map "~0.6.1"
 
 uglify-js@^3.1.4:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.6.0.tgz#704681345c53a8b2079fb6cec294b05ead242ff5"
-  integrity sha512-W+jrUHJr3DXKhrsS7NUVxn3zqMOFn0hL/Ei6v0anCIMoKC93TjcflTagwIHLW7SfMFfiQuktQyFVCFHGUE0+yg==
+  version "3.7.3"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.7.3.tgz#f918fce9182f466d5140f24bb0ff35c2d32dcc6a"
+  integrity sha512-7tINm46/3puUA4hCkKYo4Xdts+JDaVC9ZPRcG8Xw9R4nhO/gZgUM3TENq8IF4Vatk8qCig4MzP/c8G4u2BkVQg==
   dependencies:
-    commander "~2.20.0"
+    commander "~2.20.3"
     source-map "~0.6.1"
 
 ultron@1.0.x:

README.md

@@ -100,12 +100,12 @@ To do that react-native-screens provides you with two components documented belo
 ### `<ScreenContainer/>`
 
 This component is a container for one or more `Screen` components.
-It does not accept other component types are direct children.
-The role of container is to control which of its children screens should be attached to the view hierarchy.
-It does that by monitoring `active` property of each of its children.
-It it possible to have as many `active` children as you'd like but in order for the component to be the most efficient we should keep the number of active screens to the minimum.
-In a case of stack navigator or tabs navigator we only want to have one active screen (the top most view on a stack or the selected tab).
-Then for the time of transitioning between views we may want to activate a second screen for the duration of transition, and then go back to just one active screen.
+It does not accept other component types as direct children.
+The role of the container is to control which of its children screens should be attached to the view hierarchy.
+It does that by monitoring the `active` property of each of its children.
+It is possible to have as many `active` children as you'd like but in order for the component to be the most efficient we should keep the number of active screens to a minimum.
+In a case of a stack navigator or tabs navigator we only want to have one active screen (the top most view on a stack or the selected tab).
+While transitioning between views we may want to activate a second screen for the duration of the transition, and then go back to just one active screen.
 
 ### `<Screen/>`
 

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

@@ -25,7 +25,7 @@ public class ScreenContainer<T extends ScreenFragment> extends ViewGroup {
   private final Set<ScreenFragment> mActiveScreenFragments = new HashSet<>();
   private final ArrayList<Runnable> mAfterTransitionRunnables = new ArrayList<>(1);
 
-  private @Nullable FragmentManager mFragmentManager;
+  protected @Nullable FragmentManager mFragmentManager;
   private @Nullable FragmentTransaction mCurrentTransaction;
   private @Nullable FragmentTransaction mProcessingTransaction;
   private boolean mNeedUpdate;
@@ -105,6 +105,14 @@ public class ScreenContainer<T extends ScreenFragment> extends ViewGroup {
     markUpdated();
   }
 
+  protected void removeAllScreens() {
+    for (int i = 0, size = mScreenFragments.size(); i < size; i++) {
+      mScreenFragments.get(i).getScreen().setContainer(null);
+    }
+    mScreenFragments.clear();
+    markUpdated();
+  }
+
   @Override
   public void startViewTransition(View view) {
     super.startViewTransition(view);
@@ -176,16 +184,9 @@ public class ScreenContainer<T extends ScreenFragment> extends ViewGroup {
     return ((FragmentActivity) context).getSupportFragmentManager();
   }
 
-  protected final FragmentManager getFragmentManager() {
-    if (mFragmentManager == null) {
-      mFragmentManager = findFragmentManager();
-    }
-    return mFragmentManager;
-  }
-
   protected FragmentTransaction getOrCreateTransaction() {
     if (mCurrentTransaction == null) {
-      mCurrentTransaction = getFragmentManager().beginTransaction();
+      mCurrentTransaction = mFragmentManager.beginTransaction();
       mCurrentTransaction.setReorderingAllowed(true);
     }
     return mCurrentTransaction;
@@ -239,6 +240,8 @@ public class ScreenContainer<T extends ScreenFragment> extends ViewGroup {
   protected void onAttachedToWindow() {
     super.onAttachedToWindow();
     mIsAttached = true;
+    mNeedUpdate = true;
+    mFragmentManager = findFragmentManager();
     updateIfNeeded();
   }
 
@@ -246,6 +249,14 @@ public class ScreenContainer<T extends ScreenFragment> extends ViewGroup {
   protected void onDetachedFromWindow() {
     super.onDetachedFromWindow();
     mIsAttached = false;
+
+    // fragment manager is destroyed so we can't do anything with it anymore
+    mFragmentManager = null;
+    // so we don't add the same screen twice after re-attach
+    removeAllViews();
+    mActiveScreenFragments.clear();
+    // after re-attach we'll update the screen and add views again
+    markUpdated();
   }
 
   @Override

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

@@ -34,6 +34,11 @@ public class ScreenContainerViewManager extends ViewGroupManager<ScreenContainer
     parent.removeScreenAt(index);
   }
 
+  @Override
+  public void removeAllViews(ScreenContainer parent) {
+    parent.removeAllScreens();
+  }
+
   @Override
   public int getChildCount(ScreenContainer parent) {
     return parent.getScreenCount();

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

@@ -22,7 +22,7 @@ public class ScreenStack extends ScreenContainer<ScreenStackFragment> {
   private final FragmentManager.OnBackStackChangedListener mBackStackListener = new FragmentManager.OnBackStackChangedListener() {
     @Override
     public void onBackStackChanged() {
-      if (getFragmentManager().getBackStackEntryCount() == 0) {
+      if (mFragmentManager.getBackStackEntryCount() == 0) {
         // when back stack entry count hits 0 it means the user's navigated back using hw back
         // button. As the "fake" transaction we installed on the back stack does nothing we need
         // to handle back navigation on our own.
@@ -70,24 +70,24 @@ public class ScreenStack extends ScreenContainer<ScreenStackFragment> {
 
   @Override
   protected void onDetachedFromWindow() {
-    super.onDetachedFromWindow();
-    FragmentManager fm = getFragmentManager();
-    fm.removeOnBackStackChangedListener(mBackStackListener);
-    getFragmentManager().unregisterFragmentLifecycleCallbacks(mLifecycleCallbacks);
-    if (!fm.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.
-      fm.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();
   }
 
   @Override
   protected void onAttachedToWindow() {
     super.onAttachedToWindow();
-    getFragmentManager().registerFragmentLifecycleCallbacks(mLifecycleCallbacks, false);
+    mFragmentManager.registerFragmentLifecycleCallbacks(mLifecycleCallbacks, false);
   }
 
   @Override
@@ -97,6 +97,12 @@ public class ScreenStack extends ScreenContainer<ScreenStackFragment> {
     super.removeScreenAt(index);
   }
 
+  @Override
+  protected void removeAllScreens() {
+    mDismissed.clear();
+    super.removeAllScreens();
+  }
+
   @Override
   protected boolean hasScreen(ScreenFragment screenFragment) {
     return super.hasScreen(screenFragment) && !mDismissed.contains(screenFragment);
@@ -224,8 +230,8 @@ public class ScreenStack extends ScreenContainer<ScreenStackFragment> {
       // notified when it gets resumed so that we can install the handler.
       return;
     }
-    getFragmentManager().removeOnBackStackChangedListener(mBackStackListener);
-    getFragmentManager().popBackStack(BACK_STACK_TAG, FragmentManager.POP_BACK_STACK_INCLUSIVE);
+    mFragmentManager.removeOnBackStackChangedListener(mBackStackListener);
+    mFragmentManager.popBackStack(BACK_STACK_TAG, FragmentManager.POP_BACK_STACK_INCLUSIVE);
     ScreenStackFragment firstScreen = null;
     for (int i = 0, size = mStack.size(); i < size; i++) {
       ScreenStackFragment screen = mStack.get(i);
@@ -235,14 +241,13 @@ public class ScreenStack extends ScreenContainer<ScreenStackFragment> {
       }
     }
     if (topScreen != firstScreen && topScreen.isDismissable()) {
-      getFragmentManager()
+      mFragmentManager
               .beginTransaction()
-              .hide(topScreen)
               .show(topScreen)
               .addToBackStack(BACK_STACK_TAG)
               .setPrimaryNavigationFragment(topScreen)
               .commitAllowingStateLoss();
-      getFragmentManager().addOnBackStackChangedListener(mBackStackListener);
+      mFragmentManager.addOnBackStackChangedListener(mBackStackListener);
     }
   }
 }

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

@@ -33,6 +33,7 @@ public class ScreenStackHeaderConfig extends ViewGroup {
   private boolean mGestureEnabled = true;
   private boolean mIsBackButtonHidden;
   private boolean mIsShadowHidden;
+  private boolean mDestroyed;
   private int mTintColor;
   private final Toolbar mToolbar;
 
@@ -50,6 +51,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();
@@ -63,6 +68,10 @@ public class ScreenStackHeaderConfig extends ViewGroup {
     // no-op
   }
 
+  public void destroy() {
+    mDestroyed = true;
+  }
+
   @Override
   protected void onAttachedToWindow() {
     super.onAttachedToWindow();
@@ -116,7 +125,7 @@ public class ScreenStackHeaderConfig extends ViewGroup {
     boolean isRoot = stack == null ? true : stack.getRootScreen() == parent;
     boolean isTop = stack == null ? true : stack.getTopScreen() == parent;
 
-    if (!mIsAttachedToWindow || !isTop) {
+    if (!mIsAttachedToWindow || !isTop || mDestroyed) {
       return;
     }
 
@@ -225,7 +234,7 @@ public class ScreenStackHeaderConfig extends ViewGroup {
   }
 
   private void maybeUpdate() {
-    if (getParent() != null) {
+    if (getParent() != null && !mDestroyed) {
       onUpdate();
     }
   }
@@ -243,6 +252,11 @@ public class ScreenStackHeaderConfig extends ViewGroup {
     maybeUpdate();
   }
 
+  public void removeAllConfigSubviews() {
+    mConfigSubviews.clear();
+    maybeUpdate();
+  }
+
   public void addConfigSubview(ScreenStackHeaderSubview child, int index) {
     mConfigSubviews.add(index, child);
     maybeUpdate();

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

@@ -4,11 +4,12 @@ import android.view.View;
 
 import com.facebook.react.bridge.JSApplicationCausedNativeException;
 import com.facebook.react.module.annotations.ReactModule;
-import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.ViewGroupManager;
 import com.facebook.react.uimanager.annotations.ReactProp;
 
+import javax.annotation.Nonnull;
+
 @ReactModule(name = ScreenStackHeaderConfigViewManager.REACT_CLASS)
 public class ScreenStackHeaderConfigViewManager extends ViewGroupManager<ScreenStackHeaderConfig> {
 
@@ -32,6 +33,16 @@ public class ScreenStackHeaderConfigViewManager extends ViewGroupManager<ScreenS
     parent.addConfigSubview((ScreenStackHeaderSubview) child, index);
   }
 
+  @Override
+  public void onDropViewInstance(@Nonnull ScreenStackHeaderConfig view) {
+    view.destroy();
+  }
+
+  @Override
+  public void removeAllViews(ScreenStackHeaderConfig parent) {
+    parent.removeAllConfigSubviews();
+  }
+
   @Override
   public void removeViewAt(ScreenStackHeaderConfig parent, int index) {
     parent.removeConfigSubview(index);

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

@@ -22,6 +22,7 @@
   NSMutableArray<RNSScreenView *> *_reactSubviews;
   NSMutableSet<RNSScreenView *> *_dismissedScreens;
   NSMutableArray<UIViewController *> *_presentedModals;
+  __weak UIViewController* recentPopped;
   __weak RNSScreenStackManager *_manager;
 }
 
@@ -69,6 +70,10 @@
       [_dismissedScreens addObject:[_reactSubviews objectAtIndex:i - 1]];
     }
   }
+  if (recentPopped != nil) {
+    recentPopped.view = nil;
+    recentPopped = nil;
+  }
 }
 
 - (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC
@@ -77,7 +82,8 @@
   if (operation == UINavigationControllerOperationPush) {
     screen = (RNSScreenView *) toVC.view;
   } else if (operation == UINavigationControllerOperationPop) {
-   screen = (RNSScreenView *) fromVC.view;
+    screen = (RNSScreenView *) fromVC.view;
+    recentPopped = fromVC;
   }
   if (screen != nil && (screen.stackAnimation == RNSScreenStackAnimationFade || screen.stackAnimation == RNSScreenStackAnimationNone)) {
     return  [[RNSScreenStackAnimator alloc] initWithOperation:operation];
@@ -96,7 +102,16 @@
   RCTRootContentView *rootView = (RCTRootContentView *)parent;
   [rootView.touchHandler cancel];
 
-  return _controller.viewControllers.count > 1;
+  UIView *topView = _controller.viewControllers.lastObject.view;
+  RNSScreenStackHeaderConfig *config = nil;
+  for (UIView *subview in topView.reactSubviews) {
+    if ([subview isKindOfClass:[RNSScreenStackHeaderConfig class]]) {
+      config = (RNSScreenStackHeaderConfig*) subview;
+      break;
+    }
+  }
+
+  return _controller.viewControllers.count > 1 && (config == nil || config.gestureEnabled);
 }
 
 - (void)markChildUpdated
@@ -137,12 +152,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 +192,6 @@
                              completion:nil];
       previous = next;
     }
-
-    [self->_presentedModals removeAllObjects];
-    [self->_presentedModals addObjectsFromArray:controllers];
   };
 
   if (changeRootController.presentedViewController) {
@@ -185,10 +201,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 +220,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

ios/RNSScreenStackHeaderConfig.m

@@ -267,7 +267,6 @@
   }
 
   [navctr setNavigationBarHidden:shouldHide animated:YES];
-  navctr.interactivePopGestureRecognizer.enabled = config.gestureEnabled;
 #ifdef __IPHONE_13_0
   if (@available(iOS 13.0, *)) {
     vc.modalInPresentation = !config.gestureEnabled;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-screens",
-  "version": "2.0.0-alpha.21",
+  "version": "2.0.0-alpha.28",
   "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
+  >;
 }

yarn.lock

@@ -1741,10 +1741,10 @@ commander@~2.13.0:
   version "2.13.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
 
-commander@~2.20.0:
-  version "2.20.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
-  integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
+commander@~2.20.3:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
 commondir@^1.0.1:
   version "1.0.1"
@@ -2765,9 +2765,9 @@ growly@^1.3.0:
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
 
 handlebars@^4.0.3:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.1.2.tgz#b6b37c1ced0306b221e094fc7aca3ec23b131b67"
-  integrity sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482"
+  integrity sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==
   dependencies:
     neo-async "^2.6.0"
     optimist "^0.6.1"
@@ -5855,11 +5855,11 @@ uglify-es@^3.1.9:
     source-map "~0.6.1"
 
 uglify-js@^3.1.4:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.6.0.tgz#704681345c53a8b2079fb6cec294b05ead242ff5"
-  integrity sha512-W+jrUHJr3DXKhrsS7NUVxn3zqMOFn0hL/Ei6v0anCIMoKC93TjcflTagwIHLW7SfMFfiQuktQyFVCFHGUE0+yg==
+  version "3.7.3"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.7.3.tgz#f918fce9182f466d5140f24bb0ff35c2d32dcc6a"
+  integrity sha512-7tINm46/3puUA4hCkKYo4Xdts+JDaVC9ZPRcG8Xw9R4nhO/gZgUM3TENq8IF4Vatk8qCig4MzP/c8G4u2BkVQg==
   dependencies:
-    commander "~2.20.0"
+    commander "~2.20.3"
     source-map "~0.6.1"
 
 ultron@1.0.x: