Get Touch Event on entire screen

Question

I have a disappearing header which I want to bring back into the view on a single tap anywhere on the screen. But if I am wrapping the entire <View> inside a <TouchableX> component the PanResponder stops working. Is there a hack around this?

Answer 1

You do not need to warp it with Touchable component.

Add next props to root View .

onResponderGrant - make View handle touch

onStartShouldSetResponder - make View handle start

Answer 2

To elaborate @Nicholas Chong advice, here is the example that works for me fine. You can use onTouchStart and onTouchEnd handlers on any View via props:

<View
  onTouchStart={() => doSomething()}
  style={{ width: '100%', height: '100%' }}
/>

More information

Answer 3

onResponderGrant 对我不起作用，我使用 onTouchEnd 在点击屏幕时触发，这会起作用

Answer 4

This would be an example of a implementation with a onResponderGrant

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {

  constructor() {
    super();
    this.startTouch = this.startTouch.bind(this);
    this.stopTouch = this.stopTouch.bind(this);
    this.onTouchE = this.onTouchE.bind(this);
  }

  startTouch() {
    console.debug("You start so don't stop!??");
  }

  stopTouch() {
    console.debug("Why you stop??");
  }

  onTouchE() {
    console.debug("Touchable Opacity is working!!");
  }

  render() {

    return (
      <View style={styles.container}
            onResponderGrant = { () => this.startTouch() }
            onResponderRelease = { () => this.stopTouch() }
            onStartShouldSetResponder = { (e) => {return true} }
            >
          <TouchableOpacity
            onPress = { () => this.onTouchE() }
          >
            <Text style={styles.welcome}>
              Welcome to React Native!
            </Text>
          </TouchableOpacity>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'cornflowerblue',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Answer 5

I have included an example of using onResponderGrant and onStartShouldSetResponder inside of a View component.

(Thanks to your previously written answer, @Mr Br)

Definitions

import { Modal, Text, View } from "react-native";
import { useState } from "react";
const [visible, setVisible] = useState(false);
const dismissFunction = () => setVisible(false);

Presentation

<Modal visible={visible} transparent style={{ alignItems: "center", height: "100%", }} >
  <View onResponderGrant={dismissFunction} onStartShouldSetResponder={dismissFunction} style={{ flex: 1, backgroundColor: "#1c1c1c75", flexDirection: "column", justifyContent: "flex-end", alignItems: "center" }}  >
    <View style={{ backgroundColor: "#1E2124", borderRadius: 30, justifyContent: "center", alignItems: "center", height: "30%", shadowColor: "#ffffff10", shadowOpacity: 10, shadowOffset: { width: 0, height: -5 }, width: "101%" }}>
        <Text style={{ textAlign: "center", color: "#ffffff", fontSize: 24, marginLeft: "10%", marginRight: "10%", marginBottom: "10%", marginTop: "5%" }}>The message of your modal!</Text>
    </View>
  </View>
</Modal>

Don't forget to run setVisible(true) somewhere to get the modal to show!