1

How do I make the long press event bubble up such that both triggered 1 and triggered 2 are printed?

  <Pressable style={styles.press2} onLongPress={() => { console.log('triggered 2') }}>
    <Text>Look Down</Text>
    <ScrollView>
      <Pressable style={{styles.press1}} onLongPress={() => { console.log('triggered 1') }}>
        <Text>click me</Text>
      </Pressable>
    </ScrollView>
  </Pressable>

I read this answer but I really don't understand it

Edit: is there any way to solve this without importing another package?

1 Answers1

1

I don't think this is easily doable without a 'hacky' enable trick. I would personally use a LongPressGestureHandler from react-native-gesture-handler.

They have a simultaneousHandlers prop which makes multiple handlers work at the same time, so you could do something like this:

const childHandlerRef = useRef(null);

<LongPressGestureHandler simultaneousHandlers={childHandlerRef}>
  <View>
    <LongPressGestureHandler ref={childHandlerRef}>
      // other components
    </LongPressGestureHandler>
  </View>
</LongPressGestureHandler>

You can read more about it here.

Kipnoedels
  • 1,118
  • 7
  • 22
  • looks promising but also hacky like you said but I'm sure there must be some way to do it without importing another package, any ideas? –  Oct 07 '21 at 08:57
  • I ment that with the default pressable you probably need a hacky workaround. This is common practice in react-native-gesture-handler. I don't think it is easily doable without a third party library. – Kipnoedels Oct 07 '21 at 09:02