Collapsing view pager screen (#448)

Implement collapsing TopTabs on Android

specify `navBarHideOnScroll: true` in your `TopTabsScreen`

android/app/src/main/java/com/reactnativenavigation/events/ViewPagerScreenScrollStartEvent.java

@@ -0,0 +1,9 @@
+package com.reactnativenavigation.events;
+
+public class ViewPagerScreenScrollStartEvent implements Event {
+    public static final String TYPE = "ViewPagerScreenScrollStartEvent";
+    @Override
+    public String getType() {
+        return TYPE;
+    }
+}

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

@@ -2,9 +2,9 @@ package com.reactnativenavigation.params;
 
 import android.support.annotation.Nullable;
 
-public class CollapsingTopBarParams {
-    public enum CollapseBehaviour {TitleBarHideOnScroll, CollapseTopBar}
+import com.reactnativenavigation.views.collapsingToolbar.behaviours.CollapseBehaviour;
 
+public class CollapsingTopBarParams {
     public @Nullable String imageUri;
     public StyleParams.Color scrimColor;
     public CollapseBehaviour collapseBehaviour;

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

@@ -4,8 +4,11 @@ import android.graphics.Color;
 import android.os.Bundle;
 
 import com.reactnativenavigation.params.CollapsingTopBarParams;
-import com.reactnativenavigation.params.CollapsingTopBarParams.CollapseBehaviour;
 import com.reactnativenavigation.params.StyleParams;
+import com.reactnativenavigation.views.collapsingToolbar.behaviours.CollapseBehaviour;
+import com.reactnativenavigation.views.collapsingToolbar.behaviours.CollapseTitleBarBehaviour;
+import com.reactnativenavigation.views.collapsingToolbar.behaviours.CollapseTopBarBehaviour;
+import com.reactnativenavigation.views.collapsingToolbar.behaviours.TitleBarHideOnScrollBehaviour;
 
 class CollapsingTopBarParamsParser extends Parser {
     private Bundle params;
@@ -29,7 +32,13 @@ class CollapsingTopBarParamsParser extends Parser {
     }
 
     private CollapseBehaviour getCollapseBehaviour() {
-        return shouldHideTitleBarOnScroll() ? CollapseBehaviour.TitleBarHideOnScroll : CollapseBehaviour.CollapseTopBar;
+        if (hasBackgroundImage()) {
+            return new CollapseTopBarBehaviour();
+        }
+        if (shouldHideTitleBarOnScroll() && params.getBoolean("drawBelowTopBar", false)) {
+            return new CollapseTitleBarBehaviour();
+        }
+        return new TitleBarHideOnScrollBehaviour();
     }
 
     private boolean hasBackgroundImage() {

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

@@ -32,6 +32,7 @@ public class TopTabParamsParser extends Parser {
         result.leftButton = ButtonParser.parseLeftButton(params);
         result.rightButtons = ButtonParser.parseRightButton(params);
         result.fabParams = ButtonParser.parseFab(params, result.navigationParams.navigatorEventId);
+        result.styleParams = new StyleParamsParser(params.getBundle("styleParams")).parse();
         return result;
     }
 }

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

@@ -3,17 +3,18 @@ package com.reactnativenavigation.screens;
 import android.support.v7.app.AppCompatActivity;
 import android.widget.ScrollView;
 
-import com.reactnativenavigation.params.CollapsingTopBarParams;
 import com.reactnativenavigation.params.ScreenParams;
 import com.reactnativenavigation.views.CollapsingContentView;
 import com.reactnativenavigation.views.LeftButtonOnClickListener;
 import com.reactnativenavigation.views.collapsingToolbar.CollapseAmount;
 import com.reactnativenavigation.views.collapsingToolbar.CollapseCalculator;
-import com.reactnativenavigation.views.collapsingToolbar.CollapsingContentViewMeasurer;
+import com.reactnativenavigation.views.collapsingToolbar.CollapsingViewMeasurer;
 import com.reactnativenavigation.views.collapsingToolbar.CollapsingTopBar;
+import com.reactnativenavigation.views.collapsingToolbar.CollapsingView;
 import com.reactnativenavigation.views.collapsingToolbar.OnScrollListener;
 import com.reactnativenavigation.views.collapsingToolbar.OnScrollViewAddedListener;
 import com.reactnativenavigation.views.collapsingToolbar.ScrollListener;
+import com.reactnativenavigation.views.collapsingToolbar.behaviours.CollapseBehaviour;
 
 public class CollapsingSingleScreen extends SingleScreen {
 
@@ -38,7 +39,7 @@ public class CollapsingSingleScreen extends SingleScreen {
     protected void createContent() {
         contentView = new CollapsingContentView(getContext(), screenParams.screenId, screenParams.navigationParams);
         if (screenParams.styleParams.drawScreenBelowTopBar) {
-            contentView.setViewMeasurer(new CollapsingContentViewMeasurer((CollapsingTopBar) topBar, this));
+            contentView.setViewMeasurer(new CollapsingViewMeasurer((CollapsingTopBar) topBar, this));
         }
         setupCollapseDetection((CollapsingTopBar) topBar);
         addView(contentView, createLayoutParams());
@@ -59,7 +60,7 @@ public class CollapsingSingleScreen extends SingleScreen {
                     @Override
                     public void onScroll(CollapseAmount amount) {
                         if (!screenParams.styleParams.titleBarHideOnScroll) {
-                            ((CollapsingContentView) contentView).collapse(amount);
+                            ((CollapsingView) contentView).collapse(amount);
                         }
                         topBar.collapse(amount);
                     }
@@ -73,7 +74,7 @@ public class CollapsingSingleScreen extends SingleScreen {
         );
     }
 
-    private CollapsingTopBarParams.CollapseBehaviour getCollapseBehaviour() {
+    private CollapseBehaviour getCollapseBehaviour() {
         return screenParams.styleParams.collapsingTopBarParams.collapseBehaviour;
     }
 }

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

@@ -0,0 +1,107 @@
+package com.reactnativenavigation.screens;
+
+import android.content.Context;
+import android.support.v4.view.ViewPager;
+import android.support.v7.app.AppCompatActivity;
+import android.widget.ScrollView;
+
+import com.reactnativenavigation.events.Event;
+import com.reactnativenavigation.events.ViewPagerScreenScrollStartEvent;
+import com.reactnativenavigation.params.PageParams;
+import com.reactnativenavigation.params.ScreenParams;
+import com.reactnativenavigation.views.CollapsingContentView;
+import com.reactnativenavigation.views.ContentView;
+import com.reactnativenavigation.views.LeftButtonOnClickListener;
+import com.reactnativenavigation.views.collapsingToolbar.CollapseAmount;
+import com.reactnativenavigation.views.collapsingToolbar.CollapseCalculator;
+import com.reactnativenavigation.views.collapsingToolbar.CollapsingTopBar;
+import com.reactnativenavigation.views.collapsingToolbar.CollapsingView;
+import com.reactnativenavigation.views.collapsingToolbar.CollapsingViewMeasurer;
+import com.reactnativenavigation.views.collapsingToolbar.CollapsingViewPager;
+import com.reactnativenavigation.views.collapsingToolbar.OnScrollListener;
+import com.reactnativenavigation.views.collapsingToolbar.OnScrollViewAddedListener;
+import com.reactnativenavigation.views.collapsingToolbar.ScrollListener;
+import com.reactnativenavigation.views.collapsingToolbar.behaviours.CollapseBehaviour;
+
+public class CollapsingViewPagerScreen extends ViewPagerScreen {
+
+    public CollapsingViewPagerScreen(AppCompatActivity activity, ScreenParams screenParams, LeftButtonOnClickListener backButtonListener) {
+        super(activity, screenParams, backButtonListener);
+    }
+
+    @Override
+    protected void createTopBar() {
+        final CollapsingTopBar topBar = new CollapsingTopBar(getContext(), styleParams.collapsingTopBarParams);
+        topBar.setScrollListener(getScrollListener());
+        this.topBar = topBar;
+    }
+
+    @Override
+    protected ViewPager createViewPager(Context context) {
+        CollapsingViewPager viewPager = new CollapsingViewPager(context);
+        if (screenParams.styleParams.drawScreenBelowTopBar) {
+            viewPager.setViewMeasurer(new CollapsingViewMeasurer((CollapsingTopBar) topBar, this));
+        }
+        return viewPager;
+    }
+
+    protected ContentView createContentView(PageParams tab) {
+        if (tab.hasCollapsingTopBar()) {
+            CollapsingContentView contentView = new CollapsingContentView(getContext(), tab.screenId, tab.navigationParams);
+            contentView.setViewMeasurer(new CollapsingViewMeasurer((CollapsingTopBar) topBar, this));
+            setupCollapseDetection(contentView);
+            return contentView;
+        } else {
+            return new ContentView(getContext(), tab.screenId, tab.navigationParams);
+        }
+    }
+
+    private void setupCollapseDetection(CollapsingContentView contentView) {
+        contentView.setupCollapseDetection(getScrollListener(), new OnScrollViewAddedListener() {
+            @Override
+            public void onScrollViewAdded(ScrollView scrollView) {
+                ((CollapsingTopBar) topBar).onScrollViewAdded(scrollView);
+            }
+        });
+    }
+
+    private ScrollListener getScrollListener() {
+        return new ScrollListener(new CollapseCalculator((CollapsingView) topBar, getCollapseBehaviour()),
+                new OnScrollListener() {
+                    @Override
+                    public void onScroll(CollapseAmount amount) {
+                        ((CollapsingView) topBar).collapse(amount);
+                        ((CollapsingView) viewPager).collapse(amount);
+                    }
+
+                    @Override
+                    public void onFling(CollapseAmount amount) {
+                        ((CollapsingView) topBar).collapse(amount);
+                        ((CollapsingView) viewPager).collapse(amount);
+                    }
+                },
+                getCollapseBehaviour()
+        );
+    }
+
+    private CollapseBehaviour getCollapseBehaviour() {
+        return screenParams.styleParams.collapsingTopBarParams.collapseBehaviour;
+    }
+
+    @Override
+    public void onEvent(Event event) {
+        super.onEvent(event);
+        if (ViewPagerScreenScrollStartEvent.TYPE.equals(event.getType())) {
+            ((CollapsingView) topBar).collapse(new CollapseAmount(CollapseCalculator.Direction.Down));
+            ((CollapsingView) viewPager).collapse(new CollapseAmount(CollapseCalculator.Direction.Down));
+        }
+    }
+
+    @Override
+    public void destroy() {
+        super.destroy();
+        for (ContentView contentView : contentViews) {
+            ((CollapsingContentView) contentView).destroy();
+        }
+    }
+}

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

@@ -11,6 +11,7 @@ import com.reactnativenavigation.NavigationApplication;
 import com.reactnativenavigation.events.EventBus;
 import com.reactnativenavigation.events.ScreenChangedEvent;
 import com.reactnativenavigation.events.ViewPagerScreenChangedEvent;
+import com.reactnativenavigation.events.ViewPagerScreenScrollStartEvent;
 import com.reactnativenavigation.params.PageParams;
 import com.reactnativenavigation.views.ContentView;
 
@@ -61,7 +62,9 @@ class ContentViewPagerAdapter extends PagerAdapter implements ViewPager.OnPageCh
 
     @Override
     public void onPageScrollStateChanged(int state) {
-
+        if (state == ViewPager.SCROLL_STATE_DRAGGING) {
+            EventBus.instance.post(new ViewPagerScreenScrollStartEvent());
+        }
     }
 
     private void sendTabSelectedEventToJs() {

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

@@ -5,14 +5,18 @@ import android.support.v7.app.AppCompatActivity;
 import com.reactnativenavigation.params.ScreenParams;
 import com.reactnativenavigation.views.LeftButtonOnClickListener;
 
-public class ScreenFactory {
-    public static Screen create(AppCompatActivity activity,
-                                ScreenParams screenParams,
-                                LeftButtonOnClickListener leftButtonOnClickListener) {
+class ScreenFactory {
+    static Screen create(AppCompatActivity activity,
+                         ScreenParams screenParams,
+                         LeftButtonOnClickListener leftButtonOnClickListener) {
         if (screenParams.isFragmentScreen()) {
             return new FragmentScreen(activity, screenParams, leftButtonOnClickListener);
         } else if (screenParams.hasTopTabs()) {
-            return new ViewPagerScreen(activity, screenParams, leftButtonOnClickListener);
+            if (screenParams.hasCollapsingTopBar()) {
+                return new CollapsingViewPagerScreen(activity, screenParams, leftButtonOnClickListener);
+            } else {
+                return new ViewPagerScreen(activity, screenParams, leftButtonOnClickListener);
+            }
         } else if (screenParams.hasCollapsingTopBar()) {
             return new CollapsingSingleScreen(activity, screenParams, leftButtonOnClickListener);
         } else {

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

@@ -1,12 +1,13 @@
 package com.reactnativenavigation.screens;
 
+import android.content.Context;
 import android.support.design.widget.TabLayout;
 import android.support.v4.view.ViewPager;
 import android.support.v7.app.AppCompatActivity;
 
 import com.reactnativenavigation.params.BaseScreenParams;
-import com.reactnativenavigation.params.ScreenParams;
 import com.reactnativenavigation.params.PageParams;
+import com.reactnativenavigation.params.ScreenParams;
 import com.reactnativenavigation.views.ContentView;
 import com.reactnativenavigation.views.LeftButtonOnClickListener;
 
@@ -18,8 +19,8 @@ import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
 public class ViewPagerScreen extends Screen {
 
     private static final int OFFSCREEN_PAGE_LIMIT = 99;
-    private List<ContentView> contentViews;
-    private ViewPager viewPager;
+    protected List<ContentView> contentViews;
+    protected ViewPager viewPager;
 
     public ViewPagerScreen(AppCompatActivity activity, ScreenParams screenParams, LeftButtonOnClickListener backButtonListener) {
         super(activity, screenParams, backButtonListener);
@@ -39,7 +40,7 @@ public class ViewPagerScreen extends Screen {
     }
 
     private void createViewPager() {
-        viewPager = new ViewPager(getContext());
+        viewPager = createViewPager(getContext());
         viewPager.setOffscreenPageLimit(OFFSCREEN_PAGE_LIMIT);
         LayoutParams lp = new LayoutParams(MATCH_PARENT, MATCH_PARENT);
         if (screenParams.styleParams.drawScreenBelowTopBar) {
@@ -48,15 +49,27 @@ public class ViewPagerScreen extends Screen {
         addView(viewPager, lp);
     }
 
+    protected ViewPager createViewPager(Context context) {
+        return new ViewPager(context);
+    }
+
     private void addPages() {
         contentViews = new ArrayList<>();
         for (PageParams tab : screenParams.topTabParams) {
-            ContentView contentView = new ContentView(getContext(), tab.screenId, tab.navigationParams);
-            addContent(contentView);
-            contentViews.add(contentView);
+            addPage(tab);
         }
     }
 
+    private void addPage(PageParams tab) {
+        ContentView contentView = createContentView(tab);
+        addContent(contentView);
+        contentViews.add(contentView);
+    }
+
+    protected ContentView createContentView(PageParams tab) {
+        return new ContentView(getContext(), tab.screenId, tab.navigationParams);
+    }
+
     private void setupViewPager(TabLayout tabLayout) {
         ContentViewPagerAdapter adapter = new ContentViewPagerAdapter(contentViews, screenParams.topTabParams);
         viewPager.setAdapter(adapter);

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

@@ -49,6 +49,7 @@ public class CollapsingContentView extends ContentView implements CollapsingView
         }
     }
 
+    @Override
     public void collapse(CollapseAmount amount) {
         viewCollapser.collapse(amount);
     }

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

@@ -1,6 +1,7 @@
 package com.reactnativenavigation.views;
 
 import android.content.Context;
+import android.util.Log;
 import android.view.View;
 
 import com.facebook.react.ReactRootView;
@@ -50,8 +51,10 @@ public class ContentView extends ReactRootView {
     @Override
     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
+        int measuredHeight = viewMeasurer.getMeasuredHeight(heightMeasureSpec);
+        Log.i("Guy", "measuredHeight: " + measuredHeight + " " + getClass().getSimpleName());
         setMeasuredDimension(viewMeasurer.getMeasuredWidth(widthMeasureSpec),
-                viewMeasurer.getMeasuredHeight(heightMeasureSpec));
+                measuredHeight);
     }
 
     @Override

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

@@ -24,7 +24,7 @@ public class TopBar extends AppBarLayout {
     protected TitleBar titleBar;
     private ContextualMenu contextualMenu;
     protected FrameLayout titleBarAndContextualMenuContainer;
-    private TopTabs topTabs;
+    protected TopTabs topTabs;
 
     public TopBar(Context context) {
         super(context);

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

@@ -12,7 +12,7 @@ public class CollapseAmount {
         this.amount = amount;
     }
 
-    CollapseAmount(CollapseCalculator.Direction direction) {
+    public CollapseAmount(CollapseCalculator.Direction direction) {
         this.direction = direction;
     }
 
@@ -20,11 +20,11 @@ public class CollapseAmount {
         return amount != null || this != None;
     }
 
-    boolean collapseToTop() {
+    public boolean collapseToTop() {
         return direction == CollapseCalculator.Direction.Up;
     }
 
-    boolean collapseToBottom() {
+    public boolean collapseToBottom() {
         return direction == CollapseCalculator.Direction.Down;
     }
 

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

@@ -7,12 +7,12 @@ import android.view.MotionEvent;
 import android.widget.ScrollView;
 
 import com.reactnativenavigation.NavigationApplication;
-import com.reactnativenavigation.params.CollapsingTopBarParams.CollapseBehaviour;
-
-import static com.reactnativenavigation.params.CollapsingTopBarParams.CollapseBehaviour.TitleBarHideOnScroll;
+import com.reactnativenavigation.views.collapsingToolbar.behaviours.CollapseBehaviour;
+import com.reactnativenavigation.views.collapsingToolbar.behaviours.CollapseTitleBarBehaviour;
+import com.reactnativenavigation.views.collapsingToolbar.behaviours.TitleBarHideOnScrollBehaviour;
 
 public class CollapseCalculator {
-    enum Direction {
+    public enum Direction {
         Up, Down, None
     }
 
@@ -35,11 +35,11 @@ public class CollapseCalculator {
     public CollapseCalculator(final CollapsingView collapsingView, CollapseBehaviour collapseBehaviour) {
         this.view = collapsingView;
         this.collapseBehaviour = collapseBehaviour;
-        setFlingDetector(collapseBehaviour);
+        setFlingDetector();
     }
 
-    private void setFlingDetector(CollapseBehaviour collapseBehaviour) {
-        if (collapseBehaviour == TitleBarHideOnScroll) {
+    private void setFlingDetector() {
+        if (collapseBehaviour.shouldCollapseOnFling()) {
             flingDetector =
                     new GestureDetector(NavigationApplication.instance, new GestureDetector.SimpleOnGestureListener() {
                         @Override
@@ -95,7 +95,8 @@ public class CollapseCalculator {
     }
 
     private CollapseAmount shouldCollapseOnTouchUp(MotionEvent event) {
-        if (collapseBehaviour == TitleBarHideOnScroll && !flingDetector.onTouchEvent(event) && isTouchUp(event)) {
+        if ((collapseBehaviour.shouldCollapseOnTouchUp())
+            && !flingDetector.onTouchEvent(event) && isTouchUp(event)) {
             final float visibilityPercentage = view.getCurrentCollapseValue() / view.getFinalCollapseValue();
             Direction direction = visibilityPercentage >= 0.5f ? Direction.Up : Direction.Down;
             if (canCollapse(direction) && totalCollapse != 0) {
@@ -106,7 +107,7 @@ public class CollapseCalculator {
     }
 
     private boolean shouldCollapseAfterMoveEvent(Direction direction) {
-        if (collapseBehaviour == CollapseBehaviour.TitleBarHideOnScroll && !isScrolling()) {
+        if (collapseBehaviour instanceof TitleBarHideOnScrollBehaviour && !isScrolling()) {
             return false;
         }
         return canCollapse(direction);
@@ -155,7 +156,7 @@ public class CollapseCalculator {
     private boolean calculateCanExpend(float currentTopBarTranslation, float finalExpendedTranslation, float finalCollapsedTranslation) {
         return currentTopBarTranslation >= finalCollapsedTranslation &&
                currentTopBarTranslation < finalExpendedTranslation &&
-               (scrollView.getScrollY() == 0 || collapseBehaviour == CollapseBehaviour.TitleBarHideOnScroll);
+               (scrollView.getScrollY() == 0 || (collapseBehaviour instanceof TitleBarHideOnScrollBehaviour || collapseBehaviour instanceof CollapseTitleBarBehaviour));
     }
 
     private boolean isCollapsedAndScrollingDown(Direction direction) {

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

@@ -65,6 +65,7 @@ public class CollapsingTopBar extends TopBar implements CollapsingView {
         return collapsingTopBarBackground;
     }
 
+    @Override
     public void collapse(CollapseAmount amount) {
         viewCollapser.collapse(amount);
         if (titleBar instanceof CollapsingTitleBar) {
@@ -85,9 +86,13 @@ public class CollapsingTopBar extends TopBar implements CollapsingView {
     }
 
     public int getCollapsedHeight() {
-        return params.hasBackgroundImage() ?
-                collapsingTopBarBackground.getCollapsedTopBarHeight() :
-                titleBar.getHeight();
+        if (params.hasBackgroundImage()) {
+            return collapsingTopBarBackground.getCollapsedTopBarHeight();
+        } else if (topTabs != null) {
+            return topTabs.getHeight();
+        } else {
+            return titleBar.getHeight();
+        }
     }
 
     @Override

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

@@ -8,4 +8,6 @@ public interface CollapsingView {
     float getCurrentCollapseValue();
 
     View asView();
+
+    void collapse(CollapseAmount amount);
 }

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

@@ -4,15 +4,17 @@ import com.reactnativenavigation.screens.Screen;
 import com.reactnativenavigation.utils.ViewUtils;
 import com.reactnativenavigation.views.utils.ViewMeasurer;
 
-public class CollapsingContentViewMeasurer extends ViewMeasurer {
-    private int titleBarHeight;
+public class CollapsingViewMeasurer extends ViewMeasurer {
+    private int collapsedTopBarHeight;
+    private float getFinalCollapseValue;
     private int screenHeight;
 
-    public CollapsingContentViewMeasurer(final CollapsingTopBar topBar, final Screen collapsingSingleScreen) {
+    public CollapsingViewMeasurer(final CollapsingTopBar topBar, final Screen collapsingSingleScreen) {
         ViewUtils.runOnPreDraw(topBar, new Runnable() {
             @Override
             public void run() {
-                titleBarHeight = topBar.getCollapsedHeight();
+                collapsedTopBarHeight = topBar.getCollapsedHeight();
+                getFinalCollapseValue = topBar.getFinalCollapseValue();
             }
         });
 
@@ -24,8 +26,12 @@ public class CollapsingContentViewMeasurer extends ViewMeasurer {
         });
     }
 
+    public float getFinalCollapseValue() {
+        return getFinalCollapseValue;
+    }
+
     @Override
     public int getMeasuredHeight(int heightMeasureSpec) {
-        return screenHeight - titleBarHeight;
+        return screenHeight - collapsedTopBarHeight;
     }
 }

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

@@ -0,0 +1,46 @@
+package com.reactnativenavigation.views.collapsingToolbar;
+
+import android.content.Context;
+import android.support.v4.view.ViewPager;
+import android.view.View;
+
+public class CollapsingViewPager extends ViewPager implements CollapsingView {
+    CollapsingViewMeasurer viewMeasurer;
+    ViewCollapser viewCollapser;
+
+    public CollapsingViewPager(Context context) {
+        super(context);
+        viewCollapser = new ViewCollapser(this);
+    }
+
+    public void setViewMeasurer(CollapsingViewMeasurer viewMeasurer) {
+        this.viewMeasurer = viewMeasurer;
+    }
+
+    @Override
+    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
+        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
+        setMeasuredDimension(viewMeasurer.getMeasuredWidth(widthMeasureSpec),
+                viewMeasurer.getMeasuredHeight(heightMeasureSpec));
+    }
+
+    @Override
+    public float getFinalCollapseValue() {
+        return viewMeasurer.getFinalCollapseValue();
+    }
+
+    @Override
+    public float getCurrentCollapseValue() {
+        return getTranslationY();
+    }
+
+    @Override
+    public View asView() {
+        return this;
+    }
+
+    @Override
+    public void collapse(CollapseAmount amount) {
+        viewCollapser.collapse(amount);
+    }
+}

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

@@ -3,7 +3,9 @@ package com.reactnativenavigation.views.collapsingToolbar;
 import android.view.MotionEvent;
 import android.widget.ScrollView;
 
-import com.reactnativenavigation.params.CollapsingTopBarParams.CollapseBehaviour;
+import com.reactnativenavigation.views.collapsingToolbar.behaviours.CollapseBehaviour;
+import com.reactnativenavigation.views.collapsingToolbar.behaviours.CollapseTopBarBehaviour;
+
 
 public class ScrollListener {
     private CollapseCalculator collapseCalculator;
@@ -26,7 +28,7 @@ public class ScrollListener {
         CollapseAmount amount = collapseCalculator.calculate(event);
         if (amount.canCollapse()) {
             scrollListener.onScroll(amount);
-            return CollapseBehaviour.CollapseTopBar.equals(collapseBehaviour);
+            return collapseBehaviour instanceof CollapseTopBarBehaviour;
         }
         return false;
     }

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

@@ -2,11 +2,12 @@ package com.reactnativenavigation.views.collapsingToolbar;
 
 import android.animation.Animator;
 import android.animation.AnimatorListenerAdapter;
+import android.view.ViewPropertyAnimator;
 
 public class ViewCollapser {
     private static final int DURATION = 160;
     private CollapsingView view;
-    private boolean animating;
+    private ViewPropertyAnimator animator;
 
     public ViewCollapser(CollapsingView view) {
         this.view = view;
@@ -22,36 +23,36 @@ public class ViewCollapser {
         }
     }
 
-    public void collapse(float amount) {
-        view.asView().setTranslationY(amount);
-    }
-
     private void collapseView(boolean animate, float translation) {
         if (animate) {
             animate(translation);
         } else {
-            view.asView().setTranslationY(translation);
+            collapse(translation);
         }
     }
 
-    private void animate(final float translation) {
-        if (animating) {
-            return;
+    public void collapse(float amount) {
+        if (animator != null) {
+            animator.cancel();
         }
-        view.asView().animate()
+        view.asView().setTranslationY(amount);
+    }
+
+    private void animate(final float translation) {
+        animator = view.asView().animate()
                 .translationY(translation)
                 .setDuration(DURATION)
                 .setListener(new AnimatorListenerAdapter() {
                     @Override
-                    public void onAnimationStart(Animator animation) {
-                        animating = true;
+                    public void onAnimationCancel(Animator animation) {
+                        animator = null;
                     }
 
                     @Override
                     public void onAnimationEnd(Animator animation) {
-                        animating = false;
+                        animator = null;
                     }
-                })
-                .start();
+                });
+        animator.start();
     }
 }

android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/behaviours/CollapseBehaviour.java

@@ -0,0 +1,7 @@
+package com.reactnativenavigation.views.collapsingToolbar.behaviours;
+
+public interface CollapseBehaviour {
+    boolean shouldCollapseOnFling();
+
+    boolean shouldCollapseOnTouchUp();
+}

android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/behaviours/CollapseTitleBarBehaviour.java

@@ -0,0 +1,13 @@
+package com.reactnativenavigation.views.collapsingToolbar.behaviours;
+
+public class CollapseTitleBarBehaviour implements CollapseBehaviour {
+    @Override
+    public boolean shouldCollapseOnFling() {
+        return true;
+    }
+
+    @Override
+    public boolean shouldCollapseOnTouchUp() {
+        return true;
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/behaviours/CollapseTopBarBehaviour.java

@@ -0,0 +1,13 @@
+package com.reactnativenavigation.views.collapsingToolbar.behaviours;
+
+public class CollapseTopBarBehaviour implements CollapseBehaviour {
+    @Override
+    public boolean shouldCollapseOnFling() {
+        return false;
+    }
+
+    @Override
+    public boolean shouldCollapseOnTouchUp() {
+        return false;
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/behaviours/TitleBarHideOnScrollBehaviour.java

@@ -0,0 +1,13 @@
+package com.reactnativenavigation.views.collapsingToolbar.behaviours;
+
+public class TitleBarHideOnScrollBehaviour implements CollapseBehaviour {
+    @Override
+    public boolean shouldCollapseOnFling() {
+        return true;
+    }
+
+    @Override
+    public boolean shouldCollapseOnTouchUp() {
+        return true;
+    }
+}

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

@@ -59,6 +59,8 @@ public class ScrollViewDetector {
     }
 
     public void destroy() {
-        scrollViewDelegate.getScrollView().removeOnAttachStateChangeListener(stateChangeListener);
+        if (scrollViewDelegate.getScrollView() != null) {
+            scrollViewDelegate.getScrollView().removeOnAttachStateChangeListener(stateChangeListener);
+        }
     }
 }

src/deprecated/platformSpecificDeprecated.android.js

@@ -44,6 +44,8 @@ function adaptTopTabs(screen, navigatorID) {
     tab.screen = tab.screenId;
     addNavigatorButtons(tab);
     adaptNavigationParams(tab);
+    addNavigationStyleParams(tab);
+    tab = adaptNavigationStyleToScreenStyle(tab);
   });
 }