From 5e6875b8dfd12c0bac5bda6e41b4be3254dee9cb Mon Sep 17 00:00:00 2001
From: Gonzalo Martin Santome Osuna <gonzalo.santome@zalando.de>
Date: Mon, 26 Mar 2018 17:18:19 +0200
Subject: [PATCH] fix android when we start component with visible={false}

---
 component/FloatingAction.js                   | 19 ++++++++++++++++---
 .../package.json                              |  2 +-
 .../ReactNativeFloatingAction-Expo/yarn.lock  |  8 +++-----
 package.json                                  |  2 +-
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/component/FloatingAction.js b/component/FloatingAction.js
index 65462aa..6662247 100644
--- a/component/FloatingAction.js
+++ b/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],
diff --git a/example/ReactNativeFloatingAction-Expo/package.json b/example/ReactNativeFloatingAction-Expo/package.json
index db1d25f..fa4ddc1 100644
--- a/example/ReactNativeFloatingAction-Expo/package.json
+++ b/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"
   }
 }
diff --git a/example/ReactNativeFloatingAction-Expo/yarn.lock b/example/ReactNativeFloatingAction-Expo/yarn.lock
index d629e58..b064280 100644
--- a/example/ReactNativeFloatingAction-Expo/yarn.lock
+++ b/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"
diff --git a/package.json b/package.json
index e2c3ab9..272c24f 100644
--- a/package.json
+++ b/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": {