Search code examples
reactjsreact-nativesetstatetouchableopacity

React Native - LongPress and display extra information


In React Native, I would like to achieve the following outcome (example): example1 example2

On Long Press of the image (or touchableOpacity), I hope to display an overlay view of some extra information (could be images or text). The information disappears when the finger leaves the screen. I was thinking if it is something related to overlay view and setState, but I could not find the function where the view only appears during long presses. Is there a way to achieve this? Or is there a module that could provide a solution?

Any help would be appreciated!


Solution

  • If you are using the latest react native version you can use the onPressOut functionality of a pressable component: https://reactnative.dev/docs/pressable.

    Trigger the show overlay with the onLongPress (or onPressIn but it's not a good UX) function and then trigger the hide overlay with onPressOut function.

    For the overlay I suggest you a cool library like: https://reactnativeelements.com/docs/tooltip/