Bump version -> 2.0.0-alpha.22

For customizing back button image we use platform native functionality that is: `setBackIndicatorImage` on iOS and `setHomeAsUpIndicator` on Android.
The reason we don't do that just by setting left item is that we get a couple of things for free such as handling RTL properly, working accessibility features, handling prop for hiding back button and a couple more.

Unfortunately there are some downsides to that approach too. We need to install the back button as an Image component from the JS side, and the extract the image payload on the native side to set it with the navigator. This is specifically problematic in DEV mode where images are loaded asynchronously over HTTP from the packager. In order for that to work we had to employ a few hacks (more comments on that in the code).

README.md

@@ -127,7 +127,7 @@ Otherwise the views will be attached as long as the parent container is attached
 
 ### `<ScreenStack>`
 
-Screen stack component expects one or more `Screen` components as direct children and renders them in a platform native stack container (for iOS it is `UINavigationController` and for Android inside `Fragment` container). For `Screen` components placed as children of `ScteenStack` the `active` property is ignored and instead the screen that corresponds to the last child is rendered as active. All type of updates done to the list of children are acceptable, when the top element is exchanged the container will use platform default (unless customized) animation to transition between screens.
+Screen stack component expects one or more `Screen` components as direct children and renders them in a platform native stack container (for iOS it is `UINavigationController` and for Android inside `Fragment` container). For `Screen` components placed as children of `ScreenStack` the `active` property is ignored and instead the screen that corresponds to the last child is rendered as active. All type of updates done to the list of children are acceptable, when the top element is exchanged the container will use platform default (unless customized) animation to transition between screens.
 
 `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:
 

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

@@ -0,0 +1,30 @@
+package com.swmansion.rnscreens;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.uimanager.events.Event;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
+
+public class ScreenAppearEvent extends Event<ScreenAppearEvent> {
+
+  public static final String EVENT_NAME = "topAppear";
+
+  public ScreenAppearEvent(int viewId) {
+    super(viewId);
+  }
+
+  @Override
+  public String getEventName() {
+    return EVENT_NAME;
+  }
+
+  @Override
+  public short getCoalescingKey() {
+    // All events for a given view can be coalesced.
+    return 0;
+  }
+
+  @Override
+  public void dispatch(RCTEventEmitter rctEventEmitter) {
+    rctEventEmitter.receiveEvent(getViewTag(), getEventName(), Arguments.createMap());
+  }
+}

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

@@ -2,6 +2,7 @@ package com.swmansion.rnscreens;
 
 import android.content.Context;
 import android.content.ContextWrapper;
+import android.view.View;
 import android.view.ViewGroup;
 import android.view.ViewParent;
 
@@ -22,10 +23,14 @@ public class ScreenContainer<T extends ScreenFragment> extends ViewGroup {
 
   protected final ArrayList<T> mScreenFragments = new ArrayList<>();
   private final Set<ScreenFragment> mActiveScreenFragments = new HashSet<>();
+  private final ArrayList<Runnable> mAfterTransitionRunnables = new ArrayList<>(1);
 
+  private @Nullable FragmentManager mFragmentManager;
   private @Nullable FragmentTransaction mCurrentTransaction;
+  private @Nullable FragmentTransaction mProcessingTransaction;
   private boolean mNeedUpdate;
   private boolean mIsAttached;
+  private boolean mIsTransitioning;
   private boolean mLayoutEnqueued = false;
 
   private final ChoreographerCompat.FrameCallback mFrameCallback = new ChoreographerCompat.FrameCallback() {
@@ -100,6 +105,36 @@ public class ScreenContainer<T extends ScreenFragment> extends ViewGroup {
     markUpdated();
   }
 
+  @Override
+  public void startViewTransition(View view) {
+    super.startViewTransition(view);
+    mIsTransitioning = true;
+  }
+
+  @Override
+  public void endViewTransition(View view) {
+    super.endViewTransition(view);
+    if (mIsTransitioning) {
+      mIsTransitioning = false;
+      notifyTransitionFinished();
+    }
+  }
+
+  public boolean isTransitioning() {
+    return mIsTransitioning || mProcessingTransaction != null;
+  }
+
+  public void postAfterTransition(Runnable runnable) {
+    mAfterTransitionRunnables.add(runnable);
+  }
+
+  protected void notifyTransitionFinished() {
+    for (int i = 0, size = mAfterTransitionRunnables.size(); i < size; i++) {
+      mAfterTransitionRunnables.get(i).run();
+    }
+    mAfterTransitionRunnables.clear();
+  }
+
   protected int getScreenCount() {
     return mScreenFragments.size();
   }
@@ -108,11 +143,18 @@ public class ScreenContainer<T extends ScreenFragment> extends ViewGroup {
     return mScreenFragments.get(index).getScreen();
   }
 
-  protected final FragmentActivity findRootFragmentActivity() {
+  private FragmentManager findFragmentManager() {
     ViewParent parent = this;
-    while (!(parent instanceof ReactRootView) && parent.getParent() != null) {
+    // We traverse view hierarchy up until we find screen parent or a root view
+    while (!(parent instanceof ReactRootView || parent instanceof Screen) && parent.getParent() != null) {
       parent = parent.getParent();
     }
+    // If parent is of type Screen it means we are inside a nested fragment structure.
+    // Otherwise we expect to connect directly with root view and get root fragment manager
+    if (parent instanceof Screen) {
+      return ((Screen) parent).getFragment().getChildFragmentManager();
+    }
+
     // we expect top level view to be of type ReactRootView, this isn't really necessary but in order
     // to find root view we test if parent is null. This could potentially happen also when the view
     // is detached from the hierarchy and that test would not correctly indicate the root view. So
@@ -131,11 +173,14 @@ public class ScreenContainer<T extends ScreenFragment> extends ViewGroup {
       throw new IllegalStateException(
               "In order to use RNScreens components your app's activity need to extend ReactFragmentActivity or ReactCompatActivity");
     }
-    return (FragmentActivity) context;
+    return ((FragmentActivity) context).getSupportFragmentManager();
   }
 
-  protected FragmentManager getFragmentManager() {
-    return findRootFragmentActivity().getSupportFragmentManager();
+  protected final FragmentManager getFragmentManager() {
+    if (mFragmentManager == null) {
+      mFragmentManager = findFragmentManager();
+    }
+    return mFragmentManager;
   }
 
   protected FragmentTransaction getOrCreateTransaction() {
@@ -148,6 +193,19 @@ public class ScreenContainer<T extends ScreenFragment> extends ViewGroup {
 
   protected void tryCommitTransaction() {
     if (mCurrentTransaction != null) {
+      final FragmentTransaction transaction = mCurrentTransaction;
+      mProcessingTransaction = transaction;
+      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;
+         }
+        }
+      });
       mCurrentTransaction.commitAllowingStateLoss();
       mCurrentTransaction = null;
     }
@@ -173,6 +231,10 @@ public class ScreenContainer<T extends ScreenFragment> extends ViewGroup {
     return screenFragment.getScreen().isActive();
   }
 
+  protected boolean hasScreen(ScreenFragment screenFragment) {
+    return mScreenFragments.contains(screenFragment);
+  }
+
   @Override
   protected void onAttachedToWindow() {
     super.onAttachedToWindow();

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

@@ -7,12 +7,10 @@ import android.view.View;
 import android.view.ViewGroup;
 
 import androidx.annotation.Nullable;
-import androidx.appcompat.widget.Toolbar;
 import androidx.fragment.app.Fragment;
 
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.uimanager.UIManagerModule;
-import com.facebook.react.uimanager.events.EventDispatcher;
 
 public class ScreenFragment extends Fragment {
 
@@ -39,12 +37,39 @@ public class ScreenFragment extends Fragment {
     return mScreenView;
   }
 
-  @Override
-  public void onDestroy() {
-    super.onDestroy();
+  private void dispatchOnAppear() {
     ((ReactContext) mScreenView.getContext())
             .getNativeModule(UIManagerModule.class)
             .getEventDispatcher()
-            .dispatchEvent(new ScreenDismissedEvent(mScreenView.getId()));
+            .dispatchEvent(new ScreenAppearEvent(mScreenView.getId()));
+  }
+
+  @Override
+  public void onCreate(@Nullable Bundle savedInstanceState) {
+    super.onCreate(savedInstanceState);
+    ScreenContainer container = mScreenView.getContainer();
+    if (container.isTransitioning()) {
+      container.postAfterTransition(new Runnable() {
+        @Override
+        public void run() {
+          dispatchOnAppear();
+        }
+      });
+    } else {
+      dispatchOnAppear();
+    }
+  }
+
+  @Override
+  public void onDestroy() {
+    super.onDestroy();
+    ScreenContainer container = mScreenView.getContainer();
+    if (container == null || !container.hasScreen(this)) {
+      // we only send dismissed even when the screen has been removed from its container
+      ((ReactContext) mScreenView.getContext())
+              .getNativeModule(UIManagerModule.class)
+              .getEventDispatcher()
+              .dispatchEvent(new ScreenDismissedEvent(mScreenView.getId()));
+    }
   }
 }

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

@@ -2,6 +2,7 @@ package com.swmansion.rnscreens;
 
 import android.content.Context;
 
+import androidx.fragment.app.Fragment;
 import androidx.fragment.app.FragmentManager;
 import androidx.fragment.app.FragmentTransaction;
 
@@ -30,6 +31,15 @@ public class ScreenStack extends ScreenContainer<ScreenStackFragment> {
     }
   };
 
+  private final FragmentManager.FragmentLifecycleCallbacks mLifecycleCallbacks = new FragmentManager.FragmentLifecycleCallbacks() {
+    @Override
+    public void onFragmentResumed(FragmentManager fm, Fragment f) {
+      if (mTopScreen == f) {
+        setupBackHandlerIfNeeded(mTopScreen);
+      }
+    }
+  };
+
   public ScreenStack(Context context) {
     super(context);
   }
@@ -61,16 +71,23 @@ public class ScreenStack extends ScreenContainer<ScreenStackFragment> {
   @Override
   protected void onDetachedFromWindow() {
     super.onDetachedFromWindow();
-    getFragmentManager().removeOnBackStackChangedListener(mBackStackListener);
-    getFragmentManager().popBackStack(BACK_STACK_TAG, FragmentManager.POP_BACK_STACK_INCLUSIVE);
+    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);
+    }
+
   }
 
   @Override
   protected void onAttachedToWindow() {
     super.onAttachedToWindow();
-    if (mTopScreen != null) {
-      setupBackHandlerIfNeeded(mTopScreen);
-    }
+    getFragmentManager().registerFragmentLifecycleCallbacks(mLifecycleCallbacks, false);
   }
 
   @Override
@@ -80,6 +97,11 @@ public class ScreenStack extends ScreenContainer<ScreenStackFragment> {
     super.removeScreenAt(index);
   }
 
+  @Override
+  protected boolean hasScreen(ScreenFragment screenFragment) {
+    return super.hasScreen(screenFragment) && !mDismissed.contains(screenFragment);
+  }
+
   @Override
   protected void onUpdate() {
     // remove all screens previously on stack
@@ -88,7 +110,11 @@ public class ScreenStack extends ScreenContainer<ScreenStackFragment> {
         getOrCreateTransaction().remove(screen);
       }
     }
-    ScreenStackFragment newTop = null;
+
+    // When going back from a nested stack with a single screen on it, we may hit an edge case
+    // when all screens are dismissed and no screen is to be displayed on top. We need to gracefully
+    // handle the case of newTop being NULL, which happens in several places below
+    ScreenStackFragment newTop = null; // newTop is nullable, see the above comment ^
     ScreenStackFragment belowTop = null; // this is only set if newTop has TRANSPARENT_MODAL presentation mode
 
     for (int i = mScreenFragments.size() - 1; i >= 0; i--) {
@@ -106,28 +132,26 @@ public class ScreenStack extends ScreenContainer<ScreenStackFragment> {
       }
     }
 
-
     for (ScreenStackFragment screen : mScreenFragments) {
-      // add all new views that weren't on stack before
-      if (!mStack.contains(screen) && !mDismissed.contains(screen)) {
-        getOrCreateTransaction().add(getId(), screen);
-      }
       // detach all screens that should not be visible
       if (screen != newTop && screen != belowTop && !mDismissed.contains(screen)) {
-        getOrCreateTransaction().hide(screen);
+        getOrCreateTransaction().remove(screen);
       }
     }
     // attach "below top" screen if set
-    if (belowTop != null) {
+    if (belowTop != null && !belowTop.isAdded()) {
       final ScreenStackFragment top = newTop;
-      getOrCreateTransaction().show(belowTop).runOnCommit(new Runnable() {
+      getOrCreateTransaction().add(getId(), belowTop).runOnCommit(new Runnable() {
         @Override
         public void run() {
           top.getScreen().bringToFront();
         }
       });
     }
-    getOrCreateTransaction().show(newTop);
+
+    if (newTop != null && !newTop.isAdded()) {
+      getOrCreateTransaction().add(getId(), newTop);
+    }
 
     if (!mStack.contains(newTop)) {
       // if new top screen wasn't on stack we do "open animation" so long it is not the very first screen on stack
@@ -165,7 +189,9 @@ public class ScreenStack extends ScreenContainer<ScreenStackFragment> {
 
     tryCommitTransaction();
 
-    setupBackHandlerIfNeeded(mTopScreen);
+    if (mTopScreen != null) {
+      setupBackHandlerIfNeeded(mTopScreen);
+    }
 
     for (ScreenStackFragment screen : mStack) {
       screen.onStackUpdate();
@@ -192,6 +218,12 @@ public class ScreenStack extends ScreenContainer<ScreenStackFragment> {
    * that case we want the parent navigator or activity handler to take over.
    */
   private void setupBackHandlerIfNeeded(ScreenStackFragment topScreen) {
+    if (!mTopScreen.isResumed()) {
+      // if the top fragment is not in a resumed state, adding back stack transaction would throw.
+      // In such a case we skip installing back handler and use FragmentLifecycleCallbacks to get
+      // 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);
     ScreenStackFragment firstScreen = null;
@@ -208,6 +240,7 @@ public class ScreenStack extends ScreenContainer<ScreenStackFragment> {
               .hide(topScreen)
               .show(topScreen)
               .addToBackStack(BACK_STACK_TAG)
+              .setPrimaryNavigationFragment(topScreen)
               .commitAllowingStateLoss();
       getFragmentManager().addOnBackStackChangedListener(mBackStackListener);
     }

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

@@ -22,6 +22,7 @@ public class ScreenStackFragment extends ScreenFragment {
   private AppBarLayout mAppBarLayout;
   private Toolbar mToolbar;
   private boolean mShadowHidden;
+  private CoordinatorLayout mScreenRootView;
 
   @SuppressLint("ValidFragment")
   public ScreenStackFragment(Screen screenView) {
@@ -59,10 +60,7 @@ public class ScreenStackFragment extends ScreenFragment {
     }
   }
 
-  @Override
-  public View onCreateView(LayoutInflater inflater,
-                           @Nullable ViewGroup container,
-                           @Nullable Bundle savedInstanceState) {
+  private CoordinatorLayout configureView() {
     CoordinatorLayout view = new CoordinatorLayout(getContext());
     CoordinatorLayout.LayoutParams params = new CoordinatorLayout.LayoutParams(
             LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
@@ -87,6 +85,17 @@ public class ScreenStackFragment extends ScreenFragment {
     return view;
   }
 
+  @Override
+  public View onCreateView(LayoutInflater inflater,
+                           @Nullable ViewGroup container,
+                           @Nullable Bundle savedInstanceState) {
+    if (mScreenRootView == null) {
+      mScreenRootView = configureView();
+    }
+
+    return mScreenRootView;
+  }
+
   public boolean isDismissable() {
     View child = mScreenView.getChildAt(0);
     if (child instanceof ScreenStackHeaderConfig) {

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

@@ -8,6 +8,7 @@ import android.view.Gravity;
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.ViewParent;
+import android.widget.ImageView;
 import android.widget.TextView;
 
 import androidx.appcompat.app.ActionBar;
@@ -15,16 +16,18 @@ import androidx.appcompat.app.AppCompatActivity;
 import androidx.appcompat.widget.Toolbar;
 import androidx.fragment.app.Fragment;
 
+import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
 import com.facebook.react.views.text.ReactFontManager;
 
+import java.util.ArrayList;
+
 public class ScreenStackHeaderConfig extends ViewGroup {
 
-  private final ScreenStackHeaderSubview mConfigSubviews[] = new ScreenStackHeaderSubview[3];
-  private int mSubviewsCount = 0;
+  private final ArrayList<ScreenStackHeaderSubview> mConfigSubviews = new ArrayList<>(3);
   private String mTitle;
   private int mTitleColor;
   private String mTitleFontFamily;
-  private int mTitleFontSize;
+  private float mTitleFontSize;
   private int mBackgroundColor;
   private boolean mIsHidden;
   private boolean mGestureEnabled = true;
@@ -174,10 +177,26 @@ public class ScreenStackHeaderConfig extends ViewGroup {
     }
 
     // subviews
-    for (int i = 0; i < mSubviewsCount; i++) {
-      ScreenStackHeaderSubview view = mConfigSubviews[i];
+    for (int i = mToolbar.getChildCount() - 1; i >= 0; i--) {
+      if (mToolbar.getChildAt(i) instanceof ScreenStackHeaderSubview) {
+        mToolbar.removeViewAt(i);
+      }
+    }
+    for (int i = 0, size = mConfigSubviews.size(); i < size; i++) {
+      ScreenStackHeaderSubview view = mConfigSubviews.get(i);
       ScreenStackHeaderSubview.Type type = view.getType();
 
+      if (type == ScreenStackHeaderSubview.Type.BACK) {
+        // we special case BACK button header config type as we don't add it as a view into toolbar
+        // but instead just copy the drawable from imageview that's added as a first child to it.
+        View firstChild = view.getChildAt(0);
+        if (!(firstChild instanceof ImageView)) {
+          throw new JSApplicationIllegalArgumentException("Back button header config view should have Image as first child");
+        }
+        actionBar.setHomeAsUpIndicator(((ImageView) firstChild).getDrawable());
+        continue;
+      }
+
       Toolbar.LayoutParams params =
               new Toolbar.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
 
@@ -201,9 +220,7 @@ public class ScreenStackHeaderConfig extends ViewGroup {
       }
 
       view.setLayoutParams(params);
-      if (view.getParent() == null) {
-        mToolbar.addView(view);
-      }
+      mToolbar.addView(view);
     }
   }
 
@@ -214,26 +231,20 @@ public class ScreenStackHeaderConfig extends ViewGroup {
   }
 
   public ScreenStackHeaderSubview getConfigSubview(int index) {
-    return mConfigSubviews[index];
+    return mConfigSubviews.get(index);
   }
 
   public int getConfigSubviewsCount() {
-    return mSubviewsCount;
+    return mConfigSubviews.size();
   }
 
   public void removeConfigSubview(int index) {
-    if (mConfigSubviews[index] != null) {
-      mSubviewsCount--;
-    }
-    mConfigSubviews[index] = null;
+    mConfigSubviews.remove(index);
     maybeUpdate();
   }
 
   public void addConfigSubview(ScreenStackHeaderSubview child, int index) {
-    if (mConfigSubviews[index] == null) {
-      mSubviewsCount++;
-    }
-    mConfigSubviews[index] = child;
+    mConfigSubviews.add(index, child);
     maybeUpdate();
   }
 
@@ -258,7 +269,7 @@ public class ScreenStackHeaderConfig extends ViewGroup {
     mTitleFontFamily = titleFontFamily;
   }
 
-  public void setTitleFontSize(int titleFontSize) {
+  public void setTitleFontSize(float titleFontSize) {
     mTitleFontSize = titleFontSize;
   }
 

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

@@ -69,8 +69,8 @@ public class ScreenStackHeaderConfigViewManager extends ViewGroupManager<ScreenS
   }
 
   @ReactProp(name = "titleFontSize")
-  public void setTitleFontSize(ScreenStackHeaderConfig config, double titleFontSizeSP) {
-    config.setTitleFontSize((int) PixelUtil.toPixelFromSP(titleFontSizeSP));
+  public void setTitleFontSize(ScreenStackHeaderConfig config, float titleFontSize) {
+    config.setTitleFontSize(titleFontSize);
   }
 
   @ReactProp(name = "titleColor", customType = "Color")

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

@@ -18,7 +18,8 @@ public class ScreenStackHeaderSubview extends ReactViewGroup {
     LEFT,
     CENTER,
     TITLE,
-    RIGHT
+    RIGHT,
+    BACK
   }
 
   private int mReactWidth, mReactHeight;

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

@@ -47,6 +47,8 @@ public class ScreenStackHeaderSubviewManager extends ReactViewManager {
       view.setType(ScreenStackHeaderSubview.Type.TITLE);
     } else if ("right".equals(type)) {
       view.setType(ScreenStackHeaderSubview.Type.RIGHT);
+    } else if ("back".equals(type)) {
+      view.setType(ScreenStackHeaderSubview.Type.BACK);
     }
   }
 }

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

@@ -62,6 +62,8 @@ public class ScreenViewManager extends ViewGroupManager<Screen> {
   public Map getExportedCustomDirectEventTypeConstants() {
     return MapBuilder.of(
             ScreenDismissedEvent.EVENT_NAME,
-            MapBuilder.of("registrationName", "onDismissed"));
+            MapBuilder.of("registrationName", "onDismissed"),
+            ScreenAppearEvent.EVENT_NAME,
+            MapBuilder.of("registrationName", "onAppear"));
   }
 }

createNativeStackNavigator.js

@@ -4,7 +4,6 @@ import {
   StackRouter,
   SceneView,
   StackActions,
-  NavigationActions,
   createNavigator,
 } from '@react-navigation/core';
 import { createKeyboardAwareNavigator } from '@react-navigation/native';
@@ -13,6 +12,7 @@ import {
   ScreenStack,
   Screen,
   ScreenStackHeaderConfig,
+  ScreenStackHeaderBackButtonImage,
   ScreenStackHeaderLeftView,
   ScreenStackHeaderRightView,
   ScreenStackHeaderTitleView,
@@ -27,14 +27,13 @@ function renderComponentOrThunk(componentOrThunk, props) {
 
 class StackView extends React.Component {
   _removeScene = route => {
-    const { navigation } = this.props;
-    navigation.dispatch(
-      NavigationActions.back({
-        key: route.key,
-        immediate: true,
-      })
+    this.props.navigation.dispatch(StackActions.pop({ key: route.key }));
+  };
+
+  _onSceneFocus = route => {
+    this.props.navigation.dispatch(
+      StackActions.completeTransition({ toChildKey: route.key })
     );
-    navigation.dispatch(StackActions.completeTransition());
   };
 
   _renderHeaderConfig = (index, route, descriptor) => {
@@ -48,6 +47,7 @@ class StackView extends React.Component {
       headerTitleStyle,
       headerBackTitleStyle,
       headerBackTitle,
+      headerBackTitleVisible,
       headerTintColor,
       gestureEnabled,
       largeTitle,
@@ -69,7 +69,7 @@ class StackView extends React.Component {
       titleFontFamily: headerTitleStyle && headerTitleStyle.fontFamily,
       titleColor: headerTintColor,
       titleFontSize: headerTitleStyle && headerTitleStyle.fontSize,
-      backTitle: headerBackTitle,
+      backTitle: headerBackTitleVisible === false ? '' : headerBackTitle,
       backTitleFontFamily:
         headerBackTitleStyle && headerBackTitleStyle.fontFamily,
       backTitleFontSize: headerBackTitleStyle && headerBackTitleStyle.fontSize,
@@ -94,6 +94,12 @@ class StackView extends React.Component {
 
     const children = [];
 
+    if (options.backButtonImage) {
+      children.push(
+        <ScreenStackHeaderBackButtonImage source={options.backButtonImage} />
+      );
+    }
+
     if (options.headerLeft !== undefined) {
       children.push(
         <ScreenStackHeaderLeftView key="left">
@@ -154,21 +160,34 @@ class StackView extends React.Component {
   };
 
   _renderScene = (index, route, descriptor) => {
-    const { navigation, getComponent } = descriptor;
+    const { navigation, getComponent, options } = descriptor;
     const { mode, transparentCard } = this.props.navigationConfig;
     const SceneComponent = getComponent();
 
     let stackPresentation = 'push';
-    if (mode === 'modal') {
-      stackPresentation = transparentCard ? 'transparentModal' : 'modal';
+    if (mode === 'modal' || mode === 'containedModal') {
+      stackPresentation = mode;
+      if (transparentCard || options.cardTransparent) {
+        stackPresentation =
+          mode === 'containedModal'
+            ? 'containedTransparentModal'
+            : 'transparentModal';
+      }
+    }
+
+    let stackAnimation = options.stackAnimation;
+    if (options.animationEnabled === false) {
+      stackAnimation = 'none';
     }
 
     const { screenProps } = this.props;
     return (
       <Screen
         key={`screen_${route.key}`}
-        style={StyleSheet.absoluteFill}
+        style={options.cardStyle}
+        stackAnimation={stackAnimation}
         stackPresentation={stackPresentation}
+        onAppear={() => this._onSceneFocus(route)}
         onDismissed={() => this._removeScene(route)}>
         {this._renderHeaderConfig(index, route, descriptor)}
         <SceneView

ios/RNSScreen.h

@@ -39,6 +39,7 @@ typedef NS_ENUM(NSInteger, RNSScreenStackAnimation) {
 
 @interface RNSScreenView : RCTView
 
+@property (nonatomic, copy) RCTDirectEventBlock onAppear;
 @property (nonatomic, copy) RCTDirectEventBlock onDismissed;
 @property (weak, nonatomic) UIView<RNSScreenContainerDelegate> *reactSuperview;
 @property (nonatomic, retain) UIViewController *controller;

ios/RNSScreen.m

@@ -33,6 +33,9 @@
 
 - (void)reactSetFrame:(CGRect)frame
 {
+  if (_active) {
+    [super reactSetFrame:frame];
+  }
   // ignore setFrame call from react, the frame of this view
   // is controlled by the UIViewController it is contained in
 }
@@ -135,6 +138,17 @@
   }
 }
 
+- (void)notifyAppear
+{
+  if (self.onAppear) {
+    dispatch_async(dispatch_get_main_queue(), ^{
+      if (self.onAppear) {
+        self.onAppear(nil);
+      }
+    });
+  }
+}
+
 - (BOOL)isMountedUnderScreenOrReactRoot
 {
   for (UIView *parent = self.superview; parent != nil; parent = parent.superview) {
@@ -235,6 +249,12 @@
   }
 }
 
+- (void)viewDidAppear:(BOOL)animated
+{
+  [super viewDidAppear:animated];
+  [((RNSScreenView *)self.view) notifyAppear];
+}
+
 - (void)notifyFinishTransitioning
 {
   [_previousFirstResponder becomeFirstResponder];
@@ -258,6 +278,7 @@ RCT_EXPORT_MODULE()
 RCT_EXPORT_VIEW_PROPERTY(active, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(stackPresentation, RNSScreenStackPresentation)
 RCT_EXPORT_VIEW_PROPERTY(stackAnimation, RNSScreenStackAnimation)
+RCT_EXPORT_VIEW_PROPERTY(onAppear, RCTDirectEventBlock);
 RCT_EXPORT_VIEW_PROPERTY(onDismissed, RCTDirectEventBlock);
 
 - (UIView *)view

ios/RNSScreenStack.h

@@ -2,7 +2,7 @@
 #import <React/RCTUIManagerObserverCoordinator.h>
 #import "RNSScreenContainer.h"
 
-@interface RNSScreenStackView : UIView <RNSScreenContainerDelegate>
+@interface RNSScreenStackView : UIView <RNSScreenContainerDelegate, RCTInvalidating>
 
 - (void)markChildUpdated;
 - (void)didUpdateChildren;

ios/RNSScreenStack.m

@@ -143,31 +143,48 @@
   NSMutableArray<UIViewController *> *controllersToRemove = [NSMutableArray arrayWithArray:_presentedModals];
   [controllersToRemove removeObjectsInArray:controllers];
 
-  // presenting new controllers
-  for (UIViewController *newController in newControllers) {
-    [_presentedModals addObject:newController];
-    if (_controller.presentedViewController != nil) {
-      [_controller.presentedViewController presentViewController:newController animated:YES completion:nil];
+  // find bottom-most controller that should stay on the stack for the duration of transition
+  NSUInteger changeRootIndex = 0;
+  UIViewController *changeRootController = _controller;
+  for (NSUInteger i = 0; i < MIN(_presentedModals.count, controllers.count); i++) {
+    if (_presentedModals[i] == controllers[i]) {
+      changeRootController = controllers[i];
+      changeRootIndex = i + 1;
     } else {
-      [_controller presentViewController:newController animated:YES completion:nil];
+      break;
     }
   }
 
-  // hiding old controllers
-  for (UIViewController *controller in [controllersToRemove reverseObjectEnumerator]) {
-    [_presentedModals removeObject:controller];
-    if (controller.presentedViewController != nil) {
-      UIViewController *restore = controller.presentedViewController;
-      UIViewController *parent = controller.presentingViewController;
-      [controller dismissViewControllerAnimated:NO completion:^{
-        [parent dismissViewControllerAnimated:NO completion:^{
-          [parent presentViewController:restore animated:NO completion:nil];
-        }];
-      }];
-    } else {
-      [controller.presentingViewController dismissViewControllerAnimated:YES completion:nil];
+  // we verify that controllers added on top of changeRootIndex are all new. Unfortunately modal
+  // VCs cannot be reshuffled (there are some visual glitches when we try to dismiss then show as
+  // even non-animated dismissal has delay and updates the screen several times)
+  for (NSUInteger i = changeRootIndex; i < controllers.count; i++) {
+    if ([_presentedModals containsObject:controllers[i]]) {
+      RCTAssert(false, @"Modally presented controllers are being reshuffled, this is not allowed");
     }
   }
+
+  void (^finish)(void) = ^{
+    UIViewController *previous = changeRootController;
+    for (NSUInteger i = changeRootIndex; i < controllers.count; i++) {
+      UIViewController *next = controllers[i];
+      [previous presentViewController:next
+                             animated:(i == controllers.count - 1)
+                             completion:nil];
+      previous = next;
+    }
+
+    [self->_presentedModals removeAllObjects];
+    [self->_presentedModals addObjectsFromArray:controllers];
+  };
+
+  if (changeRootController.presentedViewController) {
+    [changeRootController
+     dismissViewControllerAnimated:(changeRootIndex == controllers.count)
+     completion:finish];
+  } else {
+    finish();
+  }
 }
 
 - (void)setPushViewControllers:(NSArray<UIViewController *> *)controllers
@@ -244,12 +261,18 @@
   _controller.view.frame = self.bounds;
 }
 
+- (void)invalidate
+{
+  for (UIViewController *controller in _presentedModals) {
+    [controller dismissViewControllerAnimated:NO completion:nil];
+  }
+  [_presentedModals removeAllObjects];
+}
+
 - (void)dismissOnReload
 {
   dispatch_async(dispatch_get_main_queue(), ^{
-    for (UIViewController *controller in self->_presentedModals) {
-      [controller dismissViewControllerAnimated:NO completion:nil];
-    }
+    [self invalidate];
   });
 }
 

ios/RNSScreenStackHeaderConfig.h

@@ -34,6 +34,7 @@
 @end
 
 typedef NS_ENUM(NSInteger, RNSScreenStackHeaderSubviewType) {
+  RNSScreenStackHeaderSubviewTypeBackButton,
   RNSScreenStackHeaderSubviewTypeLeft,
   RNSScreenStackHeaderSubviewTypeRight,
   RNSScreenStackHeaderSubviewTypeTitle,

ios/RNSScreenStackHeaderConfig.m

@@ -5,6 +5,20 @@
 #import <React/RCTUIManager.h>
 #import <React/RCTUIManagerUtils.h>
 #import <React/RCTShadowView.h>
+#import <React/RCTImageLoader.h>
+#import <React/RCTImageView.h>
+#import <React/RCTImageSource.h>
+
+// Some RN private method hacking below. Couldn't figure out better way to access image data
+// of a given RCTImageView. See more comments in the code section processing SubviewTypeBackButton
+@interface RCTImageView (Private)
+- (UIImage*)image;
+@end
+
+@interface RCTImageLoader (Private)
+- (id<RCTImageCache>)imageCache;
+@end
+
 
 @interface RNSScreenHeaderItemMeasurements : NSObject
 @property (nonatomic, readonly) CGSize headerSize;
@@ -30,6 +44,7 @@
 
 @interface RNSScreenStackHeaderSubview : UIView
 
+@property (nonatomic, weak) RCTBridge *bridge;
 @property (nonatomic, weak) UIView *reactSuperview;
 @property (nonatomic) RNSScreenStackHeaderSubviewType type;
 
@@ -150,6 +165,15 @@
         [navbar setLargeTitleTextAttributes:largeAttrs];
       }
     }
+
+    UIImage *backButtonImage = [self loadBackButtonImageInViewController:vc withConfig:config];
+    if (backButtonImage) {
+      navbar.backIndicatorImage = backButtonImage;
+      navbar.backIndicatorTransitionMaskImage = backButtonImage;
+    } else if (navbar.backIndicatorImage) {
+      navbar.backIndicatorImage = nil;
+      navbar.backIndicatorTransitionMaskImage = nil;
+    }
   }
 }
 
@@ -164,6 +188,59 @@
   }
 }
 
++ (UIImage*)loadBackButtonImageInViewController:(UIViewController *)vc
+                                     withConfig:(RNSScreenStackHeaderConfig *)config
+{
+  BOOL hasBackButtonImage = NO;
+  for (RNSScreenStackHeaderSubview *subview in config.reactSubviews) {
+    if (subview.type == RNSScreenStackHeaderSubviewTypeBackButton && subview.subviews.count > 0) {
+      hasBackButtonImage = YES;
+      RCTImageView *imageView = subview.subviews[0];
+      UIImage *image = imageView.image;
+      // IMPORTANT!!!
+      // image can be nil in DEV MODE ONLY
+      //
+      // It is so, because in dev mode images are loaded over HTTP from the packager. In that case
+      // we first check if image is already loaded in cache and if it is, we take it from cache and
+      // display immediately. Otherwise we wait for the transition to finish and retry updating
+      // header config.
+      // Unfortunately due to some problems in UIKit we cannot update the image while the screen
+      // transition is ongoing. This results in the settings being reset after the transition is done
+      // to the state from before the transition.
+      if (image == nil) {
+        // in DEV MODE we try to load from cache (we use private API for that as it is not exposed
+        // publically in headers).
+        RCTImageSource *source = imageView.imageSources[0];
+        image = [subview.bridge.imageLoader.imageCache
+                 imageForUrl:source.request.URL.absoluteString
+                 size:source.size
+                 scale:source.scale
+                 resizeMode:imageView.resizeMode];
+      }
+      if (image == nil) {
+        // This will be triggered if the image is not in the cache yet. What we do is we wait until
+        // the end of transition and run header config updates again. We could potentially wait for
+        // image on load to trigger, but that would require even more private method hacking.
+        if (vc.transitionCoordinator) {
+          [vc.transitionCoordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext>  _Nonnull context) {
+            // nothing, we just want completion
+          } completion:^(id<UIViewControllerTransitionCoordinatorContext>  _Nonnull context) {
+            // in order for new back button image to be loaded we need to trigger another change
+            // in back button props that'd make UIKit redraw the button. Otherwise the changes are
+            // not reflected. Here we change back button visibility which is then immediately restored
+            vc.navigationItem.hidesBackButton = YES;
+            [config updateViewControllerIfNeeded];
+          }];
+        }
+        return [UIImage new];
+      } else {
+        return image;
+      }
+    }
+  }
+  return nil;
+}
+
 + (void)willShowViewController:(UIViewController *)vc withConfig:(RNSScreenStackHeaderConfig *)config
 {
   [self updateViewController:vc withConfig:config];
@@ -201,7 +278,6 @@
   }
 
   navitem.title = config.title;
-  navitem.hidesBackButton = config.hideBackButton;
   if (config.backTitle != nil) {
     prevItem.backBarButtonItem = [[UIBarButtonItem alloc]
                                   initWithTitle:config.backTitle
@@ -290,11 +366,22 @@
       appearance.largeTitleTextAttributes = largeAttrs;
     }
 
+    UIImage *backButtonImage = [self loadBackButtonImageInViewController:vc withConfig:config];
+    if (backButtonImage) {
+      [appearance setBackIndicatorImage:backButtonImage transitionMaskImage:backButtonImage];
+    } else if (appearance.backIndicatorImage) {
+      [appearance setBackIndicatorImage:nil transitionMaskImage:nil];
+    }
+
     navitem.standardAppearance = appearance;
     navitem.compactAppearance = appearance;
     navitem.scrollEdgeAppearance = appearance;
   }
 #endif
+  navitem.hidesBackButton = config.hideBackButton;
+  navitem.leftBarButtonItem = nil;
+  navitem.rightBarButtonItem = nil;
+  navitem.titleView = nil;
   for (RNSScreenStackHeaderSubview *subview in config.reactSubviews) {
     switch (subview.type) {
       case RNSScreenStackHeaderSubviewTypeLeft: {
@@ -375,6 +462,7 @@ RCT_EXPORT_VIEW_PROPERTY(gestureEnabled, BOOL)
 @implementation RCTConvert (RNSScreenStackHeader)
 
 RCT_ENUM_CONVERTER(RNSScreenStackHeaderSubviewType, (@{
+   @"back": @(RNSScreenStackHeaderSubviewTypeBackButton),
    @"left": @(RNSScreenStackHeaderSubviewTypeLeft),
    @"right": @(RNSScreenStackHeaderSubviewTypeRight),
    @"title": @(RNSScreenStackHeaderSubviewTypeTitle),
@@ -383,9 +471,7 @@ RCT_ENUM_CONVERTER(RNSScreenStackHeaderSubviewType, (@{
 
 @end
 
-@implementation RNSScreenStackHeaderSubview {
-  __weak RCTBridge *_bridge;
-}
+@implementation RNSScreenStackHeaderSubview
 
 - (instancetype)initWithBridge:(RCTBridge *)bridge
 {

package.json

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

src/screens.native.js

@@ -4,6 +4,7 @@ import {
   requireNativeComponent,
   View,
   UIManager,
+  Image,
   StyleSheet,
 } from 'react-native';
 import { version } from 'react-native/Libraries/Core/ReactNativeVersion';
@@ -146,6 +147,14 @@ const styles = StyleSheet.create({
   },
 });
 
+const ScreenStackHeaderBackButtonImage = props => (
+  <ScreensNativeModules.NativeScreenStackHeaderSubview
+    type="back"
+    style={styles.headerSubview}>
+    <Image resizeMode="center" fadeDuration={0} {...props} />
+  </ScreensNativeModules.NativeScreenStackHeaderSubview>
+);
+
 const ScreenStackHeaderRightView = props => (
   <ScreensNativeModules.NativeScreenStackHeaderSubview
     {...props}
@@ -198,6 +207,7 @@ module.exports = {
   get ScreenStackHeaderSubview() {
     return ScreensNativeModules.NativeScreenStackHeaderSubview;
   },
+  ScreenStackHeaderBackButtonImage,
   ScreenStackHeaderRightView,
   ScreenStackHeaderLeftView,
   ScreenStackHeaderTitleView,