TouchableHighlight activates wrong button when next to each other

[ghost]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14
      CPU: x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
      Memory: 838.79 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 9.11.1 - /usr/local/bin/node
      npm: 5.6.0 - /usr/local/bin/npm
      Watchman: 4.9.1 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
    IDEs:
      Xcode: 9.4/9F1027a - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.5.0 => 16.5.0 
      react-native: ^0.57.1 => 0.57.1 
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Description

I have a React-Native view where I have to buttons side by side from each other.

What is happening is when I click Back, it does what it is supposed to do: console.log(-1)

However, when I click on Next, the console.log of "Back" is being activated almost 70% of the time and only 30% of the time it shows a console.log(+1)

I have no idea why this is happening. Here is a screenshot of what is rendered. Left side is what you see from the code below and the right side is what you see if I add a red border to styles.footerButtonContainer.

footerButtonContainer: {
  flex: 1,
  flexWrap: 'wrap', 
  alignItems: 'flex-start', 
  justifyContent: 'center',
  flexDirection:'row',
  borderWidth:1,
  borderColor:"red"
},

What is even weirder is, if I add this border, then the above issue completely disappears and the buttons act as they are supposed do.

Reproducible Demo

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: "#ecf0f1",
    paddingBottom:30
  },
  footer: {
    position: 'absolute',
    left: 0,
    bottom: 0,
    width:"100%",
    height:55,
    backgroundColor:"#fff",
  },
  footerButtonContainer: {
    flex: 1,
    flexWrap: 'wrap', 
    alignItems: 'flex-start', 
    justifyContent: 'center',
    flexDirection:'row',
  },
  footerItem: {
    flex:1,
    flexWrap: 'wrap', 
    alignItems: 'center', 
    justifyContent: 'center',
    flexDirection:'row',
    borderWidth:1,
    borderColor:"#F1F0F4",
    height:55,
    width:"100%"
  },
  footerIcon: { marginTop:-5 },
  footerText: { marginTop:-5, textAlign:"center", fontSize:24, fontWeight:"400", color:"#6B6D77", borderWidth:0, borderColor:"red" }
});



render() {

  return (

    <View style={{ height:"100%" }}>

      <ScrollView ref="scrollWindow" style={{ paddingTop:"5%", marginBottom:56}}>
        <View style={styles.container}>
          


        </View>
      </ScrollView>

      <View style={styles.footer}>

        <View style={{height:5, backgroundColor:"#E8E8EA", width: "25%"}} />

        <View style={styles.footerButtonContainer}>

          <TouchableHighlight underlayColor='#fff' style={styles.footerButtonContainer} onPress={() => { 
            
            console.log("-1");

          } }>
            <View style={styles.footerItem}>
              <Icon containerStyle={styles.footerIcon} name="chevron-left" color="#000" type="solid" size={24} />
              <Text style={[styles.footerText, {marginLeft: 10}]}>Back</Text>
            </View>
          </TouchableHighlight>

          <TouchableHighlight underlayColor='#fff' style={styles.footerButtonContainer} onPress={() => { 

            console.log("+1");

          }}>
            <View style={styles.footerItem}>
              <Text style={[styles.footerText, {marginRight: 10, color:"#000"}]}>Next</Text>
              <Icon containerStyle={styles.footerIcon} name="chevron-right" color="#000" type="solid" size={24} />
            </View>
          </TouchableHighlight>

        </View>

    </View>
  );
}

[jonsamp]

Hey @bgold0, I tried to reproduce this with your code here and was unable to: https://snack.expo.io/@jonsamp/touchable-highlight-repro

It looks like you're using react native version 0.57.1, but the last stable release is 0.57.0. I wonder if this commit broke something in the upcoming releases: 74c2414

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[hwde]

I just upgraded a project from RN 0.54 to 0.57.8 and noticed a similar issue. We have a FlatList with rows, each consist of 5 children: T-s-T-s-T.

T=TouchableHighlight which wraps a react-native-circular-progress and an Image
s=simple View (not touchable).

With 0.54 it works very well, but with 0.57.8 the "right-most" TouchableHighlight "catches" the touch'es from the left an middle one.

I tried to strip this down to a simple demo at snack.expo.io but then I noticed the issue only exists when I used AnimatedCircularProgress or CircularProgress. As soon I just use an Image inside the TouchableHighlight it works well.

I would love to share an example, but snack.expo.io doesn't support react-native-circular-progress, no?.

[hwde]

I can add the following info's:

• the issue only exists on iOS, Android is fine
• it is not related to FlatList, when I remove the FlatList and display only 1 row instead, the bug still happens
• view hierarchy (captured with XCode) seems to be fine, children layouted perfect.
• not related to TouchableHighlight, same happens when I use TouchableOpacity

[hwde]

Sorry for spam'ing ... just try to figure it down: A click to the "upper half" of an image seems always behave correct, a click to the lower "half" triggers the wrong touchable: This snippet behaves wrong (i.e. click on the "lower half" of the cross image in the center log "3" in console):

<View style={{padding:10}}>
  <View style={{padding:0,flexDirection:'row',justifyContent: 'space-between'}}>

    <TouchableOpacity onPress={ ()=>console.log(1) }>
      <CircularProgress 
            style={{width:70,height:70}}
             size={70}
            width={3}
             fill={180}
          linecap="round"
        tintColor={'#aaa'}
  backgroundColor="#555">
  {
    (fill) => (
        <Image style={{width:70,height:70}} source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}></Image>
    )
  }
      </CircularProgress>
    </TouchableOpacity>

    <TouchableOpacity onPress={ ()=>console.log(2) }>
      <Image style={{width:70,height:70}} source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}></Image>
    </TouchableOpacity>

    <TouchableOpacity onPress={ ()=>console.log(3) }>
      <CircularProgress 
            style={{width:70,height:70}}
             size={70}
            width={3}
             fill={180}
          linecap="round"
        tintColor={'#aaa'}
  backgroundColor="#555">
  {
    (fill) => (
        <Image style={{width:70,height:70}} source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}></Image>
    )
  }
      </CircularProgress>
    </TouchableOpacity>
            
  </View>
</View>

and this one behaves correct:

<View style={{padding:10}}>
  <View style={{padding:0,flexDirection:'row',justifyContent: 'space-between'}}>

    <TouchableOpacity onPress={ ()=>console.log(1) }>
      <Image style={{width:70,height:70}} source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}></Image>
    </TouchableOpacity>

    <TouchableOpacity onPress={ ()=>console.log(2) }>
      <Image style={{width:70,height:70}} source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}></Image>
    </TouchableOpacity>

    <TouchableOpacity onPress={ ()=>console.log(3) }>
      <Image style={{width:70,height:70}} source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}></Image>
    </TouchableOpacity>

  </View>
</View>

So I assume, the error is related to the rendering of CircularProgress when added like this:

<CircularProgress 
          style={{width:70,height:70}}
           size={70}
          width={3}
           fill={180}
        linecap="round"
      tintColor={'#aaa'}
backgroundColor="#555">
  { (fill) => ( ... my content ... ) }

CircularProgress isn't a native module, so hopefully this is the correct place to submit this error.

[annie-elequin]

I am also experiencing this problem. I just have four TouchableHighlights in a component, their child is one View whose child is a react-native-svg SVG component.

When you click one of the Touchables, one of 3 things will happen:

• It clicks the correct one
• nothing happens
• it clicks one of the other Touchable buttons around it (sometimes two hops away from it)

I am not using CircularProgress, though.

[doublex]

I am experience both (depending on flex): either a click on the lower half or the the upper half works.

[doublex]

Is there a known workaround?
No CircularProgress.

[teamdraftbox]

Hi guys even i am facing the same issue, while placing, multiple touchableOpacity icons beside each other, it activates the wrong icon.This is not seen when used with text or touchableOpacity icon when placed one above the other. Pls provide a work around

[kelset]

Hey everyone, can anyone provide a repro on 0.59?

[teamdraftbox]

I was able to find the solution for my problem,First try touchableOpacity with Icon from react native element library ,and rm -rf node_modules ,npm install, clean build in xcode and build your app again

                    <View key={id} >
                               <TouchableOpacity style={Styles.iconBG} onPress={() => { 
                               selectedIdentityType(identity.type); }}>
                               <Icon
                               name={identity.iconName}
                               type='font-awesome'
                               color={identity.iconColor}
                               onPress={() => { selectedIdentityType(identity.type); }} />
                               <Text style={[Styles.icontText,{color:"#3E3E3E"}]}>{identity.type}</Text>
                             </TouchableOpacity>
                           </View>`

The Icon in imported from react native elements

[doublex]

I think this is an issue with RN 0.56

[kelset]

@teamdraftbox are you using RN 0.59?

[teamdraftbox]

iam using RN0.57

[kelset]

Ok, but we need to know if it's an issue on the latest stable - can you please provide a repro?

[doublex]

RN 0.59 works, 0.56 fails

[satya164]

Closing since this seems to be fixed in the latest RN version.