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

 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;
 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();
 
     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);
+            });
         }
     }
 
 
     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())) {
         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());
         }
     }
 
-    private void mergeFabOptions(Fab fab, FabOptions options) {
+    private void mergeFabOptions(ViewController component, Fab fab, FabOptions options) {
         if (options.visible.isTrue()) {
             fab.show(true);
         }
         }
     }
 
-    private void applyFabMenuOptions(FabMenu fabMenu, FabOptions options) {
+    private void applyFabMenuOptions(ViewController component, FabMenu fabMenu, FabOptions options) {
         if (options.visible.isTrueOrUndefined()) {
             fabMenu.showMenuButton(true);
         }
         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);
         }
     }
 
-    private void mergeFabMenuOptions(FabMenu fabMenu, FabOptions options) {
+    private void mergeFabMenuOptions(ViewController component, FabMenu fabMenu, FabOptions options) {
         if (options.visible.isTrue()) {
             fabMenu.showMenuButton(true);
         }
             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

 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;
     private boolean isShown;
     private boolean isDestroyed;
     private ViewVisibilityListener viewVisibilityListener = new ViewVisibilityListenerAdapter();
-    protected FabPresenter fabOptionsPresenter;
     private ViewControllerOverlay overlay;
     @Nullable public abstract String getCurrentComponentName();
 
         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

 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;
     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);
     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()
         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

 
 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;
     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;
         return this;
     }
 
+    public StackControllerBuilder setFabPresenter(FabPresenter fabPresenter) {
+        this.fabPresenter = fabPresenter;
+        return this;
+    }
+
     public StackController build() {
         return new StackController(activity,
                 children,
                 initialOptions,
                 backButtonHelper,
                 stackPresenter,
-                presenter
+                presenter,
+                fabPresenter
         );
     }
 }

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

 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;
         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);
         }
         return false;
     }
+
+    private FabPresenter createFabPresenter() {
+        return new FabPresenter() {
+            @Override
+            public void animateHide(Runnable onAnimationEnd) {
+                onAnimationEnd.run();
+            }
+        };
+    }
 }