Detect tap on the outside of the View in react native

Question

How to detect tap on the outside of the View(View is a small one width and height are 200). For example, I have a custom View(which is like a modal) and it's visibility is controlled by state. But when clicking outside of it nothing is changed because there is no setState done for that, I need to catch users tap everywhere except inside the modal. How is that possible in React Native?

Welfarism

I know it's long gone since you asked this question. Putting this link here for future devs asking the same question as you. How to detect click outside. The approach uses internal React private props due to lack of alternatives – Thither

Answer 1

use a TouchableOpacity around your modal and check it's onPress. Look at this example.

const { opacity, open, scale, children,offset } = this.state;
let containerStyles = [ styles.absolute, styles.container, this.props.containerStyle ];
let backStyle= { flex: 1, opacity, backgroundColor: this.props.overlayBackground };

<View
    pointerEvents={open ? 'auto' : 'none'}
    style={containerStyles}>
    <TouchableOpacity
      style={styles.absolute}
      disabled={!this.props.closeOnTouchOutside}
      onPress={this.close.bind(this)}
      activeOpacity={0.75}>
      <Animated.View style={backStyle}/>
    </TouchableOpacity>
    <Animated.View>
      {children}
    </Animated.View>
  </View>

const styles = StyleSheet.create({
  absolute: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'transparent'
  },
  container: {
    justifyContent: 'center',
    elevation: 10,
  }
});

Joslin

That's a nice hack, but I was looking something straight forward and non-hacky solution – Indentation

Answer 2

<View
  onStartShouldSetResponder={evt => {
    evt.persist();
    if (this.childrenIds && this.childrenIds.length) {
      if (this.childrenIds.includes(evt.target)) {
        return;
      }
      console.log('Tapped outside');
    }
  }} 
>
  // popover view - we want the user to be able to tap inside here
  <View ref={component => {
   this.childrenIds = component._children[0]._children.map(el => el._nativeTag) 
  }}>
    <View>
      <Text>Option 1</Text>
      <Text>Option 2</Text>
    </View>
  </View>

  // other view - we want the popover to close when this view is tapped
  <View>
    <Text>
      Tapping in this view will trigger the console log, but tapping inside the 
      view above will not.
    </Text>
  </View>
</View>

https://www.jaygould.co.uk/2019-05-09-detecting-tap-outside-element-react-native/

I found these solution here, hope it helps

Fermanagh

ref={component => { this.childrenIds = component._children[0]._children.map(el => el._nativeTag) }} component is null here – Responsiveness

Answer 3

This worked for me

// This will handle outside events
<Pressable onPress={() => console.log('PRESSED OUTSIDE')}>
  // This will handle inside events
  <TouchableWithoutFeedback onPress={() => console.log('PRESSED INSIDE')}>
    // Your content here ...
  </TouchableWithoutFeedback>
</Pressable>

Jeu

Answer 4

Wrap your view in TouchableOpacity/TouchableHighlight and add onPress Handler so that you can detect the touch outside your view.

Something like :

<TouchableOpacity onPress={() => {console.log('Touch outside view is detected')} }>
   <View> Your View Goes Here </View>
</TouchableOpacity>

Samy

This won't work, because the 'TouchableOpacity' in your code will also detect touches, that go into the actual view. To solve this problem, you've to use absolute styling (see the other answer). – Jimenez