Show and hide title when collapsing or expending header

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

@@ -73,12 +73,9 @@ 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) {
+    private void createReactHeader(CollapsingTopBarParams params) {
         if (params.hasReactView()) {
             header = new CollapsingTopBarReactHeader(getContext(),
                     params,
@@ -86,13 +83,25 @@ public class CollapsingTopBar extends TopBar implements CollapsingView {
                     scrollListener);
             LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, (int) ViewUtils.convertDpToPixel(params.reactViewHeight));
             titleBarAndContextualMenuContainer.addView(header, lp);
+            header.setOnHiddenListener(new CollapsingTopBarReactHeaderAnimator.OnHiddenListener() {
+                @Override
+                public void onHidden() {
+                    titleBar.setTitle(title);
+                }
+            });
+            header.setOnVisibleListener(new CollapsingTopBarReactHeaderAnimator.OnVisibleListener() {
+                @Override
+                public void onVisible() {
+                    titleBar.setTitle("");
+                }
+            });
         }
     }
 
     @Override
     protected TitleBar createTitleBar() {
         if (params.hasBackgroundImage() || params.hasReactView()) {
-            createReactView(params);
+            createReactHeader(params);
             return new CollapsingTitleBar(getContext(),
                     getCollapsedHeight(),
                     scrollListener,

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

@@ -15,25 +15,37 @@ import com.reactnativenavigation.params.NavigationParams;
 import com.reactnativenavigation.utils.ViewUtils;
 import com.reactnativenavigation.views.ContentView;
 
-public class CollapsingTopBarReactHeader extends ContentView {
+public class CollapsingTopBarReactHeader extends ContentView implements CollapsingTopBarReactHeaderAnimator.OnVisibleListener, CollapsingTopBarReactHeaderAnimator.OnHiddenListener {
     private ScrollListener listener;
     private boolean mIsScrolling;
     private int mTouchSlop;
     private int touchDown = -1;
     private final JSTouchDispatcher mJSTouchDispatcher = new JSTouchDispatcher(this);
     private CollapsingTopBarReactHeaderAnimator visibilityAnimator;
+    private CollapsingTopBarReactHeaderAnimator.OnVisibleListener onVisibleListener;
+    private CollapsingTopBarReactHeaderAnimator.OnHiddenListener onHiddenListener;
+
+    public void setOnVisibleListener(CollapsingTopBarReactHeaderAnimator.OnVisibleListener onVisibleListener) {
+        this.onVisibleListener = onVisibleListener;
+    }
+
+    public void setOnHiddenListener(CollapsingTopBarReactHeaderAnimator.OnHiddenListener onHiddenListener) {
+        this.onHiddenListener = onHiddenListener;
+    }
 
     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);
+        createVisibilityAnimator(params.reactViewHeight);
     }
 
-    private CollapsingTopBarReactHeaderAnimator createVisibilityAnimator(int reactViewHeight) {
+    private void createVisibilityAnimator(int reactViewHeight) {
         float height = ViewUtils.convertDpToPixel(reactViewHeight);
-        return new CollapsingTopBarReactHeaderAnimator(this, height / 2, height / 2);
+        visibilityAnimator = new CollapsingTopBarReactHeaderAnimator(this, height / 2, height / 2);
+        visibilityAnimator.setOnHiddenListener(this);
+        visibilityAnimator.setOnVisibleListener(this);
     }
 
     public void collapse(float amount) {
@@ -108,4 +120,18 @@ public class CollapsingTopBarReactHeader extends ContentView {
         EventDispatcher eventDispatcher = reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher();
         mJSTouchDispatcher.handleTouchEvent(event, eventDispatcher);
     }
+
+    @Override
+    public void onVisible() {
+        if (onVisibleListener != null) {
+            onVisibleListener.onVisible();
+        }
+    }
+
+    @Override
+    public void onHidden() {
+        if (onHiddenListener != null) {
+            onHiddenListener.onHidden();
+        }
+    }
 }

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

@@ -6,7 +6,13 @@ 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 {
+class CollapsingTopBarReactHeaderAnimator {
+    interface OnVisibleListener {
+        void onVisible();
+    }
+    interface OnHiddenListener {
+        void onHidden();
+    }
     enum State {Visible, Invisible}
 
     private State state = Invisible;
@@ -15,8 +21,18 @@ public class CollapsingTopBarReactHeaderAnimator {
     private float showThreshold;
     private final static int ANIMATION_DURATION = 360;
     private final Interpolator interpolator = new DecelerateInterpolator();
+    private OnVisibleListener onVisibleListener;
+    private OnHiddenListener onHiddenListener;
+
+    void setOnVisibleListener(OnVisibleListener onVisibleListener) {
+        this.onVisibleListener = onVisibleListener;
+    }
 
-    public CollapsingTopBarReactHeaderAnimator(CollapsingTopBarReactHeader header, float hideThreshold, float showThreshold) {
+    void setOnHiddenListener(OnHiddenListener onHiddenListener) {
+        this.onHiddenListener = onHiddenListener;
+    }
+
+    CollapsingTopBarReactHeaderAnimator(CollapsingTopBarReactHeader header, float hideThreshold, float showThreshold) {
         this.header = header;
         this.hideThreshold = hideThreshold;
         this.showThreshold = showThreshold;
@@ -39,6 +55,9 @@ public class CollapsingTopBarReactHeaderAnimator {
     }
 
     private void show() {
+        if (state == Invisible && onVisibleListener != null) {
+            onVisibleListener.onVisible();
+        }
         state = State.Visible;
         header.animate()
                 .alpha(1)
@@ -47,6 +66,9 @@ public class CollapsingTopBarReactHeaderAnimator {
     }
 
     private void hide() {
+        if (state == Visible && onHiddenListener != null) {
+            onHiddenListener.onHidden();
+        }
         state = State.Invisible;
         header.animate()
                 .alpha(0)