V2 fab (#2680)

* basic fab

* fab menu

* fab menu clicks

* pop lifecycle

* options lifecycle

* refactoring

* refactor

* parse unit tests

* refacotr

* fix test

* align

* fab unit tests

* more tests

* size

* hide on scroll in progress

* options

* menu collapse

* parser test

* merge v2

* refactor

* refactor

* more refactor

* more refactor

* fix

* more refactoring

* refactor

* refactor

* fix

* fix

* fixed undefined key

* refactor

* refactor

* refactort

lib/android/app/build.gradle

@@ -61,6 +61,8 @@ dependencies {
     implementation 'com.android.support:appcompat-v7:25.4.0'
     implementation 'com.android.support:support-v4:25.4.0'
     implementation 'com.aurelhubert:ahbottomnavigation:2.1.0'
+    implementation 'com.github.clans:fab:1.6.4'
+
 
     // node_modules
     //noinspection GradleDynamicVersion

lib/android/app/src/main/java/com/reactnativenavigation/anim/FabAnimator.java

@@ -0,0 +1,7 @@
+package com.reactnativenavigation.anim;
+
+
+public interface FabAnimator {
+    void show();
+    void hide();
+}

lib/android/app/src/main/java/com/reactnativenavigation/anim/FabCollapseBehaviour.java

@@ -0,0 +1,47 @@
+package com.reactnativenavigation.anim;
+
+
+import android.support.annotation.NonNull;
+
+import com.reactnativenavigation.interfaces.ScrollEventListener;
+
+public class FabCollapseBehaviour implements ScrollEventListener.OnScrollListener, ScrollEventListener.OnDragListener {
+
+    private FabAnimator fabAnimator;
+    private ScrollEventListener scrollEventListener;
+
+    public FabCollapseBehaviour(FabAnimator fabAnimator) {
+        this.fabAnimator = fabAnimator;
+    }
+
+    public void enableCollapse(@NonNull ScrollEventListener scrollEventListener) {
+        this.scrollEventListener = scrollEventListener;
+        this.scrollEventListener.register(null, this, this);
+    }
+
+    public void disableCollapse() {
+        if (scrollEventListener != null) {
+            scrollEventListener.unregister();
+        }
+    }
+
+    @Override
+    public void onScrollUp(float nextTranslation) {
+        //empty
+    }
+
+    @Override
+    public void onScrollDown(float nextTranslation) {
+        //empty
+    }
+
+    @Override
+    public void onShow() {
+        fabAnimator.show();
+    }
+
+    @Override
+    public void onHide() {
+        fabAnimator.hide();
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/interfaces/ScrollEventListener.java

@@ -79,6 +79,7 @@ public class ScrollEventListener implements EventDispatcherListener {
     private void onVerticalScroll(int scrollY, int oldScrollY) {
         if (scrollY < 0) return;
         if (!dragStarted) return;
+        if (view == null) return;
 
         final int scrollDiff = calcScrollDiff(scrollY, oldScrollY, view.getMeasuredHeight());
         final float translationY = view.getTranslationY() - scrollDiff;

lib/android/app/src/main/java/com/reactnativenavigation/parse/FabOptions.java

@@ -0,0 +1,124 @@
+package com.reactnativenavigation.parse;
+
+
+import com.reactnativenavigation.parse.params.Bool;
+import com.reactnativenavigation.parse.params.NullBool;
+import com.reactnativenavigation.parse.parsers.BoolParser;
+
+import org.json.JSONArray;
+import org.json.JSONObject;
+
+import java.util.ArrayList;
+
+public class FabOptions implements DEFAULT_VALUES {
+
+    public static FabOptions parse(JSONObject json) {
+        FabOptions options = new FabOptions();
+        if (json == null) return options;
+
+        options.id = TextParser.parse(json, "id");
+        options.backgroundColor = ColorParser.parse(json, "backgroundColor");
+        options.clickColor = ColorParser.parse(json, "clickColor");
+        options.rippleColor = ColorParser.parse(json, "rippleColor");
+        options.visible = BoolParser.parse(json, "visible");
+        if (json.has("icon")) {
+            options.icon = TextParser.parse(json.optJSONObject("icon"), "uri");
+        }
+        if (json.has("actions")) {
+            JSONArray fabsArray = json.optJSONArray("actions");
+            for (int i = 0; i < fabsArray.length(); i++) {
+                options.actionsArray.add(FabOptions.parse(fabsArray.optJSONObject(i)));
+            }
+        }
+        options.alignHorizontally = TextParser.parse(json, "alignHorizontally");
+        options.alignVertically = TextParser.parse(json, "alignVertically");
+        options.hideOnScroll = BoolParser.parse(json, "hideOnScroll");
+        options.size = TextParser.parse(json, "size");
+
+        return options;
+    }
+
+    public Text id = new NullText();
+    public Color backgroundColor = new NullColor();
+    public Color clickColor = new NullColor();
+    public Color rippleColor = new NullColor();
+    public Text icon = new NullText();
+    public Bool visible = new NullBool();
+    public ArrayList<FabOptions> actionsArray = new ArrayList<>();
+    public Text alignHorizontally = new NullText();
+    public Text alignVertically = new NullText();
+    public Bool hideOnScroll = new NullBool();
+    public Text size = new NullText();
+
+    void mergeWith(final FabOptions other) {
+        if (other.id.hasValue()) {
+            id = other.id;
+        }
+        if (other.backgroundColor.hasValue()) {
+            backgroundColor = other.backgroundColor;
+        }
+        if (other.clickColor.hasValue()) {
+            clickColor = other.clickColor;
+        }
+        if (other.rippleColor.hasValue()) {
+            rippleColor = other.rippleColor;
+        }
+        if (other.visible.hasValue()) {
+            visible = other.visible;
+        }
+        if (other.icon.hasValue()) {
+            icon = other.icon;
+        }
+        if (other.actionsArray.size() > 0) {
+            actionsArray = other.actionsArray;
+        }
+        if (other.alignVertically.hasValue()) {
+            alignVertically = other.alignVertically;
+        }
+        if (other.alignHorizontally.hasValue()) {
+            alignHorizontally = other.alignHorizontally;
+        }
+        if (other.hideOnScroll.hasValue()) {
+            hideOnScroll = other.hideOnScroll;
+        }
+        if (other.size.hasValue()) {
+            size = other.size;
+        }
+    }
+
+    void mergeWithDefault(FabOptions defaultOptions) {
+        if (!id.hasValue()) {
+            id = defaultOptions.id;
+        }
+        if (!backgroundColor.hasValue()) {
+            backgroundColor = defaultOptions.backgroundColor;
+        }
+        if (!clickColor.hasValue()) {
+            clickColor = defaultOptions.clickColor;
+        }
+        if (!rippleColor.hasValue()) {
+            rippleColor = defaultOptions.rippleColor;
+        }
+        if (!visible.hasValue()) {
+            visible = defaultOptions.visible;
+        }
+        if (!icon.hasValue()) {
+            icon = defaultOptions.icon;
+        }
+        if (actionsArray.size() == 0) {
+            actionsArray = defaultOptions.actionsArray;
+        }
+        if (!alignHorizontally.hasValue()) {
+            alignHorizontally = defaultOptions.alignHorizontally;
+        }
+        if (!alignVertically.hasValue()) {
+            alignVertically = defaultOptions.alignVertically;
+        }
+        if (!hideOnScroll.hasValue()) {
+            hideOnScroll = defaultOptions.hideOnScroll;
+        }
+        if (!size.hasValue()) {
+            size = defaultOptions.size;
+        }
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/parse/Options.java

@@ -14,20 +14,21 @@ public class Options implements DEFAULT_VALUES {
         return parse(typefaceManager, json, new Options());
     }
 
-	@NonNull
-	public static Options parse(TypefaceLoader typefaceManager, JSONObject json, @NonNull Options defaultOptions) {
-		Options result = new Options();
-		if (json == null) return result;
+    @NonNull
+    public static Options parse(TypefaceLoader typefaceManager, JSONObject json, @NonNull Options defaultOptions) {
+        Options result = new Options();
+        if (json == null) return result;
 
-		result.topBarOptions = TopBarOptions.parse(typefaceManager, json.optJSONObject("topBar"));
-		result.topTabsOptions = TopTabsOptions.parse(json.optJSONObject("topTabs"));
+        result.topBarOptions = TopBarOptions.parse(typefaceManager, json.optJSONObject("topBar"));
+        result.topTabsOptions = TopTabsOptions.parse(json.optJSONObject("topTabs"));
         result.topTabOptions = TopTabOptions.parse(typefaceManager, json.optJSONObject("topTab"));
         result.bottomTabOptions = BottomTabOptions.parse(json.optJSONObject("bottomTab"));
         result.bottomTabsOptions = BottomTabsOptions.parse(json.optJSONObject("bottomTabs"));
         result.overlayOptions = OverlayOptions.parse(json.optJSONObject("overlay"));
+        result.fabOptions = FabOptions.parse(json.optJSONObject("fab"));
 
-		return result.withDefaultOptions(defaultOptions);
-	}
+        return result.withDefaultOptions(defaultOptions);
+    }
 
     @NonNull public TopBarOptions topBarOptions = new TopBarOptions();
     @NonNull public TopTabsOptions topTabsOptions = new TopTabsOptions();
@@ -35,6 +36,7 @@ public class Options implements DEFAULT_VALUES {
     @NonNull public BottomTabOptions bottomTabOptions = new BottomTabOptions();
     @NonNull public BottomTabsOptions bottomTabsOptions = new BottomTabsOptions();
     @NonNull public OverlayOptions overlayOptions = new OverlayOptions();
+    @NonNull public FabOptions fabOptions = new FabOptions();
 
     void setTopTabIndex(int i) {
         topTabOptions.tabIndex = i;
@@ -49,6 +51,7 @@ public class Options implements DEFAULT_VALUES {
         result.bottomTabOptions.mergeWith(bottomTabOptions);
         result.bottomTabsOptions.mergeWith(bottomTabsOptions);
         result.overlayOptions = overlayOptions;
+        result.fabOptions.mergeWith(fabOptions);
         return result;
     }
 
@@ -60,6 +63,7 @@ public class Options implements DEFAULT_VALUES {
         result.topTabOptions.mergeWith(other.topTabOptions);
         result.bottomTabOptions.mergeWith(other.bottomTabOptions);
         result.bottomTabsOptions.mergeWith(other.bottomTabsOptions);
+        result.fabOptions.mergeWith(other.fabOptions);
         return result;
     }
 
@@ -69,6 +73,7 @@ public class Options implements DEFAULT_VALUES {
         topTabsOptions.mergeWithDefault(other.topTabsOptions);
         bottomTabOptions.mergeWithDefault(other.bottomTabOptions);
         bottomTabsOptions.mergeWithDefault(other.bottomTabsOptions);
+        fabOptions.mergeWithDefault(other.fabOptions);
         return this;
     }
 

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

@@ -0,0 +1,231 @@
+package com.reactnativenavigation.presentation;
+
+
+import android.support.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.parse.Options;
+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 static com.github.clans.fab.FloatingActionButton.SIZE_MINI;
+import static com.github.clans.fab.FloatingActionButton.SIZE_NORMAL;
+
+public class FabOptionsPresenter {
+    private ViewGroup viewGroup;
+    private ReactComponent component;
+
+    private Fab fab;
+    private FabMenu fabMenu;
+
+    public void applyOptions(FabOptions options, @NonNull ReactComponent component, @NonNull ViewGroup viewGroup) {
+        this.viewGroup = viewGroup;
+        this.component = component;
+
+        if (options.id.hasValue()) {
+            if (fabMenu != null && fabMenu.getFabId().equals(options.id.get())) {
+                setParams(fabMenu, options);
+                fabMenu.bringToFront();
+                applyFabMenuOptions(fabMenu, options);
+            } else if (fab != null && fab.getFabId().equals(options.id.get())) {
+                setParams(fab, options);
+                fab.bringToFront();
+                applyFabOptions(fab, options);
+                fab.setOnClickListener(v -> component.sendOnNavigationButtonPressed(options.id.get()));
+            } else {
+                createFab(options);
+            }
+        } else {
+            removeFab();
+            removeFabMenu();
+        }
+    }
+
+    private void createFab(FabOptions options) {
+        if (options.actionsArray.size() > 0) {
+            fabMenu = new FabMenu(viewGroup.getContext(), options.id.get());
+            setParams(fabMenu, options);
+            applyFabMenuOptions(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()));
+            viewGroup.addView(fab);
+        }
+    }
+
+    private void removeFabMenu() {
+        if (fabMenu != null) {
+            fabMenu.hideMenuButton(true);
+            viewGroup.removeView(fabMenu);
+            fabMenu = null;
+        }
+    }
+
+    private void removeFab() {
+        if (fab != null) {
+            fab.hide(true);
+            viewGroup.removeView(fab);
+            fab = null;
+        }
+    }
+
+    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);
+            }
+            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);
+            }
+            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;
+        }
+        fab.setLayoutParams(layoutParams);
+    }
+
+    private void applyFabOptions(Fab fab, FabOptions options) {
+        if (options.visible.isTrueOrUndefined()) {
+            fab.show(true);
+        }
+        if (options.visible.isFalse()) {
+            fab.hide(true);
+        }
+        if (options.backgroundColor.hasValue()) {
+            fab.setColorNormal(options.backgroundColor.get());
+        }
+        if (options.clickColor.hasValue()) {
+            fab.setColorPressed(options.clickColor.get());
+        }
+        if (options.rippleColor.hasValue()) {
+            fab.setColorRipple(options.rippleColor.get());
+        }
+        if (options.icon.hasValue()) {
+            fab.applyIcon(options.icon.get());
+        }
+        if (options.size.hasValue()) {
+            fab.setButtonSize("mini".equals(options.size.get()) ? SIZE_MINI : SIZE_NORMAL);
+        }
+        if (options.hideOnScroll.isTrue()) {
+            fab.enableCollapse(component.getScrollEventListener());
+        }
+        if (options.hideOnScroll.isFalseOrUndefined()) {
+            fab.disableCollapse();
+        }
+    }
+
+    private void applyFabMenuOptions(FabMenu fabMenu, FabOptions options) {
+        if (options.visible.isTrueOrUndefined()) {
+            fabMenu.showMenuButton(true);
+        }
+        if (options.visible.isFalse()) {
+            fabMenu.hideMenuButton(true);
+        }
+
+        if (options.backgroundColor.hasValue()) {
+            fabMenu.setMenuButtonColorNormal(options.backgroundColor.get());
+        }
+        if (options.clickColor.hasValue()) {
+            fabMenu.setMenuButtonColorPressed(options.clickColor.get());
+        }
+        if (options.rippleColor.hasValue()) {
+            fabMenu.setMenuButtonColorRipple(options.rippleColor.get());
+        }
+        for (Fab fabStored : fabMenu.getActions()) {
+            fabMenu.removeMenuButton(fabStored);
+        }
+        fabMenu.getActions().clear();
+        for (FabOptions fabOption : options.actionsArray) {
+            Fab fab = new Fab(viewGroup.getContext(), fabOption.id.get());
+            applyFabOptions(fab, fabOption);
+            fab.setOnClickListener(v -> component.sendOnNavigationButtonPressed(options.id.get()));
+
+            fabMenu.getActions().add(fab);
+            fabMenu.addMenuButton(fab);
+        }
+        if (options.hideOnScroll.isTrue()) {
+            fabMenu.enableCollapse(component.getScrollEventListener());
+        }
+        if (options.hideOnScroll.isFalseOrUndefined()) {
+            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/presentation/OptionsPresenter.java

@@ -1,10 +1,15 @@
 package com.reactnativenavigation.presentation;
 
+import android.view.View;
+
+import com.github.clans.fab.FloatingActionButton;
 import com.reactnativenavigation.parse.Button;
+import com.reactnativenavigation.parse.FabOptions;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.TopBarOptions;
 import com.reactnativenavigation.parse.TopTabOptions;
 import com.reactnativenavigation.parse.TopTabsOptions;
+import com.reactnativenavigation.views.Fab;
 import com.reactnativenavigation.views.ReactComponent;
 import com.reactnativenavigation.views.TopBar;
 

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

@@ -27,7 +27,7 @@ public class StackController extends ParentController <StackLayout> {
     private StackLayout stackLayout;
 
     public StackController(final Activity activity, String id, Options initialOptions) {
-		super(activity, id, initialOptions);
+        super(activity, id, initialOptions);
         animator = new NavigationAnimator(activity);
     }
 
@@ -36,6 +36,9 @@ public class StackController extends ParentController <StackLayout> {
         return stackLayout.getTopBar();
     }
 
+    @RestrictTo(RestrictTo.Scope.TESTS)
+    StackLayout getStackLayout() {return stackLayout;}
+
     @Override
     public void applyOptions(Options options, ReactComponent component) {
         super.applyOptions(options, component);
@@ -43,6 +46,7 @@ public class StackController extends ParentController <StackLayout> {
         applyOnParentController(parentController ->
                 ((ParentController) parentController).applyOptions(this.options.copy().clearTopBarOptions(), component)
         );
+        fabOptionsPresenter.applyOptions(options.fabOptions, component, stackLayout);
     }
 
     @Override
@@ -66,22 +70,22 @@ public class StackController extends ParentController <StackLayout> {
     }
 
     public void animatePush(final ViewController child, final Promise promise) {
-		final ViewController toRemove = stack.peek();
+        final ViewController toRemove = stack.peek();
 
 		child.setParentController(this);
 		stack.push(child.getId(), child);
 		View enteringView = child.getView();
 		getView().addView(enteringView, MATCH_PARENT, MATCH_PARENT);
 
-		if (toRemove != null) {
+        if (toRemove != null) {
             animator.animatePush(enteringView, () -> {
                 getView().removeView(toRemove.getView());
                 promise.resolve(child.getId());
             });
-		} else {
-			promise.resolve(child.getId());
-		}
-	}
+        } else {
+            promise.resolve(child.getId());
+        }
+    }
 
     void pop(final Promise promise) {
         if (!canPop()) {

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

@@ -11,6 +11,7 @@ import android.view.ViewManager;
 import android.view.ViewTreeObserver;
 
 import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.presentation.FabOptionsPresenter;
 import com.reactnativenavigation.utils.CompatUtils;
 import com.reactnativenavigation.utils.StringUtils;
 import com.reactnativenavigation.utils.Task;
@@ -40,10 +41,12 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
     private boolean isShown;
     private boolean isDestroyed;
     private ViewVisibilityListener viewVisibilityListener = new ViewVisibilityListenerAdapter();
+    protected FabOptionsPresenter fabOptionsPresenter;
 
     public ViewController(Activity activity, String id, Options initialOptions) {
         this.activity = activity;
         this.id = id;
+        fabOptionsPresenter = new FabOptionsPresenter();
         this.initialOptions = initialOptions;
         options = initialOptions.copy();
     }

lib/android/app/src/main/java/com/reactnativenavigation/views/Fab.java

@@ -0,0 +1,75 @@
+package com.reactnativenavigation.views;
+
+import android.content.Context;
+import android.graphics.drawable.Drawable;
+import android.support.annotation.NonNull;
+
+import com.github.clans.fab.FloatingActionButton;
+import com.reactnativenavigation.anim.FabAnimator;
+import com.reactnativenavigation.anim.FabCollapseBehaviour;
+import com.reactnativenavigation.interfaces.ScrollEventListener;
+import com.reactnativenavigation.utils.ImageLoader;
+
+
+public class Fab extends FloatingActionButton implements FabAnimator {
+
+    private String id = "";
+    private FabCollapseBehaviour collapseBehaviour;
+
+    public Fab(Context context, String id) {
+        super(context);
+        collapseBehaviour = new FabCollapseBehaviour(this);
+        this.id = id;
+    }
+
+    public void applyIcon(String icon) {
+        new ImageLoader().loadIcon(getContext(), icon, new ImageLoader.ImageLoadingListener() {
+            @Override
+            public void onComplete(@NonNull Drawable drawable) {
+                setImageDrawable(drawable);
+            }
+
+            @Override
+            public void onError(Throwable error) {
+                error.printStackTrace();
+            }
+        });
+    }
+
+    @Override
+    public boolean equals(Object o) {
+        if (this == o) return true;
+        if (o == null || getClass() != o.getClass()) return false;
+
+        Fab fab = (Fab) o;
+
+        return id.equals(fab.id);
+    }
+
+    @Override
+    public int hashCode() {
+        return id.hashCode();
+    }
+
+    @Override
+    public void show() {
+        show(true);
+    }
+
+    @Override
+    public void hide() {
+        hide(true);
+    }
+
+    public void enableCollapse(@NonNull ScrollEventListener scrollEventListener) {
+        collapseBehaviour.enableCollapse(scrollEventListener);
+    }
+
+    public void disableCollapse() {
+        collapseBehaviour.disableCollapse();
+    }
+
+    public String getFabId() {
+        return id;
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/views/FabMenu.java

@@ -0,0 +1,53 @@
+package com.reactnativenavigation.views;
+
+import android.content.Context;
+
+import com.github.clans.fab.FloatingActionMenu;
+import com.reactnativenavigation.anim.FabAnimator;
+import com.reactnativenavigation.anim.FabCollapseBehaviour;
+import com.reactnativenavigation.interfaces.ScrollEventListener;
+
+import java.util.HashSet;
+
+
+public class FabMenu extends FloatingActionMenu implements FabAnimator {
+
+    private String id = "";
+    private HashSet<Fab> actions = new HashSet<>();
+
+    private FabCollapseBehaviour collapseBehaviour;
+
+    public FabMenu(Context context, String id) {
+        super(context);
+        this.id = id;
+        collapseBehaviour = new FabCollapseBehaviour(this);
+        onFinishInflate();
+        setOnMenuButtonClickListener(v -> toggle(true));
+    }
+
+    @Override
+    public void show() {
+        showMenu(true);
+    }
+
+    @Override
+    public void hide() {
+        hideMenu(true);
+    }
+
+    public void enableCollapse(ScrollEventListener scrollEventListener) {
+        collapseBehaviour.enableCollapse(scrollEventListener);
+    }
+
+    public void disableCollapse() {
+        collapseBehaviour.disableCollapse();
+    }
+
+    public HashSet<Fab> getActions() {
+        return actions;
+    }
+
+    public String getFabId() {
+        return id;
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/views/StackLayout.java

@@ -3,9 +3,14 @@ package com.reactnativenavigation.views;
 import android.content.Context;
 import android.support.annotation.RestrictTo;
 import android.support.v4.view.ViewPager;
+import android.util.Log;
+import android.view.Gravity;
+import android.view.View;
 import android.widget.RelativeLayout;
 
+import com.github.clans.fab.FloatingActionButton;
 import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.presentation.FabOptionsPresenter;
 import com.reactnativenavigation.presentation.OptionsPresenter;
 import com.reactnativenavigation.utils.CompatUtils;
 

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

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <dimen name="margin">16dp</dimen>
+</resources>

lib/android/app/src/test/java/com/reactnativenavigation/parse/OptionsTest.java

@@ -17,7 +17,15 @@ import static org.assertj.core.api.Java6Assertions.*;
 public class OptionsTest extends BaseTest {
 
     private static final String TITLE = "the title";
+    private static final String FAB_ID = "FAB";
+    private static final String FAB_ALIGN_HORIZONTALLY = "right";
+    private static final String FAB_ALIGN_VERTICALLY = "bottom";
     private static final int TOP_BAR_BACKGROUND_COLOR = 0xff123456;
+    private static final int FAB_BACKGROUND_COLOR = android.graphics.Color.BLUE;
+    private static final int FAB_CLICK_COLOR = android.graphics.Color.RED;
+    private static final int FAB_RIPPLE_COLOR = android.graphics.Color.GREEN;
+    private static final Boolean FAB_VISIBLE = true;
+    private static final Boolean FAB_HIDE_ON_SCROLL = true;
     private static final int TOP_BAR_TEXT_COLOR = 0xff123456;
     private static final int TOP_BAR_FONT_SIZE = 18;
     private static final String TOP_BAR_FONT_FAMILY = "HelveticaNeue-CondensedBold";
@@ -47,6 +55,7 @@ public class OptionsTest extends BaseTest {
     public void parsesJson() throws Exception {
         JSONObject json = new JSONObject()
                 .put("topBar", createTopBar(TOP_BAR_VISIBLE.get()))
+                .put("fab", createFab())
                 .put("bottomTabs", createBottomTabs());
         Options result = Options.parse(mockLoader, json);
         assertResult(result);
@@ -65,6 +74,14 @@ public class OptionsTest extends BaseTest {
         assertThat(result.bottomTabsOptions.visible.get()).isEqualTo(BOTTOM_TABS_VISIBLE.get());
         assertThat(result.bottomTabsOptions.currentTabId.get()).isEqualTo(BOTTOM_TABS_CURRENT_TAB_ID);
         assertThat(result.bottomTabsOptions.currentTabIndex).isEqualTo(BOTTOM_TABS_CURRENT_TAB_INDEX);
+        assertThat(result.fabOptions.id.get()).isEqualTo(FAB_ID);
+        assertThat(result.fabOptions.backgroundColor.get()).isEqualTo(FAB_BACKGROUND_COLOR);
+        assertThat(result.fabOptions.clickColor.get()).isEqualTo(FAB_CLICK_COLOR);
+        assertThat(result.fabOptions.rippleColor.get()).isEqualTo(FAB_RIPPLE_COLOR);
+        assertThat(result.fabOptions.visible.get()).isEqualTo(FAB_VISIBLE);
+        assertThat(result.fabOptions.hideOnScroll.get()).isEqualTo(FAB_HIDE_ON_SCROLL);
+        assertThat(result.fabOptions.alignVertically.get()).isEqualTo(FAB_ALIGN_VERTICALLY);
+        assertThat(result.fabOptions.alignHorizontally.get()).isEqualTo(FAB_ALIGN_HORIZONTALLY);
     }
 
     @NonNull
@@ -89,6 +106,32 @@ public class OptionsTest extends BaseTest {
                 .put("hideOnScroll", TOP_BAR_HIDE_ON_SCROLL.get());
     }
 
+    @NonNull
+    private JSONObject createFab() throws JSONException {
+        return new JSONObject()
+                .put("id", FAB_ID)
+                .put("backgroundColor", FAB_BACKGROUND_COLOR)
+                .put("clickColor", FAB_CLICK_COLOR)
+                .put("rippleColor", FAB_RIPPLE_COLOR)
+                .put("alignHorizontally", FAB_ALIGN_HORIZONTALLY)
+                .put("alignVertically", FAB_ALIGN_VERTICALLY)
+                .put("hideOnScroll", FAB_HIDE_ON_SCROLL)
+                .put("visible", FAB_VISIBLE);
+    }
+
+    @NonNull
+    private JSONObject createOtherFab() throws JSONException {
+        return new JSONObject()
+                .put("id", "FAB")
+                .put("backgroundColor", FAB_BACKGROUND_COLOR)
+                .put("clickColor", FAB_CLICK_COLOR)
+                .put("rippleColor", FAB_RIPPLE_COLOR)
+                .put("alignHorizontally", FAB_ALIGN_HORIZONTALLY)
+                .put("alignVertically", FAB_ALIGN_VERTICALLY)
+                .put("hideOnScroll", FAB_HIDE_ON_SCROLL)
+                .put("visible", FAB_VISIBLE);
+    }
+
     @NonNull
     private JSONObject createOtherTopBar() throws JSONException {
         return new JSONObject()
@@ -132,6 +175,7 @@ public class OptionsTest extends BaseTest {
     public void mergeDefaultOptions() throws Exception {
         JSONObject json = new JSONObject();
         json.put("topBar", createTopBar(TOP_BAR_VISIBLE.get()));
+        json.put("fab", createFab());
         json.put("bottomTabs", createBottomTabs());
         Options defaultOptions = Options.parse(mockLoader, json);
         Options options = new Options();
@@ -143,6 +187,7 @@ public class OptionsTest extends BaseTest {
     public void mergedDefaultOptionsDontOverrideGivenOptions() throws Exception {
         JSONObject defaultJson = new JSONObject()
                 .put("topBar", createOtherTopBar())
+                .put("fab", createOtherFab())
                 .put("bottomTabs", createOtherTabBar());
         Options defaultOptions = Options.parse(mockLoader, defaultJson);
 

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

@@ -0,0 +1,136 @@
+package com.reactnativenavigation.viewcontrollers;
+
+import android.app.Activity;
+import android.support.annotation.NonNull;
+import android.view.View;
+
+import com.reactnativenavigation.BaseTest;
+import com.reactnativenavigation.mocks.MockPromise;
+import com.reactnativenavigation.mocks.SimpleViewController;
+import com.reactnativenavigation.parse.FabOptions;
+import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.parse.Text;
+import com.reactnativenavigation.views.Fab;
+import com.reactnativenavigation.views.FabMenu;
+import com.reactnativenavigation.views.StackLayout;
+
+import org.junit.Test;
+
+import static org.assertj.core.api.Java6Assertions.assertThat;
+import static org.mockito.Mockito.spy;
+import static org.mockito.Mockito.verify;
+
+public class FloatingActionButtonTest extends BaseTest {
+
+    private final static int CHILD_FAB_COUNT = 3;
+
+    private StackController stackController;
+    private SimpleViewController childFab;
+    private SimpleViewController childNoFab;
+    private Activity activity;
+
+    @Override
+    public void beforeEach() {
+        super.beforeEach();
+        activity = newActivity();
+        stackController = new StackController(activity, "stackController", new Options());
+        Options options = getOptionsWithFab();
+        childFab = new SimpleViewController(activity, "child1", options);
+        childNoFab = new SimpleViewController(activity, "child2", new Options());
+    }
+
+    @NonNull
+    private Options getOptionsWithFab() {
+        Options options = new Options();
+        FabOptions fabOptions = new FabOptions();
+        fabOptions.id = new Text("FAB");
+        options.fabOptions = fabOptions;
+        return options;
+    }
+
+    @NonNull
+    private Options getOptionsWithFabActions() {
+        Options options = new Options();
+        FabOptions fabOptions = new FabOptions();
+        fabOptions.id = new Text("FAB");
+        for (int i = 0; i < CHILD_FAB_COUNT; i++) {
+            FabOptions childOptions = new FabOptions();
+            childOptions.id = new Text("fab" + i);
+            fabOptions.actionsArray.add(childOptions);
+        }
+        options.fabOptions = fabOptions;
+        return options;
+    }
+
+    private boolean hasFab() {
+        StackLayout stackLayout = stackController.getStackLayout();
+        for (int i = 0; i < stackLayout.getChildCount(); i++) {
+            if (stackLayout.getChildAt(i) instanceof Fab) {
+                return true;
+            }
+            if (stackLayout.getChildAt(i) instanceof FabMenu) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    @Test
+    public void showOnPush() throws Exception {
+        stackController.push(childFab, new MockPromise());
+        childFab.onViewAppeared();
+        assertThat(hasFab()).isTrue();
+    }
+
+    @Test
+    public void hideOnPush() throws Exception {
+        stackController.push(childFab, new MockPromise());
+        childFab.onViewAppeared();
+        assertThat(hasFab()).isTrue();
+        stackController.push(childNoFab, new MockPromise());
+        childNoFab.onViewAppeared();
+        assertThat(hasFab()).isFalse();
+    }
+
+    @Test
+    public void hideOnPop() throws Exception {
+        stackController.push(childNoFab, new MockPromise());
+        stackController.push(childFab, new MockPromise());
+        childFab.onViewAppeared();
+        assertThat(hasFab()).isTrue();
+        stackController.pop(new MockPromise());
+        childNoFab.onViewAppeared();
+        assertThat(hasFab()).isFalse();
+    }
+
+    @Test
+    public void showOnPop() throws Exception {
+        stackController.push(childFab, new MockPromise());
+        stackController.push(childNoFab, new MockPromise());
+        childNoFab.onViewAppeared();
+        assertThat(hasFab()).isFalse();
+        stackController.pop(new MockPromise());
+        childFab.onViewAppeared();
+        assertThat(hasFab()).isTrue();
+    }
+
+    @Test
+    public void hasChildren() throws Exception {
+        childFab = new SimpleViewController(activity, "child1", getOptionsWithFabActions());
+        stackController.push(childFab, new MockPromise());
+        childFab.onViewAppeared();
+        assertThat(hasFab()).isTrue();
+        assertThat(containsActions()).isTrue();
+    }
+
+    private boolean containsActions() {
+        StackLayout stackLayout = stackController.getStackLayout();
+        for (int i = 0; i < stackLayout.getChildCount(); i++) {
+            View child = stackLayout.getChildAt(i);
+            if (child instanceof FabMenu) {
+                return ((FabMenu) child).getChildCount() == CHILD_FAB_COUNT + 2;
+            }
+        }
+        return false;
+    }
+}

lib/ios/RNNNavigationOptions.m

@@ -39,12 +39,14 @@ const NSInteger TOP_BAR_TRANSPARENT_TAG = 78264803;
 
 -(void)mergeWith:(NSDictionary *)otherOptions {
 	for (id key in otherOptions) {
-		if ([[self valueForKey:key] isKindOfClass:[RNNOptions class]]) {
+		if ([self hasProperty:key]) {
+			if ([[self valueForKey:key] isKindOfClass:[RNNOptions class]]) {
 			RNNOptions* options = [self valueForKey:key];
 			[options mergeWith:[otherOptions objectForKey:key]];
 		} else {
 			[self setValue:[otherOptions objectForKey:key] forKey:key];
-		} 
+		} 		
+		}
 	}
 }
 

lib/ios/RNNOptions.h

@@ -17,5 +17,6 @@
 - (instancetype)initWithDict:(NSDictionary*)dict;
 - (void)mergeWith:(NSDictionary*)otherOptions;
 - (void)applyOn:(UIViewController *)viewController defaultOptions:(RNNOptions*)defaultOptions;
+- (BOOL)hasProperty:(NSString*)propName;
 
 @end

lib/ios/RNNOptions.m

@@ -22,7 +22,7 @@
 	}
 }
 
--(BOOL)hasProperty:(NSString*)propName {
+- (BOOL)hasProperty:(NSString*)propName {
 	return [self respondsToSelector:NSSelectorFromString(propName)];
 }
 

playground/src/screens/OptionsScreen.js

@@ -9,6 +9,7 @@ const testIDs = require('../testIDs');
 const BUTTON_ONE = 'buttonOne';
 const BUTTON_TWO = 'buttonTwo';
 const BUTTON_LEFT = 'buttonLeft';
+const FAB = 'fab';
 
 class OptionsScreen extends Component {
   static get options() {
@@ -39,6 +40,28 @@ class OptionsScreen extends Component {
           title: 'Left',
           buttonColor: 'purple'
         }]
+      },
+      fab: {
+        id: FAB,
+        backgroundColor: 'orange',
+        clickColor: 'orange',
+        rippleColor: 'red',
+        alignHorizontally: 'left',
+        actions: [
+          {
+            id: 'fab1',
+            backgroundColor: 'blue',
+            clickColor: 'blue',
+            rippleColor: 'aquamarine',
+          },
+          {
+            id: 'fab2',
+            backgroundColor: 'blueviolet',
+            clickColor: 'blueviolet',
+            size: 'mini',
+            rippleColor: 'aquamarine',
+          }
+        ]
       }
     };
   }
@@ -54,6 +77,7 @@ class OptionsScreen extends Component {
     this.onClickCustomTranstition = this.onClickCustomTranstition.bind(this);
     this.onClickShowOverlay = this.onClickShowOverlay.bind(this);
     this.onClickPushDefaultOptionsScreen = this.onClickPushDefaultOptionsScreen.bind(this);
+    this.onClickFab = this.onClickFab.bind(this);
   }
 
   render() {
@@ -67,8 +91,9 @@ class OptionsScreen extends Component {
         <Button title='Top Bar Opaque' onPress={this.onClickTopBarOpaque} />
         <Button title='scrollView Screen' testID={testIDs.SCROLLVIEW_SCREEN_BUTTON} onPress={this.onClickScrollViewScreen} />
         <Button title='Custom Transition' testID={testIDs.CUSTOM_TRANSITION_BUTTON} onPress={this.onClickCustomTranstition} />
-        <Button title='Show custom alert' testID={testIDs.SHOW_CUSTOM_ALERT_BUTTON} onPress={this.onClickAlert} />
-        <Button title='Show snackbar' testID={testIDs.SHOW_SNACKBAR_BUTTON} onPress={this.onClickSnackbar} />
+        {Platform.OS === 'android' ?
+          <Button title='Hide fab' testID={testIDs.HIDE_FAB} onPress={this.onClickFab} />
+          : null}
         <Button title='Show overlay' testID={testIDs.SHOW_OVERLAY_BUTTON} onPress={() => this.onClickShowOverlay(true)} />
         <Button title='Show touch through overlay' testID={testIDs.SHOW_TOUCH_THROUGH_OVERLAY_BUTTON} onPress={() => this.onClickShowOverlay(false)} />
         <Button title='Push Default Options Screen' testID={testIDs.PUSH_DEFAULT_OPTIONS_BUTTON} onPress={this.onClickPushDefaultOptionsScreen} />
@@ -180,19 +205,12 @@ class OptionsScreen extends Component {
     });
   }
 
-  onClickAlert() {
-    Navigation.showOverlay('custom', 'navigation.playground.CustomDialog');
-  }
-
-  onClickSnackbar() {
-    Navigation.showOverlay('snackbar', {
-      text: 'Test!',
-      // textColor: 'red',
-      // backgroundColor: 'green',
-      duration: 'long',
-      button: {
-        text: 'Action',
-        textColor: 'blue'
+  onClickFab() {
+    Navigation.setOptions(this.props.componentId, {
+      fab: {
+        id: FAB,
+        visible: false
+        // backgroundColor: 'green'
       }
     });
   }

playground/src/screens/ScrollViewScreen.js

@@ -6,6 +6,8 @@ const { StyleSheet, ScrollView, View, Button, Platform } = require('react-native
 const { Navigation } = require('react-native-navigation');
 const testIDs = require('../testIDs');
 
+const FAB = 'fab';
+
 class ScrollViewScreen extends Component {
   static get options() {
     return {
@@ -15,6 +17,13 @@ class ScrollViewScreen extends Component {
         textColor: 'black',
         textFontSize: 16,
         testID: testIDs.TOP_BAR_ELEMENT
+      },
+      fab: {
+        id: FAB,
+        backgroundColor: 'blue',
+        clickColor: 'blue',
+        rippleColor: 'aquamarine',
+        hideOnScroll: true
       }
     };
   }
@@ -49,6 +58,9 @@ class ScrollViewScreen extends Component {
     Navigation.setOptions(this.props.componentId, {
       topBar: {
         hideOnScroll: this.state.topBarHideOnScroll
+      },
+      fab: {
+        hideOnScroll: !this.state.topBarHideOnScroll
       }
     });
   }

playground/src/screens/TopTabScreen.js

@@ -2,6 +2,8 @@ const React = require('react');
 const { PureComponent } = require('react');
 const { View, Text } = require('react-native');
 
+const FAB = 'fab';
+
 class TopTabScreen extends PureComponent {
   static get options() {
     return {
@@ -9,6 +11,12 @@ class TopTabScreen extends PureComponent {
         textColor: 'black',
         textFontSize: 16,
         textFontFamily: 'HelveticaNeue-Italic'
+      },
+      fab: {
+        id: FAB,
+        backgroundColor: 'blue',
+        clickColor: 'blue',
+        rippleColor: 'aquamarine'
       }
     };
   }

playground/src/testIDs.js

@@ -35,7 +35,7 @@ module.exports = {
   SHOW_TOP_BAR_BUTTON: `SHOW_TOP_BAR_BUTTON`,
   HIDE_TOP_BAR_BUTTON: `HIDE_TOP_BAR_BUTTON`,
   SCROLLVIEW_SCREEN_BUTTON: `SCROLLVIEW_SCREEN_BUTTON`,
-  SHOW_CUSTOM_ALERT_BUTTON: `SHOW_CUSTOM_ALERT_BUTTON`,
+  HIDE_FAB: `HIDE_FAB`,
   SHOW_SNACKBAR_BUTTON: `SHOW_SNACKBAR_BUTTON`,
   TOGGLE_TOP_BAR_HIDE_ON_SCROLL: `TOGGLE_TOP_BAR_HIDE_ON_SCROLL`,
   SET_TAB_BADGE_BUTTON: `SET_TAB_BADGE_BUTTON`,