Collapse when scrolling header

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

@@ -41,7 +41,7 @@ public class TopBar extends AppBarLayout {
                                          LeftButtonOnClickListener leftButtonOnClickListener,
                                          String navigatorEventId, boolean overrideBackPressInJs) {
         titleBar = createTitleBar();
-        titleBarAndContextualMenuContainer.addView(titleBar, new ViewGroup.LayoutParams(MATCH_PARENT, MATCH_PARENT));
+        addTitleBar();
         addButtons(rightButtons, leftButton, leftButtonOnClickListener, navigatorEventId, overrideBackPressInJs);
     }
 
@@ -49,6 +49,10 @@ public class TopBar extends AppBarLayout {
         return new TitleBar(getContext());
     }
 
+    protected void addTitleBar() {
+        titleBarAndContextualMenuContainer.addView(titleBar, new ViewGroup.LayoutParams(MATCH_PARENT, MATCH_PARENT));
+    }
+
     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/CollapsingTitleBar.java

@@ -4,6 +4,7 @@ import android.content.Context;
 import android.view.MotionEvent;
 import android.view.View;
 
+import com.reactnativenavigation.params.CollapsingTopBarParams;
 import com.reactnativenavigation.params.StyleParams;
 import com.reactnativenavigation.views.TitleBar;
 
@@ -11,38 +12,55 @@ public class CollapsingTitleBar extends TitleBar implements View.OnTouchListener
     private CollapsingTextView title;
     private int collapsedHeight;
     private final ScrollListener scrollListener;
+    private final CollapsingTopBarParams params;
 
-    public CollapsingTitleBar(Context context, int collapsedHeight, ScrollListener scrollListener) {
+    public CollapsingTitleBar(Context context, int collapsedHeight, ScrollListener scrollListener, CollapsingTopBarParams params) {
         super(context);
         this.collapsedHeight = collapsedHeight;
         this.scrollListener = scrollListener;
+        this.params = params;
         addCollapsingTitle();
         setOnTouchListener(this);
     }
 
     private void addCollapsingTitle() {
-        title = new CollapsingTextView(getContext(), collapsedHeight);
-        addView(title);
+        if (params.hasBackgroundImage()) {
+            title = new CollapsingTextView(getContext(), collapsedHeight);
+            addView(title);
+        }
     }
 
     @Override
     public void setTitle(CharSequence title) {
-        this.title.setText((String) title);
+        if (params.hasBackgroundImage()) {
+            this.title.setText((String) title);
+        } else {
+            super.setTitle(title);
+        }
     }
 
     @Override
     protected void setTitleTextColor(StyleParams params) {
-        title.setTextColor(params);
+        if (this.params.hasBackgroundImage()) {
+            title.setTextColor(params);
+        } else {
+            super.setTitleTextColor(params);
+        }
     }
 
     @Override
     protected void setSubtitleTextColor(StyleParams params) {
+        if (this.params.hasReactView()) {
+            super.setSubtitleTextColor(params);
+        }
     }
 
     public void collapse(float collapse) {
-        title.setTranslationY(0);
+        if (params.hasBackgroundImage()) {
+            title.setTranslationY(0);
+            title.collapseBy(collapse);
+        }
         setTranslationY(-collapse);
-        title.collapseBy(collapse);
     }
 
     @Override

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

@@ -4,6 +4,7 @@ import android.content.Context;
 import android.content.res.TypedArray;
 import android.os.Bundle;
 import android.view.View;
+import android.view.ViewGroup;
 import android.widget.ScrollView;
 
 import com.reactnativenavigation.params.CollapsingTopBarParams;
@@ -12,6 +13,9 @@ import com.reactnativenavigation.utils.ViewUtils;
 import com.reactnativenavigation.views.TitleBar;
 import com.reactnativenavigation.views.TopBar;
 
+import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
+import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
+
 public class CollapsingTopBar extends TopBar implements CollapsingView {
     private CollapsingTopBarBackground collapsingTopBarBackground;
     private CollapsingTopBarReactView header;
@@ -27,7 +31,6 @@ public class CollapsingTopBar extends TopBar implements CollapsingView {
         this.params = params;
         topBarHeight = calculateTopBarHeight();
         createBackgroundImage(params);
-        createReactView(params);
         calculateFinalCollapsedTranslation(params);
         viewCollapser = new ViewCollapser(this);
     }
@@ -36,7 +39,7 @@ public class CollapsingTopBar extends TopBar implements CollapsingView {
         ViewUtils.runOnPreDraw(this, new Runnable() {
             @Override
             public void run() {
-                if (params.hasBackgroundImage()) {
+                if (params.hasBackgroundImage() || params.hasReactView()) {
                     finalCollapsedTranslation = getCollapsedHeight() - getHeight();
                 } else {
                     finalCollapsedTranslation = -titleBar.getHeight();
@@ -70,7 +73,8 @@ public class CollapsingTopBar extends TopBar implements CollapsingView {
         if (params.hasReactView()) {
             header = new CollapsingTopBarReactView(getContext(),
                     params.reactViewId,
-                    new NavigationParams(Bundle.EMPTY));
+                    new NavigationParams(Bundle.EMPTY),
+                    scrollListener);
             LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, (int) ViewUtils.convertDpToPixel(params.reactViewHeight));
             titleBarAndContextualMenuContainer.addView(header, lp);
         }
@@ -78,15 +82,26 @@ public class CollapsingTopBar extends TopBar implements CollapsingView {
 
     @Override
     protected TitleBar createTitleBar() {
-        if (params.hasBackgroundImage()) {
+        if (params.hasBackgroundImage() || params.hasReactView()) {
+            createReactView(params);
             return new CollapsingTitleBar(getContext(),
                     getCollapsedHeight(),
-                    scrollListener);
+                    scrollListener,
+                    params);
         } else {
             return super.createTitleBar();
         }
     }
 
+    @Override
+    protected void addTitleBar() {
+        if (params.hasReactView()) {
+            titleBarAndContextualMenuContainer.addView(titleBar, new ViewGroup.LayoutParams(MATCH_PARENT, WRAP_CONTENT));
+        } else {
+            super.addTitleBar();
+        }
+    }
+
     @Override
     public void collapse(CollapseAmount amount) {
         viewCollapser.collapse(amount);

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

@@ -1,12 +1,97 @@
 package com.reactnativenavigation.views.collapsingToolbar;
 
 import android.content.Context;
+import android.support.v4.view.MotionEventCompat;
+import android.view.MotionEvent;
+import android.view.ViewConfiguration;
 
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.uimanager.JSTouchDispatcher;
+import com.facebook.react.uimanager.UIManagerModule;
+import com.facebook.react.uimanager.events.EventDispatcher;
+import com.reactnativenavigation.NavigationApplication;
 import com.reactnativenavigation.params.NavigationParams;
 import com.reactnativenavigation.views.ContentView;
 
 public class CollapsingTopBarReactView extends ContentView {
-    public CollapsingTopBarReactView(Context context, String screenId, NavigationParams navigationParams) {
+    private ScrollListener listener;
+    private boolean mIsScrolling;
+    private int mTouchSlop;
+    private int touchDown = -1;
+    private final JSTouchDispatcher mJSTouchDispatcher = new JSTouchDispatcher(this);
+
+    public CollapsingTopBarReactView(Context context, String screenId, NavigationParams navigationParams, ScrollListener scrollListener) {
         super(context, screenId, navigationParams);
+        listener = scrollListener;
+        ViewConfiguration vc = ViewConfiguration.get(context);
+        mTouchSlop = vc.getScaledTouchSlop();
+    }
+
+    @Override
+    public boolean onInterceptTouchEvent(MotionEvent ev) {
+        final int action = MotionEventCompat.getActionMasked(ev);
+        switch (action) {
+            case MotionEvent.ACTION_CANCEL:
+                releaseScroll(ev);
+                break;
+            case MotionEvent.ACTION_UP:
+                releaseScroll(ev);
+                break;
+            case MotionEvent.ACTION_DOWN:
+                onTouchDown(ev);
+                break;
+            case MotionEvent.ACTION_MOVE: {
+                if (mIsScrolling) {
+                    return true;
+                }
+                if (calculateDistanceY(ev) > mTouchSlop) {
+                    mIsScrolling = true;
+                    return true;
+                }
+                break;
+            }
+            default:
+                break;
+        }
+        return false;
+    }
+
+    private void onTouchDown(MotionEvent ev) {
+        if (touchDown == -1) {
+            touchDown = (int) ev.getRawY();
+        }
+        dispatchTouchEventToJs(ev);
+    }
+
+    private int calculateDistanceY(MotionEvent ev) {
+        return (int) Math.abs(ev.getRawY() - touchDown);
+    }
+
+    @Override
+    public boolean onTouchEvent(MotionEvent ev) {
+        listener.onTouch(ev);
+        int action = ev.getActionMasked();
+        switch (action) {
+            case MotionEvent.ACTION_UP:
+                releaseScroll(ev);
+                break;
+            case MotionEvent.ACTION_MOVE:
+                break;
+            default:
+                break;
+        }
+        return super.onTouchEvent(ev);
+    }
+
+    private void releaseScroll(MotionEvent ev) {
+        mIsScrolling = false;
+        touchDown = -1;
+        dispatchTouchEventToJs(ev);
+    }
+
+    private void dispatchTouchEventToJs(MotionEvent event) {
+        ReactContext reactContext = NavigationApplication.instance.getReactGateway().getReactInstanceManager().getCurrentReactContext();
+        EventDispatcher eventDispatcher = reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher();
+        mJSTouchDispatcher.handleTouchEvent(event, eventDispatcher);
     }
 }