React-Native TouchableHighlight activates wrong button when next to each other

Question

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.

---

Code

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>
    </View>
  );
}

Answer 1

Your code misses the last close view tag (</View>). I run your code in the expo and seems that it is working correctly:

https://snack.expo.io/HJBsAIOFQ