fab-transition-v3.jsx

export default class App extends React.Component {
  render() {
    const INPUT_RANGE = [0, MOVE_STOP, TRANSFORM_STOP, 1];
    
    const INITIAL_MENU_CONTAINER_OPACITY = 0;
    const FINAL_MENU_CONTAINER_OPACITY = 1;
    const INITIAL_MENU_CONTAINER_SCALE = 0.95;
    const FINAL_MENU_CONTAINER_SCALE = 1;
    
    const menuContainerOpacity = this.animationProgress.interpolate({
      inputRange: INPUT_RANGE,
      outputRange: [
        INITIAL_MENU_CONTAINER_OPACITY,
        INITIAL_MENU_CONTAINER_OPACITY,
        FINAL_MENU_CONTAINER_OPACITY,
        FINAL_MENU_CONTAINER_OPACITY,
      ],
    });
    const menuContainerScale = this.animationProgress.interpolate({
      inputRange: INPUT_RANGE,
      outputRange: [
        INITIAL_MENU_CONTAINER_SCALE,
        INITIAL_MENU_CONTAINER_SCALE,
        INITIAL_MENU_CONTAINER_SCALE,
        FINAL_MENU_CONTAINER_SCALE,
      ],
    });

    return (
      <View style={styles.container}>
        <Animated.View
          style={[
            styles.menuContainer,
            {
              opacity: menuContainerOpacity,
              transform: [{ scale: menuContainerScale }],
            },
          ]}
        >
          <TouchableNativeFeedback
            onPress={this.hideMenu}
            background={ripple}
            style={styles.menuButton}
          >
            <MaterialIcons name="email" size={ICON_SIZE} color="#fff" />
          </TouchableNativeFeedback>
          <TouchableNativeFeedback
            onPress={this.hideMenu}
            background={ripple}
            style={styles.menuButton}
          >
            <MaterialIcons name="content-copy" size={ICON_SIZE} color="#fff" />
          </TouchableNativeFeedback>
          <TouchableNativeFeedback
            onPress={this.hideMenu}
            background={ripple}
            style={styles.menuButton}
          >
            <MaterialCommunityIcons
              name="google-plus"
              size={ICON_SIZE}
              color="#fff"
            />
          </TouchableNativeFeedback>
          <TouchableNativeFeedback
            onPress={this.hideMenu}
            background={ripple}
            style={styles.menuButton}
          >
            <MaterialCommunityIcons
              name="facebook"
              size={ICON_SIZE}
              color="#fff"
            />
          </TouchableNativeFeedback>
          <TouchableNativeFeedback
            onPress={this.hideMenu}
            background={ripple}
            style={styles.menuButton}
          >
            <MaterialCommunityIcons
              name="twitter"
              size={ICON_SIZE}
              color="#fff"
            />
          </TouchableNativeFeedback>
        </Animated.View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  menuContainer: {
    height: FINAL_FAB_CONTAINER_HEIGHT,
    width: WINDOW_WIDTH,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around',
    position: 'absolute',
    bottom: 0,
    right: 0,
  },
  menuButton: {
    padding: 4,
  },
});