fab-transition-v1.js

const MOVE_STOP = 0.2;
const TRANSFORM_STOP = 0.6;
const ANIMATION_DURATION = 750;
const ANIMATION_EASING = Easing.bezier(0.4, 0.0, 0.2, 1);

class FabTransition extends React.Component {
  animationProgress = new Animated.Value(0);

  render() {
    const INITIAL_FAB_POSITION_RIGHT = 16;
    const INTIAL_FAB_POSITION_BOTTOM = 16;
    const FINAL_FAB_POSITION_RIGHT = 64;
    const FINAL_FAB_POSITION_BOTTOM = 0;
    
    const TRANSLATE_CURVE = Easing.bezier(0, 0.5, 0.5, 1);
    
    const INPUT_RANGE = [0, MOVE_STOP, TRANSFORM_STOP, 1];
    
    // change the fab right position duration the MOVE phase and fix it over there
    // for the rest
    const fabPositionRight = this.animationProgress.interpolate({
      inputRange: INPUT_RANGE,
      outputRange: [
        INITIAL_FAB_POSITION_RIGHT,
        FINAL_FAB_POSITION_RIGHT,
        FINAL_FAB_POSITION_RIGHT,
        FINAL_FAB_POSITION_RIGHT,
      ],
    });
    const fabPositionBottom = this.animationProgress.interpolate({
      inputRange: INPUT_RANGE,
      outputRange: [
        INTIAL_FAB_POSITION_BOTTOM,
        FINAL_FAB_POSITION_BOTTOM,
        FINAL_FAB_POSITION_BOTTOM,
        FINAL_FAB_POSITION_BOTTOM,
      ],
      easing: TRANSLATE_CURVE,
    });
    
    const INITIAL_FAB_ICON_OPACITY = 1;
    const FINAL_FAB_ICON_OPACITY = 0;
    const fabIconOpacity = this.animationProgress.interpolate({
      inputRange: INPUT_RANGE,
      outputRange: [
        INITIAL_FAB_ICON_OPACITY,
        FINAL_FAB_ICON_OPACITY,
        FINAL_FAB_ICON_OPACITY,
        FINAL_FAB_ICON_OPACITY,
      ],
    });

    return (
      <Animated.View
        style={[
          styles.fab,
          {
            position: 'absolute',
            bottom: fabPositionBottom,
            right: fabPositionRight,
          },
        ]}
      >
        <Touchable
          background={ripple}
          onPress={() => {
            Animated.timing(this.animationProgress, {
              toValue: 1,
              duration: ANIMATION_DURATION,
              easing: ANIMATION_EASING,
            });
          }}
        >
          <Animated.View
            style={[styles.iconContainer, { opacity: fabIconOpacity }]}
          >
            <MaterialIcons name="share" size={ICON_SIZE} color="#fff" />
          </Animated.View>
        </Touchable>
      </Animated.View>
    );
  }
}

const styles = StyleSheet.create({
  fab: {
    width: FAB_SIZE,
    height: FAB_SIZE,
    borderRadius: FAB_SIZE / 2,
    backgroundColor: '#2196F3',
    elevation: 6,
  },
  iconContainer: {
    width: FAB_SIZE,
    height: FAB_SIZE,
    alignItems: 'center',
    justifyContent: 'center',
  },
});