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

[joohoyo]

[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 :(

[lacker]

Is top-level alert a thing? I didn't know that was a thing. I might be barking up the wrong tree but can you check is this a problem with TouchableOpacity, or is this a problem with the alert global?

[joohoyo]

It's not alert problem. I changed alert('onPress') to Alert.alert('onPress') with import {Alert} from 'react-native';. but the result is same. TouchableOpacity is not working. (It works Simulator)

Plus, if you can touch the screen fast, TouchableOpacity is working.

[hypatiah]

@joohoyo Did you test removing alert altogether to be sure it is regarding TouchableOpacity?

[joohoyo]

@hypatiah Yes. I removed alert and just write console.log, and it does not work still on device.
The problem is about position: 'absolute' thing, I guess.
When I put width: width, height: height in the styles.container, it works perfect.
I don't know what happened.

Here is test code(touch the view, change background color)

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

export default class ViewTest extends Component {
    constructor(props) {
        super(props);
        this.colorIndex = 0;
        this.state = {bgColor: COLORS[this.colorIndex]};
    }

    render() {
        return (
            <View style={styles.out}>
                <View style={styles.container}>
                    <TouchableOpacity onPress={this._changeBackground.bind(this)} >
                        <View style={[styles.background, {backgroundColor: this.state.bgColor}]}></View>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }

    _changeBackground() {
        this.setState({
            bgColor: COLORS[++this.colorIndex % COLORS.length],
        });

    }

}

const styles = StyleSheet.create({
    out: {
        position: 'absolute',
        top: 0,
        left: 0,
    },
    container: {
        position: 'absolute',
        // width: width,
        // height: height,
        top: 0,
    },
    background: {
        height: height,
        width: width,
        opacity: 0.7,
    },
});

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

[PressEsc]

i got the same issue

[mosesoak]

YES: this is an issue.

TouchableOpacity often (but not always) fails when using buttons that use position: 'absolute' on 6s when any pressure is applied during the touch.

This issue was first noticed here https://github.com/facebook/react-native/issues/3082, but I don't think it was understood that the problem is specific to TouchableOpacity.

TouchableWithoutFeedback does not exhibit the same bug.

[mosesoak]

^ React Native 0.38.0

The previous ticket was logged in August but I remember seeing this long ago, I think it's been in there a while and hasn't been noticed because it's specific to force-touch devices and React Native tends to be tested in the simulator more actively. Since there's not force-touch the bug doesn't exhibit on sim.

[mariabitsch]

I've got the same issue with a TouchableOpacity with {position: 'absolute'} on an iPhone 6S. It works in the simulator, and if you press along the edges of the component while running on device , the press event is triggered, but only occasionally and with some luck.

[albinhubsch]

Can confirm TouchableHighlight is also affected by this.

[albinhubsch]

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!

[dsp1589]

Am facing this issue in nexus 5x, Android 7.1.2. Any idea? I tried @albinhubsch solution, still not working.

render() {
return ( < ListView dataSource = {
this.state.dataSource
}
renderRow = {
(rowData) =>
underlayColor='#dddddd'>
{rowData} < /Text> } / > );
}

    rowPressed(rowData) {
      Alert.alert('hi','hello',[{text: 'OK', onPress: () => console.log('OK Pressed')},], { cancelable: false },);
}

[dsp1589]

Also note that, if i tap on left edge(30-45px from origin), its firing the event rowPressed.

[dsp1589]

https://youtu.be/RniFwTtMVqY

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[jesseditson]

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.

[Swolebrain]

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.

[and-and]

Have same issue on Iphones with force-touch and TouchableOpacity with position:absolute.

react-native: 0.46.4

[seacloud9]

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.

[torbjor]

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"

[partiellkorrekt]

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>

[batmanhit]

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?

[alejomendoza]

@dj-abe's solution worked for us in iphone 7, we had TouchableOpacity inside an absolutely positioned parent.

[IgorVanian]

@dj-abe That was it. Any explanation about this prop?

[cinder92]

same issue here, :(

[bbenchild]

my problem is View with style(position:'absolute') inside of the TouchableOpacity, then sometimes the onPress event of TouchableOpacity does not work. Use TouchableHighlight fixed it.
"react-native": "0.51.1",