Merge pull request #33 from santomegonzalo/fix-android-visible-animation

fix android when we start component with visible={false}

component/FloatingAction.js

@@ -22,12 +22,18 @@ class FloatingAction extends Component {
     super(props);
 
     this.state = {
-      active: false
+      active: false,
+      visible: props.visible
     };
 
     this.animation = new Animated.Value(0);
     this.actionsAnimation = new Animated.Value(0);
     this.visibleAnimation = new Animated.Value(props.visible ? 0 : 1);
+    /*
+     * this animation will fix an error on ReactNative (Android) where
+     * interpolations with 0 and 1 don't work as expected.
+     */
+    this.fadeAnimation = new Animated.Value(props.visible ? 1 : 0);
   }
 
   componentDidMount() {
@@ -41,9 +47,15 @@ class FloatingAction extends Component {
   componentWillReceiveProps(nextProps) {
     if (nextProps.visible !== this.props.visible) {
       if (nextProps.visible) {
-        Animated.spring(this.visibleAnimation, { toValue: 0 }).start();
+        Animated.parallel([
+          Animated.spring(this.visibleAnimation, { toValue: 0 }),
+          Animated.spring(this.fadeAnimation, { toValue: 1 })
+        ]).start();
       } if (!nextProps.visible) {
-        Animated.spring(this.visibleAnimation, { toValue: 1 }).start();
+        Animated.parallel([
+          Animated.spring(this.visibleAnimation, { toValue: 1 }),
+          Animated.spring(this.fadeAnimation, { toValue: 0 })
+        ]).start();
       }
     }
   }
@@ -151,6 +163,7 @@ class FloatingAction extends Component {
     const mainButtonColor = buttonColor || color;
 
     const animatedVisibleView = {
+      opacity: this.fadeAnimation,
       transform: [{
         rotate: this.visibleAnimation.interpolate({
           inputRange: [0, 1],

example/ReactNativeFloatingAction-Expo/package.json

@@ -6,7 +6,7 @@
     "prop-types": "^15.6.0",
     "react": "16.0.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-24.0.0.tar.gz",
-    "react-native-floating-action": "^1.5.0",
+    "react-native-floating-action": "1.10.0",
     "react-navigation": "^1.0.0-beta.21"
   }
 }

example/ReactNativeFloatingAction-Expo/yarn.lock

@@ -2926,11 +2926,9 @@ react-native-drawer-layout@1.3.2:
   dependencies:
     react-native-dismiss-keyboard "1.0.0"
 
-react-native-floating-action@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/react-native-floating-action/-/react-native-floating-action-1.5.0.tgz#a7ac811debdde2dbe11f55cb5447d70a8ac38634"
-  dependencies:
-    lodash "^4.17.4"
+react-native-floating-action@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/react-native-floating-action/-/react-native-floating-action-1.10.0.tgz#e61deb497afe773313e223d7603b81fcf6bd1b21"
 
 react-native-gesture-handler@1.0.0-alpha.30:
   version "1.0.0-alpha.30"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-floating-action",
-  "version": "1.10.0",
+  "version": "1.10.1",
   "description": "floating action component for react-native",
   "main": "index.js",
   "directories": {