react-native: TouchableOpacity is not working properly on 6s, 6s plus in certain cases

[only 6s, 6s plus problem]

Since I updated my app to 0.35, TouchableOpacity is not working properly on 6s, 6s plus device. (Maybe first touch is working or not) But it works perfectly in simulator. And it works react native 0.25.1 too.

Steps to Reproduce / Code Snippets

Here is test code.

import React, { Component } from 'react';
import {AppRegistry, StyleSheet, View, TouchableOpacity} from 'react-native';
const {width, height} = require('Dimensions').get('window');

export default class ViewTest extends Component {
  render() {
    return (
        <View style={styles.out}>
            <View style={styles.container}>
                <TouchableOpacity onPress={() => {alert('onPress')}} >
                    <View style={styles.background}></View>
                </TouchableOpacity>
            </View>
        </View>
    );
  }
}

const styles = StyleSheet.create({
    out: {
        position: 'absolute',
        top: 0,
        left: 0,
    },

    container: {
        position: 'absolute',
        top: 0,
    },

    background: {
        height: height,
        width: width,
        opacity: 0.7,
        backgroundColor: '#000000'
    },
});

AppRegistry.registerComponent('ViewTest', () => ViewTest);

Additional Information

React Native version : [0.35]
Platform : iOS
Operating System : [macOS]

please help me 😦

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 11
Comments: 25 (2 by maintainers)

Most upvoted comments

i got the same issue

+22

PressEsc on Oct 26, 2016

There is a workaround which I would recommend as long as the TouchableOpacity is not inside a scrollView:

Since TouchableOpacity uses the TouchableMixin, you can add the Property rejectResponderTermination to it. After that it works fine inside an absolutely positioned parent.

Just change your code from this:

<TouchableOpacity onPress={() => {alert('onPress')}} >[...]</TouchableOpacity>

to this:

<TouchableOpacity onPress={() => {alert('onPress')}} rejectResponderTermination>[...]</TouchableOpacity>

+15

partiellkorrekt on Sep 4, 2017

I also have this kind of problem and @dj-abe 's solution is also not working for me.

<TouchableOpacity style={styles.genderInnerCell} onPress={this.onGender}>
    <Image source={Images.female} resizeMode={'contain'} style={{flex:1}}/>
</TouchableOpacity>

It’s really weird. It works well in the simulator and only on devices, it doesn’t work.

Has anyone found the solution?

batmanhit on Sep 7, 2017

I’m still experiencing this issue, and my causes look identical to the reported issue:

only repros on larger phones, works as expected on 5s
only happens when using position absolute
tap target is not completely gone, but is just the bottom half or so of the touchable target.

Not sure closing issues because of lack of activity makes much sense when there have been no vendor side updates. I’m sure it makes the issue count look nice, but React Native is now the only project where “closed” doesn’t mean anything when searching the issue list.

I’d like to request that this issue be re-opened until a fix lands for it.

jesseditson on Aug 1, 2017

After a lot of time spent on this I was quite surprised when i successfully solved this by simply adding hitSlop={{top: 12, left: 36, bottom: 0, right: 0}}to my touchable! I have no idea why but now my touchables are working in my project!

albinhubsch on Jan 17, 2017

This is happening for me as well, iPhone 7. What I’m seeing is a touchable inside a view works fine, with the position of the view as absolute. But a touchable inside views nested too deeply seems to break it. I thought at first it was the width and height issue, but that doesn’t resolve the issue. I added width and height specifically to each layer. Next I tried adding background colors/borders to each layer, to confirm everything has the expected values. Finally, I’m able to confirm this by removing the position:"absolute" in the top layer view and everything works as expected. Without position:"absolute", The math for my transitions will have to be reworked. Another solution I’ll try is putting the touchables in another layer above the absolutely positions views, but this a hack and certainly won’t be a good practice.

I also agree with @jesseditson’s description, except for

tap target is not completely gone, but is just the bottom half or so of the touchable target.

In my case the tap target is not gone at all, just not registering a click event.

“react”: “16.0.0-alpha.12” “react-native”: “^0.47.2”

torbjor on Sep 2, 2017

Can confirm TouchableHighlight is also affected by this.

albinhubsch on Jan 9, 2017

Stick a fork in it this is a total pain so the solution is: iOS: has to have the following: height, width, and zIndex. Android: height, width seem to work here zIndex is ok to add.

Debugging it might help to use background color to see how items are stacked 😉

<View  ref='centerAvtar' style={{position: 'absolute', left: (Metrics.screenWidth / 2 - 48), top: (Metrics.screenHeight / 2 - 48), width:100, height:100}} >
          <Image resizeMode={Image.resizeMode.contain} style={[ApplicationStyles.roundedImage]}
                 source={(this.state.patient_avatarImage === null ? require('../Images/akili/avatar.png') : this.state.patient_avatarImage)} >
          </Image>
          <Text>{this.state.patient_given_name}</Text>
        </View>
        <TouchableOpacity onPress={this.onPushPatient.bind(this)} style={{position: 'absolute', left: (Metrics.screenWidth / 2 - 48), top: (Metrics.screenHeight / 2 - 48), width:100, height:100,  zIndex:2}} />

Also if you are still having issues it may be beneficial to also apply colors to the containing view. For example if you have a view with flex:1 but and its child components are falling out side that view because they are absolutely positioned you will not be able to click on them. Adding backgroundColors to your view will help you alleviate this issue.

seacloud9 on Aug 15, 2017

Still having this issue with this, @jesseditson’s description is spot on. Having to add huge padding to buttons so they’re clickable is not fun.

Swolebrain on Aug 12, 2017