touchableopacity - React Native. How to make parent element to response to onPress called in children

Question

I have two Views wrapped with TouchableOpacity, one in another. The green one, let's call it A(parent), and the blue one - B(child).

The Question: Is it possible to make both TouchableOpacity work when I press on B?

Little explanation - In my app I have something like little modal view, and when this modal is visible I want the following behaviour - when I press outside the modal I want this modal close (its like press on B) and other touchableOpacity, which lays below, fires too (like A)

Here you can see the screenshot

function Test() {
return (
    <TouchableOpacity onPress={() => console.log('green touch')}>
        <View style={{height: '100%', backgroundColor: 'green', justifyContent: 'center', alignItems: 'center'}}>
            <TouchableOpacity onPress={() => console.log('blue touch')}>
                <View style={{height: 200, width: 200, backgroundColor: 'blue'}}/>
            </TouchableOpacity>
        </View>
    </TouchableOpacity>
);

}

question from:https://stackoverflow.com/questions/65936923/react-native-how-to-make-parent-element-to-response-to-onpress-called-in-childr

Answer 1

What I have understand from question. If any changes happen in child u want to pass the data or we can notify your parent. Right?

 * Create a function in your Parent.   

    const sendDataToParent = (value) => {  console.log("---value")};

* Pass it to ur child component.

<ChildComponent sendDataToParent={sendDataToParent}/>


*In your child component get it from props

  

      const Child =({sendDataToParent})=>{
        return <TouchableOpacity onPress=(sendDataToParent(pass your value))/>
        }