Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Touchable component with Scale effect, common on iOS 12 (works on mobile and web)
// Demo: https://snack.expo.io/@brunolemos/touch-button-scale-effect
import React from 'react'
import { Animated, StyleProp, TouchableWithoutFeedback, TouchableWithoutFeedbackProps, ViewStyle } from 'react-native'
import { styleMerge } from 'shared/src/utils'
export interface TouchableScaleProps extends TouchableWithoutFeedbackProps {
containerStyle?: StyleProp<ViewStyle>
}
export class TouchableScale extends React.PureComponent<TouchableScaleProps> {
animatedValue = new Animated.Value(1)
handlePressIn: TouchableWithoutFeedbackProps['onPressIn'] = e => {
Animated.spring(this.animatedValue, {
toValue: 0.95,
speed: 30,
useNativeDriver: true,
}).start()
if (this.props.onPressIn) this.props.onPressIn(e)
}
handlePressOut: TouchableWithoutFeedbackProps['onPressOut'] = e => {
Animated.spring(this.animatedValue, {
toValue: 1,
friction: 100,
tension: 20,
useNativeDriver: true,
}).start()
if (this.props.onPressOut) this.props.onPressOut(e)
}
render() {
const { children, containerStyle, ...props } = this.props
delete props.onPressIn
delete props.onPressOut
const animatedStyle = {
transform: [{ scale: this.animatedValue }],
}
return (
<TouchableWithoutFeedback {...props} onPressIn={this.handlePressIn} onPressOut={this.handlePressOut}>
<Animated.View style={styleMerge(containerStyle, animatedStyle)}>{children}</Animated.View>
</TouchableWithoutFeedback>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.