0

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:

enter image description here

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.

Joris416
  • 4,751
  • 5
  • 32
  • 59
  • if it's positioned absolutely then it can create issues like that. Try to set for it higher z-index. – Paweł Mikołajczuk Jan 02 '19 at 13:47
  • 1
    I have, up to a zIndex of 6000 which is way higher than any of my other views can be. Would you have any other idea? – Joris416 Jan 02 '19 at 13:49
  • This view there is created by react native automatically from what i know so you don't need to focus on that. Try to replace TouchableOpacity to another touchable and see if it will work. If not then try to move it to some other place - if it will work then there is issue with something catching touch event before it. – Paweł Mikołajczuk Jan 02 '19 at 13:54

4 Answers4

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>
Nikhil P
  • 76
  • 4
1

Wrap the component in a view and disable pointer events.

<View pointerEvents="none">
  <Video source={{ uri: source }} />
</View>
Chris Byatt
  • 3,689
  • 3
  • 34
  • 61
  • this worked for me! I wasn't able to reproduce the issue with a regular react-native-video and touchable. But somehow in my current context it was only detecting a touch the second time. Really strange. Do you know why this worked? Don't know why my video would be detecting touches... – Qrow Saki Nov 19 '20 at 21:35
0
import {TouchableOpacity} from 'react-native';

<TouchableOpacity>some text</TouchableOpacity>
  • Thanks for your answer, but don't have trouble implementing TouchableOpacity, as it works in other components. It's just the current 'context' in which it seems to be disabled – Joris416 Jan 02 '19 at 15:19
  • do it fade when clicked? –  Jan 03 '19 at 06:58
  • No, it literally does not detect the touch – Joris416 Jan 03 '19 at 08:40
  • Hi! I actually have an update (see my question). I use react-native-fluid transitions for shared-element transitions, and when I run a previous build of my app without it everything works fine. This framework seems to insert some overlay of in my video view, which blocks user interaction. Are you familiar with this? – Joris416 Jan 03 '19 at 14:24
0

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,
                    }}
                >
Yash Raj
  • 11
  • 2