CODEWITHSUNDEEP
react-native
carloscc
carloscc

Reputation: 799

Disable TouchableOpacity for nested View

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?

Upvotes: 2

Views: 2799

Answers (5)

Tales Kerschner
Tales Kerschner

Reputation: 161

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:

Upvotes: 0

AnaGard
AnaGard

Reputation: 133

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

Upvotes: 0

Mehran Khan
Mehran Khan

Reputation: 3636

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

enter image description here

Upvotes: 2

hong developer
hong developer

Reputation: 13906

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

Upvotes: 0

Rishav Kumar
Rishav Kumar

Reputation: 5450

Go in that view and add a prop => pointerEvents:none

<View pointerEvents="none" />

Please refer here

Upvotes: 0

Related Questions