Fix flickering FAB when changing bottom tabs (#6225)

* Fix flickering FAB when changing bottom tabs

Fab was instantiated with the default margin (16dp), without the containing screen's bottom inset. The caused the FAB to jump up when the screen appeared since it then received the correct bottom margins (16dp + bottom insets)

Fixes #5816

lib/android/app/src/main/java/com/reactnativenavigation/presentation/FabPresenter.java

@@ -1,12 +1,15 @@
 package com.reactnativenavigation.presentation;
 
 
+import android.animation.Animator;
+import android.animation.AnimatorListenerAdapter;
 import android.view.Gravity;
 import android.view.View;
 import android.view.ViewGroup;
 
 import com.reactnativenavigation.R;
 import com.reactnativenavigation.parse.FabOptions;
+import com.reactnativenavigation.utils.UiUtils;
 import com.reactnativenavigation.viewcontrollers.ViewController;
 import com.reactnativenavigation.views.Fab;
 import com.reactnativenavigation.views.FabMenu;
@@ -20,28 +23,28 @@ import static com.github.clans.fab.FloatingActionButton.SIZE_NORMAL;
 import static com.reactnativenavigation.utils.ObjectUtils.perform;
 
 public class FabPresenter {
+    private static final int DURATION = 200;
+
     private ViewGroup viewGroup;
-    private ViewController component;
 
     private Fab fab;
     private FabMenu fabMenu;
 
     public void applyOptions(FabOptions options, @NonNull ViewController component, @NonNull ViewGroup viewGroup) {
         this.viewGroup = viewGroup;
-        this.component = component;
 
         if (options.id.hasValue()) {
             if (fabMenu != null && fabMenu.getFabId().equals(options.id.get())) {
                 fabMenu.bringToFront();
-                applyFabMenuOptions(fabMenu, options);
-                setParams(fabMenu, options);
+                applyFabMenuOptions(component, fabMenu, options);
+                setParams(component, fabMenu, options);
             } else if (fab != null && fab.getFabId().equals(options.id.get())) {
                 fab.bringToFront();
-                applyFabOptions(fab, options);
-                setParams(fab, options);
+                setParams(component, fab, options);
+                applyFabOptions(component, fab, options);
                 fab.setOnClickListener(v -> component.sendOnNavigationButtonPressed(options.id.get()));
             } else {
-                createFab(options);
+                createFab(component, options);
             }
         } else {
             removeFab();
@@ -51,35 +54,38 @@ public class FabPresenter {
 
     public void mergeOptions(FabOptions options, @NonNull ViewController component, @NonNull ViewGroup viewGroup) {
         this.viewGroup = viewGroup;
-        this.component = component;
         if (options.id.hasValue()) {
             if (fabMenu != null && fabMenu.getFabId().equals(options.id.get())) {
                 mergeParams(fabMenu, options);
                 fabMenu.bringToFront();
-                mergeFabMenuOptions(fabMenu, options);
+                mergeFabMenuOptions(component, fabMenu, options);
             } else if (fab != null && fab.getFabId().equals(options.id.get())) {
                 mergeParams(fab, options);
                 fab.bringToFront();
-                mergeFabOptions(fab, options);
+                mergeFabOptions(component, fab, options);
                 fab.setOnClickListener(v -> component.sendOnNavigationButtonPressed(options.id.get()));
             } else {
-                createFab(options);
+                createFab(component, options);
             }
         }
     }
 
-    private void createFab(FabOptions options) {
+    private void createFab(ViewController component, FabOptions options) {
         if (options.actionsArray.size() > 0) {
             fabMenu = new FabMenu(viewGroup.getContext(), options.id.get());
-            setParams(fabMenu, options);
-            applyFabMenuOptions(fabMenu, options);
+            setParams(component, fabMenu, options);
+            applyFabMenuOptions(component, fabMenu, options);
             viewGroup.addView(fabMenu);
         } else {
             fab = new Fab(viewGroup.getContext(), options.id.get());
-            setParams(fab, options);
-            applyFabOptions(fab, options);
-            fab.setOnClickListener(v -> component.sendOnNavigationButtonPressed(options.id.get()));
+            setParams(component, fab, options);
+            applyFabOptions(component, fab, options);
             viewGroup.addView(fab);
+            fab.setOnClickListener(v -> component.sendOnNavigationButtonPressed(options.id.get()));
+            UiUtils.doOnLayout(fab, () -> {
+                fab.setPivotX(fab.getWidth() / 2f);
+                fab.setPivotY(fab.getHeight() / 2f);
+            });
         }
     }
 
@@ -93,18 +99,32 @@ public class FabPresenter {
 
     private void removeFab() {
         if (fab != null) {
-            fab.hide(true);
-            viewGroup.removeView(fab);
-            fab = null;
+            animateHide(() -> {
+                viewGroup.removeView(fab);
+                fab = null;
+            });
         }
     }
 
-    private void setParams(View fab, FabOptions options) {
+    public void animateHide(Runnable onAnimationEnd) {
+        fab.animate()
+                .scaleX(0f)
+                .scaleY(0f)
+                .setDuration(DURATION)
+                .setListener(new AnimatorListenerAdapter() {
+                    @Override
+                    public void onAnimationEnd(Animator animation) {
+                        onAnimationEnd.run();
+                    }
+                });
+    }
+
+    private void setParams(ViewController component, View fab, FabOptions options) {
         CoordinatorLayout.LayoutParams lp = new CoordinatorLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT);
         lp.rightMargin = (int) viewGroup.getContext().getResources().getDimension(R.dimen.margin);
         lp.leftMargin = (int) viewGroup.getContext().getResources().getDimension(R.dimen.margin);
-        lp.bottomMargin = (int) viewGroup.getContext().getResources().getDimension(R.dimen.margin);
-        fab.setTag(R.id.fab_bottom_margin, lp.bottomMargin);
+        lp.bottomMargin = component.getBottomInset() + (int) viewGroup.getContext().getResources().getDimension(R.dimen.margin);
+        fab.setTag(R.id.fab_bottom_margin, (int) viewGroup.getContext().getResources().getDimension(R.dimen.margin));
         lp.gravity = Gravity.BOTTOM;
         if (options.alignHorizontally.hasValue()) {
             if ("right".equals(options.alignHorizontally.get())) {
@@ -140,12 +160,22 @@ public class FabPresenter {
         fab.setLayoutParams(lp);
     }
 
-    private void applyFabOptions(Fab fab, FabOptions options) {
+    private void applyFabOptions(ViewController component, Fab fab, FabOptions options) {
         if (options.visible.isTrueOrUndefined()) {
-            fab.show(true);
+            fab.setScaleX(0.6f);
+            fab.setScaleY(0.6f);
+            fab.animate()
+                    .scaleX(1f)
+                    .scaleY(1f)
+                    .setDuration(DURATION)
+                    .start();
         }
         if (options.visible.isFalse()) {
-            fab.hide(true);
+            fab.animate()
+                    .scaleX(0f)
+                    .scaleY(0f)
+                    .setDuration(DURATION)
+                    .start();
         }
         if (options.backgroundColor.hasValue()) {
             fab.setColorNormal(options.backgroundColor.get());
@@ -170,7 +200,7 @@ public class FabPresenter {
         }
     }
 
-    private void mergeFabOptions(Fab fab, FabOptions options) {
+    private void mergeFabOptions(ViewController component, Fab fab, FabOptions options) {
         if (options.visible.isTrue()) {
             fab.show(true);
         }
@@ -200,7 +230,7 @@ public class FabPresenter {
         }
     }
 
-    private void applyFabMenuOptions(FabMenu fabMenu, FabOptions options) {
+    private void applyFabMenuOptions(ViewController component, FabMenu fabMenu, FabOptions options) {
         if (options.visible.isTrueOrUndefined()) {
             fabMenu.showMenuButton(true);
         }
@@ -223,7 +253,7 @@ public class FabPresenter {
         fabMenu.getActions().clear();
         for (FabOptions fabOption : options.actionsArray) {
             Fab fab = new Fab(viewGroup.getContext(), fabOption.id.get());
-            applyFabOptions(fab, fabOption);
+            applyFabOptions(component, fab, fabOption);
             fab.setOnClickListener(v -> component.sendOnNavigationButtonPressed(options.id.get()));
 
             fabMenu.getActions().add(fab);
@@ -237,7 +267,7 @@ public class FabPresenter {
         }
     }
 
-    private void mergeFabMenuOptions(FabMenu fabMenu, FabOptions options) {
+    private void mergeFabMenuOptions(ViewController component, FabMenu fabMenu, FabOptions options) {
         if (options.visible.isTrue()) {
             fabMenu.showMenuButton(true);
         }
@@ -261,7 +291,7 @@ public class FabPresenter {
             fabMenu.getActions().clear();
             for (FabOptions fabOption : options.actionsArray) {
                 Fab fab = new Fab(viewGroup.getContext(), fabOption.id.get());
-                applyFabOptions(fab, fabOption);
+                applyFabOptions(component, fab, fabOption);
                 fab.setOnClickListener(v -> component.sendOnNavigationButtonPressed(options.id.get()));
 
                 fabMenu.getActions().add(fab);

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/ViewController.java

@@ -10,7 +10,6 @@ import com.reactnativenavigation.interfaces.ScrollEventListener;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.params.Bool;
 import com.reactnativenavigation.parse.params.NullBool;
-import com.reactnativenavigation.presentation.FabPresenter;
 import com.reactnativenavigation.utils.CommandListener;
 import com.reactnativenavigation.utils.Functions.Func1;
 import com.reactnativenavigation.utils.StringUtils;
@@ -67,7 +66,6 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
     private boolean isShown;
     private boolean isDestroyed;
     private ViewVisibilityListener viewVisibilityListener = new ViewVisibilityListenerAdapter();
-    protected FabPresenter fabOptionsPresenter;
     private ViewControllerOverlay overlay;
     @Nullable public abstract String getCurrentComponentName();
 
@@ -79,7 +77,6 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
         this.activity = activity;
         this.id = id;
         this.yellowBoxDelegate = yellowBoxDelegate;
-        fabOptionsPresenter = new FabPresenter();
         this.initialOptions = initialOptions;
         this.overlay = overlay;
         options = initialOptions.copy();

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/StackController.java

@@ -7,6 +7,7 @@ import android.view.ViewGroup;
 import com.reactnativenavigation.anim.NavigationAnimator;
 import com.reactnativenavigation.parse.NestedAnimationsOptions;
 import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.presentation.FabPresenter;
 import com.reactnativenavigation.presentation.Presenter;
 import com.reactnativenavigation.presentation.StackPresenter;
 import com.reactnativenavigation.react.Constants;
@@ -50,14 +51,16 @@ public class StackController extends ParentController<StackLayout> {
     private TopBarController topBarController;
     private BackButtonHelper backButtonHelper;
     private final StackPresenter presenter;
+    private final FabPresenter fabPresenter;
 
-    public StackController(Activity activity, List<ViewController> children, ChildControllersRegistry childRegistry, EventEmitter eventEmitter, TopBarController topBarController, NavigationAnimator animator, String id, Options initialOptions, BackButtonHelper backButtonHelper, StackPresenter stackPresenter, Presenter presenter) {
+    public StackController(Activity activity, List<ViewController> children, ChildControllersRegistry childRegistry, EventEmitter eventEmitter, TopBarController topBarController, NavigationAnimator animator, String id, Options initialOptions, BackButtonHelper backButtonHelper, StackPresenter stackPresenter, Presenter presenter, FabPresenter fabPresenter) {
         super(activity, childRegistry, id, presenter, initialOptions);
         this.eventEmitter = eventEmitter;
         this.topBarController = topBarController;
         this.animator = animator;
         this.backButtonHelper = backButtonHelper;
         this.presenter = stackPresenter;
+        this.fabPresenter = fabPresenter;
         stackPresenter.setButtonOnClickListener(this::onNavigationButtonPressed);
         for (ViewController child : children) {
             child.setParentController(this);
@@ -105,7 +108,7 @@ public class StackController extends ParentController<StackLayout> {
     public void applyChildOptions(Options options, ViewController child) {
         super.applyChildOptions(options, child);
         presenter.applyChildOptions(resolveCurrentOptions(), this, child);
-        fabOptionsPresenter.applyOptions(this.options.fabOptions, child, getView());
+        fabPresenter.applyOptions(this.options.fabOptions, child, getView());
         performOnParentController(parent ->
                 parent.applyChildOptions(
                         this.options.copy()
@@ -125,7 +128,7 @@ public class StackController extends ParentController<StackLayout> {
         if (child.isViewShown() && peek() == child) {
             presenter.mergeChildOptions(options, resolveCurrentOptions(), this, child);
             if (options.fabOptions.hasValue()) {
-                fabOptionsPresenter.mergeOptions(options.fabOptions, child, getView());
+                fabPresenter.mergeOptions(options.fabOptions, child, getView());
             }
         }
         performOnParentController(parent ->

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/StackControllerBuilder.java

@@ -4,6 +4,7 @@ import android.app.Activity;
 
 import com.reactnativenavigation.anim.NavigationAnimator;
 import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.presentation.FabPresenter;
 import com.reactnativenavigation.presentation.Presenter;
 import com.reactnativenavigation.presentation.StackPresenter;
 import com.reactnativenavigation.react.events.EventEmitter;
@@ -28,6 +29,7 @@ public class StackControllerBuilder {
     private StackPresenter stackPresenter;
     private List<ViewController> children = new ArrayList<>();
     private EventEmitter eventEmitter;
+    private FabPresenter fabPresenter = new FabPresenter();
 
     public StackControllerBuilder(Activity activity, EventEmitter eventEmitter) {
         this.activity = activity;
@@ -90,6 +92,11 @@ public class StackControllerBuilder {
         return this;
     }
 
+    public StackControllerBuilder setFabPresenter(FabPresenter fabPresenter) {
+        this.fabPresenter = fabPresenter;
+        return this;
+    }
+
     public StackController build() {
         return new StackController(activity,
                 children,
@@ -101,7 +108,8 @@ public class StackControllerBuilder {
                 initialOptions,
                 backButtonHelper,
                 stackPresenter,
-                presenter
+                presenter,
+                fabPresenter
         );
     }
 }

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/FloatingActionButtonTest.java

@@ -10,6 +10,7 @@ import com.reactnativenavigation.mocks.SimpleViewController;
 import com.reactnativenavigation.parse.FabOptions;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.params.Text;
+import com.reactnativenavigation.presentation.FabPresenter;
 import com.reactnativenavigation.utils.CommandListenerAdapter;
 import com.reactnativenavigation.viewcontrollers.stack.StackController;
 import com.reactnativenavigation.views.Fab;
@@ -37,7 +38,9 @@ public class FloatingActionButtonTest extends BaseTest {
         super.beforeEach();
         activity = newActivity();
         childRegistry = new ChildControllersRegistry();
-        stackController = TestUtils.newStackController(activity).build();
+        stackController = TestUtils.newStackController(activity)
+                .setFabPresenter(createFabPresenter())
+                .build();
         stackController.ensureViewIsCreated();
         Options options = getOptionsWithFab();
         childFab = new SimpleViewController(activity, childRegistry, "child1", options);
@@ -140,4 +143,13 @@ public class FloatingActionButtonTest extends BaseTest {
         }
         return false;
     }
+
+    private FabPresenter createFabPresenter() {
+        return new FabPresenter() {
+            @Override
+            public void animateHide(Runnable onAnimationEnd) {
+                onAnimationEnd.run();
+            }
+        };
+    }
 }