Mixing
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.
android react-native touchableopacity react-native-video react-native-fluid-transitions asked Jan 2 at 13:40
Joris416Joris416
2,52042041
add a comment |
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.
android react-native touchableopacity react-native-video react-native-fluid-transitions asked Jan 2 at 13:40
Joris416Joris416
2,52042041
if it's positioned absolutely then it can create issues like that. Try to set for it higher z-index.
– Paweł Mikołajczuk
Jan 2 at 13:47
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 2 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 2 at 13:54
add a comment |
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.
android react-native touchableopacity react-native-video react-native-fluid-transitions asked Jan 2 at 13:40
Joris416Joris416
2,52042041
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.
android react-native touchableopacity react-native-video react-native-fluid-transitions android react-native touchableopacity react-native-video react-native-fluid-transitions asked Jan 2 at 13:40
Joris416Joris416
2,52042041
asked Jan 2 at 13:40
Joris416Joris416
2,52042041
edited Jan 3 at 16:08
Joris416
asked Jan 2 at 13:40
Joris416Joris416
2,52042041
asked Jan 2 at 13:40
Joris416Joris416
2,52042041
asked Jan 2 at 13:40
Joris416Joris416
2,52042041
2,52042041
if it's positioned absolutely then it can create issues like that. Try to set for it higher z-index.
– Paweł Mikołajczuk
Jan 2 at 13:47
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 2 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 2 at 13:54
add a comment |
if it's positioned absolutely then it can create issues like that. Try to set for it higher z-index.
– Paweł Mikołajczuk
Jan 2 at 13:47
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 2 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 2 at 13:54
if it's positioned absolutely then it can create issues like that. Try to set for it higher z-index.
– Paweł Mikołajczuk
Jan 2 at 13:47
if it's positioned absolutely then it can create issues like that. Try to set for it higher z-index.
– Paweł Mikołajczuk
Jan 2 at 13:47
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 2 at 13:49
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 2 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 2 at 13:54
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 2 at 13:54
add a comment |
2 Answers
2
active
oldest
votes
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>
answered Jan 2 at 16:53
Nikhil PNikhil P
314
add a comment |
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 2 at 15:19
do it fade when clicked?
– user10154568
Jan 3 at 6:58
No, it literally does not detect the touch
– Joris416
Jan 3 at 8:40
give me the github like i will take a look for my try...
– user10154568
Jan 3 at 12:34
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 3 at 14:24
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54007406%2freact-native-video-disables-touchableopacity-in-android%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>
answered Jan 2 at 16:53
Nikhil PNikhil P
314
add a comment |
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>
answered Jan 2 at 16:53
Nikhil PNikhil P
314
add a comment |
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>
answered Jan 2 at 16:53
Nikhil PNikhil P
314
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>
answered Jan 2 at 16:53
Nikhil PNikhil P
314
edited Jan 2 at 16:58
answered Jan 2 at 16:53
Nikhil PNikhil P
314
answered Jan 2 at 16:53
Nikhil PNikhil P
314
answered Jan 2 at 16:53
Nikhil PNikhil P
314
314
add a comment |
add a comment |
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 2 at 15:19
do it fade when clicked?
– user10154568
Jan 3 at 6:58
No, it literally does not detect the touch
– Joris416
Jan 3 at 8:40
give me the github like i will take a look for my try...
– user10154568
Jan 3 at 12:34
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 3 at 14:24
add a comment |
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 2 at 15:19
do it fade when clicked?
– user10154568
Jan 3 at 6:58
No, it literally does not detect the touch
– Joris416
Jan 3 at 8:40
give me the github like i will take a look for my try...
– user10154568
Jan 3 at 12:34
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 3 at 14:24
add a comment |
import {TouchableOpacity} from 'react-native';
<TouchableOpacity>some text</TouchableOpacity>
import {TouchableOpacity} from 'react-native';
<TouchableOpacity>some text</TouchableOpacity>
answered Jan 2 at 14:24
user10154568
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 2 at 15:19
do it fade when clicked?
– user10154568
Jan 3 at 6:58
No, it literally does not detect the touch
– Joris416
Jan 3 at 8:40
give me the github like i will take a look for my try...
– user10154568
Jan 3 at 12:34
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 3 at 14:24
add a comment |
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 2 at 15:19
do it fade when clicked?
– user10154568
Jan 3 at 6:58
No, it literally does not detect the touch
– Joris416
Jan 3 at 8:40
give me the github like i will take a look for my try...
– user10154568
Jan 3 at 12:34
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 3 at 14:24
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 2 at 15:19
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 2 at 15:19
do it fade when clicked?
– user10154568
Jan 3 at 6:58
do it fade when clicked?
– user10154568
Jan 3 at 6:58
No, it literally does not detect the touch
– Joris416
Jan 3 at 8:40
No, it literally does not detect the touch
– Joris416
Jan 3 at 8:40
give me the github like i will take a look for my try...
– user10154568
Jan 3 at 12:34
give me the github like i will take a look for my try...
– user10154568
Jan 3 at 12:34
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 3 at 14:24
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 3 at 14:24
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54007406%2freact-native-video-disables-touchableopacity-in-android%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
if it's positioned absolutely then it can create issues like that. Try to set for it higher z-index.
– Paweł Mikołajczuk
Jan 2 at 13:47
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 2 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 2 at 13:54