Add fab to example project

android/app/src/main/java/com/reactnativenavigation/views/FloatingActionButtonAnimator.java

@@ -0,0 +1,112 @@
+package com.reactnativenavigation.views;
+
+import android.animation.Animator;
+import android.animation.AnimatorListenerAdapter;
+import android.support.design.widget.FloatingActionButton;
+import android.view.View;
+
+import java.util.List;
+
+public class FloatingActionButtonAnimator {
+
+    private final FloatingActionButton collapsedFab;
+    private final FloatingActionButton expendedFab;
+    private int crossFadeAnimationDuration;
+
+    private enum State{Showing, Idle, Removing}
+    private State state = State.Idle;
+
+    public FloatingActionButtonAnimator(FloatingActionButton collapsedFab, FloatingActionButton expendedFab, int crossFadeAnimationDuration) {
+        this.collapsedFab = collapsedFab;
+        this.expendedFab = expendedFab;
+        this.crossFadeAnimationDuration = crossFadeAnimationDuration;
+    }
+
+    boolean isAnimating() {
+        return state == State.Showing || state == State.Removing;
+    }
+
+    void show() {
+        state = State.Showing;
+        collapsedFab.setScaleX(0);
+        collapsedFab.setScaleY(0);
+        collapsedFab.animate()
+                .alpha(1)
+                .scaleX(1)
+                .scaleY(1)
+                .setListener(new AnimatorListenerAdapter() {
+                    @Override
+                    public void onAnimationEnd(Animator animation) {
+                        state = State.Idle;
+                    }
+                })
+                .setDuration(crossFadeAnimationDuration)
+                .start();
+    }
+
+    void hideCollapsed() {
+        animateFab(collapsedFab, 0, 90);
+    }
+
+    void showExpended() {
+        animateFab(expendedFab, 1, 0);
+    }
+
+    void showCollapsed() {
+        animateFab(collapsedFab, 1, 0);
+    }
+
+    void hideExpended() {
+        animateFab(expendedFab, 0, -90);
+    }
+
+    private void animateFab(final FloatingActionButton fab, final int alpha, int rotation) {
+        fab.animate()
+                .alpha(alpha)
+                .setDuration(crossFadeAnimationDuration)
+                .rotation(rotation)
+                .setListener(new AnimatorListenerAdapter() {
+                    @Override
+                    public void onAnimationStart(Animator animation) {
+                        if (fab.getVisibility() == View.GONE) {
+                            fab.setVisibility(View.VISIBLE);
+                        }
+                    }
+
+                    @Override
+                    public void onAnimationEnd(Animator animation) {
+                        fab.setVisibility(alpha == 0 ? View.GONE : View.VISIBLE);
+                    }
+                })
+                .start();
+    }
+
+    void removeFabFromScreen(FloatingActionButton fab, final AnimatorListenerAdapter animationListener) {
+        state = State.Removing;
+        fab.animate()
+                .alpha(0)
+                .scaleX(0)
+                .scaleY(0)
+                .setDuration(crossFadeAnimationDuration)
+                .setListener(new AnimatorListenerAdapter() {
+                    @Override
+                    public void onAnimationEnd(Animator animation) {
+                        if (animationListener != null) {
+                            animationListener.onAnimationEnd(animation);
+                        }
+                    }
+                })
+                .start();
+    }
+
+    void removeActionsFromScreen(List<FloatingActionButton> actions) {
+        for (FloatingActionButton action : actions) {
+            action.animate()
+                    .alpha(0)
+                    .scaleX(0)
+                    .scaleY(0)
+                    .setDuration(crossFadeAnimationDuration)
+                    .start();
+        }
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/FloatingActionButtonCoordinator.java

@@ -30,6 +30,7 @@ public class FloatingActionButtonCoordinator {
     private final int crossFadeAnimationDuration;
     private final int actionSize;
     final int margin = (int) ViewUtils.convertDpToPixel(16);
+    FloatingActionButtonAnimator fabAnimator;
     private final ArrayList<FloatingActionButton> actions;
 
     public FloatingActionButtonCoordinator(CoordinatorLayout parent) {
@@ -44,22 +45,19 @@ public class FloatingActionButtonCoordinator {
         createCollapsedFab();
         createExpendedFab();
         setStyle();
-        show();
-    }
-
-    public void remove() {
-        remove(null);
+        fabAnimator = new FloatingActionButtonAnimator(collapsedFab, expendedFab, crossFadeAnimationDuration);
+        fabAnimator.show();
     }
 
     public void remove(@Nullable final Runnable onComplete) {
-        if (parent.getChildCount() == 0) {
+        if (parent.getChildCount() == 0 || fabAnimator.isAnimating()) {
             if (onComplete != null) {
                 onComplete.run();
             }
             return;
         }
 
-        removeFabFromScreen(expendedFab, new AnimatorListenerAdapter() {
+        fabAnimator.removeFabFromScreen(expendedFab, new AnimatorListenerAdapter() {
             @Override
             public void onAnimationEnd(Animator animation) {
                 removeAllViews();
@@ -68,29 +66,8 @@ public class FloatingActionButtonCoordinator {
                 }
             }
         });
-        removeFabFromScreen(collapsedFab, null);
-        removeActionsFromScreen();
-    }
-
-    private void removeActionsFromScreen() {
-        for (FloatingActionButton action : actions) {
-            action.animate()
-                    .alpha(0)
-                    .scaleX(0)
-                    .scaleY(0)
-                    .setDuration(crossFadeAnimationDuration)
-                    .start();
-        }
-    }
-
-    private void removeFabFromScreen(FloatingActionButton fab, AnimatorListenerAdapter animationListener) {
-        fab.animate()
-                .alpha(0)
-                .scaleX(0)
-                .scaleY(0)
-                .setDuration(crossFadeAnimationDuration)
-                .setListener(animationListener)
-                .start();
+        fabAnimator.removeFabFromScreen(collapsedFab, null);
+        fabAnimator.removeActionsFromScreen(actions);
     }
 
     private void removeAllViews() {
@@ -110,8 +87,8 @@ public class FloatingActionButtonCoordinator {
         collapsedFab.setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
-                hideCollapsed();
-                showExpended();
+                fabAnimator.hideCollapsed();
+                fabAnimator.showExpended();
                 showActions();
             }
         });
@@ -125,8 +102,8 @@ public class FloatingActionButtonCoordinator {
         expendedFab.setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
-                hideExpended();
-                showCollapsed();
+                fabAnimator.hideExpended();
+                fabAnimator.showCollapsed();
             }
         });
     }
@@ -138,43 +115,6 @@ public class FloatingActionButtonCoordinator {
         return fab;
     }
 
-    private void hideCollapsed() {
-        animateFab(collapsedFab, 0, 90);
-    }
-
-    private void showExpended() {
-        animateFab(expendedFab, 1, 0);
-    }
-
-    private void showCollapsed() {
-        animateFab(collapsedFab, 1, 0);
-    }
-
-    private void hideExpended() {
-        animateFab(expendedFab, 0, -90);
-    }
-
-    private void animateFab(final FloatingActionButton fab, final int alpha, int rotation) {
-        fab.animate()
-                .alpha(alpha)
-                .setDuration(crossFadeAnimationDuration)
-                .rotation(rotation)
-                .setListener(new AnimatorListenerAdapter() {
-                    @Override
-                    public void onAnimationStart(Animator animation) {
-                        if (fab.getVisibility() == View.GONE) {
-                            fab.setVisibility(View.VISIBLE);
-                        }
-                    }
-
-                    @Override
-                    public void onAnimationEnd(Animator animation) {
-                        fab.setVisibility(alpha == 0 ? View.GONE : View.VISIBLE);
-                    }
-                })
-                .start();
-    }
-
     private CoordinatorLayout.LayoutParams createFabLayoutParams() {
         final CoordinatorLayout.LayoutParams lp = new CoordinatorLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT);
         lp.gravity = Gravity.RIGHT | Gravity.BOTTOM;
@@ -189,17 +129,6 @@ public class FloatingActionButtonCoordinator {
         expendedFab.setBackgroundTintList(ColorStateList.valueOf(params.backgroundColor.getColor()));
     }
 
-    private void show() {
-        collapsedFab.setScaleX(0);
-        collapsedFab.setScaleY(0);
-        collapsedFab.animate()
-                .alpha(1)
-                .scaleX(1)
-                .scaleY(1)
-                .setDuration(crossFadeAnimationDuration)
-                .start();
-    }
-
     private void showActions() {
         if (actions.size() > 0) {
             return;

example-redux/src/app.js

@@ -35,74 +35,74 @@ export default class App {
   startApp(root) {
     switch (root) {
       case 'login':
-        Navigation.startSingleScreenApp({
-         screen: {
-           screen: 'example.LoginScreen',
-           title: 'Login',
-           navigatorStyle: {}
-         },
-         passProps: {
-           str: 'This is a prop passed in \'startSingleScreenApp()\'!',
-           obj: {
-             str: 'This is a prop passed in an object!',
-             arr: [
-               {
-                 str: 'This is a prop in an object in an array in an object!'
-               }
-             ],
-             arr2: [
-               [
-                 'array of strings',
-                 'with two strings'
-               ],
-               [
-                 1, 2, 3
-               ]
-             ]
-           },
-           num: 1234,
-           fn: function() {
-             return 'Hello from a function!';
-           }
-         }
-        });
         // Navigation.startSingleScreenApp({
-        //   screen: {
-        //     screen: 'example.FirstTabScreen',
-        //     title: 'Login',
-        //     topTabs: [
-        //       {
-        //         screenId: 'example.FirstTabScreen',
-        //         title: 'Tab1',
-        //         passProps: {
-        //           str: 'This is a prop passed to Tab4',
-        //           fn: () => 'Hello from a function passed as passProps!'
-        //         }
-        //       },
-        //       {
-        //         screenId: 'example.PushedScreen',
-        //         title: 'Tab3',
-        //         passProps: {
-        //           str: 'This is a prop passed to Tab2'
-        //         }
-        //       },
-        //       {
-        //         screenId: 'example.ListScreen',
-        //         title: 'Tab2',
-        //         passProps: {
-        //           str: 'This is a prop passed to Tab1'
-        //         }
-        //       }
-        //     ],
-        //     navigatorStyle: {}
-        //   },
-        //   drawer: { // optional, add this if you want a side menu drawer in your app
-        //     left: { // optional, define if you want a drawer from the left
-        //       screen: 'example.SideMenu' // unique ID registered with Navigation.registerScreen
-        //     },
-        //     disableOpenGesture: false // optional, can the drawer be opened with a swipe instead of button
-        //   }
+        //  screen: {
+        //    screen: 'example.LoginScreen',
+        //    title: 'Login',
+        //    navigatorStyle: {}
+        //  },
+        //  passProps: {
+        //    str: 'This is a prop passed in \'startSingleScreenApp()\'!',
+        //    obj: {
+        //      str: 'This is a prop passed in an object!',
+        //      arr: [
+        //        {
+        //          str: 'This is a prop in an object in an array in an object!'
+        //        }
+        //      ],
+        //      arr2: [
+        //        [
+        //          'array of strings',
+        //          'with two strings'
+        //        ],
+        //        [
+        //          1, 2, 3
+        //        ]
+        //      ]
+        //    },
+        //    num: 1234,
+        //    fn: function() {
+        //      return 'Hello from a function!';
+        //    }
+        //  }
         // });
+        Navigation.startSingleScreenApp({
+          screen: {
+            title: 'Example',
+            screen: 'example.TopTabsScreen',
+            topTabs: [
+              {
+                screenId: 'example.FirstTabScreen',
+                title: 'Tab1',
+                passProps: {
+                  str: 'This is a prop passed to Tab1',
+                  fn: () => 'Hello from a function passed as passProps!'
+                }
+              },
+              {
+                screenId: 'example.PushedScreen',
+                title: 'Tab2',
+                passProps: {
+                  str: 'This is a prop passed to Tab2'
+                }
+              },
+              {
+                screenId: 'example.ListScreen',
+                title: 'Tab3',
+                passProps: {
+                  str: 'This is a prop passed to Tab3'
+                }
+              }
+            ],
+            navigatorStyle: {}
+          },
+          drawer: { // optional, add this if you want a side menu drawer in your app
+            left: { // optional, define if you want a drawer from the left
+              screen: 'example.SideMenu' // unique ID registered with Navigation.registerScreen
+            },
+            disableOpenGesture: false // optional, can the drawer be opened with a swipe instead of button
+          }
+        });
         return;
       case 'after-login':
         Navigation.startTabBasedApp({

example-redux/src/screens/FirstTabScreen.js

@@ -38,7 +38,36 @@ class FirstTabScreen extends Component {
         title: 'Add',
         id: 'add'
       }
-    ]
+    ],
+    fab: {
+      id: 'share',
+      collapsedIcon: require('../../img/ic_share.png'),
+      expendedIcon: require('../../img/ic_clear.png'),
+      backgroundColor: '#3F51B5',
+      actions: [
+        {
+          id: 'mail',
+          icon: require('../../img/ic_mail.png'),
+          backgroundColor: '#03A9F4'
+        },
+        {
+          id: 'action2',
+          icon: require('../../img/ic_home.png'),
+          backgroundColor: '#4CAF50'
+        },
+        {
+          id: 'action3',
+          icon: require('../../img/ic_home.png'),
+          backgroundColor: '#FFEB3B'
+        },
+        {
+          id: 'action3',
+          icon: require('../../img/ic_share.png'),
+          backgroundColor: '#FF5722'
+        }
+      ]
+
+    }
   };
 
   constructor(props) {

example-redux/src/screens/PushedScreen.js

@@ -29,6 +29,11 @@ class PushedScreen extends Component {
     leftButton: {
       id: 'back',
       color: '#00ff00'
+    },
+    fab: {
+      id: 'share',
+      collapsedIcon: require('../../img/ic_home.png'),
+      backgroundColor: '#607D8B'
     }
   };
 

example-redux/src/screens/SecondTabScreen.js

@@ -19,6 +19,14 @@ class SecondTabScreen extends Component {
     navBarTranslucent: true
   };
 
+  static navigatorButtons = {
+    fab: {
+      id: 'share',
+      collapsedIcon: require('../../img/ic_home.png'),
+      backgroundColor: '#607D8B'
+    }
+  };
+
   constructor(props) {
     super(props);
     this.buttonsCounter = 0;

example-redux/src/screens/TopTabsScreen.js

@@ -0,0 +1,3 @@
+export default class TopTabsScreen {
+
+}

example-redux/src/screens/index.js

@@ -7,6 +7,7 @@ import PushedScreen from './PushedScreen';
 import ListScreen from './ListScreen';
 import SideMenu from './SideMenu';
 import BottomTabsSideMenu from './BottomTabsSideMenu';
+import TopTabsScreen from './TopTabsScreen';
 
 // register all screens of the app (including internal ones)
 export function registerScreens(store, Provider) {
@@ -17,4 +18,5 @@ export function registerScreens(store, Provider) {
   Navigation.registerComponent('example.ListScreen', () => ListScreen, store, Provider);
   Navigation.registerComponent('example.SideMenu', () => SideMenu, store, Provider);
   Navigation.registerComponent('example.BottomTabsSideMenu', () => BottomTabsSideMenu, store, Provider);
+  Navigation.registerComponent('example.TopTabsScreen', () => TopTabsScreen);
 }