Basic hide show collapsing header

might want to tweak the hide show values later

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

@@ -73,12 +73,15 @@ public class CollapsingTopBar extends TopBar implements CollapsingView {
             LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, (int) CollapsingTopBarBackground.MAX_HEIGHT);
             titleBarAndContextualMenuContainer.addView(collapsingTopBarBackground, lp);
         }
+        if (params.hasReactView()) {
+
+        }
     }
 
     private void createReactView(CollapsingTopBarParams params) {
         if (params.hasReactView()) {
             header = new CollapsingTopBarReactHeader(getContext(),
-                    params.reactViewId,
+                    params,
                     new NavigationParams(Bundle.EMPTY),
                     scrollListener);
             LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, (int) ViewUtils.convertDpToPixel(params.reactViewHeight));
@@ -117,6 +120,9 @@ public class CollapsingTopBar extends TopBar implements CollapsingView {
         if (collapsingTopBarBackground != null) {
             collapsingTopBarBackground.collapse(amount.get());
         }
+        if (header != null) {
+            header.collapse(amount.get());
+        }
     }
 
     public void onScrollViewAdded(ScrollView scrollView) {

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

@@ -10,7 +10,9 @@ 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.CollapsingTopBarParams;
 import com.reactnativenavigation.params.NavigationParams;
+import com.reactnativenavigation.utils.ViewUtils;
 import com.reactnativenavigation.views.ContentView;
 
 public class CollapsingTopBarReactHeader extends ContentView {
@@ -19,12 +21,23 @@ public class CollapsingTopBarReactHeader extends ContentView {
     private int mTouchSlop;
     private int touchDown = -1;
     private final JSTouchDispatcher mJSTouchDispatcher = new JSTouchDispatcher(this);
+    private CollapsingTopBarReactHeaderAnimator visibilityAnimator;
 
-    public CollapsingTopBarReactHeader(Context context, String screenId, NavigationParams navigationParams, ScrollListener scrollListener) {
-        super(context, screenId, navigationParams);
+    public CollapsingTopBarReactHeader(Context context, CollapsingTopBarParams params, NavigationParams navigationParams, ScrollListener scrollListener) {
+        super(context, params.reactViewId, navigationParams);
         listener = scrollListener;
         ViewConfiguration vc = ViewConfiguration.get(context);
         mTouchSlop = vc.getScaledTouchSlop();
+        visibilityAnimator = createVisibilityAnimator(params.reactViewHeight);
+    }
+
+    private CollapsingTopBarReactHeaderAnimator createVisibilityAnimator(int reactViewHeight) {
+        float height = ViewUtils.convertDpToPixel(reactViewHeight);
+        return new CollapsingTopBarReactHeaderAnimator(this, height / 2, height / 2);
+    }
+
+    public void collapse(float amount) {
+        visibilityAnimator.collapse(amount);
     }
 
     @Override
@@ -56,17 +69,6 @@ public class CollapsingTopBarReactHeader extends ContentView {
         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);
@@ -76,6 +78,7 @@ public class CollapsingTopBarReactHeader extends ContentView {
                 releaseScroll(ev);
                 break;
             case MotionEvent.ACTION_MOVE:
+
                 break;
             default:
                 break;
@@ -83,6 +86,17 @@ public class CollapsingTopBarReactHeader extends ContentView {
         return super.onTouchEvent(ev);
     }
 
+    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);
+    }
+
     private void releaseScroll(MotionEvent ev) {
         mIsScrolling = false;
         touchDown = -1;

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

@@ -0,0 +1,56 @@
+package com.reactnativenavigation.views.collapsingToolbar;
+
+import android.view.animation.DecelerateInterpolator;
+import android.view.animation.Interpolator;
+
+import static com.reactnativenavigation.views.collapsingToolbar.CollapsingTopBarReactHeaderAnimator.State.Invisible;
+import static com.reactnativenavigation.views.collapsingToolbar.CollapsingTopBarReactHeaderAnimator.State.Visible;
+
+public class CollapsingTopBarReactHeaderAnimator {
+    enum State {Visible, Invisible}
+
+    private State state = Invisible;
+    private CollapsingTopBarReactHeader header;
+    private final float hideThreshold;
+    private float showThreshold;
+    private final static int ANIMATION_DURATION = 360;
+    private final Interpolator interpolator = new DecelerateInterpolator();
+
+    public CollapsingTopBarReactHeaderAnimator(CollapsingTopBarReactHeader header, float hideThreshold, float showThreshold) {
+        this.header = header;
+        this.hideThreshold = hideThreshold;
+        this.showThreshold = showThreshold;
+    }
+
+    public void collapse(float collapse) {
+        if (shouldShow(collapse)) {
+            show();
+        } else if (shouldHide(collapse)) {
+            hide();
+        }
+    }
+
+    private boolean shouldShow(float collapse) {
+        return Math.abs(collapse) < showThreshold && state == Invisible;
+    }
+
+    private boolean shouldHide(float collapse) {
+        return Math.abs(collapse) >= hideThreshold && state == Visible;
+    }
+
+    private void show() {
+        state = State.Visible;
+        header.animate()
+                .alpha(1)
+                .setDuration(ANIMATION_DURATION)
+                .setInterpolator(interpolator);
+    }
+
+    private void hide() {
+        state = State.Invisible;
+        header.animate()
+                .alpha(0)
+                .setDuration(ANIMATION_DURATION)
+                .setInterpolator(interpolator);
+    }
+}