Disable the touchable screen's child view's touchablity-CodePudding

I want to disable the touchability of the View below. So I don't want console.log to run when the yellow square is pressed. I used pointerEvents but it didn't work. How can I do that?

import { Text, TouchableOpacity, View, } from "react-native"
import React from "react"


export default function Screen() {
return (
    <TouchableOpacity
        style={{ flex: 1, backgroundColor: "black" }}
        onPress={() => console.log("pressed")}
    >
        <View
            style={{ width: 100, height: 100, backgroundColor: "yellow" }}
            pointerEvents="none"
        >
            <Text>React Native</Text>
        </View>
    </TouchableOpacity>

)
}

CodePudding user response：

 <TouchableOpacity
    style={{ flex: 1, backgroundColor: "black" }}
    onPress={() => console.log("pressed")} >
    <TouchableOpacity activeOpacity={1}>
    <View
        style={{ width: 100, height: 100, backgroundColor: "yellow" }}>
        <Text>React Native</Text>
    </View>
    </TouchableOpacity>
  </TouchableOpacity>