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": {