I'm trying to animate a Pressable component which is why I'm trying to make it animatable like this:
const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
And then use it instead of this:
<Pressable
style={({ pressed }) => [
styles.button,
styles[variant],
{ width, elevation: pressed && variant !== 'tertiary' ? 5 : 0 },
{ ...(variant === 'tertiary' && pressed ? { backgroundColor: colors.primary50 } : {}) },
style,
]}
{...rest}
>
<HeaderText variant="h4" style={[styles.text, { color: textColor }]}>
{title}
</HeaderText>
</Pressable>
The problem is that as soon as I replace Pressable with AnimatedPressable, my styles break. After fiddling a bit, I realised that they break because of this:
style={({ pressed }) => [
styles.button,
styles[variant],
{ width, elevation: pressed && variant !== 'tertiary' ? 5 : 0 },
{ ...(variant === 'tertiary' && pressed ? { backgroundColor: colors.primary50 } : {}) },
style,
]}
If I remove the pressed, it works fine:
style={[
styles.button,
styles[variant],
style,
]}
Why can't I use pressed in that case?