How to deploy Pressable effect excluding child component?

Question

I have parent B and child A.

I want to make it, if I click B, it navigates to previous screen. (navigation.goBack())

So I make B and A as:

<Pressable onPress={() => navigation.goBack()}>
   <View>
     <Text>A</Text>
   <View>
</Pressable>

But with this code, Problem is even when I click child component A, it goes back to previous screen.

I just want it happen only when I click B outside of A.

Is there any solution to make it possible?

Answer 1

You can turn the view into TouchableWithoutFeedback as seen below

<Pressable onPress={() => console.log("tapped")}>
   <TouchableWithoutFeedback>
     <Text>A</Text>
   <TouchableWithoutFeedback>
</Pressable>

Whenever you click on the text "tapped" won't be printed. Furthermore, no feedback on the UI will be shown

Answer 2

The View with 100% height would make the upper part of B pressable. Unfortunately you need to do additional styling to make the remaining column of B pressable. Just be creative, you know the jest.

<View > /* B */
     <Pressable onPress={() => navigation.goBack()}>
          <View style={{
               height: '100%'
               }} />
     </Pressable>
     <View>
          <Text>A</Text>
     <View>
</View>