I have two buttons in a row separated by the padding of 20 and they have occupied the width needed for the title of the button. Their width doesn't change!

Code for 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>

CSS for buttons

buttonContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end'
},
button: {
    width: 50, // no matter what value I set here, their width doesn't changes
    height: 20,
},

I have two buttons in a row separated by the padding of 20 and they have occupied the width needed for the title of the button. Their width doesn't change!

Code for 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>

CSS for buttons

buttonContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end'
},
button: {
    width: 50, // no matter what value I set here, their width doesn't changes
    height: 20,
},

• javascript
• android
• css
• reactjs
• react-native

2 Answers 2

In React Native you need to wrap it with a View and give a width to the parent.

So in your example you should put:

<View style={{ paddingLeft: 20, width: 50, height: 20 }}>
    <Button title="X" style={styles.button} color="tomato" />
</View>

Make sure you wrap the button around with an extra View. The Button ponent only takes up as much width as the title is, no matter how much you set in the style

Also dont forget to add the onPress function, boolean (true) is an invalid prop

export default function App() {
    const tick = 'tick';
    return (
        <View style={styles.buttonContainer}>
            <View style={{ paddingLeft: 20 }}>
                <Button title={tick} style={styles.button} onPress color="tomato" />
            </View>

            <View style={styles.buttonStyle}>
                <Button title="X" style={styles.button} onPress color="tomato" />
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    buttonContainer: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-end',
    },
    buttonStyle: {
        paddingLeft: 20,
        width: 200, // this way it works
    },
    button: {
        height: 20,
    },
});