V2 topbar (#1996)

* animation fix

* fix tests

* hide toolbar

* default values

* default values

* tmp commit

* tests

* animated hide

* animated hode improve

* fix topbar

* readme

* lifecycle WIP

* lifecycle alert delay hack

* test fixes

* move topbar to container

* fix tests

* refactor

* refactor WIP

* refactor fix tests

* nav options fallback to parse

* WIP

* topbar background fix

README.md

@@ -75,7 +75,7 @@ Note:  v1 properties with names beginning with 'navBar' are replaced in v2 with
 | topBarTextFontFamily  |  ✅     |      ✅     |     ✅        | Wix |
 | topBarBackgroundColor |  ✅     |  ✅       |     ✅         | Wix|
 | topBarButtonColor     |  ✅     |    ✅      |     [Contribute](/docs/docs/CONTRIBUTING.md)        | Wix|
-| topBarHidden          |   ✅    |   ✅      |     [Contribute](/docs/docs/CONTRIBUTING.md)        | Wix|
+| topBarHidden          |   ✅    |   ✅      |     ✅        | Wix|
 | topBarHideOnScroll    |  ✅     |  ✅    |     [Contribute](/docs/docs/CONTRIBUTING.md)        | Wix|
 | topBarTranslucent     |  ✅     |   ✅     |     [Contribute](/docs/docs/CONTRIBUTING.md)        | Wix|
 | topBarTransparent     | ✅      |   WIP @bogobogo     |     [Contribute](/docs/docs/CONTRIBUTING.md)        |

lib/android/app/src/main/java/com/reactnativenavigation/anim/StackAnimator.java

@@ -3,14 +3,22 @@ package com.reactnativenavigation.anim;
 import android.animation.Animator;
 import android.animation.AnimatorSet;
 import android.animation.ObjectAnimator;
+import android.animation.ValueAnimator;
 import android.app.Activity;
 import android.content.Context;
 import android.support.annotation.Nullable;
 import android.util.DisplayMetrics;
+import android.util.Log;
 import android.view.View;
+import android.view.ViewGroup;
 import android.view.WindowManager;
 import android.view.animation.AccelerateInterpolator;
 import android.view.animation.DecelerateInterpolator;
+import android.widget.FrameLayout;
+import android.widget.LinearLayout;
+import android.widget.RelativeLayout;
+
+import com.reactnativenavigation.views.TopBar;
 
 @SuppressWarnings("ResourceType")
 public class StackAnimator {
@@ -20,7 +28,7 @@ public class StackAnimator {
 	}
 
 	private static final int DURATION = 300;
-	private static final int START_DELAY = 100;
+	private static final int DURATION_TOPBAR = 300;
 	private static final DecelerateInterpolator DECELERATE_INTERPOLATOR = new DecelerateInterpolator();
 	private static final AccelerateInterpolator ACCELERATE_INTERPOLATOR = new AccelerateInterpolator();
 	private float translationY;
@@ -109,5 +117,104 @@ public class StackAnimator {
 		return metrics.heightPixels;
 	}
 
+	public void animateShowTopBar(final TopBar topBar, final View container) {
+		ValueAnimator containerHeightAnim = ValueAnimator.ofInt(container.getMeasuredHeight(), container.getMeasuredHeight() - topBar.getMeasuredHeight());
+		containerHeightAnim.setInterpolator(DECELERATE_INTERPOLATOR);
+		containerHeightAnim.setDuration(DURATION_TOPBAR);
+		containerHeightAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
+			@Override
+			public void onAnimationUpdate(ValueAnimator valueAnimator) {
+				int val = (Integer) valueAnimator.getAnimatedValue();
+				LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) container.getLayoutParams();
+				layoutParams.height = val;
+				container.setLayoutParams(layoutParams);
+			}
+		});
+		ObjectAnimator containerTransitionAnim = ObjectAnimator.ofFloat(container, View.TRANSLATION_Y, -1 * topBar.getMeasuredHeight(), 0);
+		containerTransitionAnim.setInterpolator(DECELERATE_INTERPOLATOR);
+		containerTransitionAnim.setDuration(DURATION_TOPBAR);
+
+		ObjectAnimator topbarAnim = ObjectAnimator.ofFloat(topBar, View.TRANSLATION_Y, -1 * topBar.getHeight(), 0);
+		topbarAnim.setInterpolator(DECELERATE_INTERPOLATOR);
+		topbarAnim.setDuration(DURATION_TOPBAR);
+
+		AnimatorSet set = new AnimatorSet();
+		set.addListener(new Animator.AnimatorListener() {
+			@Override
+			public void onAnimationStart(Animator animation) {
+				topBar.setVisibility(View.VISIBLE);
+			}
+
+			@Override
+			public void onAnimationEnd(Animator animation) {
+				LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) container.getLayoutParams();
+				layoutParams.height = LinearLayout.LayoutParams.MATCH_PARENT;
+				container.setLayoutParams(layoutParams);
+			}
+
+			@Override
+			public void onAnimationCancel(Animator animation) {
+
+			}
+
+			@Override
+			public void onAnimationRepeat(Animator animation) {
+
+			}
+		});
+		set.playTogether(containerHeightAnim, containerTransitionAnim, topbarAnim);
+		set.start();
+	}
+
+	public void animateHideTopBar(final TopBar topBar, final View container) {
+		ValueAnimator containerHeightAnim = ValueAnimator.ofInt(container.getMeasuredHeight(), container.getMeasuredHeight() + topBar.getMeasuredHeight());
+		containerHeightAnim.setInterpolator(ACCELERATE_INTERPOLATOR);
+		containerHeightAnim.setDuration(DURATION_TOPBAR);
+		containerHeightAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
+			@Override
+			public void onAnimationUpdate(ValueAnimator valueAnimator) {
+				int val = (Integer) valueAnimator.getAnimatedValue();
+				LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) container.getLayoutParams();
+				layoutParams.height = val;
+				container.setLayoutParams(layoutParams);
+			}
+		});
+		ObjectAnimator containerTransitionAnim = ObjectAnimator.ofFloat(container, View.TRANSLATION_Y, 0, -1 * topBar.getMeasuredHeight());
+		containerTransitionAnim.setInterpolator(ACCELERATE_INTERPOLATOR);
+		containerTransitionAnim.setDuration(DURATION_TOPBAR);
+
+		ObjectAnimator topbarAnim = ObjectAnimator.ofFloat(topBar, View.TRANSLATION_Y, 0, -1 * topBar.getMeasuredHeight());
+		topbarAnim.setInterpolator(ACCELERATE_INTERPOLATOR);
+		topbarAnim.setDuration(DURATION_TOPBAR);
+
+		AnimatorSet set = new AnimatorSet();
+		set.addListener(new Animator.AnimatorListener() {
+			@Override
+			public void onAnimationStart(Animator animation) {
+			}
+
+			@Override
+			public void onAnimationEnd(Animator animation) {
+				LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) container.getLayoutParams();
+				layoutParams.height = LinearLayout.LayoutParams.MATCH_PARENT;
+				container.setLayoutParams(layoutParams);
+				container.setTranslationY(0);
+
+				topBar.setVisibility(View.GONE);
+				topBar.setTranslationY(0);
+			}
+
+			@Override
+			public void onAnimationCancel(Animator animation) {
+
+			}
+
+			@Override
+			public void onAnimationRepeat(Animator animation) {
 
+			}
+		});
+		set.playTogether(containerHeightAnim, containerTransitionAnim, topbarAnim);
+		set.start();
+	}
 }

lib/android/app/src/main/java/com/reactnativenavigation/parse/LayoutFactory.java

@@ -9,6 +9,7 @@ import com.reactnativenavigation.viewcontrollers.ContainerViewController;
 import com.reactnativenavigation.viewcontrollers.SideMenuController;
 import com.reactnativenavigation.viewcontrollers.StackController;
 import com.reactnativenavigation.viewcontrollers.ViewController;
+import com.reactnativenavigation.views.TopbarContainerViewCreator;
 
 import java.util.ArrayList;
 import java.util.List;
@@ -81,7 +82,8 @@ public class LayoutFactory {
 		String id = node.id;
 		String name = node.data.optString("name");
 		NavigationOptions navigationOptions = NavigationOptions.parse(node.data.optJSONObject("navigationOptions"));
-		return new ContainerViewController(activity, id, name, new ReactContainerViewCreator(reactInstanceManager), navigationOptions);
+		return new ContainerViewController(activity, id, name,
+				new TopbarContainerViewCreator(new ReactContainerViewCreator(reactInstanceManager)), navigationOptions);
 	}
 
 	private ViewController createContainerStack(LayoutNode node) {

lib/android/app/src/main/java/com/reactnativenavigation/parse/NavigationOptions.java

@@ -1,5 +1,6 @@
 package com.reactnativenavigation.parse;
 
+import android.graphics.Color;
 import android.support.annotation.ColorInt;
 import android.support.annotation.NonNull;
 
@@ -7,32 +8,65 @@ import org.json.JSONObject;
 
 public class NavigationOptions {
 
+	private static final String NO_VALUE = "";
+	private static final int NO_INT_VALUE = Integer.MIN_VALUE;
+	private static final float NO_FLOAT_VALUE = Float.MIN_VALUE;
+	private static final int NO_COLOR_VALUE = Color.TRANSPARENT;
+
+	public enum BooleanOptions {
+		True,
+		False,
+		NoValue;
+
+		static BooleanOptions parse(String value) {
+			if (value != null && !value.equals("")) {
+				return Boolean.valueOf(value) ? True : False;
+			}
+			return NoValue;
+		}
+	}
+
 	@NonNull
 	public static NavigationOptions parse(JSONObject json) {
 		NavigationOptions result = new NavigationOptions();
 		if (json == null) return result;
 
-		result.title = json.optString("title");
-		result.topBarBackgroundColor = json.optInt("topBarBackgroundColor");
-		result.topBarTextColor = json.optInt("topBarTextColor");
-		result.topBarTextFontSize = (float) json.optDouble("topBarTextFontSize");
-		result.topBarTextFontFamily = json.optString("topBarTextFontFamily");
+		result.title = json.optString("title", NO_VALUE);
+		result.topBarBackgroundColor = json.optInt("topBarBackgroundColor", NO_COLOR_VALUE);
+		result.topBarTextColor = json.optInt("topBarTextColor", NO_INT_VALUE);
+		result.topBarTextFontSize = (float) json.optDouble("topBarTextFontSize", NO_FLOAT_VALUE);
+		result.topBarTextFontFamily = json.optString("topBarTextFontFamily", NO_VALUE);
+		result.topBarHidden = BooleanOptions.parse(json.optString("topBarHidden"));
+		result.animateTopBarHide = BooleanOptions.parse(json.optString("animateTopBarHide"));
 
 		return result;
 	}
 
 	public String title = "";
-	public int topBarBackgroundColor = 0;
+	@ColorInt
+	public int topBarBackgroundColor;
 	@ColorInt
 	public int topBarTextColor;
 	public float topBarTextFontSize;
 	public String topBarTextFontFamily;
+	public BooleanOptions topBarHidden = BooleanOptions.False;
+	public BooleanOptions animateTopBarHide = BooleanOptions.False;
 
 	public void mergeWith(final NavigationOptions other) {
-		title = other.title;
-		topBarBackgroundColor = other.topBarBackgroundColor;
-		topBarTextColor = other.topBarTextColor;
-		topBarTextFontSize = other.topBarTextFontSize;
-		topBarTextFontFamily = other.topBarTextFontFamily;
+		if (!NO_VALUE.equals(other.title)) title = other.title;
+		if (other.topBarBackgroundColor != NO_COLOR_VALUE)
+			topBarBackgroundColor = other.topBarBackgroundColor;
+		if (other.topBarTextColor != NO_INT_VALUE)
+			topBarTextColor = other.topBarTextColor;
+		if (other.topBarTextFontSize != NO_FLOAT_VALUE)
+			topBarTextFontSize = other.topBarTextFontSize;
+		if (!NO_VALUE.equals(other.topBarTextFontFamily))
+			topBarTextFontFamily = other.topBarTextFontFamily;
+		if (other.topBarHidden != BooleanOptions.NoValue) {
+			topBarHidden = other.topBarHidden;
+		}
+		if (other.animateTopBarHide != BooleanOptions.NoValue) {
+			animateTopBarHide = other.animateTopBarHide;
+		}
 	}
 }

lib/android/app/src/main/java/com/reactnativenavigation/presentation/OptionsPresenter.java

@@ -1,29 +1,66 @@
 package com.reactnativenavigation.presentation;
 
+import android.util.Log;
+import android.view.View;
+
+import com.reactnativenavigation.anim.StackAnimator;
 import com.reactnativenavigation.parse.NavigationOptions;
 import com.reactnativenavigation.utils.TypefaceLoader;
-import com.reactnativenavigation.viewcontrollers.StackController;
-
-/**
- * Created by romanko on 9/14/17.
- */
+import com.reactnativenavigation.viewcontrollers.ContainerViewController;
+import com.reactnativenavigation.views.TopbarContainerView;
 
 public class OptionsPresenter {
 
-	private StackController controller;
+	private ContainerViewController controller;
+	private final StackAnimator animator;
 
-	public OptionsPresenter(StackController controller) {
+	public OptionsPresenter(ContainerViewController controller) {
 		this.controller = controller;
+		animator = new StackAnimator(controller.getActivity());
 	}
 
 	public void applyOptions(NavigationOptions options) {
-		if (controller != null) {
+		if (controller != null && controller.getTopBar() != null) {
 			controller.getTopBar().setTitle(options.title);
 			controller.getTopBar().setBackgroundColor(options.topBarBackgroundColor);
 			controller.getTopBar().setTitleTextColor(options.topBarTextColor);
 			controller.getTopBar().setTitleFontSize(options.topBarTextFontSize);
 			TypefaceLoader typefaceLoader = new TypefaceLoader();
 			controller.getTopBar().setTitleTypeface(typefaceLoader.getTypeFace(controller.getActivity(), options.topBarTextFontFamily));
+			applyTopbarHiddenOptions(options);
+		}
+	}
+
+	private void applyTopbarHiddenOptions(NavigationOptions options) {
+		if (options.topBarHidden == NavigationOptions.BooleanOptions.True) {
+			hideTopbar(options.animateTopBarHide);
+		}
+		if (options.topBarHidden == NavigationOptions.BooleanOptions.False) {
+			showTopbar(options.animateTopBarHide);
+		}
+	}
+
+	private void showTopbar(NavigationOptions.BooleanOptions animated) {
+		if (controller.getTopBar().getVisibility() == View.VISIBLE) {
+			return;
+		}
+		if (animated == NavigationOptions.BooleanOptions.True) {
+			TopbarContainerView topbarContainerView = (TopbarContainerView) controller.getContainerView();
+			animator.animateShowTopBar(controller.getTopBar(), topbarContainerView.getContainerView().asView());
+		} else {
+			controller.getTopBar().setVisibility(View.VISIBLE);
+		}
+	}
+
+	private void hideTopbar(NavigationOptions.BooleanOptions animated) {
+		if (controller.getTopBar().getVisibility() == View.GONE) {
+			return;
+		}
+		if (animated == NavigationOptions.BooleanOptions.True) {
+			TopbarContainerView topbarContainerView = (TopbarContainerView) controller.getContainerView();
+			animator.animateHideTopBar(controller.getTopBar(), topbarContainerView.getContainerView().asView());
+		} else {
+			controller.getTopBar().setVisibility(View.GONE);
 		}
 	}
 }

lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java

@@ -17,6 +17,8 @@ import com.reactnativenavigation.utils.UiThread;
 import com.reactnativenavigation.viewcontrollers.Navigator;
 import com.reactnativenavigation.viewcontrollers.ViewController;
 
+import org.json.JSONObject;
+
 public class NavigationModule extends ReactContextBaseJavaModule {
 	private static final String NAME = "RNNBridgeModule";
 	private final ReactInstanceManager reactInstanceManager;

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/ContainerViewController.java

@@ -2,10 +2,14 @@ package com.reactnativenavigation.viewcontrollers;
 
 import android.app.Activity;
 import android.support.annotation.NonNull;
+import android.util.Log;
 import android.view.View;
 
+import com.reactnativenavigation.anim.StackAnimator;
 import com.reactnativenavigation.parse.NavigationOptions;
 import com.reactnativenavigation.presentation.OptionsPresenter;
+import com.reactnativenavigation.views.TopBar;
+import com.reactnativenavigation.views.TopbarContainerView;
 
 public class ContainerViewController extends ViewController {
 
@@ -31,9 +35,11 @@ public class ContainerViewController extends ViewController {
 	private final String containerName;
 
 	private final ContainerViewCreator viewCreator;
-	private final NavigationOptions navigationOptions;
+	private NavigationOptions navigationOptions;
 	private ContainerView containerView;
 
+	private TopBar topBar;
+
 	public ContainerViewController(final Activity activity,
 								   final String id,
 								   final String containerName,
@@ -75,20 +81,31 @@ public class ContainerViewController extends ViewController {
 	@Override
 	protected View createView() {
 		containerView = viewCreator.create(getActivity(), getId(), containerName);
+		if (containerView instanceof TopbarContainerView) {
+			topBar = ((TopbarContainerView) containerView).getTopBar();
+		}
 		return containerView.asView();
 	}
 
-	public void mergeNavigationOptions(final NavigationOptions options) {
+	void mergeNavigationOptions(NavigationOptions options) {
 		navigationOptions.mergeWith(options);
 		applyOptions();
 	}
 
-	public NavigationOptions getNavigationOptions() {
+	NavigationOptions getNavigationOptions() {
 		return navigationOptions;
 	}
 
 	private void applyOptions() {
-		OptionsPresenter presenter = new OptionsPresenter(getParentStackController());
+		OptionsPresenter presenter = new OptionsPresenter(this);
 		presenter.applyOptions(navigationOptions);
 	}
+
+	public TopBar getTopBar() {
+		return topBar;
+	}
+
+	public ContainerView getContainerView() {
+		return containerView;
+	}
 }

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/Navigator.java

@@ -8,6 +8,8 @@ import android.widget.FrameLayout;
 import com.reactnativenavigation.parse.NavigationOptions;
 import com.reactnativenavigation.utils.CompatUtils;
 
+import org.json.JSONObject;
+
 import java.util.Collection;
 import java.util.Collections;
 

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/StackController.java

@@ -1,30 +1,27 @@
 package com.reactnativenavigation.viewcontrollers;
 
-import android.animation.Animator;
 import android.app.Activity;
 import android.graphics.Color;
-import android.os.Handler;
-import android.os.Looper;
 import android.support.annotation.NonNull;
+import android.util.Log;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.FrameLayout;
 import android.widget.LinearLayout;
+import android.widget.RelativeLayout;
 
 import com.reactnativenavigation.anim.StackAnimator;
-import com.reactnativenavigation.react.ReactContainerView;
 import com.reactnativenavigation.utils.CompatUtils;
 import com.reactnativenavigation.views.TopBar;
 
 import java.util.Collection;
-import java.util.Random;
+
+import static android.widget.RelativeLayout.BELOW;
 
 public class StackController extends ParentController {
 
 	private final IdStack<ViewController> stack = new IdStack<>();
 	private final StackAnimator animator;
-	private TopBar topBar;
-	private FrameLayout container;
 
 	public StackController(final Activity activity, String id) {
 		this(activity, id, new StackAnimator(activity));
@@ -41,16 +38,17 @@ public class StackController extends ParentController {
 		child.setParentStackController(this);
 		stack.push(child.getId(), child);
 		View enteringView = child.getView();
-		getContainer().addView(enteringView);
+		getView().addView(enteringView);
 
 		//TODO animatePush only when needed
 		if (previousTop != null) {
 			animator.animatePush(enteringView, new StackAnimator.StackAnimationListener() {
 				@Override
 				public void onAnimationEnd() {
-					getContainer().removeView(previousTop.getView());
+					getView().removeView(previousTop.getView());
 				}
 			});
+
 		}
 	}
 
@@ -66,13 +64,13 @@ public class StackController extends ParentController {
 
 		View enteringView = newTop.getView();
 		final View exitingView = poppedTop.getView();
-		getContainer().addView(enteringView, getContainer().getChildCount() - 1);
+		getView().addView(enteringView, getView().getChildCount() - 1);
 
 		//TODO animatePush only when needed
 		animator.animatePop(exitingView, new StackAnimator.StackAnimationListener() {
 			@Override
 			public void onAnimationEnd() {
-				getContainer().removeView(exitingView);
+				getView().removeView(exitingView);
 				poppedTop.destroy();
 			}
 		});
@@ -127,15 +125,7 @@ public class StackController extends ParentController {
 	@NonNull
 	@Override
 	protected ViewGroup createView() {
-		LinearLayout root = new LinearLayout(getActivity());
-		root.setOrientation(LinearLayout.VERTICAL);
-		topBar = new TopBar(getActivity());
-		topBar.setId(CompatUtils.generateViewId());
-		root.addView(topBar);
-		container = new FrameLayout(getActivity());
-		container.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
-		root.addView(container);
-		return root;
+		return new FrameLayout(getActivity());
 	}
 
 	@NonNull
@@ -143,16 +133,4 @@ public class StackController extends ParentController {
 	public Collection<ViewController> getChildControllers() {
 		return stack.values();
 	}
-
-	public TopBar getTopBar() {
-		ensureViewIsCreated();
-		return topBar;
-	}
-
-	private ViewGroup getContainer() {
-		if (container == null) {
-			getView();
-		}
-		return container;
-	}
 }

lib/android/app/src/main/java/com/reactnativenavigation/views/TopBar.java

@@ -1,6 +1,7 @@
 package com.reactnativenavigation.views;
 
 import android.app.Activity;
+import android.content.Context;
 import android.graphics.Typeface;
 import android.support.annotation.ColorInt;
 import android.support.annotation.Nullable;
@@ -13,7 +14,7 @@ import android.widget.TextView;
 public class TopBar extends AppBarLayout {
 	private final Toolbar titleBar;
 
-	public TopBar(final Activity context) {
+	public TopBar(final Context context) {
 		super(context);
 		titleBar = new Toolbar(context);
 		addView(titleBar);
@@ -49,8 +50,13 @@ public class TopBar extends AppBarLayout {
 		return findTextView(titleBar);
 	}
 
+	@Override
+	public void setBackgroundColor(@ColorInt int color) {
+		titleBar.setBackgroundColor(color);
+	}
+
 	@Nullable
-	public TextView findTextView(ViewGroup root) {
+	private TextView findTextView(ViewGroup root) {
 		for (int i = 0; i < root.getChildCount(); i++) {
 			View view = root.getChildAt(i);
 			if (view instanceof TextView) {
@@ -62,4 +68,8 @@ public class TopBar extends AppBarLayout {
 		}
 		return null;
 	}
+
+	public Toolbar getTitleBar() {
+		return titleBar;
+	}
 }

lib/android/app/src/main/java/com/reactnativenavigation/views/TopbarContainerView.java

@@ -0,0 +1,65 @@
+package com.reactnativenavigation.views;
+
+import android.content.Context;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.LinearLayout;
+
+import com.reactnativenavigation.viewcontrollers.ContainerViewController;
+
+public class TopbarContainerView extends LinearLayout implements ContainerViewController.ContainerView {
+
+	private TopBar topBar;
+	private ContainerViewController.ContainerView containerView;
+
+	public TopbarContainerView(Context context, ContainerViewController.ContainerView containerView) {
+		super(context);
+		this.topBar = new TopBar(context);
+		this.containerView = containerView;
+
+		initViews();
+	}
+
+	private void initViews() {
+		setOrientation(LinearLayout.VERTICAL);
+		addView(topBar);
+		addView(containerView.asView());
+	}
+
+	public TopbarContainerView(Context context) {
+		super(context);
+	}
+
+	@Override
+	public boolean isReady() {
+		return containerView.isReady();
+	}
+
+	@Override
+	public View asView() {
+		return this;
+	}
+
+	@Override
+	public void destroy() {
+		containerView.destroy();
+	}
+
+	@Override
+	public void sendContainerStart() {
+		containerView.sendContainerStart();
+	}
+
+	@Override
+	public void sendContainerStop() {
+		containerView.sendContainerStop();
+	}
+
+	public TopBar getTopBar() {
+		return topBar;
+	}
+
+	public ContainerViewController.ContainerView getContainerView() {
+		return containerView;
+	}
+}

lib/android/app/src/main/java/com/reactnativenavigation/views/TopbarContainerViewCreator.java

@@ -0,0 +1,23 @@
+package com.reactnativenavigation.views;
+
+import android.app.Activity;
+
+import com.reactnativenavigation.viewcontrollers.ContainerViewController;
+
+public class TopbarContainerViewCreator implements ContainerViewController.ContainerViewCreator {
+
+	private ContainerViewController.ContainerViewCreator creator;
+
+	public TopbarContainerViewCreator(ContainerViewController.ContainerViewCreator creator) {
+		this.creator = creator;
+	}
+
+	@Override
+	public ContainerViewController.ContainerView create(Activity activity, String containerId, String containerName) {
+		ContainerViewController.ContainerView containerView = creator.create(activity, containerId, containerName);
+
+		TopbarContainerView root = new TopbarContainerView(activity, containerView);
+		return root;
+
+	}
+}

lib/android/app/src/test/java/com/reactnativenavigation/mocks/SimpleContainerViewController.java

@@ -4,9 +4,10 @@ import android.app.Activity;
 
 import com.reactnativenavigation.parse.NavigationOptions;
 import com.reactnativenavigation.viewcontrollers.ContainerViewController;
+import com.reactnativenavigation.views.TopbarContainerViewCreator;
 
 public class SimpleContainerViewController extends ContainerViewController {
 	public SimpleContainerViewController(final Activity activity, final String id) {
-		super(activity, id, "theContainerName", new TestContainerViewCreator(), new NavigationOptions());
+		super(activity, id, "theContainerName", new TopbarContainerViewCreator(new TestContainerViewCreator()), new NavigationOptions());
 	}
 }

lib/android/app/src/test/java/com/reactnativenavigation/mocks/TestContainerView.java

@@ -2,12 +2,19 @@ package com.reactnativenavigation.mocks;
 
 import android.content.Context;
 import android.view.View;
+import android.view.ViewGroup;
 
 import com.reactnativenavigation.viewcontrollers.ContainerViewController;
+import com.reactnativenavigation.views.TopBar;
 
 public class TestContainerView extends View implements ContainerViewController.ContainerView {
+
+	private TopBar topBar;
+
 	public TestContainerView(final Context context) {
 		super(context);
+		topBar = new TopBar(context);
+
 	}
 
 	@Override

lib/android/app/src/test/java/com/reactnativenavigation/parse/NavigationOptionsTest.java

@@ -5,6 +5,7 @@ import com.reactnativenavigation.BaseTest;
 import org.json.JSONObject;
 import org.junit.Test;
 
+import static com.reactnativenavigation.parse.NavigationOptions.BooleanOptions.True;
 import static org.assertj.core.api.Java6Assertions.assertThat;
 
 public class NavigationOptionsTest extends BaseTest {
@@ -22,6 +23,7 @@ public class NavigationOptionsTest extends BaseTest {
 		json.put("topBarTextColor", 0xff123456);
 		json.put("topBarTextFontSize", 18);
 		json.put("topBarTextFontFamily", "HelveticaNeue-CondensedBold");
+		json.put("topBarHidden", true);
 
 		NavigationOptions result = NavigationOptions.parse(json);
 		assertThat(result.title).isEqualTo("the title");
@@ -29,6 +31,7 @@ public class NavigationOptionsTest extends BaseTest {
 		assertThat(result.topBarTextColor).isEqualTo(0xff123456);
 		assertThat(result.topBarTextFontSize).isEqualTo(18);
 		assertThat(result.topBarTextFontFamily).isEqualTo("HelveticaNeue-CondensedBold");
+		assertThat(result.topBarHidden).isEqualTo(True);
 	}
 
 	@Test

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/NavigatorTest.java

@@ -207,21 +207,6 @@ public class NavigatorTest extends BaseTest {
 		uut.setOptions("some unknown child id", new NavigationOptions());
 	}
 
-	@Test
-	public void setOptions_ActuallyAffectsTheTitleView() throws Exception {
-		ContainerViewController containerVc = new SimpleContainerViewController(activity, "theId");
-		StackController stackController = new StackController(activity, "stackId", new TestStackAnimator());
-		stackController.push(containerVc);
-		uut.setRoot(stackController);
-		assertThat(stackController.getTopBar().getTitle()).isEmpty();
-
-		NavigationOptions opts = new NavigationOptions();
-		opts.title = "the new title";
-		uut.setOptions("theId", opts);
-
-		assertThat(stackController.getTopBar().getTitle()).isEqualTo("the new title");
-	}
-
 	@NonNull
 	private BottomTabsController newTabs() {
 		return new BottomTabsController(activity, "tabsController");

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/OptionsApplyingTest.java

@@ -3,11 +3,14 @@ package com.reactnativenavigation.viewcontrollers;
 import android.app.Activity;
 import android.graphics.Color;
 import android.graphics.drawable.ColorDrawable;
+import android.view.View;
 
 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.mocks.TestContainerView;
 import com.reactnativenavigation.parse.NavigationOptions;
+import com.reactnativenavigation.views.TopbarContainerViewCreator;
 
+import org.json.JSONObject;
 import org.junit.Test;
 
 import static org.assertj.core.api.Java6Assertions.assertThat;
@@ -28,12 +31,13 @@ public class OptionsApplyingTest extends BaseTest {
 		activity = newActivity();
 		initialNavigationOptions = new NavigationOptions();
 		view = spy(new TestContainerView(activity));
-		uut = new ContainerViewController(activity, "containerId1", "containerName", new ContainerViewController.ContainerViewCreator() {
-			@Override
-			public ContainerViewController.ContainerView create(final Activity activity1, final String containerId, final String containerName) {
-				return view;
-			}
-		}, initialNavigationOptions);
+		uut = new ContainerViewController(activity, "containerId1", "containerName",
+				new TopbarContainerViewCreator(new ContainerViewController.ContainerViewCreator() {
+					@Override
+					public ContainerViewController.ContainerView create(final Activity activity1, final String containerId, final String containerName) {
+						return view;
+					}
+				}), initialNavigationOptions);
 	}
 
 	@Test
@@ -49,10 +53,10 @@ public class OptionsApplyingTest extends BaseTest {
 		initialNavigationOptions.title = "the title";
 		StackController stackController = new StackController(activity, "stackId");
 		stackController.push(uut);
-		assertThat(stackController.getTopBar().getTitle()).isEmpty();
+		assertThat(uut.getTopBar().getTitle()).isEmpty();
 
 		uut.onViewAppeared();
-		assertThat(stackController.getTopBar().getTitle()).isEqualTo("the title");
+		assertThat(uut.getTopBar().getTitle()).isEqualTo("the title");
 	}
 
 	@Test
@@ -67,63 +71,72 @@ public class OptionsApplyingTest extends BaseTest {
 
 	@Test
 	public void reappliesOptionsOnMerge() throws Exception {
-		StackController stackController = new StackController(activity, "stackId");
-		stackController.push(uut);
-		assertThat(stackController.getTopBar().getTitle()).isEmpty();
+		uut.onViewAppeared();
+		assertThat(uut.getTopBar().getTitle()).isEmpty();
 
 		NavigationOptions opts = new NavigationOptions();
 		opts.title = "the new title";
 		uut.mergeNavigationOptions(opts);
 
-		assertThat(stackController.getTopBar().getTitle()).isEqualTo("the new title");
+		assertThat(uut.getTopBar().getTitle()).isEqualTo("the new title");
 	}
 
 	@Test
 	public void appliesTopBackBackgroundColor() throws Exception {
-		StackController stackController = new StackController(activity, "stackId");
-		stackController.push(uut);
-		assertThat(((ColorDrawable) stackController.getTopBar().getBackground()).getColor()).isNotEqualTo(Color.RED);
+		uut.onViewAppeared();
+		//TODO: FIX TEST
+		assertThat(((ColorDrawable) uut.getTopBar().getTitleBar().getBackground()).getColor()).isNotEqualTo(Color.RED);
 
 		NavigationOptions opts = new NavigationOptions();
 		opts.topBarBackgroundColor = Color.RED;
 		uut.mergeNavigationOptions(opts);
 
-		assertThat(((ColorDrawable) stackController.getTopBar().getBackground()).getColor()).isEqualTo(Color.RED);
+		assertThat(((ColorDrawable) uut.getTopBar().getTitleBar().getBackground()).getColor()).isEqualTo(Color.RED);
 	}
 
 	@Test
 	public void appliesTopBarTextColor() throws Exception {
 		assertThat(uut.getNavigationOptions()).isSameAs(initialNavigationOptions);
 		initialNavigationOptions.title = "the title";
-		StackController stackController = new StackController(activity, "stackId");
-		stackController.push(uut);
 		uut.onViewAppeared();
-		assertThat(stackController.getTopBar().getTitleTextView().getCurrentTextColor()).isNotEqualTo(Color.RED);
+		assertThat(uut.getTopBar().getTitleTextView().getCurrentTextColor()).isNotEqualTo(Color.RED);
 
 		NavigationOptions opts = new NavigationOptions();
 		opts.title = "the title";
 		opts.topBarTextColor = Color.RED;
 		uut.mergeNavigationOptions(opts);
 
-		assertThat(stackController.getTopBar().getTitleTextView()).isNotEqualTo(null);
-		assertThat(stackController.getTopBar().getTitleTextView().getCurrentTextColor()).isEqualTo(Color.RED);
+		assertThat(uut.getTopBar().getTitleTextView()).isNotEqualTo(null);
+		assertThat(uut.getTopBar().getTitleTextView().getCurrentTextColor()).isEqualTo(Color.RED);
 	}
 
 	@Test
 	public void appliesTopBarTextSize() throws Exception {
 		assertThat(uut.getNavigationOptions()).isSameAs(initialNavigationOptions);
 		initialNavigationOptions.title = "the title";
-		StackController stackController = new StackController(activity, "stackId");
-		stackController.push(uut);
 		uut.onViewAppeared();
-		assertThat(stackController.getTopBar().getTitleTextView().getTextSize()).isNotEqualTo(18);
+		assertThat(uut.getTopBar().getTitleTextView().getTextSize()).isNotEqualTo(18);
 
 		NavigationOptions opts = new NavigationOptions();
 		opts.title = "the title";
 		opts.topBarTextFontSize = 18;
 		uut.mergeNavigationOptions(opts);
 
-		assertThat(stackController.getTopBar().getTitleTextView()).isNotEqualTo(null);
-		assertThat(stackController.getTopBar().getTitleTextView().getTextSize()).isEqualTo(18);
+		assertThat(uut.getTopBar().getTitleTextView()).isNotEqualTo(null);
+		assertThat(uut.getTopBar().getTitleTextView().getTextSize()).isEqualTo(18);
+	}
+
+	@Test
+	public void appliesTopBarHidden() throws Exception {
+		assertThat(uut.getNavigationOptions()).isSameAs(initialNavigationOptions);
+		initialNavigationOptions.title = "the title";
+		uut.onViewAppeared();
+		assertThat(uut.getTopBar().getVisibility()).isNotEqualTo(View.GONE);
+
+		NavigationOptions opts = new NavigationOptions();
+		opts.topBarHidden = NavigationOptions.BooleanOptions.True;
+		uut.mergeNavigationOptions(opts);
+
+		assertThat(uut.getTopBar().getVisibility()).isEqualTo(View.GONE);
 	}
 }

lib/ios/RNNNavigationOptions.h

@@ -26,6 +26,7 @@ extern const NSInteger BLUR_TOPBAR_TAG;
 @property (nonatomic, strong) NSNumber* statusBarHideWithTopBar;
 @property (nonatomic, strong) NSNumber* tabBarHidden;
 @property (nonatomic, strong) NSNumber* topBarBlur;
+@property (nonatomic, strong) NSNumber* animateTopBarHide;
 
 
 - (UIInterfaceOrientationMask)supportedOrientations;

lib/ios/RNNNavigationOptions.m

@@ -32,6 +32,7 @@ const NSInteger BLUR_TOPBAR_TAG = 78264802;
 	self.topBarNoBorder = [navigationOptions objectForKey:@"topBarNoBorder"];
 	self.tabBarHidden = [navigationOptions objectForKey:@"tabBarHidden"];
 	self.topBarBlur = [navigationOptions objectForKey:@"topBarBlur"];
+	self.animateTopBarHide = [navigationOptions objectForKey:@"animateTopBarHide"];
 
 	return self;
 }
@@ -49,11 +50,11 @@ const NSInteger BLUR_TOPBAR_TAG = 78264802;
 	} else {
 		viewController.navigationController.navigationBar.barTintColor = nil;
 	}
-	
+
 	if (self.title) {
 		viewController.navigationItem.title = self.title;
 	}
-	
+
 	if (self.topBarTextFontFamily || self.topBarTextColor || self.topBarTextFontSize){
 		NSMutableDictionary* navigationBarTitleTextAttributes = [NSMutableDictionary new];
 		if (self.topBarTextColor) {
@@ -70,20 +71,16 @@ const NSInteger BLUR_TOPBAR_TAG = 78264802;
 		}
 		viewController.navigationController.navigationBar.titleTextAttributes = navigationBarTitleTextAttributes;
 	}
-	
+
 	if (self.screenBackgroundColor) {
 		UIColor* screenColor = [RCTConvert UIColor:self.screenBackgroundColor];
 		viewController.view.backgroundColor = screenColor;
 	}
-	
+
 	if (self.topBarHidden){
-		if ([self.topBarHidden boolValue]) {
-			[viewController.navigationController setNavigationBarHidden:YES animated:YES];
-		} else {
-			[viewController.navigationController setNavigationBarHidden:NO animated:YES];
-		}
+		[viewController.navigationController setNavigationBarHidden:[self.topBarHidden boolValue] animated:[self.animateTopBarHide boolValue]];
 	}
-	
+
 	if (self.topBarHideOnScroll) {
 		BOOL topBarHideOnScrollBool = [self.topBarHideOnScroll boolValue];
 		if (topBarHideOnScrollBool) {
@@ -92,14 +89,14 @@ const NSInteger BLUR_TOPBAR_TAG = 78264802;
 			viewController.navigationController.hidesBarsOnSwipe = NO;
 		}
 	}
-	
+
 	if (self.topBarButtonColor) {
 		UIColor* buttonColor = [RCTConvert UIColor:self.topBarButtonColor];
 		viewController.navigationController.navigationBar.tintColor = buttonColor;
 	} else {
 		viewController.navigationController.navigationBar.tintColor = nil;
 	}
-	
+
 	if (self.tabBadge) {
 		NSString *badge = [RCTConvert NSString:self.tabBadge];
 		if (viewController.navigationController) {
@@ -108,7 +105,7 @@ const NSInteger BLUR_TOPBAR_TAG = 78264802;
 			viewController.tabBarItem.badgeValue = badge;
 		}
 	}
-	
+
 	if (self.topBarTranslucent) {
 		if ([self.topBarTranslucent boolValue]) {
 			viewController.navigationController.navigationBar.translucent = YES;
@@ -116,7 +113,7 @@ const NSInteger BLUR_TOPBAR_TAG = 78264802;
 			viewController.navigationController.navigationBar.translucent = NO;
 		}
 	}
-	
+
 	if (self.topBarNoBorder) {
 		if ([self.topBarNoBorder boolValue]) {
 			viewController.navigationController.navigationBar
@@ -126,7 +123,7 @@ const NSInteger BLUR_TOPBAR_TAG = 78264802;
 			.shadowImage = nil;
 		}
 	}
-	
+
 	if (self.statusBarBlur) {
 		UIView* curBlurView = [viewController.view viewWithTag:BLUR_STATUS_TAG];
 		if ([self.statusBarBlur boolValue]) {
@@ -142,11 +139,11 @@ const NSInteger BLUR_TOPBAR_TAG = 78264802;
 			}
 		}
 	}
-	
+
 	if (self.topBarBlur && [self.topBarBlur boolValue]) {
-		
+
 		if (![viewController.navigationController.navigationBar viewWithTag:BLUR_TOPBAR_TAG]) {
-			
+
 			[viewController.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
 			viewController.navigationController.navigationBar.shadowImage = [UIImage new];
 			UIVisualEffectView *blur = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];
@@ -157,7 +154,7 @@ const NSInteger BLUR_TOPBAR_TAG = 78264802;
 			[viewController.navigationController.navigationBar insertSubview:blur atIndex:0];
 			[viewController.navigationController.navigationBar sendSubviewToBack:blur];
 		}
-		
+
 	} else {
 		UIView *blur = [viewController.navigationController.navigationBar viewWithTag:BLUR_TOPBAR_TAG];
 		if (blur) {
@@ -190,7 +187,7 @@ const NSInteger BLUR_TOPBAR_TAG = 78264802;
 			}
 		}
 	}
-	
+
 	return supportedOrientationsMask;
 }
 

playground/src/containers/LifecycleScreen.js

@@ -19,7 +19,9 @@ class LifecycleScreen extends Component {
   }
 
   didDisappear() {
-    alert('didDisappear'); // eslint-disable-line no-alert
+    setTimeout(() => {
+      alert('didDisappear'); // eslint-disable-line no-alert
+    }, 1000);
   }
 
   componentWillUnmount() {
@@ -35,16 +37,14 @@ class LifecycleScreen extends Component {
       <View style={styles.root}>
         <Text style={styles.h1}>{`Lifecycle Screen`}</Text>
         <Text style={styles.h1}>{this.state.text}</Text>
-        <Button title="Push to test didDisappear" onPress={this.onClickPush} />
+        <Button title="Push to test didDisappear" onPress={this.onClickPush}/>
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
       </View>
     );
   }
 
   onClickPush() {
-    Navigation.push(this.props.containerId, {
-      name: 'navigation.playground.TextScreen'
-    });
+    Navigation.push(this.props.containerId, { name: 'navigation.playground.TextScreen' });
   }
 }
 module.exports = LifecycleScreen;

playground/src/containers/OptionsScreen.js

@@ -100,13 +100,15 @@ class OptionsScreen extends Component {
 
   onClickShowTopBar() {
     Navigation.setOptions(this.props.containerId, {
-      topBarHidden: false
+      topBarHidden: false,
+      animateTopBarHide: true
     });
   }
 
   onClickHideTopBar() {
     Navigation.setOptions(this.props.containerId, {
-      topBarHidden: true
+      topBarHidden: true,
+      animateTopBarHide: true
     });
   }
 }