'React-Native-Video disables TouchableOpacity in Android

I am working on a react native app which involves a video player (react-native-video), and some simple controls I set up myself. on iOS this works fine, but on Android the TouchableOpacity elements, which I use for controls and navigation, don't seem to detect touches. (Navigation is handles by react-native-fluid-transitions in my app). When I turn on the inspector, a screen-covering View seems to be on top of my controls. However, this is not the case on iOS and I have also not configured such a view.

I installed Atom to use it's inspector feature to see the actual order of my views. It looks as follows:

VideoView is the name of my component, Video is the actual video player and the TouchableOpacity I highlighted is the button I'm trying to get to work. In this view hierarchy, no views seem to be on top of anything. I have also compared this breakdown to other components where my buttons actually work and it looks the same.

My code looks as follows:

return (
      <View style={internalStyles.container}>
        <Video style={internalStyles.videoContainer}
            ref={(ref) => {
             this.props.player = ref
            }}
            source={{uri: url}}
            controls={false}
            onEnd={() => this.videoEnded()}
            paused={this.state.paused}
            muted={false}
            repeat={false}
            resizeMode={"contain"}
            volume={1.0}
            rate={1.0}
            ignoreSilentSwitch={"obey"}
          />              
        {this.renderControls()}
        {Renderer.getInstance().renderNavigationButton()}
      </View>
  );

where renderControls is a function that renders the pause button, and Renderer is a singleton component containing render function for items I use in more components of my app. This all works fine on iOS, but not on Android. react-native-video seems to be incompatible with react-native-fluid-transitions as everything works when I remove one of either.

Does anyone know what might cause this behavior? Any help would be highly appreciated.

Solution 1:^[1]

Try removing the activeOpacity prop from TouchableOpacity component. Or you can use platform specific code to set values for activeOpacity prop

import { Platform, TouchableOpacity } from 'react-native'

    <TouchableOpacity 
      activeOpacity={Platform.OS==='android' ? 0 : 0.2}
      >
      <Text>submit</Text>
    </TouchableOpacity>

Solution 2:^[2]

Wrap the component in a view and disable pointer events.

<View pointerEvents="none">
  <Video source={{ uri: source }} />
</View>

Solution 3:^[3]

import {TouchableOpacity} from 'react-native';

<TouchableOpacity>some text</TouchableOpacity>

Solution 4:^[4]

For me it was solved by putting zIndex:1000

                <TouchableOpacity
                    onPress={this.handlePause}
                    style={{
                        position: "absolute",
                        alignItems: "center",
                        justifyContent: "center",
                        alignSelf: "center",
                        elevation: 2,
                        backgroundColor: "#FFF",
                        width: 60,
                        height: 60,
                        borderRadius: 30,
                        flex: 1,
                        zIndex: 1000,
                    }}
                >

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Chris Byatt
Solution 3
Solution 4	Yash Raj

'React-Native-Video disables TouchableOpacity in Android

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]