How do i make a TouchableOpacity wraping a camera clickable on React Native android?

Question

I am rendering a camera view inside the react-native TouchableOpacity, how do I make it clickable?

The same version of code works well on iOS, the touchableOpacity is clickable and produces the right output

<TouchableOpacity style={{width:'100%', height:300}} onPress={() =>alert("hey")}>
    <Camera 
        style={{ height: 300, width: '100%', display: this.state.camera }}  
        type={this.state.type} 
        autoFocus={'on'} 
        ratio={'4:3'}   
        focusDepth={0} 
        ref={(ref) => { this.camera = ref }}>
    </Camera>
</TouchableOpacity>

I expect the output to be an alert with "hey" when I press the TouchableOpacity instead I get nothing on android but I get a "hey" on iOs

Answer 1

That's because TouchableOpacity behavior diverges between iOs and Android. A quick fix would be just to replace the TouchableOpacity with TouchableWithoutFeedback in Android. Here's a way to do it:

const Touchable = Platform.select({ ios: TouchableOpacity, android: TouchableWithoutFeedback });

Then just use this constant to wrap your Camera view.

PS: Make sure you imported TouchableOpacity, TouchableWithoutFeedback and Platform from react-native module.