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