Disable TouchableOpacity for nested View - react-native

Question

I've a touchable opacity, and I have a few views inside it. I have one specific view that I don't want for it to be clickable. How can I achieve this?

Answer 1

The specific view that you don't want for it to be clickable should be "TouchableOpacity" but have activeOpacity={1} . In this way parent TouchableOpacity will not work and activeOpacity={1} will make it like disable
Complete code
import React, { Component } from "react";
import { TouchableOpacity, View, Text } from "react-native";
export default class App extends Component {
render() {
return (
<View style={{ flex: 1, margin: 50 }}>
<TouchableOpacity
style={{ backgroundColor: "red", width: 250, height: 250 }}
>
<TouchableOpacity
style={{
backgroundColor: "green",
width: 100,
height: 100,
margin: 20,
alignItems: "center",
justifyContent: "center"
}}
activeOpacity={1}
>
<Text>No Click Area</Text>
</TouchableOpacity>
</TouchableOpacity>
</View>
);
}
}
App Preview

Answer 2

Go in that view and add a prop => pointerEvents:none
<View pointerEvents="none" />
Please refer here

Answer 3

I don't know what conditions you're talking about, but if you want to do what you want, you can use the status value. To deactivate a button when displaying a screen, change the status value when rendering the screen, or change it when you press a button. The examples are attached together.
Example
import * as React from 'react';
import { Text, View, StyleSheet,TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
export default class App extends React.Component {
constructor(props){
super(props);
this.state={
disabled: false
}
}
componentDidMount(){
this.setState({ disabled: true})
}
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Change code in the editor and watch it change on your phone! Save to get a shareable url.
</Text>
<TouchableOpacity style={{width:"100%",height:20,alignItems:"center",backgroundColor:"blue"}} onPress={() => alert("touch")} disabled={this.state.disabled}>
<Text>Touch </Text>
</TouchableOpacity>
<TouchableOpacity style={{width:"100%",height:20,alignItems:"center",backgroundColor:"red"}} onPress={() => this.setState({disabled:true})}>
<Text>disabled</Text>
</TouchableOpacity>
</View>
);
}
}

Answer 4

Another way you could do it is to wrap you View which you don't want to be clickable with TouchableWithoutFeedback.
export default class App extends React.Component {
render() {
return (
<View style={{flex: 1, justifyContent: 'center'}}>
<TouchableOpacity style={{backgroundColor: "blue", width: 300, height: 300}}>
<TouchableWithoutFeedback>
<View style={{backgroundColor: "yellow", width: 100, height: 100}}>
<Text>Hello</Text>
</View>
</TouchableWithoutFeedback>
</TouchableOpacity>
</View>
);
}
}

Answer 5

As #AnaGard suggested, the key to having a press free view inside a pressable container is to make a pressable inner view without an onPress value.
Better than using TouchableOpacity is using the Pressable component, which the ReactNative's documentation suggests is more future-proof.
Therefore, an updated answer to this question might be as follows:
<View>
<Pressable
style={{ width: 500, height: 250 }}
onPress={() => onClose()}
>
<Pressable style={{ height: 100, width: 200 }}>
<View>
<Text>Your content here</Text>
</View>
</Pressable>
</Pressable>
</View>
Some references:
Pressable
TouchableOpacity