fab-transition-v2.js

class FabTransition extends React.Component {
  render() {
    const INPUT_RANGE = [0, MOVE_STOP, TRANSFORM_STOP, 1];

    const FAB_CONTAINER_PADDING = 8;
    const INITIAL_FAB_CONTAINER_WIDTH = FAB_SIZE + FAB_CONTAINER_PADDING;
    const INITIAL_FAB_CONTAINER_HEIGHT = FAB_SIZE + FAB_CONTAINER_PADDING;

    const INITIAL_FAB_CONTAINER_POSITION_RIGHT = 16;
    const INTIAL_FAB_CONTAINER_POSITION_BOTTOM = 16;
    const FINAL_FAB_CONTAINER_WIDTH = WINDOW_WIDTH;
    const FINAL_FAB_CONTAINER_HEIGHT = 64;
    const FINAL_FAB_CONTAINER_POSITION_RIGHT = 64;
    const FINAL_FAB_CONTAINER_POSITION_BOTTOM = 0;

    const fabContainerWidth = this.animationProgress.interpolate({
      inputRange: INPUT_RANGE,
      outputRange: [
        INITIAL_FAB_CONTAINER_WIDTH,
        INITIAL_FAB_CONTAINER_WIDTH,
        FINAL_FAB_CONTAINER_WIDTH,
        FINAL_FAB_CONTAINER_WIDTH,
      ],
    });
    const fabContainerHeight = this.animationProgress.interpolate({
      inputRange: INPUT_RANGE,
      outputRange: [
        INITIAL_FAB_CONTAINER_HEIGHT,
        INITIAL_FAB_CONTAINER_HEIGHT,
        FINAL_FAB_CONTAINER_HEIGHT,
        FINAL_FAB_CONTAINER_HEIGHT,
      ],
    });
    const fabContainerPositionRight = this.animationProgress.interpolate({
      inputRange: INPUT_RANGE,
      outputRange: [
        INITIAL_FAB_CONTAINER_POSITION_RIGHT,
        FINAL_FAB_CONTAINER_POSITION_RIGHT,
        // fab container right position should be again changed to 0, because the fab container takes
        // the entire width
        0,
        0,
      ],
    });
    const fabContainerPositionBottom = this.animationProgress.interpolate({
      inputRange: INPUT_RANGE,
      outputRange: [
        INTIAL_FAB_CONTAINER_POSITION_BOTTOM,
        FINAL_FAB_CONTAINER_POSITION_BOTTOM,
        FINAL_FAB_CONTAINER_POSITION_BOTTOM,
        FINAL_FAB_CONTAINER_POSITION_BOTTOM,
      ],
      easing: TRANSLATE_CURVE,
    });

    const INITIAL_FAB_SCALE = 1;
    const INITIAL_FAB_ICON_OPACITY = 1;
    const FINAL_FAB_SCALE = 15;
    const FINAL_FAB_ICON_OPACITY = 0;
    const fabScale = this.animationProgress.interpolate({
      inputRange: INPUT_RANGE,
      outputRange: [
        INITIAL_FAB_SCALE,
        INITIAL_FAB_SCALE,
        FINAL_FAB_SCALE,
        FINAL_FAB_SCALE,
      ],
    });

    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.fabContainer,
          {
            width: fabContainerWidth,
            height: fabContainerHeight,
            right: fabContainerPositionRight,
            bottom: fabContainerPositionBottom,
          },
        ]}
      >
        <Animated.View
          style={[
            styles.fab,
            {
              transform: [{ scale: fabScale }],
            },
          ]}
        >
          <TouchableNativeFeedback
            background={ripple}
            onPress={this.revealShareMenu}
          >
            ...
          </TouchableNativeFeedback>
        </Animated.View>
      </Animated.View>
    );
  }
}