CODEWITHSUNDEEP
reactjsreact-nativeflexboxreact-native-flexbox
mikeb
mikeb

Reputation: 11267

React native elements list width is too narrow

I am using react-native-elements list from here: https://react-native-training.github.io/react-native-elements/API/lists/

When I render it with flex: 1 it is very narrow. When I render it with width: 400 it is OK.

Here are the styles:

container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
    },
    half: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        borderWidth: 2,
        borderColor: '#FF0000'
    },

Here is the list code:

     <View style={styles.container}>
        { babyList.length === 0 ? null :
            <View style={styles.half}>
                <List containerStyle={{flex: 1}}>
                    <Text style={styles.welcome}>
                        Select Baby
                    </Text>
                    {babyList.map((baby, id) => {
                        return <ListItem key={"bbbtn" + id}
                                         onPress={ (event) => selectBaby(baby) } title={"Baby: " + baby.name}/>
                    })}
                </List>
            </View>
        }
      </View>

Here is what it looks like with the above code:

Here is what it looks like if I set the containerStyle={{width: 400}}

I thought the flex: 1 would make it the max width? What do I need to do to make it take up the whole parent container?

Upvotes: 3

Views: 2801

Answers (1)

designorant
designorant

Reputation: 2401

This happens because you overwrite the default alignItems: 'stretch' with alignItems: 'center'. Remove it from your stylesheet and all elements will be stretched to fill all available space.

Here's your code on Snack: https://snack.expo.io/r121RGj1G

Upvotes: 7

Related Questions