Topbar v2 (#2413)

* readme

* doc

* topbar fix

* rm doc

* options presenter fix

* rm userless stuff

* WIP

* WIP

* WIP

* translation

* WIP

* todo

* draw under

* fix merge

* merge fix

* more merge fix

* improve calc

* animation improvement

* fix tests

* refactor

* refctor

* tests

* fix test

* anim improve

* rm outdated

* refactoring

* more refactoring

* tests

* refactor

* hotfix

* more refactoring

* refactor

* some more refactoring

* refactor

* Collapse topbar

AndroidE2E/app/src/androidTest/java/com/reactnativenavigation/e2e/androide2e/BaseTest.java

@@ -15,94 +15,100 @@ import static org.assertj.core.api.Java6Assertions.*;
 
 @RunWith(AndroidJUnit4.class)
 public abstract class BaseTest {
-	static final String PACKAGE_NAME = "com.reactnativenavigation.playground";
-	private static final long TIMEOUT = 60000;
-
-	@Before
-	public void beforeEach() throws Exception {
-		device().wakeUp();
-		device().setOrientationNatural();
-		launchTheApp();
-		assertMainShown();
-	}
-
-	@After
-	public void afterEach() throws Exception {
-		device().executeShellCommand("am force-stop " + PACKAGE_NAME);
-		device().executeShellCommand("am kill " + PACKAGE_NAME);
-	}
-
-	public UiDevice device() {
-		return UiDevice.getInstance(getInstrumentation());
-	}
-
-	public void launchTheApp() throws Exception {
-		device().executeShellCommand("am start -n " + PACKAGE_NAME + "/.MainActivity");
-		device().waitForIdle();
-		acceptOverlayPermissionIfNeeded();
-		device().wait(Until.gone(By.textContains("Please wait")), 1000 * 60 * 3);
-	}
-
-	public void assertMainShown() {
-		assertExists(By.text("React Native Navigation!"));
-	}
-
-	public void acceptOverlayPermissionIfNeeded() throws Exception {
-		if (isRequestingOverlayPermission()) {
-			if (!elementByText("Playground").exists()) {
-				scrollToText("Playground");
-			}
-			elementByText("Playground").click();
-			device().findObject(new UiSelector().checkable(true).checked(false)).click();
-			device().pressBack();
-			device().pressBack();
-		}
-	}
-
-	private boolean isRequestingOverlayPermission() {
-		return device().wait(Until.hasObject(By.pkg("com.android.settings").depth(0)), 300);
-	}
-
-	public UiObject elementByText(String text) {
-		return device().findObject(new UiSelector().text(text));
-	}
-
-	public UiObject elementByTextContains(String text) {
-		return device().findObject(new UiSelector().textContains(text));
-	}
-
-	public void scrollToText(String txt) throws Exception {
-		new UiScrollable(new UiSelector().scrollable(true)).scrollTextIntoView(txt);
-	}
-
-	public void assertExists(BySelector selector) {
-		assertThat(device().wait(Until.hasObject(selector), TIMEOUT)).withFailMessage("expected %1$s to be visible", selector).isTrue();
-		assertThat(device().findObject(selector).getVisibleCenter().x).isPositive().isLessThan(device().getDisplayWidth());
-		assertThat(device().findObject(selector).getVisibleCenter().y).isPositive().isLessThan(device().getDisplayHeight());
-	}
-
-	public Bitmap captureScreenshot() throws Exception {
-		File file = File.createTempFile("tmpE2E", "png");
-		device().takeScreenshot(file);
-		Bitmap bitmap = BitmapFactory.decodeFile(file.getAbsolutePath());
-		file.delete();
-		return bitmap;
-	}
-
-	public void swipeOpenFromLeft() {
-		int w = device().getDisplayWidth();
-		int h = device().getDisplayHeight();
-		device().swipe(5, h / 2, w / 2, h / 2, 10);
-	}
-
-	public void swipeOpenFromRight() {
-		int w = device().getDisplayWidth();
-		int h = device().getDisplayHeight();
-		device().swipe(w - 5, h / 2, w / 2, h / 2, 10);
-	}
-
-	public boolean isDebug() throws Exception {
-		PackageInfo packageInfo = getInstrumentation().getTargetContext().getPackageManager().getPackageInfo("com.reactnativenavigation.playground", 0);
-		return (packageInfo.applicationInfo.flags & ApplicationInfo.FLAG_DEBUGGABLE) != 0;
-	}
+    static final String PACKAGE_NAME = "com.reactnativenavigation.playground";
+    private static final long TIMEOUT = 60000;
+
+    @Before
+    public void beforeEach() throws Exception {
+        device().wakeUp();
+        device().setOrientationNatural();
+        launchTheApp();
+        assertMainShown();
+    }
+
+    @After
+    public void afterEach() throws Exception {
+        device().executeShellCommand("am force-stop " + PACKAGE_NAME);
+        device().executeShellCommand("am kill " + PACKAGE_NAME);
+    }
+
+    public UiDevice device() {
+        return UiDevice.getInstance(getInstrumentation());
+    }
+
+    public void launchTheApp() throws Exception {
+        device().executeShellCommand("am start -n " + PACKAGE_NAME + "/.MainActivity");
+        device().waitForIdle();
+        acceptOverlayPermissionIfNeeded();
+        device().wait(Until.gone(By.textContains("Please wait")), 1000 * 60 * 3);
+    }
+
+    public void assertMainShown() {
+        assertExists(By.text("React Native Navigation!"));
+    }
+
+    public void acceptOverlayPermissionIfNeeded() throws Exception {
+        if (isRequestingOverlayPermission()) {
+            if (!elementByText("Playground").exists()) {
+                scrollToText("Playground");
+            }
+            elementByText("Playground").click();
+            device().findObject(new UiSelector().checkable(true).checked(false)).click();
+            device().pressBack();
+            device().pressBack();
+        }
+    }
+
+    private boolean isRequestingOverlayPermission() {
+        return device().wait(Until.hasObject(By.pkg("com.android.settings").depth(0)), 300);
+    }
+
+    public UiObject elementByText(String text) {
+        return device().findObject(new UiSelector().text(text));
+    }
+
+    public UiObject elementByTextContains(String text) {
+        return device().findObject(new UiSelector().textContains(text));
+    }
+
+    public void scrollToText(String txt) throws Exception {
+        new UiScrollable(new UiSelector().scrollable(true)).scrollTextIntoView(txt);
+    }
+
+    public void assertExists(BySelector selector) {
+        assertThat(device().wait(Until.hasObject(selector), TIMEOUT)).withFailMessage("expected %1$s to be visible", selector).isTrue();
+        assertThat(device().findObject(selector).getVisibleCenter().x).isPositive().isLessThan(device().getDisplayWidth());
+        assertThat(device().findObject(selector).getVisibleCenter().y).isPositive().isLessThan(device().getDisplayHeight());
+    }
+
+    public Bitmap captureScreenshot() throws Exception {
+        File file = File.createTempFile("tmpE2E", "png");
+        device().takeScreenshot(file);
+        Bitmap bitmap = BitmapFactory.decodeFile(file.getAbsolutePath());
+        file.delete();
+        return bitmap;
+    }
+
+    public void swipeOpenFromLeft() {
+        int w = device().getDisplayWidth();
+        int h = device().getDisplayHeight();
+        device().swipe(5, h / 2, w / 2, h / 2, 10);
+    }
+
+    public void swipeOpenFromRight() {
+        int w = device().getDisplayWidth();
+        int h = device().getDisplayHeight();
+        device().swipe(w - 5, h / 2, w / 2, h / 2, 10);
+    }
+
+    public void swipeUp() {
+        int w = device().getDisplayWidth();
+        int h = device().getDisplayHeight();
+        device().drag(w / 2, h / 2 + 100, w / 2, h / 2 - 100, 10);
+    }
+
+    public boolean isDebug() throws Exception {
+        PackageInfo packageInfo = getInstrumentation().getTargetContext().getPackageManager().getPackageInfo("com.reactnativenavigation.playground", 0);
+        return (packageInfo.applicationInfo.flags & ApplicationInfo.FLAG_DEBUGGABLE) != 0;
+    }
 }

AndroidE2E/app/src/androidTest/java/com/reactnativenavigation/e2e/androide2e/NavigationOptionsTest.java

@@ -1,6 +1,7 @@
 package com.reactnativenavigation.e2e.androide2e;
 
 import android.support.test.uiautomator.By;
+import android.support.test.uiautomator.Until;
 
 import org.junit.Test;
 
@@ -8,30 +9,30 @@ import static org.assertj.core.api.Java6Assertions.assertThat;
 
 public class NavigationOptionsTest extends BaseTest {
 
-	@Test
-	public void declareNavigationStyleOnContainerComponent() throws Exception {
-		elementByText("PUSH OPTIONS SCREEN").click();
-		assertExists(By.text("Static Title"));
-	}
-
-	@Test
-	public void setTitleDynamically() throws Exception {
-		elementByText("PUSH OPTIONS SCREEN").click();
-		assertExists(By.text("Static Title"));
-		elementByText("DYNAMIC OPTIONS").click();
-		assertExists(By.text("Dynamic Title"));
-	}
-
-//	@Test
-//	public void testTopBarHidden() throws Exception {
-//		elementByText("PUSH OPTIONS SCREEN").click();
-//		int topWithNavigation = elementByText("HIDE TOP BAR").getVisibleBounds().top;
-//		elementByText("HIDE TOP BAR").click();
-//		int topWithoutNavigation = elementByText("HIDE TOP BAR").getVisibleBounds().top;
-//		assertThat(topWithoutNavigation).isLessThan(topWithNavigation);
-//		elementByText("SHOW TOP BAR").click();
-//		assertExists(By.text("Static Title"));
-//	}
+    @Test
+    public void declareNavigationStyleOnContainerComponent() throws Exception {
+        elementByText("PUSH OPTIONS SCREEN").click();
+        assertExists(By.text("Static Title"));
+    }
+
+    @Test
+    public void setTitleDynamically() throws Exception {
+        elementByText("PUSH OPTIONS SCREEN").click();
+        assertExists(By.text("Static Title"));
+        elementByText("DYNAMIC OPTIONS").click();
+        assertExists(By.text("Dynamic Title"));
+    }
+
+    @Test
+    public void testTopBarHidden() throws Exception {
+        elementByText("PUSH OPTIONS SCREEN").click();
+        int topWithNavigation = elementByText("HIDE TOP BAR").getVisibleBounds().top;
+        elementByText("HIDE TOP BAR").click();
+        int topWithoutNavigation = elementByText("HIDE TOP BAR").getVisibleBounds().top;
+        assertThat(topWithoutNavigation).isLessThan(topWithNavigation);
+        elementByText("SHOW TOP BAR").click();
+        assertExists(By.text("Static Title"));
+    }
 
     @Test
     public void testRightButtons() throws Exception {
@@ -39,4 +40,14 @@ public class NavigationOptionsTest extends BaseTest {
         assertExists(By.text("ONE"));
         elementByText("ONE").click();
     }
+
+    @Test
+    public void testTopBarCollapse() throws Exception {
+        elementByText("PUSH OPTIONS SCREEN").click();
+        elementByText("SCROLLVIEW SCREEN").click();
+        assertExists(By.text("Collapse"));
+        elementByText("TOGGLE TOP BAR HIDE ON SCROLL").click();
+        swipeUp();
+        assertThat(device().hasObject(By.text("Collapse"))).isFalse();
+    }
 }

lib/android/app/build.gradle

@@ -70,5 +70,5 @@ dependencies {
     testImplementation 'org.robolectric:robolectric:3.5.1'
     testImplementation 'org.assertj:assertj-core:3.8.0'
     testImplementation 'com.squareup.assertj:assertj-android:1.1.1'
-    testImplementation 'org.mockito:mockito-core:2.12.0'
+    testImplementation 'org.mockito:mockito-core:2.13.0'
 }

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

@@ -0,0 +1,83 @@
+package com.reactnativenavigation.anim;
+
+import android.animation.Animator;
+import android.animation.AnimatorListenerAdapter;
+import android.animation.AnimatorSet;
+import android.animation.ObjectAnimator;
+import android.animation.TimeInterpolator;
+import android.content.Context;
+import android.support.annotation.Nullable;
+import android.util.DisplayMetrics;
+import android.view.View;
+import android.view.ViewGroup;
+import android.view.WindowManager;
+import android.view.animation.AccelerateInterpolator;
+import android.view.animation.DecelerateInterpolator;
+
+import com.reactnativenavigation.utils.UiUtils;
+import com.reactnativenavigation.views.TopBar;
+
+@SuppressWarnings("ResourceType")
+public class NavigationAnimator {
+
+    public interface NavigationAnimationListener {
+        void onAnimationEnd();
+    }
+
+    private static final int DURATION = 300;
+    private static final DecelerateInterpolator DECELERATE_INTERPOLATOR = new DecelerateInterpolator();
+    private static final AccelerateInterpolator ACCELERATE_INTERPOLATOR = new AccelerateInterpolator();
+    private float translationY;
+
+    public NavigationAnimator(Context context) {
+        translationY = UiUtils.getWindowHeight(context);
+    }
+
+    public void animatePush(final View view, @Nullable final NavigationAnimationListener animationListener) {
+        view.setVisibility(View.INVISIBLE);
+        ObjectAnimator alpha = ObjectAnimator.ofFloat(view, View.ALPHA, 0, 1);
+        alpha.setInterpolator(DECELERATE_INTERPOLATOR);
+
+        AnimatorSet set = new AnimatorSet();
+        set.addListener(new AnimatorListenerAdapter() {
+            @Override
+            public void onAnimationStart(Animator animation) {
+                view.setVisibility(View.VISIBLE);
+            }
+
+            @Override
+            public void onAnimationEnd(Animator animation) {
+                if (animationListener != null) {
+                    animationListener.onAnimationEnd();
+                }
+            }
+        });
+        ObjectAnimator translationY = ObjectAnimator.ofFloat(view, View.TRANSLATION_Y, this.translationY, 0);
+        translationY.setInterpolator(DECELERATE_INTERPOLATOR);
+        translationY.setDuration(DURATION);
+        alpha.setDuration(DURATION);
+        set.playTogether(translationY, alpha);
+        set.start();
+    }
+
+    public void animatePop(View view, @Nullable final NavigationAnimationListener animationListener) {
+        ObjectAnimator alpha = ObjectAnimator.ofFloat(view, View.ALPHA, 1, 0);
+        alpha.setInterpolator(ACCELERATE_INTERPOLATOR);
+
+        AnimatorSet set = new AnimatorSet();
+        set.addListener(new AnimatorListenerAdapter() {
+            @Override
+            public void onAnimationEnd(Animator animation) {
+                if (animationListener != null) {
+                    animationListener.onAnimationEnd();
+                }
+            }
+        });
+        ObjectAnimator translationY = ObjectAnimator.ofFloat(view, View.TRANSLATION_Y, 0, this.translationY);
+        translationY.setInterpolator(ACCELERATE_INTERPOLATOR);
+        translationY.setDuration(DURATION);
+        alpha.setDuration(DURATION);
+        set.playTogether(translationY, alpha);
+        set.start();
+    }
+}

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

@@ -1,210 +0,0 @@
-package com.reactnativenavigation.anim;
-
-import android.animation.Animator;
-import android.animation.AnimatorSet;
-import android.animation.ObjectAnimator;
-import android.animation.ValueAnimator;
-import android.content.Context;
-import android.support.annotation.Nullable;
-import android.util.DisplayMetrics;
-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.LinearLayout;
-
-import com.reactnativenavigation.views.TopBar;
-
-@SuppressWarnings("ResourceType")
-public class StackAnimator {
-
-	public interface StackAnimationListener {
-		void onAnimationEnd();
-	}
-
-	private static final int DURATION = 300;
-	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;
-
-	public StackAnimator(Context context) {
-		translationY = getWindowHeight(context);
-	}
-
-	public void animatePush(final View view, @Nullable final StackAnimationListener animationListener) {
-		view.setVisibility(View.INVISIBLE);
-		ObjectAnimator alpha = ObjectAnimator.ofFloat(view, View.ALPHA, 0, 1);
-		alpha.setInterpolator(DECELERATE_INTERPOLATOR);
-
-		AnimatorSet set = new AnimatorSet();
-		set.addListener(new Animator.AnimatorListener() {
-			@Override
-			public void onAnimationStart(Animator animation) {
-				view.setVisibility(View.VISIBLE);
-			}
-
-			@Override
-			public void onAnimationEnd(Animator animation) {
-				if (animationListener != null) {
-					animationListener.onAnimationEnd();
-				}
-			}
-
-			@Override
-			public void onAnimationCancel(Animator animation) {
-
-			}
-
-			@Override
-			public void onAnimationRepeat(Animator animation) {
-
-			}
-		});
-		ObjectAnimator translationY = ObjectAnimator.ofFloat(view, View.TRANSLATION_Y, this.translationY, 0);
-		translationY.setInterpolator(DECELERATE_INTERPOLATOR);
-		translationY.setDuration(DURATION);
-		alpha.setDuration(DURATION);
-		set.playTogether(translationY, alpha);
-		set.start();
-	}
-
-	public void animatePop(View view, @Nullable final StackAnimationListener animationListener) {
-		ObjectAnimator alpha = ObjectAnimator.ofFloat(view, View.ALPHA, 1, 0);
-		alpha.setInterpolator(ACCELERATE_INTERPOLATOR);
-
-		AnimatorSet set = new AnimatorSet();
-		set.addListener(new Animator.AnimatorListener() {
-			@Override
-			public void onAnimationStart(Animator animation) {
-
-			}
-
-			@Override
-			public void onAnimationEnd(Animator animation) {
-				if (animationListener != null) {
-					animationListener.onAnimationEnd();
-				}
-			}
-
-			@Override
-			public void onAnimationCancel(Animator animation) {
-
-			}
-
-			@Override
-			public void onAnimationRepeat(Animator animation) {
-
-			}
-		});
-		ObjectAnimator translationY = ObjectAnimator.ofFloat(view, View.TRANSLATION_Y, 0, this.translationY);
-		translationY.setInterpolator(ACCELERATE_INTERPOLATOR);
-		translationY.setDuration(DURATION);
-		alpha.setDuration(DURATION);
-		set.playTogether(translationY, alpha);
-		set.start();
-	}
-
-	private float getWindowHeight(Context context) {
-		DisplayMetrics metrics = new DisplayMetrics();
-		WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
-		windowManager.getDefaultDisplay().getMetrics(metrics);
-		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(valueAnimator -> {
-            int val = (Integer) valueAnimator.getAnimatedValue();
-			ViewGroup.LayoutParams 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) {
-                ViewGroup.LayoutParams layoutParams = container.getLayoutParams();
-				layoutParams.height = ViewGroup.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(valueAnimator -> {
-            int val = (Integer) valueAnimator.getAnimatedValue();
-			ViewGroup.LayoutParams 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) {
-                ViewGroup.LayoutParams layoutParams = container.getLayoutParams();
-				layoutParams.height = ViewGroup.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/anim/TopBarAnimator.java

@@ -0,0 +1,82 @@
+package com.reactnativenavigation.anim;
+
+
+import android.animation.Animator;
+import android.animation.AnimatorListenerAdapter;
+import android.animation.ObjectAnimator;
+import android.animation.TimeInterpolator;
+import android.view.View;
+import android.view.ViewGroup;
+import android.view.animation.AccelerateInterpolator;
+import android.view.animation.DecelerateInterpolator;
+
+import com.reactnativenavigation.views.TopBar;
+
+public class TopBarAnimator {
+
+    private static final int DURATION_TOPBAR = 300;
+    private DecelerateInterpolator decelerateInterpolator;
+    private AccelerateInterpolator accelerateInterpolator;
+
+    private TopBar topBar;
+    private View contentView;
+
+    public TopBarAnimator(TopBar topBar, View contentView) {
+        decelerateInterpolator = new DecelerateInterpolator();
+        accelerateInterpolator = new AccelerateInterpolator();
+        this.topBar = topBar;
+        this.contentView = contentView;
+    }
+
+    public void show() {
+        show(-1 * topBar.getMeasuredHeight(), decelerateInterpolator, DURATION_TOPBAR);
+    }
+
+    public void show(float startTranslation, TimeInterpolator interpolator, int duration) {
+        ObjectAnimator topbarAnim = ObjectAnimator.ofFloat(topBar, View.TRANSLATION_Y, startTranslation, 0);
+        topbarAnim.setInterpolator(interpolator);
+        topbarAnim.setDuration(duration);
+
+        topbarAnim.addListener(new AnimatorListenerAdapter() {
+
+            @Override
+            public void onAnimationStart(Animator animation) {
+                topBar.setVisibility(View.VISIBLE);
+            }
+
+            @Override
+            public void onAnimationEnd(Animator animation) {
+                if (contentView != null) {
+                    ViewGroup.LayoutParams layoutParams = contentView.getLayoutParams();
+                    layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENT;
+                    contentView.setLayoutParams(layoutParams);
+                }
+            }
+        });
+        topbarAnim.start();
+    }
+
+    public void hide() {
+        hide(0, accelerateInterpolator, DURATION_TOPBAR);
+    }
+
+    public void hide(float startTranslation, TimeInterpolator interpolator, int duration) {
+        ObjectAnimator topbarAnim = ObjectAnimator.ofFloat(topBar, View.TRANSLATION_Y, startTranslation, -1 * topBar.getMeasuredHeight());
+        topbarAnim.setInterpolator(interpolator);
+        topbarAnim.setDuration(duration);
+
+        topbarAnim.addListener(new AnimatorListenerAdapter() {
+            @Override
+            public void onAnimationEnd(Animator animation) {
+                if (contentView != null) {
+                    ViewGroup.LayoutParams layoutParams = contentView.getLayoutParams();
+                    layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENT;
+                    contentView.setLayoutParams(layoutParams);
+                }
+
+                topBar.setVisibility(View.GONE);
+            }
+        });
+        topbarAnim.start();
+    }
+}

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

@@ -0,0 +1,93 @@
+package com.reactnativenavigation.anim;
+
+
+import android.view.View;
+
+import com.facebook.react.uimanager.events.EventDispatcher;
+import com.reactnativenavigation.interfaces.ScrollEventListener;
+import com.reactnativenavigation.utils.UiThread;
+import com.reactnativenavigation.views.TopBar;
+
+public class TopBarCollapseBehavior {
+    private TopBar topBar;
+
+    private EventDispatcher eventDispatcher;
+    private ScrollEventListener scrollEventListener;
+    private boolean dragStarted;
+    private TopBarAnimator animator;
+
+    public TopBarCollapseBehavior(EventDispatcher eventDispatcher, TopBar topBar) {
+        this.eventDispatcher = eventDispatcher;
+        this.topBar = topBar;
+        this.animator = new TopBarAnimator(topBar, null);
+    }
+
+    public void enableCollapse() {
+        scrollEventListener = (new ScrollEventListener(new ScrollEventListener.OnVerticalScrollListener() {
+            @Override
+            public void onVerticalScroll(int scrollY, int oldScrollY) {
+                if (scrollY < 0) return;
+                if (!dragStarted) return;
+
+                final int scrollDiff = calcScrollDiff(scrollY, oldScrollY, topBar.getMeasuredHeight());
+                final float nextTranslation = topBar.getTranslationY() - scrollDiff;
+                if (scrollDiff < 0) {
+                    down(topBar.getMeasuredHeight(), nextTranslation);
+                } else {
+                    up(topBar.getMeasuredHeight(), nextTranslation);
+                }
+            }
+
+            @Override
+            public void onDrag(boolean started, double velocity) {
+                dragStarted = started;
+                UiThread.post(() -> {
+                    if (!dragStarted) {
+                        if (velocity > 0) {
+                            animator.show(topBar.getTranslationY(), null, 100);
+                        } else {
+                            animator.hide(topBar.getTranslationY(), null, 100);
+                        }
+                    }
+                });
+            }
+        }));
+        if (eventDispatcher != null) {
+            eventDispatcher.addListener(scrollEventListener);
+        }
+    }
+
+    private void up(int measuredHeight, float nextTranslation) {
+        if (nextTranslation < -measuredHeight && topBar.getVisibility() == View.VISIBLE) {
+            topBar.setVisibility(View.GONE);
+            topBar.setTranslationY(-measuredHeight);
+        } else if (nextTranslation > -measuredHeight && nextTranslation <= 0) {
+            topBar.setTranslationY(nextTranslation);
+        }
+    }
+
+    private void down(int measuredHeight, float nextTranslation) {
+        if (topBar.getVisibility() == View.GONE && nextTranslation > -measuredHeight) {
+            topBar.setVisibility(View.VISIBLE);
+            topBar.setTranslationY(nextTranslation);
+        } else if (nextTranslation <= 0 && nextTranslation >= -measuredHeight) {
+            topBar.setTranslationY(nextTranslation);
+        }
+    }
+
+    private int calcScrollDiff(int scrollY, int oldScrollY, int measuredHeight) {
+        int diff = scrollY - oldScrollY;
+        if (Math.abs(diff) > measuredHeight) {
+            diff = (Math.abs(diff) / diff) * measuredHeight;
+        }
+        return diff;
+    }
+
+    public void disableCollapse() {
+        if (eventDispatcher != null) {
+            eventDispatcher.removeListener(scrollEventListener);
+        }
+        topBar.setVisibility(View.VISIBLE);
+        topBar.setTranslationY(0);
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/interfaces/ScrollEventListener.java

@@ -0,0 +1,49 @@
+package com.reactnativenavigation.interfaces;
+
+import com.facebook.react.uimanager.events.Event;
+import com.facebook.react.uimanager.events.EventDispatcherListener;
+import com.facebook.react.views.scroll.ScrollEvent;
+import com.reactnativenavigation.utils.ReflectionUtils;
+
+public class ScrollEventListener implements EventDispatcherListener {
+
+    private OnVerticalScrollListener verticalScrollListener;
+    private int prevScrollY = -1;
+
+    public interface OnVerticalScrollListener {
+        void onVerticalScroll(int scrollY, int oldScrollY);
+
+        void onDrag(boolean started, double velocity);
+    }
+
+    public ScrollEventListener(OnVerticalScrollListener verticalScrollListener) {
+        this.verticalScrollListener = verticalScrollListener;
+    }
+
+    @Override
+    public void onEventDispatch(Event event) {
+        if (event instanceof ScrollEvent) {
+            handleScrollEvent((ScrollEvent) event);
+        }
+    }
+
+    private void handleScrollEvent(ScrollEvent event) {
+        try {
+            if ("topScroll".equals(event.getEventName())) {
+                int scrollY = (int) ReflectionUtils.getDeclaredField(event, "mScrollY");
+                verticalScrollListener.onVerticalScroll(scrollY, prevScrollY);
+                if (scrollY != prevScrollY) {
+                    prevScrollY = scrollY;
+                }
+            } else if ("topScrollBeginDrag".equals(event.getEventName())) {
+                double velocity = (double) ReflectionUtils.getDeclaredField(event, "mYVelocity");
+                verticalScrollListener.onDrag(true, velocity);
+            } else if ("topScrollEndDrag".equals(event.getEventName())) {
+                double velocity = (double) ReflectionUtils.getDeclaredField(event, "mYVelocity");
+                verticalScrollListener.onDrag(false, velocity);
+            }
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+    }
+}

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

@@ -13,52 +13,64 @@ import java.util.ArrayList;
 
 public class TopBarOptions implements DEFAULT_VALUES {
 
-	public static TopBarOptions parse(TypefaceLoader typefaceManager, JSONObject json) {
-		TopBarOptions options = new TopBarOptions();
-		if (json == null) return options;
+    public static TopBarOptions parse(TypefaceLoader typefaceManager, JSONObject json) {
+        TopBarOptions options = new TopBarOptions();
+        if (json == null) return options;
 
-		options.title = json.optString("title", NO_VALUE);
-		options.backgroundColor = json.optInt("backgroundColor", NO_COLOR_VALUE);
-		options.textColor = json.optInt("textColor", NO_COLOR_VALUE);
-		options.textFontSize = (float) json.optDouble("textFontSize", NO_FLOAT_VALUE);
-		options.textFontFamily = typefaceManager.getTypeFace(json.optString("textFontFamily", NO_VALUE));
-		options.hidden = NavigationOptions.BooleanOptions.parse(json.optString("hidden"));
-		options.animateHide = NavigationOptions.BooleanOptions.parse(json.optString("animateHide"));
-		options.rightButtons = Button.parseJsonArray(json.optJSONArray("rightButtons"));
-		options.leftButtons = Button.parseJsonArray(json.optJSONArray("leftButtons"));
+        options.title = json.optString("title", NO_VALUE);
+        options.backgroundColor = json.optInt("backgroundColor", NO_COLOR_VALUE);
+        options.textColor = json.optInt("textColor", NO_COLOR_VALUE);
+        options.textFontSize = (float) json.optDouble("textFontSize", NO_FLOAT_VALUE);
+        options.textFontFamily = typefaceManager.getTypeFace(json.optString("textFontFamily", NO_VALUE));
+        options.hidden = NavigationOptions.BooleanOptions.parse(json.optString("hidden"));
+        options.animateHide = NavigationOptions.BooleanOptions.parse(json.optString("animateHide"));
+        options.hideOnScroll = NavigationOptions.BooleanOptions.parse(json.optString("hideOnScroll"));
+        options.drawBehind = NavigationOptions.BooleanOptions.parse(json.optString("drawBehind"));
+        options.rightButtons = Button.parseJsonArray(json.optJSONArray("rightButtons"));
+        options.leftButtons = Button.parseJsonArray(json.optJSONArray("leftButtons"));
 
-		return options;
-	}
+        return options;
+    }
 
-	public String title = NO_VALUE;
-	@ColorInt public int backgroundColor = NO_COLOR_VALUE;
-	@ColorInt public int textColor = NO_COLOR_VALUE;
-	public float textFontSize = NO_FLOAT_VALUE;
-	@Nullable public Typeface textFontFamily;
-	public NavigationOptions.BooleanOptions hidden = NavigationOptions.BooleanOptions.False;
-	public NavigationOptions.BooleanOptions animateHide = NavigationOptions.BooleanOptions.False;
-	public ArrayList<Button> leftButtons;
-	public ArrayList<Button> rightButtons;
+    public String title = NO_VALUE;
+    @ColorInt public int backgroundColor = NO_COLOR_VALUE;
+    @ColorInt public int textColor = NO_COLOR_VALUE;
+    public float textFontSize = NO_FLOAT_VALUE;
+    @Nullable public Typeface textFontFamily;
+    public NavigationOptions.BooleanOptions hidden = NavigationOptions.BooleanOptions.NoValue;
+    public NavigationOptions.BooleanOptions animateHide = NavigationOptions.BooleanOptions.NoValue;
+    public NavigationOptions.BooleanOptions hideOnScroll = NavigationOptions.BooleanOptions.NoValue;
+    public NavigationOptions.BooleanOptions drawBehind = NavigationOptions.BooleanOptions.NoValue;
+    public ArrayList<Button> leftButtons;
+    public ArrayList<Button> rightButtons;
 
-	void mergeWith(final TopBarOptions other) {
-		if (!NO_VALUE.equals(other.title)) title = other.title;
-		if (other.backgroundColor != NO_COLOR_VALUE)
-			backgroundColor = other.backgroundColor;
-		if (other.textColor != NO_COLOR_VALUE)
-			textColor = other.textColor;
-		if (other.textFontSize != NO_FLOAT_VALUE)
-			textFontSize = other.textFontSize;
-		if (other.textFontFamily != null)
-			textFontFamily = other.textFontFamily;
-		if (other.hidden != NavigationOptions.BooleanOptions.NoValue)
-			hidden = other.hidden;
-		if (other.animateHide != NavigationOptions.BooleanOptions.NoValue)
-			animateHide = other.animateHide;
-		if(other.leftButtons != null)
-			leftButtons = other.leftButtons;
-		if(other.rightButtons != null)
-			rightButtons = other.rightButtons;
-	}
+    void mergeWith(final TopBarOptions other) {
+        if (!NO_VALUE.equals(other.title)) title = other.title;
+        if (other.backgroundColor != NO_COLOR_VALUE)
+            backgroundColor = other.backgroundColor;
+        if (other.textColor != NO_COLOR_VALUE)
+            textColor = other.textColor;
+        if (other.textFontSize != NO_FLOAT_VALUE)
+            textFontSize = other.textFontSize;
+        if (other.textFontFamily != null)
+            textFontFamily = other.textFontFamily;
+        if (other.hidden != NavigationOptions.BooleanOptions.NoValue) {
+            hidden = other.hidden;
+        }
+        if (other.animateHide != NavigationOptions.BooleanOptions.NoValue) {
+            animateHide = other.animateHide;
+        }
+        if (other.hideOnScroll != NavigationOptions.BooleanOptions.NoValue) {
+            hideOnScroll = other.hideOnScroll;
+        }
+        if (other.drawBehind != NavigationOptions.BooleanOptions.NoValue) {
+            drawBehind = other.drawBehind;
+        }
+        if (other.leftButtons != null)
+            leftButtons = other.leftButtons;
+        if (other.rightButtons != null)
+            rightButtons = other.rightButtons;
+    }
 
     void mergeWithDefault(TopBarOptions defaultOptions) {
         if (NO_VALUE.equals(title))
@@ -75,9 +87,13 @@ public class TopBarOptions implements DEFAULT_VALUES {
             hidden = defaultOptions.hidden;
         if (animateHide == NavigationOptions.BooleanOptions.NoValue)
             animateHide = defaultOptions.animateHide;
-		if(leftButtons == null)
-			leftButtons = defaultOptions.leftButtons;
-		if(rightButtons == null)
-			rightButtons = defaultOptions.rightButtons;
+        if (hideOnScroll == NavigationOptions.BooleanOptions.NoValue)
+            hideOnScroll = defaultOptions.hideOnScroll;
+        if (drawBehind == NavigationOptions.BooleanOptions.NoValue)
+            drawBehind = defaultOptions.drawBehind;
+        if (leftButtons == null)
+            leftButtons = defaultOptions.leftButtons;
+        if (rightButtons == null)
+            rightButtons = defaultOptions.rightButtons;
     }
 }

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

@@ -1,27 +1,26 @@
 package com.reactnativenavigation.presentation;
 
-import android.view.View;
-
-import com.reactnativenavigation.anim.StackAnimator;
 import com.reactnativenavigation.parse.Button;
 import com.reactnativenavigation.parse.NavigationOptions;
 import com.reactnativenavigation.parse.TopBarOptions;
 import com.reactnativenavigation.parse.TopTabOptions;
 import com.reactnativenavigation.parse.TopTabsOptions;
+import com.reactnativenavigation.views.Container;
 import com.reactnativenavigation.views.TopBar;
 
 import java.util.ArrayList;
 
+import static com.reactnativenavigation.parse.NavigationOptions.BooleanOptions.False;
+import static com.reactnativenavigation.parse.NavigationOptions.BooleanOptions.True;
+
 public class OptionsPresenter {
 
-	private final StackAnimator animator;
-    private View contentView;
+    private Container reactContainer;
     private TopBar topBar;
 
-    public OptionsPresenter(TopBar topBar, View contentView) {
-        this.topBar = topBar;
-        this.contentView = contentView;
-        animator = new StackAnimator(topBar.getContext());
+    public OptionsPresenter(Container reactContainer) {
+        this.reactContainer = reactContainer;
+        this.topBar = reactContainer.getTopBar();
     }
 
     public void applyOptions(NavigationOptions options) {
@@ -39,34 +38,23 @@ public class OptionsPresenter {
 
         topBar.setTitleTypeface(options.textFontFamily);
         if (options.hidden == NavigationOptions.BooleanOptions.True) {
-            hideTopBar(options.animateHide);
+            topBar.hide(options.animateHide);
         }
         if (options.hidden == NavigationOptions.BooleanOptions.False) {
-            showTopBar(options.animateHide);
+            topBar.show(options.animateHide);
+        }
+        if (options.drawBehind == True) {
+            reactContainer.drawBehindTopBar();
+        } else if (options.drawBehind == False) {
+            reactContainer.drawBelowTopBar();
         }
-    }
-
-	private void showTopBar(NavigationOptions.BooleanOptions animated) {
-		if (topBar.getVisibility() == View.VISIBLE) {
-			return;
-		}
-		if (animated == NavigationOptions.BooleanOptions.True) {
-			animator.animateShowTopBar(topBar, contentView);
-		} else {
-			topBar.setVisibility(View.VISIBLE);
-		}
-	}
 
-	private void hideTopBar(NavigationOptions.BooleanOptions animated) {
-		if (topBar.getVisibility() == View.GONE) {
-			return;
-		}
-		if (animated == NavigationOptions.BooleanOptions.True) {
-			animator.animateHideTopBar(topBar, contentView);
-		} else {
-			topBar.setVisibility(View.GONE);
-		}
-	}
+        if (options.hideOnScroll == True) {
+            topBar.enableCollapse();
+        } else if (options.hideOnScroll == False) {
+            topBar.disableCollapse();
+        }
+    }
 
     private void applyButtons(ArrayList<Button> leftButtons, ArrayList<Button> rightButtons) {
         topBar.setButtons(leftButtons, rightButtons);

lib/android/app/src/main/java/com/reactnativenavigation/utils/UiUtils.java

@@ -1,12 +1,15 @@
 package com.reactnativenavigation.utils;
 
+import android.content.Context;
 import android.graphics.PorterDuff;
 import android.graphics.PorterDuffColorFilter;
 import android.graphics.drawable.Drawable;
 import android.os.Handler;
 import android.os.Looper;
+import android.util.DisplayMetrics;
 import android.view.View;
 import android.view.ViewTreeObserver;
+import android.view.WindowManager;
 
 public class UiUtils {
 	public static void runOnPreDrawOnce(final View view, final Runnable task) {
@@ -27,4 +30,13 @@ public class UiUtils {
 	public static void runOnMainThread(Runnable runnable) {
 		new Handler(Looper.getMainLooper()).post(runnable);
 	}
+
+	public static float getWindowHeight(Context context) {
+		DisplayMetrics metrics = new DisplayMetrics();
+		WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
+		if (windowManager != null) {
+			windowManager.getDefaultDisplay().getMetrics(metrics);
+		}
+		return metrics.heightPixels;
+	}
 }

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

@@ -3,6 +3,7 @@ package com.reactnativenavigation.viewcontrollers;
 import android.app.Activity;
 import android.support.annotation.NonNull;
 import android.support.annotation.RestrictTo;
+import android.util.Log;
 import android.view.View;
 
 import com.reactnativenavigation.parse.NavigationOptions;
@@ -15,85 +16,90 @@ public class ContainerViewController extends ViewController implements Navigatio
     public interface ReactViewCreator {
 
         IReactView create(Activity activity, String containerId, String containerName);
-	}
+    }
 
-	public interface IReactView {
+    public interface IReactView {
 
-		boolean isReady();
+        boolean isReady();
 
-		View asView();
+        View asView();
 
-		void destroy();
+        void destroy();
 
-		void sendContainerStart();
+        void sendContainerStart();
 
-		void sendContainerStop();
+        void sendContainerStop();
 
         void sendOnNavigationButtonPressed(String buttonId);
     }
 
-	private final String containerName;
-
-	private final ReactViewCreator viewCreator;
-	private NavigationOptions navigationOptions;
-	private ReactContainer container;
-
-	public ContainerViewController(final Activity activity,
-								   final String id,
-								   final String containerName,
-								   final ReactViewCreator viewCreator,
-								   final NavigationOptions initialNavigationOptions) {
-		super(activity, id);
-		this.containerName = containerName;
-		this.viewCreator = viewCreator;
-		this.navigationOptions = initialNavigationOptions;
-	}
+    private final String containerName;
+
+    private final ReactViewCreator viewCreator;
+    private NavigationOptions navigationOptions;
+    private ReactContainer container;
+
+    public ContainerViewController(final Activity activity,
+                                   final String id,
+                                   final String containerName,
+                                   final ReactViewCreator viewCreator,
+                                   final NavigationOptions initialNavigationOptions) {
+        super(activity, id);
+        this.containerName = containerName;
+        this.viewCreator = viewCreator;
+        this.navigationOptions = initialNavigationOptions;
+    }
 
     @RestrictTo(RestrictTo.Scope.TESTS)
     TopBar getTopBar() {
         return container.getTopBar();
     }
 
-	@Override
-	public void destroy() {
-		super.destroy();
-		if (container != null) container.destroy();
-		container = null;
-	}
-
-	@Override
-	public void onViewAppeared() {
-		super.onViewAppeared();
-		ensureViewIsCreated();
-		container.applyOptions(navigationOptions);
-		container.sendContainerStart();
-	}
-
-	@Override
-	public void onViewDisappear() {
-		super.onViewDisappear();
-		container.sendContainerStop();
-	}
-
-	@Override
-	protected boolean isViewShown() {
-		return super.isViewShown() && container.isReady();
-	}
-
-	@NonNull
-	@Override
-	protected View createView() {
-		container = (ReactContainer) viewCreator.create(getActivity(), getId(), containerName);
+    @RestrictTo(RestrictTo.Scope.TESTS)
+    ReactContainer getContainer() {
+        return container;
+    }
+
+    @Override
+    public void destroy() {
+        super.destroy();
+        if (container != null) container.destroy();
+        container = null;
+    }
+
+    @Override
+    public void onViewAppeared() {
+        super.onViewAppeared();
+        ensureViewIsCreated();
+        container.applyOptions(navigationOptions);
+        container.sendContainerStart();
+    }
+
+    @Override
+    public void onViewDisappear() {
+        super.onViewDisappear();
+        container.sendContainerStop();
+    }
+
+    @Override
+    protected boolean isViewShown() {
+        return super.isViewShown() && container.isReady();
+    }
+
+    @NonNull
+    @Override
+    protected View createView() {
+        container = (ReactContainer) viewCreator.create(getActivity(), getId(), containerName);
         return container.asView();
-	}
+    }
 
-	@Override
-	public void mergeNavigationOptions(NavigationOptions options) {
-		navigationOptions.mergeWith(options);
+    @Override
+    public void mergeNavigationOptions(NavigationOptions options) {
+        navigationOptions.mergeWith(options);
         container.applyOptions(navigationOptions);
-	}
+    }
 
-	NavigationOptions getNavigationOptions() {
-		return navigationOptions;
-	}
+    NavigationOptions getNavigationOptions() {
+        return navigationOptions;
+    }
 }

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

@@ -7,7 +7,7 @@ import android.view.ViewGroup;
 import android.widget.FrameLayout;
 
 import com.facebook.react.bridge.Promise;
-import com.reactnativenavigation.anim.StackAnimator;
+import com.reactnativenavigation.anim.NavigationAnimator;
 
 import java.util.Collection;
 import java.util.Iterator;
@@ -15,13 +15,13 @@ import java.util.Iterator;
 public class StackController extends ParentController {
 
 	private final IdStack<ViewController> stack = new IdStack<>();
-	private final StackAnimator animator;
+	private final NavigationAnimator animator;
 
 	public StackController(final Activity activity, String id) {
-		this(activity, id, new StackAnimator(activity));
+		this(activity, id, new NavigationAnimator(activity));
 	}
 
-	public StackController(final Activity activity, String id, StackAnimator animator) {
+	public StackController(final Activity activity, String id, NavigationAnimator animator) {
 		super(activity, id);
 		this.animator = animator;
 	}
@@ -40,7 +40,7 @@ public class StackController extends ParentController {
 
 		//TODO animatePush only when needed
 		if (previousTop != null) {
-			animator.animatePush(enteringView, new StackAnimator.StackAnimationListener() {
+			animator.animatePush(enteringView, new NavigationAnimator.NavigationAnimationListener() {
 				@Override
 				public void onAnimationEnd() {
 					getView().removeView(previousTop.getView());
@@ -80,7 +80,7 @@ public class StackController extends ParentController {
 		getView().addView(enteringView, getView().getChildCount() - 1);
 
 		if (animate) {
-			animator.animatePop(exitingView, new StackAnimator.StackAnimationListener() {
+			animator.animatePop(exitingView, new NavigationAnimator.NavigationAnimationListener() {
 				@Override
 				public void onAnimationEnd() {
 					finishPopping(exitingView, poppedTop, promise);

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

@@ -1,14 +1,21 @@
 package com.reactnativenavigation.views;
 
 import android.support.annotation.RestrictTo;
+import android.view.View;
 
 import com.reactnativenavigation.parse.NavigationOptions;
+import com.reactnativenavigation.viewcontrollers.ContainerViewController;
 
 public interface Container {
     void applyOptions(NavigationOptions options);
 
     void sendOnNavigationButtonPressed(String id);
 
-    @RestrictTo(RestrictTo.Scope.TESTS)
     TopBar getTopBar();
+
+    View getContentView();
+
+    void drawBehindTopBar();
+
+    void drawBelowTopBar();
 }

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

@@ -2,73 +2,101 @@ package com.reactnativenavigation.views;
 
 import android.annotation.SuppressLint;
 import android.content.Context;
+import android.os.Build;
 import android.support.annotation.RestrictTo;
 import android.view.View;
-import android.widget.LinearLayout;
+import android.view.ViewGroup;
+import android.widget.RelativeLayout;
 
+import com.facebook.react.uimanager.events.EventDispatcher;
 import com.reactnativenavigation.parse.NavigationOptions;
 import com.reactnativenavigation.presentation.OptionsPresenter;
+import com.reactnativenavigation.viewcontrollers.ContainerViewController;
 import com.reactnativenavigation.viewcontrollers.ContainerViewController.IReactView;
 
+import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
+import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
+
 @SuppressLint("ViewConstructor")
-public class ContainerLayout extends LinearLayout implements ReactContainer {
+public class ContainerLayout extends RelativeLayout implements ReactContainer {
+
+    private TopBar topBar;
+    private IReactView reactView;
+    private final OptionsPresenter optionsPresenter;
 
-	private TopBar topBar;
-	private IReactView reactView;
-	private final OptionsPresenter optionsPresenter;
+    public ContainerLayout(Context context, IReactView reactView, EventDispatcher eventDispatcher) {
+        super(context);
+        this.reactView = reactView;
+        this.topBar = new TopBar(context, this, eventDispatcher);
+        topBar.setId(View.generateViewId());
 
-	public ContainerLayout(Context context, IReactView reactView) {
-		super(context);
-		this.topBar = new TopBar(context, this);
-		this.reactView = reactView;
-        optionsPresenter = new OptionsPresenter(topBar, reactView.asView());
+        optionsPresenter = new OptionsPresenter(this);
         initViews();
-	}
-
-	private void initViews() {
-	    setOrientation(VERTICAL);
-		addView(topBar);
-		addView(reactView.asView());
-	}
-
-	@Override
-	public boolean isReady() {
-		return reactView.isReady();
-	}
-
-	@Override
-	public View asView() {
-		return this;
-	}
-
-	@Override
-	public void destroy() {
-		reactView.destroy();
-	}
-
-	@Override
-	public void sendContainerStart() {
-		reactView.sendContainerStart();
-	}
-
-	@Override
-	public void sendContainerStop() {
-		reactView.sendContainerStop();
-	}
+    }
+
+    private void initViews() {
+        LayoutParams layoutParams = new LayoutParams(MATCH_PARENT, MATCH_PARENT);
+        layoutParams.addRule(BELOW, topBar.getId());
+        addView(reactView.asView(), layoutParams);
+        addView(topBar, new LayoutParams(MATCH_PARENT, WRAP_CONTENT));
+    }
+
+    @Override
+    public boolean isReady() {
+        return reactView.isReady();
+    }
+
+    @Override
+    public View asView() {
+        return this;
+    }
+
+    @Override
+    public void destroy() {
+        reactView.destroy();
+    }
+
+    @Override
+    public void sendContainerStart() {
+        reactView.sendContainerStart();
+    }
+
+    @Override
+    public void sendContainerStop() {
+        reactView.sendContainerStop();
+    }
 
     @Override
     public void applyOptions(NavigationOptions options) {
         optionsPresenter.applyOptions(options);
     }
 
-	@Override
+    @Override
     public void sendOnNavigationButtonPressed(String buttonId) {
         reactView.sendOnNavigationButtonPressed(buttonId);
     }
 
     @Override
-    @RestrictTo(RestrictTo.Scope.TESTS)
     public TopBar getTopBar() {
         return topBar;
     }
-}
+
+    @Override
+    public View getContentView() {
+        return reactView.asView();
+    }
+
+    @Override
+    public void drawBehindTopBar() {
+        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) reactView.asView().getLayoutParams();
+        layoutParams.removeRule(BELOW);
+        reactView.asView().setLayoutParams(layoutParams);
+    }
+
+    @Override
+    public void drawBelowTopBar() {
+        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) reactView.asView().getLayoutParams();
+        layoutParams.addRule(BELOW, topBar.getId());
+        reactView.asView().setLayoutParams(layoutParams);
+    }
+}

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

@@ -3,6 +3,8 @@ package com.reactnativenavigation.views;
 import android.app.Activity;
 
 import com.facebook.react.ReactInstanceManager;
+import com.facebook.react.uimanager.UIManagerModule;
+import com.reactnativenavigation.react.NavigationModule;
 import com.reactnativenavigation.react.ReactContainerViewCreator;
 import com.reactnativenavigation.viewcontrollers.ContainerViewController;
 
@@ -17,6 +19,6 @@ public class ContainerViewCreator implements ContainerViewController.ReactViewCr
 	@Override
 	public ContainerViewController.IReactView create(Activity activity, String containerId, String containerName) {
         ContainerViewController.IReactView reactView = new ReactContainerViewCreator(instanceManager).create(activity, containerId, containerName);
-        return new ContainerLayout(activity, reactView);
+        return new ContainerLayout(activity, reactView, instanceManager.getCurrentReactContext().getNativeModule(UIManagerModule.class).getEventDispatcher());
 	}
 }

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

@@ -13,52 +13,69 @@ import android.view.View;
 import android.view.ViewGroup;
 import android.widget.TextView;
 
+import com.facebook.react.uimanager.events.EventDispatcher;
+import com.reactnativenavigation.anim.TopBarAnimator;
+import com.reactnativenavigation.anim.TopBarCollapseBehavior;
 import com.reactnativenavigation.parse.Button;
+import com.reactnativenavigation.parse.Color;
+import com.reactnativenavigation.parse.NavigationOptions;
 import com.reactnativenavigation.parse.Number;
 import com.reactnativenavigation.viewcontrollers.toptabs.TopTabsViewPager;
-import com.reactnativenavigation.parse.Color;
 
 import java.util.ArrayList;
 
 @SuppressLint("ViewConstructor")
 public class TopBar extends AppBarLayout {
-	private final Toolbar titleBar;
+    private final Toolbar titleBar;
     private Container container;
     private TopTabs topTabs;
 
-    public TopBar(final Context context, Container container) {
+    private TopBarAnimator animator;
+    private TopBarCollapseBehavior collapsingBehavior;
+
+    public TopBar(Context context) {
+        this(context, null, null);
+    }
+
+    public TopBar(Context context, Container container) {
+        this(context, container, null);
+    }
+
+    public TopBar(Context context, Container container, EventDispatcher eventDispatcher) {
         super(context);
+        collapsingBehavior = new TopBarCollapseBehavior(eventDispatcher, this);
         this.container = container;
         titleBar = new Toolbar(context);
         topTabs = new TopTabs(getContext());
+        animator = new TopBarAnimator(this, container != null ? container.getContentView() : null);
         addView(titleBar);
     }
 
     public void setTitle(String title) {
-		titleBar.setTitle(title);
-	}
-
-	public String getTitle() {
-		return titleBar.getTitle() != null ? titleBar.getTitle().toString() : "";
-	}
-
-	public void setTitleTextColor(@ColorInt int color) {
-		titleBar.setTitleTextColor(color);
-	}
-
-	public void setTitleFontSize(float size) {
-		TextView titleTextView = getTitleTextView();
-		if (titleTextView != null) {
-			titleTextView.setTextSize(size);
-		}
-	}
-
-	public void setTitleTypeface(Typeface typeface) {
-		TextView titleTextView = getTitleTextView();
-		if (titleTextView != null) {
-			titleTextView.setTypeface(typeface);
-		}
-	}
+        titleBar.setTitle(title);
+    }
+
+    public String getTitle() {
+        return titleBar.getTitle() != null ? titleBar.getTitle().toString() : "";
+    }
+
+    public void setTitleTextColor(@ColorInt int color) {
+        titleBar.setTitleTextColor(color);
+    }
+
+    public void setTitleFontSize(float size) {
+        TextView titleTextView = getTitleTextView();
+        if (titleTextView != null) {
+            titleTextView.setTextSize(size);
+        }
+    }
+
+    public void setTitleTypeface(Typeface typeface) {
+        TextView titleTextView = getTitleTextView();
+        if (titleTextView != null) {
+            titleTextView.setTypeface(typeface);
+        }
+    }
 
     public void setTopTabFontFamily(int tabIndex, Typeface fontFamily) {
         topTabs.setFontFamily(tabIndex, fontFamily);
@@ -72,71 +89,71 @@ public class TopBar extends AppBarLayout {
         topTabs.applyTopTabsFontSize(fontSize);
     }
 
-	public void setButtons(ArrayList<Button> leftButtons, ArrayList<Button> rightButtons) {
-		setLeftButtons(leftButtons);
-		setRightButtons(rightButtons);
-    }
-
-	public TextView getTitleTextView() {
-		return findTextView(titleBar);
-	}
-
-	@Override
-	public void setBackgroundColor(@ColorInt int color) {
-		titleBar.setBackgroundColor(color);
-	}
-
-	@Nullable
-	private TextView findTextView(ViewGroup root) {
-		for (int i = 0; i < root.getChildCount(); i++) {
-			View view = root.getChildAt(i);
-			if (view instanceof TextView) {
-				return (TextView) view;
-			}
-			if (view instanceof ViewGroup) {
-				return findTextView((ViewGroup) view);
-			}
-		}
-		return null;
-	}
-
-	private void setLeftButtons(ArrayList<Button> leftButtons) {
-		if(leftButtons == null || leftButtons.isEmpty()) {
-			titleBar.setNavigationIcon(null);
-			return;
-		}
-
-		if(leftButtons.size() > 1) {
-			Log.w("RNN", "Use a custom TopBar to have more than one left button");
-		}
-
-		Button leftButton = leftButtons.get(0);
-		setLeftButton(leftButton);
-	}
-
-	private void setLeftButton(final Button button) {
-		TitleBarButton leftBarButton = new TitleBarButton(container, this.titleBar, button);
-		leftBarButton.applyNavigationIcon(getContext());
-	}
-
-	private void setRightButtons(ArrayList<Button> rightButtons) {
-		if(rightButtons == null || rightButtons.size() == 0) {
-			return;
-		}
-
-		Menu menu = getTitleBar().getMenu();
-		menu.clear();
-
-		for (int i = 0; i < rightButtons.size(); i++){
-	   		Button button = rightButtons.get(i);
-			TitleBarButton titleBarButton = new TitleBarButton(container, this.titleBar, button);
-			titleBarButton.addToMenu(getContext(), menu);
-       }
-    }
-
-	public Toolbar getTitleBar() {
-		return titleBar;
-	}
+    public void setButtons(ArrayList<Button> leftButtons, ArrayList<Button> rightButtons) {
+        setLeftButtons(leftButtons);
+        setRightButtons(rightButtons);
+    }
+
+    public TextView getTitleTextView() {
+        return findTextView(titleBar);
+    }
+
+    @Override
+    public void setBackgroundColor(@ColorInt int color) {
+        titleBar.setBackgroundColor(color);
+    }
+
+    @Nullable
+    private TextView findTextView(ViewGroup root) {
+        for (int i = 0; i < root.getChildCount(); i++) {
+            View view = root.getChildAt(i);
+            if (view instanceof TextView) {
+                return (TextView) view;
+            }
+            if (view instanceof ViewGroup) {
+                return findTextView((ViewGroup) view);
+            }
+        }
+        return null;
+    }
+
+    private void setLeftButtons(ArrayList<Button> leftButtons) {
+        if (leftButtons == null || leftButtons.isEmpty()) {
+            titleBar.setNavigationIcon(null);
+            return;
+        }
+
+        if (leftButtons.size() > 1) {
+            Log.w("RNN", "Use a custom TopBar to have more than one left button");
+        }
+
+        Button leftButton = leftButtons.get(0);
+        setLeftButton(leftButton);
+    }
+
+    private void setLeftButton(final Button button) {
+        TitleBarButton leftBarButton = new TitleBarButton(container, this.titleBar, button);
+        leftBarButton.applyNavigationIcon(getContext());
+    }
+
+    private void setRightButtons(ArrayList<Button> rightButtons) {
+        if (rightButtons == null || rightButtons.size() == 0) {
+            return;
+        }
+
+        Menu menu = getTitleBar().getMenu();
+        menu.clear();
+
+        for (int i = 0; i < rightButtons.size(); i++) {
+            Button button = rightButtons.get(i);
+            TitleBarButton titleBarButton = new TitleBarButton(container, this.titleBar, button);
+            titleBarButton.addToMenu(getContext(), menu);
+        }
+    }
+
+    public Toolbar getTitleBar() {
+        return titleBar;
+    }
 
     public void setupTopTabsWithViewPager(TopTabsViewPager viewPager) {
         initTopTabs();
@@ -144,6 +161,37 @@ public class TopBar extends AppBarLayout {
     }
 
     private void initTopTabs() {
+        topTabs = new TopTabs(getContext());
         addView(topTabs);
     }
+
+    public void enableCollapse() {
+        collapsingBehavior.enableCollapse();
+    }
+
+    public void disableCollapse() {
+        collapsingBehavior.disableCollapse();
+    }
+
+    public void show(NavigationOptions.BooleanOptions animated) {
+        if (getVisibility() == View.VISIBLE) {
+            return;
+        }
+        if (animated == NavigationOptions.BooleanOptions.True) {
+            animator.show();
+        } else {
+            setVisibility(View.VISIBLE);
+        }
+    }
+
+    public void hide(NavigationOptions.BooleanOptions animated) {
+        if (getVisibility() == View.GONE) {
+            return;
+        }
+        if (animated == NavigationOptions.BooleanOptions.True) {
+            animator.hide();
+        } else {
+            setVisibility(View.GONE);
+        }
+    }
 }

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

@@ -4,10 +4,14 @@ import android.annotation.SuppressLint;
 import android.content.Context;
 import android.support.annotation.RestrictTo;
 import android.support.v4.view.ViewPager;
+import android.view.View;
+import android.view.ViewGroup;
 import android.widget.LinearLayout;
+import android.widget.RelativeLayout;
 
 import com.reactnativenavigation.parse.NavigationOptions;
 import com.reactnativenavigation.presentation.OptionsPresenter;
+import com.reactnativenavigation.utils.Task;
 import com.reactnativenavigation.viewcontrollers.toptabs.TopTabController;
 import com.reactnativenavigation.viewcontrollers.toptabs.TopTabsAdapter;
 import com.reactnativenavigation.viewcontrollers.toptabs.TopTabsViewPager;
@@ -15,24 +19,28 @@ import com.reactnativenavigation.viewcontrollers.toptabs.TopTabsViewPager;
 import java.util.List;
 
 @SuppressLint("ViewConstructor")
-public class TopTabsLayout extends LinearLayout implements Container {
+public class TopTabsLayout extends RelativeLayout implements Container {
 
     private TopBar topBar;
+    private List<TopTabController> tabs;
     private TopTabsViewPager viewPager;
     private final OptionsPresenter optionsPresenter;
 
     public TopTabsLayout(Context context, List<TopTabController> tabs, TopTabsAdapter adapter) {
         super(context);
+        this.tabs = tabs;
         topBar = new TopBar(context, this);
+        topBar.setId(View.generateViewId());
         viewPager = new TopTabsViewPager(context, tabs, adapter);
-        optionsPresenter = new OptionsPresenter(topBar, viewPager);
+        optionsPresenter = new OptionsPresenter(this);
         initViews();
     }
 
     private void initViews() {
-        setOrientation(VERTICAL);
-        addView(topBar);
-        addView(viewPager);
+        LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
+        layoutParams.addRule(BELOW, topBar.getId());
+        addView(topBar, new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
+        addView(viewPager, layoutParams);
         topBar.setupTopTabsWithViewPager(viewPager);
     }
 
@@ -47,16 +55,35 @@ public class TopTabsLayout extends LinearLayout implements Container {
     }
 
     @Override
-    @RestrictTo(RestrictTo.Scope.TESTS)
     public TopBar getTopBar() {
         return topBar;
     }
 
+    @Override
+    public View getContentView() {
+        return viewPager;
+    }
+
+    @Override
+    public void drawBehindTopBar() {
+
+    }
+
+    @Override
+    public void drawBelowTopBar() {
+
+    }
+
     @RestrictTo(RestrictTo.Scope.TESTS)
     public ViewPager getViewPager() {
         return viewPager;
     }
 
+
+    public void performOnCurrentTab(Task<TopTabController> task) {
+        task.run(tabs.get(viewPager.getCurrentItem()));
+    }
+
     public void switchToTab(int index) {
         viewPager.setCurrentItem(index);
     }

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

@@ -2,21 +2,27 @@ package com.reactnativenavigation.mocks;
 
 import android.content.Context;
 import android.view.View;
+import android.view.ViewGroup;
+import android.widget.RelativeLayout;
 
 import com.reactnativenavigation.parse.NavigationOptions;
 import com.reactnativenavigation.presentation.OptionsPresenter;
 import com.reactnativenavigation.views.ReactContainer;
 import com.reactnativenavigation.views.TopBar;
 
-public class TestContainerLayout extends View implements ReactContainer {
+public class TestContainerLayout extends RelativeLayout implements ReactContainer {
 
     private final TopBar topBar;
+    private final View contentView;
     private final OptionsPresenter optionsPresenter;
 
     public TestContainerLayout(final Context context) {
-		super(context);
+        super(context);
         topBar = new TopBar(context, this);
-        optionsPresenter = new OptionsPresenter(topBar, new View(context));
+        contentView = new View(context);
+        addView(topBar);
+        addView(contentView);
+        optionsPresenter = new OptionsPresenter(this);
     }
 
     public TopBar getTopBar() {
@@ -24,26 +30,45 @@ public class TestContainerLayout extends View implements ReactContainer {
     }
 
     @Override
-	public boolean isReady() {
-		return false;
-	}
+    public View getContentView() {
+        return contentView;
+    }
+
+    @Override
+    public void drawBehindTopBar() {
+        RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
+        layoutParams.removeRule(BELOW);
+        contentView.setLayoutParams(layoutParams);
+    }
+
+    @Override
+    public void drawBelowTopBar() {
+        RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
+        layoutParams.addRule(BELOW, topBar.getId());
+        contentView.setLayoutParams(layoutParams);
+    }
+
+    @Override
+    public boolean isReady() {
+        return false;
+    }
 
-	@Override
-	public View asView() {
-		return this;
-	}
+    @Override
+    public View asView() {
+        return this;
+    }
 
-	@Override
-	public void destroy() {
-	}
+    @Override
+    public void destroy() {
+    }
 
-	@Override
-	public void sendContainerStart() {
-	}
+    @Override
+    public void sendContainerStart() {
+    }
 
-	@Override
-	public void sendContainerStop() {
-	}
+    @Override
+    public void sendContainerStop() {
+    }
 
     @Override
     public void applyOptions(NavigationOptions options) {

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

@@ -9,35 +9,35 @@ import com.reactnativenavigation.views.TopBar;
 
 public class TestContainerView extends View implements ReactContainer {
 
-	private TopBar topBar;
+    private TopBar topBar;
 
-	public TestContainerView(final Context context) {
-		super(context);
-		topBar = new TopBar(context, this);
+    public TestContainerView(final Context context) {
+        super(context);
+        topBar = new TopBar(context, this);
 
-	}
+    }
 
-	@Override
-	public boolean isReady() {
-		return false;
-	}
+    @Override
+    public boolean isReady() {
+        return false;
+    }
 
-	@Override
-	public View asView() {
-		return this;
-	}
+    @Override
+    public View asView() {
+        return this;
+    }
 
-	@Override
-	public void destroy() {
-	}
+    @Override
+    public void destroy() {
+    }
 
-	@Override
-	public void sendContainerStart() {
-	}
+    @Override
+    public void sendContainerStart() {
+    }
 
-	@Override
-	public void sendContainerStop() {
-	}
+    @Override
+    public void sendContainerStop() {
+    }
 
     @Override
     public void applyOptions(NavigationOptions options) {
@@ -53,4 +53,19 @@ public class TestContainerView extends View implements ReactContainer {
     public TopBar getTopBar() {
         return topBar;
     }
+
+    @Override
+    public View getContentView() {
+        return null;
+    }
+
+    @Override
+    public void drawBehindTopBar() {
+
+    }
+
+    @Override
+    public void drawBelowTopBar() {
+
+    }
 }

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

@@ -0,0 +1,24 @@
+package com.reactnativenavigation.mocks;
+
+import android.view.View;
+
+import com.reactnativenavigation.anim.NavigationAnimator;
+
+import org.robolectric.RuntimeEnvironment;
+
+public class TestNavigationAnimator extends NavigationAnimator {
+
+	public TestNavigationAnimator() {
+		super(RuntimeEnvironment.application);
+	}
+
+	@Override
+	public void animatePush(final View enteringView, NavigationAnimationListener animationListener) {
+		if (animationListener != null) animationListener.onAnimationEnd();
+	}
+
+	@Override
+	public void animatePop(final View enteringView, NavigationAnimationListener animationListener) {
+		if (animationListener != null) animationListener.onAnimationEnd();
+	}
+}

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

@@ -1,25 +0,0 @@
-package com.reactnativenavigation.mocks;
-
-import android.support.annotation.Nullable;
-import android.view.View;
-
-import com.reactnativenavigation.anim.StackAnimator;
-
-import org.robolectric.RuntimeEnvironment;
-
-public class TestStackAnimator extends StackAnimator {
-
-	public TestStackAnimator() {
-		super(RuntimeEnvironment.application);
-	}
-
-	@Override
-	public void animatePush(final View enteringView, StackAnimationListener animationListener) {
-		if (animationListener != null) animationListener.onAnimationEnd();
-	}
-
-	@Override
-	public void animatePop(final View enteringView, StackAnimationListener animationListener) {
-		if (animationListener != null) animationListener.onAnimationEnd();
-	}
-}

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

@@ -24,6 +24,8 @@ public class NavigationOptionsTest extends BaseTest {
     private static final String TOP_BAR_FONT_FAMILY = "HelveticaNeue-CondensedBold";
     private static final Typeface TOP_BAR_TYPEFACE = Typeface.create("HelveticaNeue-CondensedBold", Typeface.BOLD);
     private static final NavigationOptions.BooleanOptions TOP_BAR_HIDDEN = True;
+    private static final NavigationOptions.BooleanOptions TOP_BAR_DRAW_BEHIND = True;
+    private static final NavigationOptions.BooleanOptions TOP_BAR_HIDE_ON_SCROLL = True;
     private static final NavigationOptions.BooleanOptions BOTTOM_TABS_ANIMATE_HIDE = True;
     private static final NavigationOptions.BooleanOptions BOTTOM_TABS_HIDDEN = True;
     private static final int BOTTOM_TABS_BADGE = 3;
@@ -38,18 +40,18 @@ public class NavigationOptionsTest extends BaseTest {
     }
 
     @Test
-	public void parsesNullAsDefaultEmptyOptions() throws Exception {
-		assertThat(NavigationOptions.parse(mockLoader, null)).isNotNull();
-	}
+    public void parsesNullAsDefaultEmptyOptions() throws Exception {
+        assertThat(NavigationOptions.parse(mockLoader, null)).isNotNull();
+    }
 
-	@Test
-	public void parsesJson() throws Exception {
-		JSONObject json = new JSONObject()
+    @Test
+    public void parsesJson() throws Exception {
+        JSONObject json = new JSONObject()
                 .put("topBar", createTopBar())
                 .put("bottomTabs", createTabBar());
-		NavigationOptions result = NavigationOptions.parse(mockLoader, json);
+        NavigationOptions result = NavigationOptions.parse(mockLoader, json);
         assertResult(result);
-	}
+    }
 
     private void assertResult(NavigationOptions result) {
         assertThat(result.topBarOptions.title).isEqualTo(TITLE);
@@ -58,6 +60,8 @@ public class NavigationOptionsTest extends BaseTest {
         assertThat(result.topBarOptions.textFontSize).isEqualTo(TOP_BAR_FONT_SIZE);
         assertThat(result.topBarOptions.textFontFamily).isEqualTo(TOP_BAR_TYPEFACE);
         assertThat(result.topBarOptions.hidden).isEqualTo(TOP_BAR_HIDDEN);
+        assertThat(result.topBarOptions.drawBehind).isEqualTo(TOP_BAR_DRAW_BEHIND);
+        assertThat(result.topBarOptions.hideOnScroll).isEqualTo(TOP_BAR_HIDE_ON_SCROLL);
         assertThat(result.bottomTabsOptions.animateHide).isEqualTo(BOTTOM_TABS_ANIMATE_HIDE);
         assertThat(result.bottomTabsOptions.hidden).isEqualTo(BOTTOM_TABS_HIDDEN);
         assertThat(result.bottomTabsOptions.tabBadge).isEqualTo(BOTTOM_TABS_BADGE);
@@ -68,22 +72,24 @@ public class NavigationOptionsTest extends BaseTest {
     @NonNull
     private JSONObject createTabBar() throws JSONException {
         return new JSONObject()
-            .put("currentTabId", BOTTOM_TABS_CURRENT_TAB_ID)
-            .put("currentTabIndex", BOTTOM_TABS_CURRENT_TAB_INDEX)
-            .put("hidden", BOTTOM_TABS_HIDDEN)
-            .put("animateHide", BOTTOM_TABS_ANIMATE_HIDE)
-            .put("tabBadge", BOTTOM_TABS_BADGE);
+                .put("currentTabId", BOTTOM_TABS_CURRENT_TAB_ID)
+                .put("currentTabIndex", BOTTOM_TABS_CURRENT_TAB_INDEX)
+                .put("hidden", BOTTOM_TABS_HIDDEN)
+                .put("animateHide", BOTTOM_TABS_ANIMATE_HIDE)
+                .put("tabBadge", BOTTOM_TABS_BADGE);
     }
 
     @NonNull
     private JSONObject createTopBar() throws JSONException {
         return new JSONObject()
-            .put("title", TITLE)
-            .put("backgroundColor", TOP_BAR_BACKGROUND_COLOR)
-            .put("textColor", TOP_BAR_TEXT_COLOR)
-            .put("textFontSize", TOP_BAR_FONT_SIZE)
-            .put("textFontFamily", TOP_BAR_FONT_FAMILY)
-            .put("hidden", TOP_BAR_HIDDEN);
+                .put("title", TITLE)
+                .put("backgroundColor", TOP_BAR_BACKGROUND_COLOR)
+                .put("textColor", TOP_BAR_TEXT_COLOR)
+                .put("textFontSize", TOP_BAR_FONT_SIZE)
+                .put("textFontFamily", TOP_BAR_FONT_FAMILY)
+                .put("hidden", TOP_BAR_HIDDEN)
+                .put("drawBehind", TOP_BAR_DRAW_BEHIND)
+                .put("hideOnScroll", TOP_BAR_HIDE_ON_SCROLL);
     }
 
     @NonNull
@@ -122,8 +128,8 @@ public class NavigationOptionsTest extends BaseTest {
     @Test
     public void mergedDefaultOptionsDontOverrideGivenOptions() throws Exception {
         JSONObject defaultJson = new JSONObject()
-            .put("topBar", createOtherTopBar())
-            .put("bottomTabs", createOtherTabBar());
+                .put("topBar", createOtherTopBar())
+                .put("bottomTabs", createOtherTabBar());
         NavigationOptions defaultOptions = NavigationOptions.parse(mockLoader, defaultJson);
 
         JSONObject json = new JSONObject()
@@ -134,9 +140,9 @@ public class NavigationOptionsTest extends BaseTest {
         assertResult(options);
     }
 
-	@Test
-	public void defaultEmptyOptions() throws Exception {
-		NavigationOptions uut = new NavigationOptions();
-		assertThat(uut.topBarOptions.title).isEmpty();
-	}
+    @Test
+    public void defaultEmptyOptions() throws Exception {
+        NavigationOptions uut = new NavigationOptions();
+        assertThat(uut.topBarOptions.title).isEmpty();
+    }
 }

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

@@ -7,7 +7,7 @@ import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.mocks.MockPromise;
 import com.reactnativenavigation.mocks.SimpleContainerViewController;
 import com.reactnativenavigation.mocks.SimpleViewController;
-import com.reactnativenavigation.mocks.TestStackAnimator;
+import com.reactnativenavigation.mocks.TestNavigationAnimator;
 import com.reactnativenavigation.parse.NavigationOptions;
 import com.reactnativenavigation.utils.CompatUtils;
 
@@ -218,7 +218,7 @@ public class NavigatorTest extends BaseTest {
 
 	@NonNull
 	private StackController newStack() {
-		return new StackController(activity, "stack" + CompatUtils.generateViewId(), new TestStackAnimator());
+		return new StackController(activity, "stack" + CompatUtils.generateViewId(), new TestNavigationAnimator());
 	}
 
 	@Test

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

@@ -4,6 +4,8 @@ import android.app.Activity;
 import android.graphics.Color;
 import android.graphics.drawable.ColorDrawable;
 import android.view.View;
+import android.view.ViewGroup;
+import android.widget.RelativeLayout;
 
 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.mocks.TestContainerLayout;
@@ -11,127 +13,145 @@ import com.reactnativenavigation.parse.NavigationOptions;
 
 import org.junit.Test;
 
+import static android.widget.RelativeLayout.BELOW;
 import static org.assertj.core.api.Java6Assertions.assertThat;
 import static org.mockito.Mockito.spy;
 
 public class OptionsApplyingTest extends BaseTest {
-	private Activity activity;
-	private ContainerViewController uut;
-	private ContainerViewController.IReactView view;
-	private NavigationOptions initialNavigationOptions;
-
-	@Override
-	public void beforeEach() {
-		super.beforeEach();
-		activity = newActivity();
-		initialNavigationOptions = new NavigationOptions();
-		view = spy(new TestContainerLayout(activity));
-		uut = new ContainerViewController(activity,
+    private Activity activity;
+    private ContainerViewController uut;
+    private ContainerViewController.IReactView view;
+    private NavigationOptions initialNavigationOptions;
+
+    @Override
+    public void beforeEach() {
+        super.beforeEach();
+        activity = newActivity();
+        initialNavigationOptions = new NavigationOptions();
+        view = spy(new TestContainerLayout(activity));
+        uut = new ContainerViewController(activity,
                 "containerId1",
                 "containerName",
                 (activity1, containerId, containerName) -> view,
                 initialNavigationOptions
         );
-		uut.ensureViewIsCreated();
-	}
-
-	@Test
-	public void applyNavigationOptionsHandlesNoParentStack() throws Exception {
-		assertThat(uut.getParentStackController()).isNull();
-		uut.onViewAppeared();
-		assertThat(uut.getParentStackController()).isNull();
-	}
-
-	@Test
-	public void initialOptionsAppliedOnAppear() throws Exception {
-		assertThat(uut.getNavigationOptions()).isSameAs(initialNavigationOptions);
-		initialNavigationOptions.topBarOptions.title = "the title";
-		StackController stackController = new StackController(activity, "stackId");
-		stackController.push(uut);
-		assertThat(uut.getTopBar().getTitle()).isEmpty();
-
-		uut.onViewAppeared();
-		assertThat(uut.getTopBar().getTitle()).isEqualTo("the title");
-	}
-
-	@Test
-	public void mergeNavigationOptionsUpdatesCurrentOptions() throws Exception {
-		assertThat(uut.getNavigationOptions().topBarOptions.title).isEmpty();
-		NavigationOptions options = new NavigationOptions();
-		options.topBarOptions.title = "new title";
-		uut.mergeNavigationOptions(options);
-		assertThat(uut.getNavigationOptions().topBarOptions.title).isEqualTo("new title");
-		assertThat(uut.getNavigationOptions()).isSameAs(initialNavigationOptions);
-	}
-
-	@Test
-	public void reappliesOptionsOnMerge() throws Exception {
-		uut.onViewAppeared();
-		assertThat(uut.getTopBar().getTitle()).isEmpty();
-
-		NavigationOptions opts = new NavigationOptions();
-		opts.topBarOptions.title = "the new title";
-		uut.mergeNavigationOptions(opts);
-
-		assertThat(uut.getTopBar().getTitle()).isEqualTo("the new title");
-	}
-
-	@Test
-	public void appliesTopBackBackgroundColor() throws Exception {
-		uut.onViewAppeared();
-		//TODO: FIX TEST
-		assertThat(((ColorDrawable) uut.getTopBar().getTitleBar().getBackground()).getColor()).isNotEqualTo(Color.RED);
-
-		NavigationOptions opts = new NavigationOptions();
-		opts.topBarOptions.backgroundColor = Color.RED;
-		uut.mergeNavigationOptions(opts);
-
-		assertThat(((ColorDrawable) uut.getTopBar().getTitleBar().getBackground()).getColor()).isEqualTo(Color.RED);
-	}
-
-	@Test
-	public void appliesTopBarTextColor() throws Exception {
-		assertThat(uut.getNavigationOptions()).isSameAs(initialNavigationOptions);
-		initialNavigationOptions.topBarOptions.title = "the title";
-		uut.onViewAppeared();
-		assertThat(uut.getTopBar().getTitleTextView().getCurrentTextColor()).isNotEqualTo(Color.RED);
-
-		NavigationOptions opts = new NavigationOptions();
-		opts.topBarOptions.title = "the title";
-		opts.topBarOptions.textColor = Color.RED;
-		uut.mergeNavigationOptions(opts);
-
-		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.topBarOptions.title = "the title";
-		uut.onViewAppeared();
-		assertThat(uut.getTopBar().getTitleTextView().getTextSize()).isNotEqualTo(18);
-
-		NavigationOptions opts = new NavigationOptions();
-		opts.topBarOptions.title = "the title";
-		opts.topBarOptions.textFontSize = 18;
-		uut.mergeNavigationOptions(opts);
-
-		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.topBarOptions.title = "the title";
-		uut.onViewAppeared();
-		assertThat(uut.getTopBar().getVisibility()).isNotEqualTo(View.GONE);
-
-		NavigationOptions opts = new NavigationOptions();
-		opts.topBarOptions.hidden = NavigationOptions.BooleanOptions.True;
-		uut.mergeNavigationOptions(opts);
-
-		assertThat(uut.getTopBar().getVisibility()).isEqualTo(View.GONE);
-	}
+        uut.ensureViewIsCreated();
+    }
+
+    @Test
+    public void applyNavigationOptionsHandlesNoParentStack() throws Exception {
+        assertThat(uut.getParentStackController()).isNull();
+        uut.onViewAppeared();
+        assertThat(uut.getParentStackController()).isNull();
+    }
+
+    @Test
+    public void initialOptionsAppliedOnAppear() throws Exception {
+        assertThat(uut.getNavigationOptions()).isSameAs(initialNavigationOptions);
+        initialNavigationOptions.topBarOptions.title = "the title";
+        StackController stackController = new StackController(activity, "stackId");
+        stackController.push(uut);
+        assertThat(uut.getTopBar().getTitle()).isEmpty();
+
+        uut.onViewAppeared();
+        assertThat(uut.getTopBar().getTitle()).isEqualTo("the title");
+    }
+
+    @Test
+    public void mergeNavigationOptionsUpdatesCurrentOptions() throws Exception {
+        assertThat(uut.getNavigationOptions().topBarOptions.title).isEmpty();
+        NavigationOptions options = new NavigationOptions();
+        options.topBarOptions.title = "new title";
+        uut.mergeNavigationOptions(options);
+        assertThat(uut.getNavigationOptions().topBarOptions.title).isEqualTo("new title");
+        assertThat(uut.getNavigationOptions()).isSameAs(initialNavigationOptions);
+    }
+
+    @Test
+    public void reappliesOptionsOnMerge() throws Exception {
+        uut.onViewAppeared();
+        assertThat(uut.getTopBar().getTitle()).isEmpty();
+
+        NavigationOptions opts = new NavigationOptions();
+        opts.topBarOptions.title = "the new title";
+        uut.mergeNavigationOptions(opts);
+
+        assertThat(uut.getTopBar().getTitle()).isEqualTo("the new title");
+    }
+
+    @Test
+    public void appliesTopBackBackgroundColor() throws Exception {
+        uut.onViewAppeared();
+        //TODO: FIX TEST
+        assertThat(((ColorDrawable) uut.getTopBar().getTitleBar().getBackground()).getColor()).isNotEqualTo(Color.RED);
+
+        NavigationOptions opts = new NavigationOptions();
+        opts.topBarOptions.backgroundColor = Color.RED;
+        uut.mergeNavigationOptions(opts);
+
+        assertThat(((ColorDrawable) uut.getTopBar().getTitleBar().getBackground()).getColor()).isEqualTo(Color.RED);
+    }
+
+    @Test
+    public void appliesTopBarTextColor() throws Exception {
+        assertThat(uut.getNavigationOptions()).isSameAs(initialNavigationOptions);
+        initialNavigationOptions.topBarOptions.title = "the title";
+        uut.onViewAppeared();
+        assertThat(uut.getTopBar().getTitleTextView().getCurrentTextColor()).isNotEqualTo(Color.RED);
+
+        NavigationOptions opts = new NavigationOptions();
+        opts.topBarOptions.title = "the title";
+        opts.topBarOptions.textColor = Color.RED;
+        uut.mergeNavigationOptions(opts);
+
+        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.topBarOptions.title = "the title";
+        uut.onViewAppeared();
+        assertThat(uut.getTopBar().getTitleTextView().getTextSize()).isNotEqualTo(18);
+
+        NavigationOptions opts = new NavigationOptions();
+        opts.topBarOptions.title = "the title";
+        opts.topBarOptions.textFontSize = 18;
+        uut.mergeNavigationOptions(opts);
+
+        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.topBarOptions.title = "the title";
+        uut.onViewAppeared();
+        assertThat(uut.getTopBar().getVisibility()).isNotEqualTo(View.GONE);
+
+        NavigationOptions opts = new NavigationOptions();
+        opts.topBarOptions.hidden = NavigationOptions.BooleanOptions.True;
+        uut.mergeNavigationOptions(opts);
+
+        assertThat(uut.getTopBar().getVisibility()).isEqualTo(View.GONE);
+    }
+
+    @Test
+    public void appliesDrawUnder() throws Exception {
+        assertThat(uut.getNavigationOptions()).isSameAs(initialNavigationOptions);
+        initialNavigationOptions.topBarOptions.title = "the title";
+        initialNavigationOptions.topBarOptions.drawBehind = NavigationOptions.BooleanOptions.False;
+        uut.onViewAppeared();
+        RelativeLayout.LayoutParams uutLayoutParams = (RelativeLayout.LayoutParams) ((ViewGroup) uut.getContainer().asView()).getChildAt(1).getLayoutParams();
+        assertThat(uutLayoutParams.getRule(BELOW)).isNotEqualTo(0);
+
+        NavigationOptions opts = new NavigationOptions();
+        opts.topBarOptions.drawBehind = NavigationOptions.BooleanOptions.True;
+        uut.mergeNavigationOptions(opts);
+
+        uutLayoutParams = (RelativeLayout.LayoutParams) ((ViewGroup) uut.getContainer().asView()).getChildAt(1).getLayoutParams();
+        assertThat(uutLayoutParams.getRule(BELOW)).isEqualTo(0);
+    }
 }

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

@@ -7,7 +7,7 @@ import android.widget.FrameLayout;
 
 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.mocks.SimpleViewController;
-import com.reactnativenavigation.mocks.TestStackAnimator;
+import com.reactnativenavigation.mocks.TestNavigationAnimator;
 
 import org.junit.Test;
 
@@ -70,7 +70,7 @@ public class ParentControllerTest extends BaseTest {
 
 	@Test
 	public void findControllerById_Recursive() throws Exception {
-		StackController stackController = new StackController(activity, "stack", new TestStackAnimator());
+		StackController stackController = new StackController(activity, "stack", new TestNavigationAnimator());
 		SimpleViewController child1 = new SimpleViewController(activity, "child1");
 		SimpleViewController child2 = new SimpleViewController(activity, "child2");
 		stackController.push(child1);

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

@@ -4,7 +4,7 @@ import android.app.Activity;
 
 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.mocks.SimpleViewController;
-import com.reactnativenavigation.mocks.TestStackAnimator;
+import com.reactnativenavigation.mocks.TestNavigationAnimator;
 
 import org.assertj.core.api.iterable.Extractor;
 import org.junit.Test;
@@ -26,7 +26,7 @@ public class StackControllerTest extends BaseTest {
 	public void beforeEach() {
 		super.beforeEach();
 		activity = newActivity();
-		uut = new StackController(activity, "uut", new TestStackAnimator());
+		uut = new StackController(activity, "uut", new TestNavigationAnimator());
 		child1 = new SimpleViewController(activity, "child1");
 		child2 = new SimpleViewController(activity, "child2");
 		child3 = new SimpleViewController(activity, "child3");
@@ -80,7 +80,7 @@ public class StackControllerTest extends BaseTest {
 		uut.push(child1);
 		assertThat(child1.getParentStackController()).isEqualTo(uut);
 
-		StackController anotherNavController = new StackController(activity, "another", new TestStackAnimator());
+		StackController anotherNavController = new StackController(activity, "another", new TestNavigationAnimator());
 		anotherNavController.push(child2);
 		assertThat(child2.getParentStackController()).isEqualTo(anotherNavController);
 	}
@@ -227,7 +227,7 @@ public class StackControllerTest extends BaseTest {
 
 	@Test
 	public void findControllerById_Deeply() throws Exception {
-		StackController stack = new StackController(activity, "stack2", new TestStackAnimator());
+		StackController stack = new StackController(activity, "stack2", new TestNavigationAnimator());
 		stack.push(child2);
 		uut.push(stack);
 		assertThat(uut.findControllerById(child2.getId())).isEqualTo(child2);

lib/android/app/src/test/java/com/reactnativenavigation/views/TopBarTest.java

@@ -9,8 +9,7 @@ import static org.assertj.core.api.Java6Assertions.assertThat;
 public class TopBarTest extends BaseTest {
 	@Test
 	public void title() throws Exception {
-		//TODO:  fix null
-		TopBar topBar = new TopBar(newActivity(), null);
+		TopBar topBar = new TopBar(newActivity());
 		assertThat(topBar.getTitle()).isEmpty();
 
 		topBar.setTitle("new title");

lib/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
-#Mon Dec 28 10:00:20 PST 2015
+#Thu Jan 04 11:01:32 EET 2018
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip

lib/src/params/options/TopBar.js

@@ -17,7 +17,7 @@ class TopBar {
    * @property {boolean} [blur]
    * @property {boolean} [noBorder]
    * @property {boolean} [largeTitle]
-   * @property {boolean} [drawUnder]
+   * @property {boolean} [drawBehind]
    * @property {options:Button[]} [rightButtons]
    * @property {options:Button[]} [leftButtons]
    */
@@ -37,7 +37,7 @@ class TopBar {
     this.noBorder = options.noBorder;
     this.largeTitle = options.largeTitle;
     this.testID = options.testID;
-    this.drawUnder = options.drawUnder;
+    this.drawBehind = options.drawBehind;
     this.rightButtons = options.rightButtons && options.rightButtons.map((button) => new Button(button));
     this.leftButtons = options.leftButtons && options.leftButtons.map((button) => new Button(button));
   }

package.json

@@ -176,6 +176,7 @@
       "react/jsx-no-bind": 0,
       "react/jsx-handler-names": 0,
       "react/forbid-component-props": 0,
+      "react/jsx-curly-brace-presence": 0,
       "capitalized-comments": 0,
       "no-use-before-define": [
         2,
@@ -196,4 +197,4 @@
       ]
     }
   }
-}
+}

playground/src/containers/ScrollViewScreen.js

@@ -10,6 +10,10 @@ class ScrollViewScreen extends Component {
   static get navigationOptions() {
     return {
       topBar: {
+        title: 'Collapse',
+        textColor: 'black',
+        textFontSize: 16,
+        drawUnder: true,
         translucent: false
       }
     };
@@ -36,9 +40,16 @@ class ScrollViewScreen extends Component {
   }
 
   onClickToggleTopBarHideOnScroll() {
+    this.setState({
+      topBarHideOnScroll: !this.state.topBarHideOnScroll
+    });
+  }
+
+  componentDidUpdate() {
     Navigation.setOptions(this.props.containerId, {
       topBar: {
-        hideOnScroll: !this.state.topBarHideOnScroll
+        drawUnder: true,
+        hideOnScroll: this.state.topBarHideOnScroll
       }
     });
   }
@@ -49,6 +60,8 @@ module.exports = ScrollViewScreen;
 const styles = StyleSheet.create({
   contentContainer: {
     alignItems: 'center',
+    backgroundColor: 'green',
+    paddingTop: 200,
     height: 1200
   }
 });