Temporary fix to fab position on screen (#5758)

Fab has been broken since v3. This is a very temporary fix until we refactor it and upgrade to fab from AndroidX

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

@@ -1,34 +1,32 @@
 package com.reactnativenavigation.presentation;
 
 
-import androidx.annotation.NonNull;
 import android.view.Gravity;
 import android.view.View;
 import android.view.ViewGroup;
-import android.widget.FrameLayout;
-import android.widget.RelativeLayout;
 
 import com.reactnativenavigation.R;
 import com.reactnativenavigation.parse.FabOptions;
+import com.reactnativenavigation.viewcontrollers.ViewController;
 import com.reactnativenavigation.views.Fab;
 import com.reactnativenavigation.views.FabMenu;
-import com.reactnativenavigation.views.ReactComponent;
 
-import static android.widget.RelativeLayout.ALIGN_PARENT_BOTTOM;
-import static android.widget.RelativeLayout.ALIGN_PARENT_LEFT;
-import static android.widget.RelativeLayout.ALIGN_PARENT_RIGHT;
-import static android.widget.RelativeLayout.ALIGN_PARENT_TOP;
+import androidx.annotation.NonNull;
+import androidx.coordinatorlayout.widget.CoordinatorLayout;
+
+import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
 import static com.github.clans.fab.FloatingActionButton.SIZE_MINI;
 import static com.github.clans.fab.FloatingActionButton.SIZE_NORMAL;
+import static com.reactnativenavigation.utils.ObjectUtils.perform;
 
 public class FabPresenter {
     private ViewGroup viewGroup;
-    private ReactComponent component;
+    private ViewController component;
 
     private Fab fab;
     private FabMenu fabMenu;
 
-    public void applyOptions(FabOptions options, @NonNull ReactComponent component, @NonNull ViewGroup viewGroup) {
+    public void applyOptions(FabOptions options, @NonNull ViewController component, @NonNull ViewGroup viewGroup) {
         this.viewGroup = viewGroup;
         this.component = component;
 
@@ -51,10 +49,9 @@ public class FabPresenter {
         }
     }
 
-    public void mergeOptions(FabOptions options, @NonNull ReactComponent component, @NonNull ViewGroup viewGroup) {
+    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);
@@ -103,139 +100,44 @@ public class FabPresenter {
     }
 
     private void setParams(View fab, FabOptions options) {
-        ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
-        if (viewGroup instanceof RelativeLayout) {
-            RelativeLayout.LayoutParams layoutParamsRelative = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
-            layoutParamsRelative.bottomMargin = (int) viewGroup.getContext().getResources().getDimension(R.dimen.margin);
-            layoutParamsRelative.rightMargin = (int) viewGroup.getContext().getResources().getDimension(R.dimen.margin);
-            layoutParamsRelative.leftMargin = (int) viewGroup.getContext().getResources().getDimension(R.dimen.margin);
-            layoutParamsRelative.topMargin = (int) viewGroup.getContext().getResources().getDimension(R.dimen.margin);
-            if (options.alignHorizontally.hasValue()) {
-                if ("right".equals(options.alignHorizontally.get())) {
-                    layoutParamsRelative.removeRule(ALIGN_PARENT_LEFT);
-                    layoutParamsRelative.addRule(ALIGN_PARENT_RIGHT);
-                }
-                if ("left".equals(options.alignHorizontally.get())) {
-                    layoutParamsRelative.removeRule(ALIGN_PARENT_RIGHT);
-                    layoutParamsRelative.addRule(ALIGN_PARENT_LEFT);
-                }
-            } else {
-                layoutParamsRelative.addRule(ALIGN_PARENT_RIGHT);
+        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.gravity = Gravity.BOTTOM;
+        if (options.alignHorizontally.hasValue()) {
+            if ("right".equals(options.alignHorizontally.get())) {
+                lp.gravity |= Gravity.RIGHT;
             }
-            if (options.alignVertically.hasValue()) {
-                if ("top".equals(options.alignVertically.get())) {
-                    layoutParamsRelative.removeRule(ALIGN_PARENT_BOTTOM);
-                    layoutParamsRelative.addRule(ALIGN_PARENT_TOP);
-                }
-                if ("bottom".equals(options.alignVertically.get())) {
-                    layoutParamsRelative.removeRule(ALIGN_PARENT_TOP);
-                    layoutParamsRelative.addRule(ALIGN_PARENT_BOTTOM);
-                }
-            } else {
-                layoutParamsRelative.addRule(ALIGN_PARENT_BOTTOM);
+            if ("left".equals(options.alignHorizontally.get())) {
+                lp.gravity |= Gravity.LEFT;
             }
-            layoutParams = layoutParamsRelative;
-        }
-        if (viewGroup instanceof FrameLayout) {
-            FrameLayout.LayoutParams layoutParamsFrame = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
-            layoutParamsFrame.bottomMargin = (int) viewGroup.getContext().getResources().getDimension(R.dimen.margin);
-            layoutParamsFrame.rightMargin = (int) viewGroup.getContext().getResources().getDimension(R.dimen.margin);
-            layoutParamsFrame.leftMargin = (int) viewGroup.getContext().getResources().getDimension(R.dimen.margin);
-            layoutParamsFrame.topMargin = (int) viewGroup.getContext().getResources().getDimension(R.dimen.margin);
-            if (options.alignHorizontally.hasValue()) {
-                if ("right".equals(options.alignHorizontally.get())) {
-                    removeGravityParam(layoutParamsFrame, Gravity.LEFT);
-                    setGravityParam(layoutParamsFrame, Gravity.RIGHT);
-                }
-                if ("left".equals(options.alignHorizontally.get())) {
-                    removeGravityParam(layoutParamsFrame, Gravity.RIGHT);
-                    setGravityParam(layoutParamsFrame, Gravity.LEFT);
-                }
-            } else {
-                setGravityParam(layoutParamsFrame, Gravity.RIGHT);
-            }
-            if (options.alignVertically.hasValue()) {
-                if ("top".equals(options.alignVertically.get())) {
-                    removeGravityParam(layoutParamsFrame, Gravity.BOTTOM);
-                    setGravityParam(layoutParamsFrame, Gravity.TOP);
-                }
-                if ("bottom".equals(options.alignVertically.get())) {
-                    removeGravityParam(layoutParamsFrame, Gravity.TOP);
-                    setGravityParam(layoutParamsFrame, Gravity.BOTTOM);
-                }
-            } else {
-                setGravityParam(layoutParamsFrame, Gravity.BOTTOM);
-            }
-            layoutParams = layoutParamsFrame;
+        } else {
+            lp.gravity |= Gravity.RIGHT;
         }
-        fab.setLayoutParams(layoutParams);
+        fab.setLayoutParams(lp);
     }
 
     private void mergeParams(View fab, FabOptions options) {
-        ViewGroup.LayoutParams layoutParams = fab.getLayoutParams();
-        if (viewGroup instanceof RelativeLayout) {
-            RelativeLayout.LayoutParams layoutParamsRelative = (RelativeLayout.LayoutParams) fab.getLayoutParams();
-            if (layoutParamsRelative == null) {
-                layoutParamsRelative = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
-                layoutParamsRelative.bottomMargin = (int) viewGroup.getContext().getResources().getDimension(R.dimen.margin);
-                layoutParamsRelative.rightMargin = (int) viewGroup.getContext().getResources().getDimension(R.dimen.margin);
-                layoutParamsRelative.leftMargin = (int) viewGroup.getContext().getResources().getDimension(R.dimen.margin);
-                layoutParamsRelative.topMargin = (int) viewGroup.getContext().getResources().getDimension(R.dimen.margin);
+        CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) perform(
+                fab,
+                new CoordinatorLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT),
+                View::getLayoutParams
+        );
+        fab.setTag(R.id.fab_bottom_margin, lp.leftMargin);
+        lp.gravity = Gravity.BOTTOM;
+        if (options.alignHorizontally.hasValue()) {
+            if ("right".equals(options.alignHorizontally.get())) {
+                lp.gravity |= Gravity.RIGHT;
             }
-            if (options.alignHorizontally.hasValue()) {
-                if ("right".equals(options.alignHorizontally.get())) {
-                    layoutParamsRelative.removeRule(ALIGN_PARENT_LEFT);
-                    layoutParamsRelative.addRule(ALIGN_PARENT_RIGHT);
-                }
-                if ("left".equals(options.alignHorizontally.get())) {
-                    layoutParamsRelative.removeRule(ALIGN_PARENT_RIGHT);
-                    layoutParamsRelative.addRule(ALIGN_PARENT_LEFT);
-                }
+            if ("left".equals(options.alignHorizontally.get())) {
+                lp.gravity |= Gravity.RIGHT;
             }
-            if (options.alignVertically.hasValue()) {
-                if ("top".equals(options.alignVertically.get())) {
-                    layoutParamsRelative.removeRule(ALIGN_PARENT_BOTTOM);
-                    layoutParamsRelative.addRule(ALIGN_PARENT_TOP);
-                }
-                if ("bottom".equals(options.alignVertically.get())) {
-                    layoutParamsRelative.removeRule(ALIGN_PARENT_TOP);
-                    layoutParamsRelative.addRule(ALIGN_PARENT_BOTTOM);
-                }
-            }
-            layoutParams = layoutParamsRelative;
-        }
-        if (viewGroup instanceof FrameLayout) {
-            FrameLayout.LayoutParams layoutParamsFrame = (FrameLayout.LayoutParams) fab.getLayoutParams();
-            if (layoutParamsFrame == null) {
-                layoutParamsFrame = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
-                layoutParamsFrame.bottomMargin = (int) viewGroup.getContext().getResources().getDimension(R.dimen.margin);
-                layoutParamsFrame.rightMargin = (int) viewGroup.getContext().getResources().getDimension(R.dimen.margin);
-                layoutParamsFrame.leftMargin = (int) viewGroup.getContext().getResources().getDimension(R.dimen.margin);
-                layoutParamsFrame.topMargin = (int) viewGroup.getContext().getResources().getDimension(R.dimen.margin);
-            }
-            if (options.alignHorizontally.hasValue()) {
-                if ("right".equals(options.alignHorizontally.get())) {
-                    removeGravityParam(layoutParamsFrame, Gravity.LEFT);
-                    setGravityParam(layoutParamsFrame, Gravity.RIGHT);
-                }
-                if ("left".equals(options.alignHorizontally.get())) {
-                    removeGravityParam(layoutParamsFrame, Gravity.RIGHT);
-                    setGravityParam(layoutParamsFrame, Gravity.LEFT);
-                }
-            }
-            if (options.alignVertically.hasValue()) {
-                if ("top".equals(options.alignVertically.get())) {
-                    removeGravityParam(layoutParamsFrame, Gravity.BOTTOM);
-                    setGravityParam(layoutParamsFrame, Gravity.TOP);
-                }
-                if ("bottom".equals(options.alignVertically.get())) {
-                    removeGravityParam(layoutParamsFrame, Gravity.TOP);
-                    setGravityParam(layoutParamsFrame, Gravity.BOTTOM);
-                }
-            }
-            layoutParams = layoutParamsFrame;
+        } else {
+            lp.gravity |= Gravity.RIGHT;
         }
-        fab.setLayoutParams(layoutParams);
+        fab.setLayoutParams(lp);
     }
 
     private void applyFabOptions(Fab fab, FabOptions options) {
@@ -373,14 +275,4 @@ public class FabPresenter {
             fabMenu.disableCollapse();
         }
     }
-
-    private void setGravityParam(FrameLayout.LayoutParams params, int gravityParam) {
-        params.gravity = params.gravity | gravityParam;
-    }
-
-    private void removeGravityParam(FrameLayout.LayoutParams params, int gravityParam) {
-        if ((params.gravity & gravityParam) == gravityParam) {
-            params.gravity = params.gravity & ~gravityParam;
-        }
-    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/utils/CoordinatorLayoutUtils.java

@@ -1,5 +1,9 @@
 package com.reactnativenavigation.utils;
 
+import android.view.View;
+
+import com.reactnativenavigation.R;
+
 import androidx.coordinatorlayout.widget.CoordinatorLayout;
 
 import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
@@ -14,4 +18,8 @@ public class CoordinatorLayoutUtils {
         lp.setBehavior(behavior);
         return lp;
     }
+
+    public static void updateBottomMargin(View view, int additionalMargin) {
+        ((CoordinatorLayout.LayoutParams) view.getLayoutParams()).bottomMargin = additionalMargin + ViewTags.get(view, R.id.fab_bottom_margin, 0);
+    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/utils/ObjectUtils.java

@@ -1,10 +1,10 @@
 package com.reactnativenavigation.utils;
 
-import androidx.annotation.Nullable;
-
 import com.reactnativenavigation.utils.Functions.Func1;
 import com.reactnativenavigation.utils.Functions.FuncR1;
 
+import androidx.annotation.Nullable;
+
 public class ObjectUtils {
     public static <T> void perform(@Nullable T obj, Func1<T> action) {
         if (obj != null) action.run(obj);

lib/android/app/src/main/java/com/reactnativenavigation/utils/ViewTags.java

@@ -0,0 +1,11 @@
+package com.reactnativenavigation.utils;
+
+import android.view.View;
+
+import androidx.annotation.NonNull;
+
+public class ViewTags {
+    public static @NonNull <T> T get(View view, int key, @NonNull T defaultValue) {
+        return view.getTag(key) == null ? defaultValue : (T) view.getTag(key);
+    }
+}

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

@@ -3,6 +3,7 @@ package com.reactnativenavigation.viewcontrollers;
 import android.app.Activity;
 import android.view.View;
 
+import com.reactnativenavigation.interfaces.ScrollEventListener;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.presentation.ComponentPresenter;
 import com.reactnativenavigation.presentation.Presenter;
@@ -45,6 +46,11 @@ public class ComponentViewController extends ChildController<ComponentLayout> {
         presenter.setDefaultOptions(defaultOptions);
     }
 
+    @Override
+    public ScrollEventListener getScrollEventListener() {
+        return perform(view, null, ComponentLayout::getScrollEventListener);
+    }
+
     @Override
     public void onViewAppeared() {
         super.onViewAppeared();

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

@@ -6,6 +6,7 @@ import android.view.ViewGroup;
 import android.view.ViewManager;
 import android.view.ViewTreeObserver;
 
+import com.reactnativenavigation.interfaces.ScrollEventListener;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.params.Bool;
 import com.reactnativenavigation.parse.params.NullBool;
@@ -86,6 +87,10 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
         this.waitForRender = waitForRender;
     }
 
+    public ScrollEventListener getScrollEventListener() {
+        return null;
+    }
+
     public void addOnAppearedListener(Runnable onAppearedListener) {
         onAppearedListeners.add(onAppearedListener);
     }

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

@@ -18,7 +18,8 @@ import com.reactnativenavigation.viewcontrollers.ParentController;
 import com.reactnativenavigation.viewcontrollers.ViewController;
 import com.reactnativenavigation.viewcontrollers.topbar.TopBarController;
 import com.reactnativenavigation.views.Component;
-import com.reactnativenavigation.views.ReactComponent;
+import com.reactnativenavigation.views.Fab;
+import com.reactnativenavigation.views.FabMenu;
 import com.reactnativenavigation.views.StackLayout;
 import com.reactnativenavigation.views.stack.StackBehaviour;
 import com.reactnativenavigation.views.topbar.TopBar;
@@ -35,6 +36,7 @@ import androidx.viewpager.widget.ViewPager;
 
 import static com.reactnativenavigation.utils.CollectionUtils.*;
 import static com.reactnativenavigation.utils.CoordinatorLayoutUtils.matchParentWithBehaviour;
+import static com.reactnativenavigation.utils.CoordinatorLayoutUtils.updateBottomMargin;
 import static com.reactnativenavigation.utils.ObjectUtils.perform;
 
 public class StackController extends ParentController<StackLayout> {
@@ -98,9 +100,7 @@ public class StackController extends ParentController<StackLayout> {
     public void applyChildOptions(Options options, ViewController child) {
         super.applyChildOptions(options, child);
         presenter.applyChildOptions(resolveCurrentOptions(), this, child);
-        if (child.getView() instanceof ReactComponent) {
-            fabOptionsPresenter.applyOptions(this.options.fabOptions, (ReactComponent) child.getView(), getView());
-        }
+        fabOptionsPresenter.applyOptions(this.options.fabOptions, child, getView());
         performOnParentController(parent ->
                 parent.applyChildOptions(
                         this.options.copy()
@@ -119,8 +119,8 @@ public class StackController extends ParentController<StackLayout> {
         super.mergeChildOptions(options, child);
         if (child.isViewShown() && peek() == child) {
             presenter.mergeChildOptions(options, resolveCurrentOptions(), this, child);
-            if (options.fabOptions.hasValue() && child instanceof ReactComponent) {
-                fabOptionsPresenter.mergeOptions(options.fabOptions, (ReactComponent) child, getView());
+            if (options.fabOptions.hasValue()) {
+                fabOptionsPresenter.mergeOptions(options.fabOptions, child, getView());
             }
         }
         performOnParentController(parent ->
@@ -395,7 +395,10 @@ public class StackController extends ParentController<StackLayout> {
 
     @Override
     public boolean onDependentViewChanged(CoordinatorLayout parent, ViewGroup child, View dependency) {
-        perform(findController(child), controller -> presenter.applyTopInsets(this, controller));
+        perform(findController(child), controller -> {
+            if (dependency instanceof TopBar) presenter.applyTopInsets(this, controller);
+            if (dependency instanceof Fab || dependency instanceof FabMenu) updateBottomMargin(dependency, getBottomInset());
+        });
         return false;
     }
 

lib/android/app/src/main/java/com/reactnativenavigation/views/stack/StackBehaviour.java

@@ -5,6 +5,8 @@ import android.view.ViewGroup;
 
 import com.reactnativenavigation.views.BehaviourAdapter;
 import com.reactnativenavigation.views.BehaviourDelegate;
+import com.reactnativenavigation.views.Fab;
+import com.reactnativenavigation.views.FabMenu;
 import com.reactnativenavigation.views.topbar.TopBar;
 
 import androidx.annotation.NonNull;
@@ -17,6 +19,8 @@ public class StackBehaviour<V extends ViewGroup> extends BehaviourDelegate {
 
     @Override
     public boolean layoutDependsOn(@NonNull CoordinatorLayout parent, @NonNull ViewGroup child, @NonNull View dependency) {
-        return dependency instanceof TopBar;
+        return dependency instanceof TopBar ||
+               dependency instanceof Fab ||
+               dependency instanceof FabMenu;
     }
 }

lib/android/app/src/main/res/values/ids.xml

@@ -4,4 +4,5 @@
     <item name="fragment_screen_content" type="id"/>
     <item name="topBarBackgroundComponent" type="id"/>
     <item name="bottomTabs" type="id"/>
+    <item name="fab_bottom_margin" type="id" />
 </resources>

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

@@ -1,7 +1,6 @@
 package com.reactnativenavigation.viewcontrollers;
 
 import android.app.Activity;
-import androidx.annotation.NonNull;
 import android.view.View;
 import android.view.ViewGroup;
 
@@ -19,6 +18,8 @@ import com.reactnativenavigation.views.StackLayout;
 
 import org.junit.Test;
 
+import androidx.annotation.NonNull;
+
 import static org.assertj.core.api.Java6Assertions.assertThat;
 
 public class FloatingActionButtonTest extends BaseTest {

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/stack/StackControllerTest.java

@@ -1080,7 +1080,7 @@ public class StackControllerTest extends BaseTest {
     public void onDependentViewChanged_delegatesToPresenter() {
         CoordinatorLayout parent = Mockito.mock(CoordinatorLayout.class);
         uut.push(child1, new CommandListenerAdapter());
-        assertThat(uut.onDependentViewChanged(parent, child1.getView(), Mockito.mock(View.class))).isFalse();
+        assertThat(uut.onDependentViewChanged(parent, child1.getView(), Mockito.mock(TopBar.class))).isFalse();
         verify(presenter).applyTopInsets(eq(uut), eq(child1));
     }
 

playground/src/commons/Colors.js

@@ -1,4 +1,5 @@
 module.exports = {
   background: '#e8e8e8',
-  primary: '#5847ff'
+  primary: '#5847ff',
+  secondary: '#FFC249'
 }

playground/src/screens/ButtonsScreen.js

@@ -19,11 +19,15 @@ const {
 class Options extends Component {
   static options() {
     return {
+      fab: {
+        id: 'fab',
+        icon: require('../../img/navicon_add.png'),
+        backgroundColor: Colors.secondary
+      },
       topBar: {
-        visible: true,
         testID: TOP_BAR,
         title: {
-          text: 'Styling Options'
+          text: 'Buttons'
         },
         rightButtons: [
           {