Estoy tratando de animar un componente Pressable, por eso estoy tratando de hacerlo animable de esta manera:

 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);

Y luego úsalo en lugar de esto:

 <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>

El problema es que tan pronto como reemplazo Pressable con AnimatedPressable, mis estilos se rompen. Después de juguetear un poco, me di cuenta de que se rompen por esto:

 style={({ pressed }) => [ styles.button, styles[variant], { width, elevation: pressed && variant !== 'tertiary' ? 5 : 0 }, { ...(variant === 'tertiary' && pressed ? { backgroundColor: colors.primary50 } : {}) }, style, ]}

Si quito el presionado, funciona bien:

 style={[ styles.button, styles[variant], style, ]}

¿Por qué no puedo usar prensado en ese caso?