I am trying to implement a "riddle effect" where pressing an outer TouchableNativeFeedback will also trigger an inner Switch that is attached to it. However, the current implementation does not behave as expected. I would like to achieve a behavior similar to what is demonstrated in the video linked.
Here is the code for context:
<TouchableNativeFeedback
key={setting}
onPress={() =>
handleSwitchToggle()
}
background={TouchableNativeFeedback.Ripple(
"rgba(0, 0, 0, .32)",
false
)}
useForeground={true}
>
<View style={styles.touchableItem}>
<List.Item
title={title}
right={() => (
<View pointerEvents="none">
<Switch
value={switchValue}
onValueChange={(newActiveValue) =>
handleSwitchChange(newActiveValue)
}
color="#a08eb9"
/>
</View>
)}
/>
</View>
</TouchableNativeFeedback>
What changes would you suggest to ensure that pressing the outer TouchableNativeFeedback also triggers the inner switch, creating a good looking interaction similar to the effect shown in the video?
Video:
