TouchableHighlight activates wrong button when next to each other

• 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>
  );
}

[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

[satya164]

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