Во flexbox почему мои кнопки казались сжатыми?

Question

Почему кнопки, которые я создал, казались сжатыми, когда я использовал flexbox?

Есть ли способ сделать его среднего размера?

render () {
  const listItems = this.state.content.map((data) => {
    return (
      <View>
        <Card>
          <Text h5>{data.TITLE}</Text> 
          <Text h5>{data.CONTENT}</Text>

          <View style={styles.container}>
            <Button title="Edit" onPress={this.editAnnouncement} containerStyle={{marginLeft: 10, width: 120}} />
            <Button title="Delete" onPress={this.editAnnouncement} containerStyle={{marginRight: 10, width: 120}} />
          </View>
        </Card>
      </View>
    )
})

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    padding: 15,
  },
});

Answer 1

Я использовал flexBasis и установил его на 40

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    flexBasis: 40,
    paddingTop: 10,
    paddingBottom: 10,
  },
});