Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Animated button that scales up on press
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment