Pressable fue una nueva introducción a RN 0.63, antes de eso, Touchable Opacity era el componente más utilizado para envolver un componente o componentes similares.

Ambas funcionalidades básicas son las mismas, para hacer que un texto/imagen se pueda hacer clic y el usuario sea interactivo.

Pero con Pressable puedes acceder a muchos accesorios nuevos como:

HitRect , que es una característica tan genial, según los documentos:

Los dedos no son los instrumentos más precisos, y es común que los usuarios activen accidentalmente el elemento incorrecto o se pierdan el área de activación. Para ayudar, Pressable tiene un HitRect opcional que puede usar para definir qué tan lejos se puede registrar un toque del elemento envuelto. Las prensas pueden comenzar en cualquier lugar dentro de un HitRect .

Esta es claramente una mejor alternativa a lo que usamos para hitslop , aquí es más preciso y usted define el área. Y tampoco interfiere con el índice Z del niño/otros componentes.

Entonces, básicamente, obtienes todas las características de un botón, opacidad táctil con accesorios nuevos y geniales. Echa un vistazo a sus documentos: rn-pressable

Espero que ayude. Siéntete libre de dudas.

Aquí tienes una foto para que despejes tu duda.

Cómo funciona En un elemento envuelto por

prensable

:

onPressIn se llama cuando se activa una pulsación. onPressOut se llama cuando el gesto de presión está desactivado.

Después de presionar onPressIn, sucederá una de dos cosas:

1. La persona quitará el dedo y activará onPressOut seguido de onPress.
2. Si la persona deja el dedo más de 370 milisegundos antes de retirarlo, se activa onLongPress. (onPressOut seguirá disparando cuando quiten el dedo).

Consulte la documentación para obtener más detalles.

Solo quería agregar una nota sobre un inconveniente de Pressable y una solución.

El inconveniente es que Pressable no tiene retroalimentación automática como su contraparte TouchableOpacity.

Sin embargo, puede agregar sus propios comentarios personalizados con el accesorio de style de Pressable, que viene con un identificador de estado presionado:

 <Pressable style={({ pressed }) => [ { opacity: pressed ? 0.5 : 1.0 } ]} onPress={() => console.log('Pressed')} > <View><Text>Press Me</Text></View> </Pressable>