CODEWITHSUNDEEP
reactjsreact-nativemodal-dialog
Nikasv
Nikasv

Reputation: 1397

Detect tap on the outside of the View in react native

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?

Upvotes: 14

Views: 13687

Answers (4)

hexhad
hexhad

Reputation: 1303

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>

Upvotes: 2

deepak rathod
deepak rathod

Reputation: 21

<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

Upvotes: 2

Seetha
Seetha

Reputation: 95

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>

Upvotes: -2

Sinapcs
Sinapcs

Reputation: 2745

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,
  }
});

Upvotes: 2

Related Questions