CODEWITHSUNDEEP
cssreact-nativeflexbox
chubbychu
chubbychu

Reputation: 343

React Native: Flex: 1 does not fill width of parent

I'm using ListItem imported from native-base. ListItem is red and it's child View is yellow. As you can see from the screenshot, View style does not take entire width of ListItem, despite having a flex: 1. How can I make it so that View take entire width of ListItem?

See image here

 <List>
<ListItem style={[styles.listitem, { backgroundColor: "red" }]}>
    <View
        style={{
            flex: 1,
            flexDirection: "column",
            backgroundColor: "yellow"
        }}
    >
        <Text style={styles.timeInfoHeader}>{this.props.totalUsage}</Text>
        <Text style={styles.timeInfoSubHeader}>Total (hrs)</Text>
    </View>
</ListItem>
</List>;

Stylesheet: 

  timeInfoHeader: {
    fontSize: 40,
    color: 'rgba(45, 145, 176, 100)',
    textAlign: 'center'
  },

  timeInfoSubHeader: {
    fontSize: 12,
    color: 'rgba(209, 209, 209, 100)',
    paddingBottom: 4,
    marginBottom: 4,
    textAlign: 'center'
  },

  listitem: {
    width: '100%',
    marginLeft: 0
  },

Upvotes: 6

Views: 22602

Answers (5)

CubeDev
CubeDev

Reputation: 155

You can try this - flexGrow: 1

Hope it helped someone =)

Upvotes: 4

omprakash8080
omprakash8080

Reputation: 1391

Try this code snippet:

<ScrollView contentContainerStyle={{ flexGrow: 1 }} >
<View style={{ flex: 1 }} >
...
</View >
</ScrollView >

Upvotes: 2

Kirk Douglas Jr
Kirk Douglas Jr

Reputation: 608

What causes this is the textAlign style on the timeInfoHeader. So you can either remove the textAlign style from timeInfoHeader or add a width: "100%" to listitem. Just glancing at your code, it seems you might be better off adding the textAlign to the child View of timeInfoHeader.

Upvotes: 0

akshay
akshay

Reputation: 517

Try this

listitem: {
   marginLeft: 0,
   flex:1,
   paddingRight: 0
}

enter image description here

Upvotes: 4

AymericM
AymericM

Reputation: 101

Just add width: '100%' on your view's styles.

Upvotes: 4

Related Questions