Within a row, I have two buttons with a padding of 20 between them, and they are only taking up the necessary width for the button text. The width remains constant!
Here is the code for the buttons:
<View style={styles.buttonContainer}>
<View style={{ paddingLeft: 20 }}>
<Button title={tick} style={styles.button} onPress color="tomato" />
</View>
<View style={{ paddingLeft: 20 }}>
<Button title="X" style={styles.button} onPress color="tomato" />
</View>
</View>
Below is the CSS for the buttons:
.buttonContainer {
flex: 1;
display: flex;
justify-content: flex-end;
}
.button {
width: 50px; // Their width doesn't change regardless of the value set here
height: 20px;
}