Animated button that scales up on press

AnimatedButton.tsx

import React from 'react';
import { Text, StyleSheet } from 'react-native';
import Animated, {
  Value,
  cond,
  eq,
  interpolate,
  Extrapolate,
} from 'react-native-reanimated';
import { State, TapGestureHandler } from 'react-native-gesture-handler';
import {
  onGestureEvent,
  withTransition,
} from 'react-native-redash/lib/module/v1';

import colors from '../../styles/colors';

type Props = {
  title: string;
  onPress: () => void;
};

const PrimaryButton: React.FC<Props> = ({ title, onPress }) => {
  const state = new Value(State.UNDETERMINED);
  const gestureHandler = onGestureEvent({ state });
  const isActive = eq(state, State.BEGAN);
  const duration = cond(isActive, 1000, 250);
  const progress = withTransition(isActive, { duration });
  const scale = interpolate(progress, {
    inputRange: [0, 1],
    outputRange: [1, 1.2],
    extrapolate: Extrapolate.CLAMP,
  });

  return (
    <TapGestureHandler {...gestureHandler}>
      <Animated.View
        style={[styles.buttonContainer, { transform: [{ scale }] }]}>
        <Text style={styles.text}>{title}</Text>
      </Animated.View>
    </TapGestureHandler>
  );
};

const styles = StyleSheet.create({
  buttonContainer: {
    backgroundColor: colors.primary,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: colors.white,
    fontSize: 16,
    paddingVertical: 16,
  },
});

export default PrimaryButton;