Implement CollapsingTopBar

android/app/src/main/java/com/reactnativenavigation/params/BaseScreenParams.java

@@ -33,4 +33,8 @@ public class BaseScreenParams {
     public String getNavigatorEventId() {
         return navigationParams.navigatorEventId;
     }
+
+    public boolean hasCollapsingTopBar() {
+        return styleParams.collapsingTopBarParams != null;
+    }
 }

android/app/src/main/java/com/reactnativenavigation/params/CollapsingTopBarParams.java

@@ -0,0 +1,6 @@
+package com.reactnativenavigation.params;
+
+public class CollapsingTopBarParams {
+    public String imageUri;
+    public StyleParams.Color scrimColor;
+}

android/app/src/main/java/com/reactnativenavigation/params/ScreenParams.java

@@ -5,7 +5,6 @@ import android.graphics.drawable.Drawable;
 import java.util.List;
 
 public class ScreenParams extends BaseScreenParams {
-
     public String tabLabel;
     public Drawable tabIcon;
     public List<PageParams> topTabParams;
@@ -13,5 +12,4 @@ public class ScreenParams extends BaseScreenParams {
     public boolean hasTopTabs() {
         return topTabParams != null && !topTabParams.isEmpty();
     }
-
 }

android/app/src/main/java/com/reactnativenavigation/params/StyleParams.java

@@ -41,6 +41,7 @@ public class StyleParams {
     public Color contextualMenuBackgroundColor;
 
     public Color topBarColor;
+    public CollapsingTopBarParams collapsingTopBarParams;
     public boolean topBarHidden;
     public boolean topTabsHidden;
     public boolean drawScreenBelowTopBar;

android/app/src/main/java/com/reactnativenavigation/params/parsers/CollapsingTopBarParser.java

@@ -0,0 +1,38 @@
+package com.reactnativenavigation.params.parsers;
+
+import android.graphics.Color;
+import android.os.Bundle;
+
+import com.reactnativenavigation.params.CollapsingTopBarParams;
+import com.reactnativenavigation.params.StyleParams;
+
+public class CollapsingTopBarParser extends Parser {
+    private Bundle params;
+
+    public CollapsingTopBarParser(Bundle params) {
+        this.params = params;
+    }
+
+    public CollapsingTopBarParams parse() {
+        if (!hasLocalImageResource() && !hasImageUrl()) {
+            return null;
+        }
+
+        CollapsingTopBarParams result = new CollapsingTopBarParams();
+        if (hasLocalImageResource()) {
+            result.imageUri = params.getString("collapsingToolBarImage");
+        } else {
+            result.imageUri = params.getString("collapsingToolBarImage");
+        }
+        result.scrimColor = getColor(params, "collapsingToolBarCollapsedColor", new StyleParams.Color(Color.WHITE));
+        return result;
+    }
+
+    private boolean hasLocalImageResource() {
+        return params.containsKey("collapsingToolBarImage");
+    }
+
+    private boolean hasImageUrl() {
+        return params.containsKey("collapsingToolBarImageUrl");
+    }
+}

android/app/src/main/java/com/reactnativenavigation/params/parsers/StyleParamsParser.java

@@ -25,6 +25,7 @@ public class StyleParamsParser {
         result.contextualMenuBackgroundColor = getColor("contextualMenuBackgroundColor", getDefaultContextualMenuBackgroundColor());
 
         result.topBarColor = getColor("topBarColor", getDefaultTopBarColor());
+        result.collapsingTopBarParams = new CollapsingTopBarParser(params).parse();
         result.titleBarHidden = getBoolean("titleBarHidden", getDefaultTopBarHidden());
         result.topBarTransparent = getBoolean("topBarTransparent", getDefaultTopBarHidden());
         result.titleBarTitleColor = getColor("titleBarTitleColor", getDefaultTitleBarColor());

android/app/src/main/java/com/reactnativenavigation/screens/CollapsingSingleScreen.java

@@ -0,0 +1,60 @@
+package com.reactnativenavigation.screens;
+
+import android.support.v7.app.AppCompatActivity;
+import android.widget.ScrollView;
+
+import com.reactnativenavigation.params.ScreenParams;
+import com.reactnativenavigation.views.ContentView;
+import com.reactnativenavigation.views.LeftButtonOnClickListener;
+import com.reactnativenavigation.views.collapsingToolbar.CollapsingContentViewMeasurer;
+import com.reactnativenavigation.views.collapsingToolbar.CollapsingTopBar;
+import com.reactnativenavigation.views.collapsingToolbar.OnScrollViewAddedListener;
+import com.reactnativenavigation.views.collapsingToolbar.ScrollListener;
+
+public class CollapsingSingleScreen extends SingleScreen {
+
+    public CollapsingSingleScreen(AppCompatActivity activity, ScreenParams screenParams, LeftButtonOnClickListener titleBarBarBackButtonListener) {
+        super(activity, screenParams, titleBarBarBackButtonListener);
+    }
+
+    @Override
+    protected void createTopBar() {
+        final CollapsingTopBar topBar = new CollapsingTopBar(getContext(), styleParams.collapsingTopBarParams);
+        topBar.setScrollListener(new ScrollListener(topBar,
+                new ScrollListener.OnScrollListener() {
+                    @Override
+                    public void onScroll(float amount) {
+                        contentView.collapse(amount);
+                        topBar.collapse(amount);
+                    }
+                }
+        ));
+        this.topBar = topBar;
+    }
+
+    @Override
+    protected void createContent() {
+        contentView = new ContentView(getContext(), screenParams.screenId, screenParams.navigationParams);
+        contentView.setViewMeasurer(new CollapsingContentViewMeasurer((CollapsingTopBar) topBar));
+        setupScrollDetection((CollapsingTopBar) topBar);
+        addView(contentView, createLayoutParams());
+    }
+
+    private void setupScrollDetection(final CollapsingTopBar topBar) {
+        contentView.setupScrollDetection(new ScrollListener(topBar,
+                new ScrollListener.OnScrollListener() {
+                    @Override
+                    public void onScroll(float amount) {
+                        contentView.collapse(amount);
+                        topBar.collapse(amount);
+                    }
+                }
+        ));
+        contentView.setOnScrollViewAddedListener(new OnScrollViewAddedListener() {
+            @Override
+            public void onScrollViewAdded(ScrollView scrollView) {
+                topBar.onScrollViewAdded(scrollView);
+            }
+        });
+    }
+}

android/app/src/main/java/com/reactnativenavigation/screens/Screen.java

@@ -42,7 +42,7 @@ public abstract class Screen extends RelativeLayout implements Subscriber {
     private final LeftButtonOnClickListener leftButtonOnClickListener;
     private VisibilityAnimator topBarVisibilityAnimator;
     private ScreenAnimator screenAnimator;
-    private final StyleParams styleParams;
+    protected final StyleParams styleParams;
 
     public Screen(AppCompatActivity activity, ScreenParams screenParams, LeftButtonOnClickListener leftButtonOnClickListener) {
         super(activity);
@@ -74,7 +74,7 @@ public abstract class Screen extends RelativeLayout implements Subscriber {
     }
 
     private void createViews() {
-        createTopBar();
+        createAndAddTopBar();
         createTitleBar();
         createContent();
     }
@@ -98,8 +98,16 @@ public abstract class Screen extends RelativeLayout implements Subscriber {
                 screenParams.overrideBackPressInJs);
     }
 
-    private void createTopBar() {
+    private void createAndAddTopBar() {
+        createTopBar();
+        addTopBar();
+    }
+
+    protected void createTopBar() {
         topBar = new TopBar(getContext());
+    }
+
+    private void addTopBar() {
         createTopBarVisibilityAnimator();
         addView(topBar, new LayoutParams(MATCH_PARENT, WRAP_CONTENT));
     }

android/app/src/main/java/com/reactnativenavigation/screens/ScreenFactory.java

@@ -13,6 +13,8 @@ public class ScreenFactory {
             return new FragmentScreen(activity, screenParams, leftButtonOnClickListener);
         } else if (screenParams.hasTopTabs()) {
             return new ViewPagerScreen(activity, screenParams, leftButtonOnClickListener);
+        } else if (screenParams.hasCollapsingTopBar()) {
+            return new CollapsingSingleScreen(activity, screenParams, leftButtonOnClickListener);
         } else {
             return new SingleScreen(activity, screenParams, leftButtonOnClickListener);
         }

android/app/src/main/java/com/reactnativenavigation/screens/SingleScreen.java

@@ -9,8 +9,7 @@ import com.reactnativenavigation.views.LeftButtonOnClickListener;
 import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
 
 public class SingleScreen extends Screen {
-
-    private ContentView contentView;
+    protected ContentView contentView;
 
     public SingleScreen(AppCompatActivity activity, ScreenParams screenParams,
                         LeftButtonOnClickListener titleBarBarBackButtonListener) {
@@ -20,11 +19,15 @@ public class SingleScreen extends Screen {
     @Override
     protected void createContent() {
         contentView = new ContentView(getContext(), screenParams.screenId, screenParams.navigationParams);
+        addView(contentView, createLayoutParams());
+    }
+
+    protected LayoutParams createLayoutParams() {
         LayoutParams params = new LayoutParams(MATCH_PARENT, MATCH_PARENT);
         if (screenParams.styleParams.drawScreenBelowTopBar) {
             params.addRule(BELOW, topBar.getId());
         }
-        addView(contentView, 0, params);
+        return params;
     }
 
     @Override

android/app/src/main/java/com/reactnativenavigation/utils/ViewUtils.java

@@ -43,6 +43,16 @@ public class ViewUtils {
         return dp * scale + 0.5f;
     }
 
+    public static float convertPixelToSp(float pixels) {
+        float scaledDensity = NavigationApplication.instance.getResources().getDisplayMetrics().scaledDensity;
+        return pixels/scaledDensity;
+    }
+
+    public static float convertSpToPixel(float pixels) {
+        float scaledDensity = NavigationApplication.instance.getResources().getDisplayMetrics().scaledDensity;
+        return pixels * scaledDensity;
+    }
+
     public static int generateViewId() {
         if (Build.VERSION.SDK_INT >= 17) {
             return View.generateViewId();
@@ -69,6 +79,5 @@ public class ViewUtils {
             }
         }
     }
-
 }
 

android/app/src/main/java/com/reactnativenavigation/views/ContentView.java

@@ -1,27 +1,58 @@
 package com.reactnativenavigation.views;
 
 import android.content.Context;
+import android.support.annotation.Nullable;
+import android.view.MotionEvent;
 import android.view.View;
+import android.widget.ScrollView;
 
 import com.facebook.react.ReactRootView;
 import com.reactnativenavigation.NavigationApplication;
 import com.reactnativenavigation.params.NavigationParams;
 import com.reactnativenavigation.screens.SingleScreen;
 import com.reactnativenavigation.utils.ViewUtils;
+import com.reactnativenavigation.views.collapsingToolbar.OnScrollViewAddedListener;
+import com.reactnativenavigation.views.collapsingToolbar.ScrollListener;
+import com.reactnativenavigation.views.collapsingToolbar.ScrollViewDelegate;
+import com.reactnativenavigation.views.utils.ViewMeasurer;
 
 public class ContentView extends ReactRootView {
-
     private final String screenId;
     private final NavigationParams navigationParams;
 
     boolean isContentVisible = false;
     private SingleScreen.OnDisplayListener onDisplayListener;
+    @Nullable private ScrollViewDelegate scrollViewDelegate;
+    private ViewMeasurer viewMeasurer;
+    private OnScrollViewAddedListener scrollViewAddedListener;
+
+    public void setOnDisplayListener(SingleScreen.OnDisplayListener onDisplayListener) {
+        this.onDisplayListener = onDisplayListener;
+    }
+
+    public void setOnScrollViewAddedListener(OnScrollViewAddedListener scrollViewAddedListener) {
+        this.scrollViewAddedListener = scrollViewAddedListener;
+    }
 
     public ContentView(Context context, String screenId, NavigationParams navigationParams) {
         super(context);
         this.screenId = screenId;
         this.navigationParams = navigationParams;
         attachToJS();
+        viewMeasurer = new ViewMeasurer();
+    }
+
+    public void setupScrollDetection(ScrollListener scrollListener) {
+        scrollViewDelegate = new ScrollViewDelegate(scrollListener);
+    }
+
+    public void setViewMeasurer(ViewMeasurer viewMeasurer) {
+        this.viewMeasurer = viewMeasurer;
+    }
+
+    private void attachToJS() {
+        startReactApplication(NavigationApplication.instance.getReactGateway().getReactInstanceManager(), screenId,
+                navigationParams.toBundle());
     }
 
     public String getNavigatorEventId() {
@@ -32,10 +63,38 @@ public class ContentView extends ReactRootView {
         unmountReactApplication();
     }
 
+    @Override
+    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
+        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
+        setMeasuredDimension(viewMeasurer.getMeasuredWidth(widthMeasureSpec),
+                viewMeasurer.getMeasuredHeight(heightMeasureSpec));
+    }
+
+    @Override
+    public boolean dispatchTouchEvent(MotionEvent ev) {
+        if (scrollViewDelegate != null) {
+            boolean consumed = scrollViewDelegate.didInterceptTouchEvent(ev);
+            if (consumed) {
+                return true;
+            }
+        }
+        return super.dispatchTouchEvent(ev);
+    }
+
     @Override
     public void onViewAdded(final View child) {
         super.onViewAdded(child);
         detectContentViewVisible(child);
+        if (child instanceof ScrollView) {
+            onScrollViewAdded((ScrollView) child);
+        }
+    }
+
+    private void onScrollViewAdded(ScrollView child) {
+        if (scrollViewDelegate != null) {
+            scrollViewDelegate.onScrollViewAdded(child);
+            scrollViewAddedListener.onScrollViewAdded(child);
+        }
     }
 
     private void detectContentViewVisible(View child) {
@@ -53,12 +112,7 @@ public class ContentView extends ReactRootView {
         }
     }
 
-    private void attachToJS() {
-        startReactApplication(NavigationApplication.instance.getReactGateway().getReactInstanceManager(), screenId,
-                navigationParams.toBundle());
-    }
-
-    public void setOnDisplayListener(SingleScreen.OnDisplayListener onDisplayListener) {
-        this.onDisplayListener = onDisplayListener;
+    public void collapse(float collapse) {
+        setTranslationY(collapse);
     }
 }

android/app/src/main/java/com/reactnativenavigation/views/Scrim.java

@@ -0,0 +1,61 @@
+package com.reactnativenavigation.views;
+
+import android.content.Context;
+import android.view.View;
+import android.view.animation.DecelerateInterpolator;
+import android.view.animation.Interpolator;
+
+import com.reactnativenavigation.params.StyleParams;
+
+import static com.reactnativenavigation.views.Scrim.State.Invisible;
+import static com.reactnativenavigation.views.Scrim.State.Visible;
+
+public class Scrim extends View {
+    enum State {Visible, Invisible}
+
+    private State state = Invisible;
+    private final float collapseThreshold;
+    private final static int ANIMATION_DURATION = 600;
+    private final Interpolator interpolator;
+
+    public Scrim(Context context, StyleParams.Color color, float collapseThreshold) {
+        super(context);
+        this.collapseThreshold = collapseThreshold;
+        setBackgroundColor(color.getColor());
+        setAlpha(0);
+        interpolator = new DecelerateInterpolator();
+    }
+
+    public void collapse(float collapse) {
+        if (shouldShowScrim(collapse)) {
+            showScrim();
+        } else if (shouldHideScrim(collapse)) {
+            hideScrim();
+        }
+
+    }
+
+    private boolean shouldShowScrim(float collapse) {
+        return Math.abs(collapse) >= collapseThreshold && state == Invisible;
+    }
+
+    private boolean shouldHideScrim(float collapse) {
+        return Math.abs(collapse) < collapseThreshold && state == Visible;
+    }
+
+    private void showScrim() {
+        state = Visible;
+        animate()
+                .alpha(1)
+                .setDuration(ANIMATION_DURATION)
+                .setInterpolator(interpolator);
+    }
+
+    private void hideScrim() {
+        state = Invisible;
+        animate()
+                .alpha(0)
+                .setDuration(ANIMATION_DURATION)
+                .setInterpolator(interpolator);
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/TitleBar.java

@@ -12,7 +12,6 @@ import android.view.View;
 import android.view.animation.AccelerateDecelerateInterpolator;
 import android.view.animation.AccelerateInterpolator;
 
-import com.reactnativenavigation.animation.VisibilityAnimator;
 import com.reactnativenavigation.params.BaseTitleBarButtonParams;
 import com.reactnativenavigation.params.StyleParams;
 import com.reactnativenavigation.params.TitleBarButtonParams;
@@ -23,8 +22,6 @@ import java.util.List;
 
 public class TitleBar extends Toolbar {
 
-    private boolean hideOnScroll = false;
-    private VisibilityAnimator visibilityAnimator;
     private LeftButton leftButton;
     private ActionMenuView actionMenuView;
 
@@ -43,11 +40,9 @@ public class TitleBar extends Toolbar {
     public void setRightButtons(List<TitleBarButtonParams> rightButtons, String navigatorEventId) {
         Menu menu = getMenu();
         menu.clear();
-
         if (rightButtons == null) {
             return;
         }
-
         addButtonsToTitleBar(rightButtons, navigatorEventId, menu);
     }
 
@@ -80,13 +75,13 @@ public class TitleBar extends Toolbar {
         return overflowIcon != null && params.titleBarButtonColor.hasColor();
     }
 
-    private void setTitleTextColor(StyleParams params) {
+    protected void setTitleTextColor(StyleParams params) {
         if (params.titleBarTitleColor.hasColor()) {
             setTitleTextColor(params.titleBarTitleColor.getColor());
         }
     }
 
-    private void setSubtitleTextColor(StyleParams params) {
+    protected void setSubtitleTextColor(StyleParams params) {
         if (params.titleBarSubtitleColor.hasColor()) {
             setSubtitleTextColor(params.titleBarSubtitleColor.getColor());
         }
@@ -126,23 +121,6 @@ public class TitleBar extends Toolbar {
         setNavigationIcon(leftButton);
     }
 
-    public void setHideOnScroll(boolean hideOnScroll) {
-        this.hideOnScroll = hideOnScroll;
-    }
-
-    public void onScrollChanged(ScrollDirectionListener.Direction direction) {
-        if (hideOnScroll) {
-            if (visibilityAnimator == null) {
-                createScrollAnimator();
-            }
-            visibilityAnimator.onScrollChanged(direction);
-        }
-    }
-
-    private void createScrollAnimator() {
-        visibilityAnimator = new VisibilityAnimator(this, VisibilityAnimator.HideDirection.Up, getHeight());
-    }
-
     public void hide() {
         hide(null);
     }

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

@@ -6,7 +6,7 @@ import android.os.Build;
 import android.support.design.widget.AppBarLayout;
 import android.support.design.widget.TabLayout;
 import android.view.ViewGroup;
-import android.widget.RelativeLayout;
+import android.widget.FrameLayout;
 
 import com.facebook.react.bridge.Callback;
 import com.reactnativenavigation.params.ContextualMenuParams;
@@ -21,21 +21,19 @@ import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
 import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
 
 public class TopBar extends AppBarLayout {
-
-    private TitleBar titleBar;
+    protected TitleBar titleBar;
     private ContextualMenu contextualMenu;
-    private RelativeLayout titleBarAndContextualMenuContainer;
+    protected FrameLayout titleBarAndContextualMenuContainer;
     private TopTabs topTabs;
 
     public TopBar(Context context) {
         super(context);
-        setFitsSystemWindows(true);
         setId(ViewUtils.generateViewId());
         createLayout();
     }
 
-    private void createLayout() {
-        titleBarAndContextualMenuContainer = new RelativeLayout(getContext());
+    protected void createLayout() {
+        titleBarAndContextualMenuContainer = new FrameLayout(getContext());
         addView(titleBarAndContextualMenuContainer);
     }
 
@@ -43,8 +41,16 @@ public class TopBar extends AppBarLayout {
                                          TitleBarLeftButtonParams leftButton,
                                          LeftButtonOnClickListener leftButtonOnClickListener,
                                          String navigatorEventId, boolean overrideBackPressInJs) {
-        titleBar = new TitleBar(getContext());
-        titleBarAndContextualMenuContainer.addView(titleBar, new ViewGroup.LayoutParams(MATCH_PARENT, WRAP_CONTENT));
+        titleBar = createTitleBar();
+        titleBarAndContextualMenuContainer.addView(titleBar, new ViewGroup.LayoutParams(MATCH_PARENT, MATCH_PARENT));
+        addButtons(rightButtons, leftButton, leftButtonOnClickListener, navigatorEventId, overrideBackPressInJs);
+    }
+
+    protected TitleBar createTitleBar() {
+        return new TitleBar(getContext());
+    }
+
+    private void addButtons(List<TitleBarButtonParams> rightButtons, TitleBarLeftButtonParams leftButton, LeftButtonOnClickListener leftButtonOnClickListener, String navigatorEventId, boolean overrideBackPressInJs) {
         titleBar.setRightButtons(rightButtons, navigatorEventId);
         titleBar.setLeftButton(leftButton, leftButtonOnClickListener, navigatorEventId, overrideBackPressInJs);
     }

android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/CollapseAmount.java

@@ -0,0 +1,22 @@
+package com.reactnativenavigation.views.collapsingToolbar;
+
+public class CollapseAmount {
+    public static CollapseAmount NONE = new CollapseAmount();
+    private Float amount;
+
+    public CollapseAmount(float amount) {
+        this.amount = amount;
+    }
+
+    private CollapseAmount() {
+
+    }
+
+    public boolean canCollapse() {
+        return amount != null;
+    }
+
+    public float get() {
+        return amount;
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/CollapseCalculator.java

@@ -0,0 +1,168 @@
+package com.reactnativenavigation.views.collapsingToolbar;
+
+import android.support.annotation.NonNull;
+import android.support.annotation.Nullable;
+import android.view.MotionEvent;
+import android.widget.ScrollView;
+
+import com.reactnativenavigation.utils.ViewUtils;
+
+class CollapseCalculator {
+    private float collapse;
+    private MotionEvent previousTouchEvent;
+    private float touchDownY = -1;
+    private float previousCollapseY = -1;
+    private boolean isExpended;
+    private boolean isCollapsed = true;
+    private boolean canCollapse = true;
+    private boolean canExpend = false;
+    private CollapsingView view;
+    protected ScrollView scrollView;
+    private static float finalCollapsedTranslation;
+
+    CollapseCalculator(final CollapsingView collapsingView) {
+        this.view = collapsingView;
+        ViewUtils.runOnPreDraw(view.asView(), new Runnable() {
+            @Override
+            public void run() {
+                finalCollapsedTranslation = view.getFinalCollapseValue();
+            }
+        });
+    }
+
+    void setScrollView(ScrollView scrollView) {
+        this.scrollView = scrollView;
+    }
+
+    @NonNull
+    CollapseAmount calculate(MotionEvent event) {
+        updateInitialTouchY(event);
+        if (!isMoveEvent(event)) {
+            return CollapseAmount.NONE;
+        }
+
+        if (shouldTranslateTopBarAndScrollView(event)) {
+            return calculateCollapse(event);
+        } else {
+            previousCollapseY = -1;
+            previousTouchEvent = MotionEvent.obtain(event);
+            return CollapseAmount.NONE;
+        }
+    }
+
+    private boolean shouldTranslateTopBarAndScrollView(MotionEvent event) {
+        checkCollapseLimits();
+        ScrollDirection.Direction direction = getScrollDirection(event.getRawY());
+        return isMoveEvent(event) &&
+               (isNotCollapsedOrExpended() ||
+                (canCollapse && isExpendedAndScrollingUp(direction)) ||
+                (canExpend && isCollapsedAndScrollingDown(direction)));
+    }
+
+    private ScrollDirection.Direction getScrollDirection(float y) {
+        if (y == (previousCollapseY == -1 ? touchDownY : previousCollapseY)) {
+            return ScrollDirection.Direction.None;
+        }
+        if (previousTouchEvent == null) {
+            return ScrollDirection.Direction.None;
+        }
+        return y < previousTouchEvent.getRawY() ?
+                ScrollDirection.Direction.Up :
+                ScrollDirection.Direction.Down;
+    }
+
+    private void checkCollapseLimits() {
+        float currentTopBarTranslation = view.getCurrentCollapseValue();
+        float finalExpendedTranslation = 0;
+        isExpended = isExpended(currentTopBarTranslation, finalExpendedTranslation);
+        isCollapsed = isCollapsed(currentTopBarTranslation, finalCollapsedTranslation);
+        canCollapse = calculateCanCollapse(currentTopBarTranslation, finalExpendedTranslation, finalCollapsedTranslation);
+        canExpend = calculateCanExpend(currentTopBarTranslation, finalExpendedTranslation, finalCollapsedTranslation);
+    }
+
+    private boolean calculateCanCollapse(float currentTopBarTranslation, float finalExpendedTranslation, float finalCollapsedTranslation) {
+        return currentTopBarTranslation > finalCollapsedTranslation &&
+               currentTopBarTranslation <= finalExpendedTranslation;
+    }
+
+    private boolean calculateCanExpend(float currentTopBarTranslation, float finalExpendedTranslation, float finalCollapsedTranslation) {
+        return currentTopBarTranslation >= finalCollapsedTranslation &&
+               currentTopBarTranslation < finalExpendedTranslation &&
+               scrollView.getScrollY() == 0;
+    }
+
+    private boolean isCollapsedAndScrollingDown(ScrollDirection.Direction direction) {
+        return isCollapsed && direction == ScrollDirection.Direction.Down;
+    }
+
+    private boolean isExpendedAndScrollingUp(ScrollDirection.Direction direction) {
+        return isExpended && direction == ScrollDirection.Direction.Up;
+    }
+
+    private  boolean isNotCollapsedOrExpended() {
+        return canExpend && canCollapse;
+    }
+
+    private boolean isCollapsed(float currentTopBarTranslation, float finalCollapsedTranslation) {
+        return currentTopBarTranslation == finalCollapsedTranslation;
+    }
+
+    private boolean isExpended(float currentTopBarTranslation, float finalExpendedTranslation) {
+        return currentTopBarTranslation == finalExpendedTranslation;
+    }
+
+    private CollapseAmount calculateCollapse(MotionEvent event) {
+        float y = event.getRawY();
+        if (previousCollapseY == -1) {
+            previousCollapseY = y;
+        }
+        collapse = calculateCollapse(y);
+        previousCollapseY = y;
+        previousTouchEvent = MotionEvent.obtain(event);
+        return new CollapseAmount(collapse);
+    }
+
+    private float calculateCollapse(float y) {
+        float translation = y - previousCollapseY + view.getCurrentCollapseValue();
+        if (translation < finalCollapsedTranslation) {
+            translation = finalCollapsedTranslation;
+        }
+        final float expendedTranslation = 0;
+        if (translation > expendedTranslation) {
+            translation = expendedTranslation;
+        }
+        return translation;
+    }
+
+
+    private void updateInitialTouchY(MotionEvent event) {
+        if (isTouchDown(previousTouchEvent) && isMoveEvent(event)) {
+            saveInitialTouchY(previousTouchEvent);
+        } else if (isTouchUp(event) && isMoveEvent(previousTouchEvent)) {
+            clearInitialTouchY();
+        }
+    }
+
+    private boolean isMoveEvent(@Nullable MotionEvent event) {
+        return event != null && event.getActionMasked() == MotionEvent.ACTION_MOVE;
+    }
+
+    private boolean isTouchDown(@Nullable MotionEvent event) {
+        return event != null && event.getActionMasked() == MotionEvent.ACTION_DOWN;
+    }
+
+    private boolean isTouchUp(@Nullable MotionEvent event) {
+        return event != null && event.getActionMasked() == MotionEvent.ACTION_UP;
+    }
+
+    private void saveInitialTouchY(MotionEvent event) {
+        touchDownY = event.getRawY();
+        previousCollapseY = touchDownY;
+    }
+
+    private void clearInitialTouchY() {
+        touchDownY = -1;
+        previousCollapseY = -1;
+        collapse = 0;
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/CollapsingContentViewMeasurer.java

@@ -0,0 +1,15 @@
+package com.reactnativenavigation.views.collapsingToolbar;
+
+import com.reactnativenavigation.views.utils.ViewMeasurer;
+
+public class CollapsingContentViewMeasurer extends ViewMeasurer {
+    private final float titleBarHeight;
+    public CollapsingContentViewMeasurer(CollapsingTopBar topBar) {
+        titleBarHeight = topBar.getTitleBarHeight();
+    }
+
+    @Override
+    public int getMeasuredHeight(int heightMeasureSpec) {
+        return (int) (super.getMeasuredHeight(heightMeasureSpec) + CollapsingToolBar.MAX_HEIGHT - titleBarHeight);
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/CollapsingTextView.java

@@ -0,0 +1,119 @@
+package com.reactnativenavigation.views.collapsingToolbar;
+
+import android.annotation.SuppressLint;
+import android.content.Context;
+import android.graphics.Canvas;
+import android.graphics.Color;
+import android.graphics.Paint;
+import android.support.annotation.FloatRange;
+import android.support.v4.widget.TextViewCompat;
+import android.support.v7.widget.TintTypedArray;
+import android.view.animation.DecelerateInterpolator;
+import android.view.animation.Interpolator;
+import android.widget.FrameLayout;
+import android.widget.LinearLayout;
+import android.widget.TextView;
+
+import com.reactnativenavigation.params.StyleParams;
+import com.reactnativenavigation.utils.ViewUtils;
+
+public class CollapsingTextView extends FrameLayout {
+    private static final float TEXT_SCALE_FACTOR = 1.75f;
+    private static final float INTERPOLATOR_EASING_FACTOR = 0.5f;
+
+    private final int collapsedHeight;
+    private TextView dummy;
+    private String text;
+    private Paint paint;
+    private float initialY;
+    private float currentY;
+    private float collapseY;
+    private float collapseFraction;
+    private int[] positionOnScreen;
+    private Interpolator scaleInterpolator;
+    private float expendedTextSize;
+    private float collapsedTextSize;
+
+    public CollapsingTextView(Context context, int collapsedHeight) {
+        super(context);
+        this.collapsedHeight = collapsedHeight;
+        setWillNotDraw(false);
+        createDummyTextView(context);
+        createTextPaint();
+        scaleInterpolator = new DecelerateInterpolator(INTERPOLATOR_EASING_FACTOR);
+        setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT));
+    }
+
+    @SuppressLint("PrivateResource")
+    private void createDummyTextView(Context context) {
+        final TintTypedArray a = TintTypedArray.obtainStyledAttributes(getContext(), null,
+                android.support.v7.appcompat.R.styleable.Toolbar, android.support.v7.appcompat.R.attr.toolbarStyle, 0);
+        int titleTextAppearance =
+                a.getResourceId(android.support.v7.appcompat.R.styleable.Toolbar_titleTextAppearance, 0);
+        a.recycle();
+
+        dummy = new TextView(context);
+        TextViewCompat.setTextAppearance(dummy, titleTextAppearance);
+        collapsedTextSize = dummy.getTextSize();
+        expendedTextSize = collapsedTextSize * TEXT_SCALE_FACTOR;
+        dummy.setTextSize(ViewUtils.convertPixelToSp(expendedTextSize));
+        dummy.setVisibility(INVISIBLE);
+        addView(dummy, new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
+    }
+
+    private void createTextPaint() {
+        paint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.LINEAR_TEXT_FLAG);
+        paint.setColor(Color.GREEN);
+        paint.setTextSize(expendedTextSize);
+
+        ViewUtils.runOnPreDraw(dummy, new Runnable() {
+            @Override
+            public void run() {
+                positionOnScreen = new int[2];
+                getLocationInWindow(positionOnScreen);
+                currentY = initialY = positionOnScreen[1] + getMeasuredHeight() - dummy.getMeasuredHeight();
+                float bottomMargin = ViewUtils.convertDpToPixel(10);
+                collapseY = positionOnScreen[1] + bottomMargin;
+                invalidate();
+            }
+        });
+    }
+
+    public void setText(String text) {
+        this.text = text;
+        dummy.setText(text);
+    }
+
+    public void setTextColor(StyleParams params) {
+        if (params.titleBarTitleColor.hasColor()) {
+            paint.setColor(params.titleBarTitleColor.getColor());
+        }
+    }
+
+    public void collapseBy(float translation) {
+        collapseFraction = calculateFraction(translation);
+        currentY = linearInterpolation(initialY, collapseY, collapseFraction);
+        invalidate();
+    }
+
+    /*
+    * A value of {@code 0.0} indicates that the layout is fully expanded.
+    * A value of {@code 1.0} indicates that the layout is fully collapsed.
+    */
+    @FloatRange(from = 0.0, to = 1.0)
+    private float calculateFraction(float translation) {
+        return Math.abs(translation / (getMeasuredHeight() - collapsedHeight));
+    }
+
+    @Override
+    protected void onDraw(Canvas canvas) {
+        super.onDraw(canvas);
+        paint.setTextSize(linearInterpolation(expendedTextSize, collapsedTextSize, collapseFraction));
+        canvas.drawText(text, 0, currentY, paint);
+    }
+
+    private float linearInterpolation(float from, float to, float fraction) {
+        fraction = scaleInterpolator.getInterpolation(fraction);
+        return from + (fraction * (to - from));
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/CollapsingTitleBar.java

@@ -0,0 +1,52 @@
+package com.reactnativenavigation.views.collapsingToolbar;
+
+import android.content.Context;
+import android.view.MotionEvent;
+import android.view.View;
+
+import com.reactnativenavigation.params.StyleParams;
+import com.reactnativenavigation.views.TitleBar;
+
+public class CollapsingTitleBar extends TitleBar implements View.OnTouchListener {
+    private CollapsingTextView title;
+    private int collapsedHeight;
+    private final ScrollListener scrollListener;
+
+    public CollapsingTitleBar(Context context, int collapsedHeight, ScrollListener scrollListener) {
+        super(context);
+        this.collapsedHeight = collapsedHeight;
+        this.scrollListener = scrollListener;
+        addCollapsingTitle();
+        setOnTouchListener(this);
+    }
+
+    private void addCollapsingTitle() {
+        title = new CollapsingTextView(getContext(), collapsedHeight);
+        addView(title);
+    }
+
+    @Override
+    public void setTitle(CharSequence title) {
+        this.title.setText((String) title);
+    }
+
+    @Override
+    protected void setTitleTextColor(StyleParams params) {
+        title.setTextColor(params);
+    }
+
+    @Override
+    protected void setSubtitleTextColor(StyleParams params) {
+    }
+
+    public void collapse(float collapse) {
+        title.setTranslationY(0);
+        setTranslationY(-collapse);
+        title.collapseBy(collapse);
+    }
+
+    @Override
+    public boolean onTouch(View v, MotionEvent event) {
+        return scrollListener.onTouch(event);
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/CollapsingToolBar.java

@@ -0,0 +1,68 @@
+package com.reactnativenavigation.views.collapsingToolbar;
+
+import android.content.Context;
+import android.content.res.TypedArray;
+import android.widget.FrameLayout;
+import android.widget.ImageView;
+
+import com.facebook.drawee.view.SimpleDraweeView;
+import com.reactnativenavigation.R;
+import com.reactnativenavigation.params.CollapsingTopBarParams;
+import com.reactnativenavigation.utils.ViewUtils;
+import com.reactnativenavigation.views.Scrim;
+
+import static android.widget.FrameLayout.LayoutParams.MATCH_PARENT;
+
+public class CollapsingToolBar extends FrameLayout {
+    public static final float MAX_HEIGHT = ViewUtils.convertDpToPixel(256);
+    private final CollapsingTopBarParams params;
+    private SimpleDraweeView backdrop;
+    private Scrim scrim;
+    private int topBarHeight = -1;
+
+    public CollapsingToolBar(Context context, CollapsingTopBarParams params) {
+        super(context);
+        this.params = params;
+        setFitsSystemWindows(true);
+        createBackDropImage();
+        createScrim();
+        setWillNotDraw(false);
+    }
+
+    private void createBackDropImage() {
+        backdrop = new SimpleDraweeView(getContext());
+        setImageSource();
+        backdrop.setScaleType(ImageView.ScaleType.CENTER_CROP);
+        backdrop.setFitsSystemWindows(true);
+        addView(backdrop, new LayoutParams(MATCH_PARENT, MATCH_PARENT));
+    }
+
+    private void setImageSource() {
+        if (params.imageUri != null) {
+            backdrop.setImageURI(params.imageUri);
+        }
+    }
+
+    private void createScrim() {
+        scrim = new Scrim(getContext(), params.scrimColor, MAX_HEIGHT / 2);
+        addView(scrim);
+    }
+
+    public int getCollapsedTopBarHeight() {
+        if (topBarHeight > -1) {
+            return topBarHeight;
+        }
+        calculateTopBarHeight();
+        return topBarHeight;
+    }
+    private void calculateTopBarHeight() {
+        int[] attrs = new int[] {R.attr.actionBarSize};
+        TypedArray ta = getContext().obtainStyledAttributes(attrs);
+        topBarHeight = ta.getDimensionPixelSize(0, -1);
+        ta.recycle();
+    }
+
+    public void collapse(float collapse) {
+        scrim.collapse(collapse);
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/CollapsingTopBar.java

@@ -0,0 +1,69 @@
+package com.reactnativenavigation.views.collapsingToolbar;
+
+import android.content.Context;
+import android.view.View;
+import android.widget.ScrollView;
+
+import com.reactnativenavigation.params.CollapsingTopBarParams;
+import com.reactnativenavigation.views.TitleBar;
+import com.reactnativenavigation.views.TopBar;
+
+public class CollapsingTopBar extends TopBar implements CollapsingView {
+    private CollapsingToolBar collapsingToolBar;
+    private ScrollListener scrollListener;
+
+    public CollapsingTopBar(Context context, CollapsingTopBarParams params) {
+        super(context);
+        createCollapsingTopBar(params);
+    }
+
+    public void setScrollListener(ScrollListener scrollListener) {
+        this.scrollListener = scrollListener;
+    }
+
+    private void createCollapsingTopBar(CollapsingTopBarParams params) {
+        collapsingToolBar = new CollapsingToolBar(getContext(), params);
+        LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, (int) CollapsingToolBar.MAX_HEIGHT);
+        titleBarAndContextualMenuContainer.addView(collapsingToolBar, lp);
+    }
+
+    @Override
+    protected TitleBar createTitleBar() {
+        return new CollapsingTitleBar(getContext(),
+                collapsingToolBar.getCollapsedTopBarHeight(),
+                scrollListener);
+    }
+
+    public int getTitleBarHeight() {
+        return titleBar.getMeasuredHeight();
+    }
+
+    public CollapsingToolBar getCollapsingToolBar() {
+        return collapsingToolBar;
+    }
+
+    public void collapse(float collapse) {
+        setTranslationY(collapse);
+        ((CollapsingTitleBar) titleBar).collapse(collapse);
+        collapsingToolBar.collapse(collapse);
+    }
+
+    public void onScrollViewAdded(ScrollView scrollView) {
+        scrollListener.onScrollViewAdded(scrollView);
+    }
+
+    @Override
+    public float getFinalCollapseValue() {
+        return getCollapsingToolBar().getCollapsedTopBarHeight() - getHeight();
+    }
+
+    @Override
+    public float getCurrentCollapseValue() {
+        return getTranslationY();
+    }
+
+    @Override
+    public View asView() {
+        return this;
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/CollapsingView.java

@@ -0,0 +1,11 @@
+package com.reactnativenavigation.views.collapsingToolbar;
+
+import android.view.View;
+
+public interface CollapsingView {
+    float getFinalCollapseValue();
+
+    float getCurrentCollapseValue();
+
+    View asView();
+}

android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/OnScrollViewAddedListener.java

@@ -0,0 +1,7 @@
+package com.reactnativenavigation.views.collapsingToolbar;
+
+import android.widget.ScrollView;
+
+public interface OnScrollViewAddedListener {
+    void onScrollViewAdded(ScrollView scrollView);
+}

android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/ScrollDirection.java

@@ -0,0 +1,50 @@
+package com.reactnativenavigation.views.collapsingToolbar;
+
+import android.widget.ScrollView;
+
+public class ScrollDirection {
+
+    public enum Direction {
+        Up, Down, None
+    }
+
+    private final ScrollView scrollView;
+    private int lastScrollY = 0;
+
+    public ScrollDirection(ScrollView scrollView) {
+        this.scrollView = scrollView;
+    }
+
+    public Direction getScrollDirection() {
+        Direction direction = Direction.None;
+
+        final int scrollY = scrollView.getScrollY();
+        if (isScrollPositionChanged(scrollY) && !isTopOverscroll(scrollY) && !isBottomOverscroll(scrollY)) {
+            direction = getScrollDirection(scrollY);
+            lastScrollY = scrollY;
+        }
+        return direction;
+    }
+
+    public int getScrollDelta() {
+        return scrollView.getScrollY() - lastScrollY;
+    }
+
+
+    private Direction getScrollDirection(int scrollY) {
+        return scrollY > lastScrollY ? Direction.Up : Direction.Down;
+    }
+
+    private boolean isBottomOverscroll(int scrollY) {
+        return scrollY >= (scrollView.getChildAt(0).getHeight() - scrollView.getHeight());
+    }
+
+    private boolean isTopOverscroll(int scrollY) {
+        return scrollY <= 0;
+    }
+
+    private boolean isScrollPositionChanged(int scrollY) {
+        return scrollY != lastScrollY;
+    }
+
+}

android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/ScrollListener.java

@@ -0,0 +1,37 @@
+package com.reactnativenavigation.views.collapsingToolbar;
+
+import android.view.MotionEvent;
+import android.widget.ScrollView;
+
+public class ScrollListener implements ScrollViewDelegate.OnScrollListener {
+    private CollapseCalculator collapseCalculator;
+    private OnScrollListener scrollListener;
+
+    public interface  OnScrollListener {
+        void onScroll(float amount);
+    }
+
+    public ScrollListener(CollapsingView collapsingView, OnScrollListener scrollListener) {
+        this.collapseCalculator = new CollapseCalculator(collapsingView);
+        this.scrollListener = scrollListener;
+    }
+
+    @Override
+    public void onScrollViewAdded(ScrollView scrollView) {
+        collapseCalculator.setScrollView(scrollView);
+    }
+
+    @Override
+    public boolean onTouch(MotionEvent event) {
+        return handleTouch(event);
+    }
+
+    private boolean handleTouch(MotionEvent event) {
+        CollapseAmount amount = collapseCalculator.calculate(event);
+        if (amount.canCollapse()) {
+            scrollListener.onScroll(amount.get());
+            return true;
+        }
+        return false;
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/ScrollViewDelegate.java

@@ -0,0 +1,39 @@
+package com.reactnativenavigation.views.collapsingToolbar;
+
+import android.view.MotionEvent;
+import android.view.View;
+import android.widget.ScrollView;
+
+public class ScrollViewDelegate implements View.OnTouchListener {
+    interface OnScrollListener {
+        boolean onTouch(MotionEvent event);
+
+        void onScrollViewAdded(ScrollView scrollView);
+    }
+
+    private ScrollView scrollView;
+    private OnScrollListener listener;
+    private Boolean didInterceptLastTouchEvent = null;
+
+    public ScrollViewDelegate(OnScrollListener scrollListener) {
+        listener = scrollListener;
+    }
+
+    public void onScrollViewAdded(ScrollView scrollView) {
+        this.scrollView = scrollView;
+        this.scrollView.setScrollbarFadingEnabled(false);
+        listener.onScrollViewAdded(this.scrollView);
+    }
+
+    public boolean didInterceptTouchEvent(MotionEvent ev) {
+            return listener.onTouch(ev);
+    }
+
+    @Override
+    public boolean onTouch(View view, MotionEvent event) {
+        if (!didInterceptLastTouchEvent) {
+            scrollView.onTouchEvent(event);
+        }
+        return this.listener.onTouch(event);
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/utils/ViewMeasurer.java

@@ -0,0 +1,14 @@
+package com.reactnativenavigation.views.utils;
+
+import static android.view.View.MeasureSpec;
+
+public class ViewMeasurer {
+
+    public int getMeasuredHeight(int heightMeasuerSpec) {
+        return MeasureSpec.getSize(heightMeasuerSpec);
+    }
+
+    public int getMeasuredWidth(int widthMeasureSpec) {
+        return MeasureSpec.getSize(widthMeasureSpec);
+    }
+}

example/src/app.js

@@ -7,6 +7,12 @@ registerScreens();
 // this will start our app
 Navigation.startTabBasedApp({
   tabs: [
+    {
+      label: 'Collapsing',
+      screen: 'example.CollapsingTopBarScreen',
+      icon: require('../img/one.png'),
+      title: 'Collapsing',
+    },
     {
       label: 'One',
       screen: 'example.FirstTabScreen',
@@ -25,12 +31,12 @@ Navigation.startTabBasedApp({
       }
     }
   ],
-  drawer: {
-    left: {
-      screen: 'example.SideMenu'
-    }
-  },
-  portraitOnlyMode: true
+  appStyle: {
+    tabBarBackgroundColor: '#0f2362',
+    tabBarButtonColor: '#ffffff',
+    tabBarSelectedButtonColor: '#63d7cc'
+
+  }
 });
 //Navigation.startSingleScreenApp({
 //  screen: {

example/src/screens/CollapsingTopBarScreen.android.js

@@ -0,0 +1,133 @@
+import React, {Component} from 'react';
+import {
+  Text,
+  View,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+} from 'react-native';
+
+// collapsingToolBarImage: require('../../img/gyro_header.jpg'),
+// collapsingToolBarImage: "https://static.wixstatic.com/media/ec14061b42d1dc5b809367f7cfda8eff.jpg/v1/fill/w_1002,h_499,q_80/ec14061b42d1dc5b809367f7cfda8eff.webp",
+
+export default class ThirdTabScreen extends Component {
+  static navigatorStyle = {
+    drawUnderTabBar: true,
+    navBarButtonColor: '#ffffff',
+    navBarTextColor: '#ffffff',
+    collapsingToolBarImage: require('../../img/gyro_header.jpg'),
+    collapsingToolBarCollapsedColor: '#0f2362',
+    navBarBackgroundColor: '#eeeeee'
+  };
+
+  static navigatorButtons = {
+    rightButtons: [
+      {
+        title: 'Edit',
+        id: 'edit'
+      },
+      {
+        icon: require('../../img/navicon_add.png'),
+        id: 'add'
+      }
+    ]
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      navBarVisibility: 'shown'
+    }
+  }
+  render() {
+    return (
+        <ScrollView style={styles.container}>
+          <View style={{flex: 1, backgroundColor: '#ffffff'}}>
+            <Text style={styles.button}>Row 0</Text>
+            <Text style={styles.button}>Row 1</Text>
+            <Text style={styles.button}>Row 2</Text>
+            <Text style={styles.button}>Row 3</Text>
+            <Text style={styles.button}>Row 4</Text>
+            <Text style={styles.button}>Row 5</Text>
+            <Text style={styles.button}>Row 6</Text>
+            <Text style={styles.button}>Row 7</Text>
+            <Text style={styles.button}>Row 8</Text>
+
+            <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
+              <Text style={styles.button}>Push Plain Screen</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity onPress={ this.onPushStyledPress.bind(this) }>
+              <Text style={styles.button}>Push Styled Screen</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity onPress={ this.onPushStyled2Press.bind(this) }>
+              <Text style={styles.button}>Push Styled Screen 2</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity onPress={ this.onModalPress.bind(this) }>
+              <Text style={styles.button}>Show Modal Screen</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity onPress={ this.onToggleNavBarPressed.bind(this) }>
+              <Text style={styles.button}>Toggle Navigation Bar</Text>
+            </TouchableOpacity>
+          </View>
+        </ScrollView>
+    );
+  }
+  onPushPress() {
+    this.props.navigator.push({
+      title: "More",
+      screen: "example.PushedScreen"
+    });
+  }
+  onPushStyledPress() {
+    this.props.navigator.push({
+      title: "Styled",
+      screen: "example.StyledScreen"
+    });
+  }
+  onPushStyled2Press () {
+    this.props.navigator.push({
+      title: "Styled",
+      titleImage: require('../../img/two.png'),
+      screen: "example.StyledScreen"
+    });
+  }
+  onModalPress() {
+    this.props.navigator.showModal({
+      title: "Modal",
+      screen: "example.ModalScreen"
+    });
+  }
+
+  onToggleNavBarPressed() {
+    this.state.navBarVisibility = (this.state.navBarVisibility === 'shown') ? 'hidden' : 'shown';
+    this.props.navigator.toggleNavBar({
+      to: this.state.navBarVisibility,
+      animated: true  // true is default
+    });
+  }
+
+  componentDidUpdate() {
+    console.error('this is an error: ' + Math.random());
+    this.state.navBarState = 'shown';
+  }
+
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: '#eeeeee'
+  },
+  button: {
+    textAlign: 'center',
+    fontSize: 18,
+    marginBottom: 10,
+    marginTop:30,
+    color: 'blue'
+  }
+});

example/src/screens/ThirdTabScreen.js

@@ -1,101 +0,0 @@
-import React, {Component} from 'react';
-import {
-  Text,
-  View,
-  ScrollView,
-  TouchableOpacity,
-  StyleSheet
-} from 'react-native';
-
-export default class ThirdTabScreen extends Component {
-  static navigatorStyle = {
-    drawUnderTabBar: true
-  };
-  constructor(props) {
-    super(props);
-    this.state = {
-      navBarVisability: 'shown'
-    }
-  }
-  render() {
-    return (
-      <View style={styles.container}>
-
-        <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
-          <Text style={styles.button}>Push Plain Screen</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onPushStyledPress.bind(this) }>
-          <Text style={styles.button}>Push Styled Screen</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onPushStyled2Press.bind(this) }>
-          <Text style={styles.button}>Push Styled Screen 2</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onModalPress.bind(this) }>
-          <Text style={styles.button}>Show Modal Screen</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onToggleNavBarPressed.bind(this) }>
-          <Text style={styles.button}>Toggle Navigation Bar</Text>
-        </TouchableOpacity>
-
-      </View>
-    );
-  }
-  onPushPress() {
-    this.props.navigator.push({
-      title: "More",
-      screen: "example.PushedScreen"
-    });
-  }
-  onPushStyledPress() {
-    this.props.navigator.push({
-      title: "Styled",
-      screen: "example.StyledScreen"
-    });
-  }
-  onPushStyled2Press () {
-    this.props.navigator.push({
-      title: "Styled",
-      titleImage: require('../../img/two.png'),
-      screen: "example.StyledScreen"
-    });
-  }
-  onModalPress() {
-    this.props.navigator.showModal({
-      title: "Modal",
-      screen: "example.ModalScreen"
-    });
-  }
-
-  onToggleNavBarPressed() {
-    this.state.navBarVisability = (this.state.navBarVisability === 'shown') ? 'hidden' : 'shown';
-    this.props.navigator.toggleNavBar({
-      to: this.state.navBarVisability,
-      animated: true  // true is default
-    });
-  }
-
-  componentDidUpdate() {
-    console.error('this is an error: ' + Math.random());
-    this.state.navBarState = 'shown';
-  }
-
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 20,
-    backgroundColor: 'white'
-  },
-  button: {
-    textAlign: 'center',
-    fontSize: 18,
-    marginBottom: 10,
-    marginTop:10,
-    color: 'blue'
-  }
-});

example/src/screens/index.android.js

@@ -2,19 +2,19 @@ import {Navigation} from 'react-native-navigation';
 
 import FirstTabScreen from './FirstTabScreen';
 import SecondTabScreen from './SecondTabScreen';
-import ThirdTabScreen from './ThirdTabScreen';
 import PushedScreen from './PushedScreen';
 import StyledScreen from './StyledScreen';
 import SideMenu from './SideMenu';
 import ModalScreen from './ModalScreen';
+import CollapsingTopBarScreen from './CollapsingTopBarScreen';
 
 // register all screens of the app (including internal ones)
 export function registerScreens() {
   Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen);
   Navigation.registerComponent('example.SecondTabScreen', () => SecondTabScreen);
-  Navigation.registerComponent('example.ThirdTabScreen', () => ThirdTabScreen);
   Navigation.registerComponent('example.PushedScreen', () => PushedScreen);
   Navigation.registerComponent('example.StyledScreen', () => StyledScreen);
   Navigation.registerComponent('example.ModalScreen', () => ModalScreen);
   Navigation.registerComponent('example.SideMenu', () => SideMenu);
+  Navigation.registerComponent('example.CollapsingTopBarScreen', () => CollapsingTopBarScreen);
 }

example/src/screens/index.ios.js

@@ -2,7 +2,6 @@ import {Navigation} from 'react-native-navigation';
 
 import FirstTabScreen from './FirstTabScreen';
 import SecondTabScreen from './SecondTabScreen';
-import ThirdTabScreen from './ThirdTabScreen';
 import PushedScreen from './PushedScreen';
 import StyledScreen from './StyledScreen';
 import SideMenu from './SideMenu';
@@ -14,7 +13,6 @@ import LightBoxScreen from './LightBoxScreen';
 export function registerScreens() {
   Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen);
   Navigation.registerComponent('example.SecondTabScreen', () => SecondTabScreen);
-  Navigation.registerComponent('example.ThirdTabScreen', () => ThirdTabScreen);
   Navigation.registerComponent('example.PushedScreen', () => PushedScreen);
   Navigation.registerComponent('example.StyledScreen', () => StyledScreen);
   Navigation.registerComponent('example.ModalScreen', () => ModalScreen);

src/deprecated/platformSpecificDeprecated.android.js

@@ -113,10 +113,11 @@ function convertStyleParams(originalStyleObject) {
     return null;
   }
 
-  return {
+  let ret = {
     statusBarColor: originalStyleObject.statusBarColor,
     topBarColor: originalStyleObject.navBarBackgroundColor,
-    topBarTransparent: originalStyleObject.navBarTransparent,
+    collapsingToolBarImage: originalStyleObject.collapsingToolBarImage,
+    collapsingToolBarCollapsedColor: originalStyleObject.collapsingToolBarCollapsedColor,
     titleBarHidden: originalStyleObject.navBarHidden,
     titleBarTitleColor: originalStyleObject.navBarTextColor,
     titleBarSubtitleColor: originalStyleObject.navBarTextSubtitleColor,
@@ -148,6 +149,18 @@ function convertStyleParams(originalStyleObject) {
 
     navigationBarColor: originalStyleObject.navigationBarColor
   }
+
+  if (originalStyleObject.collapsingToolBarImage) {
+    if (_.isString(originalStyleObject.collapsingToolBarImage)) {
+      ret.collapsingToolBarImage = originalStyleObject.collapsingToolBarImage;
+    }
+
+    const collapsingToolBarImage = resolveAssetSource(originalStyleObject.collapsingToolBarImage)
+    if (collapsingToolBarImage) {
+      ret.collapsingToolBarImage = collapsingToolBarImage.uri;
+    }
+  }
+  return ret;
 }
 
 function convertDrawerParamsToSideMenuParams(drawerParams) {
@@ -398,7 +411,7 @@ function getFab(screen) {
       _.forEach(fab.actions, (action) => {
         action.icon = resolveAssetSource(action.icon).uri;
         return action;
-      })
+      });
     }
 
     return fab;