CODEWITHSUNDEEP
cssreact-nativeflexbox
Boky
Boky

Reputation: 12054

Aligning items with flexbox in react native

I'm trying to align Views in React Native, and I want that every View is 50% of the screen. Something like :

enter image description here

My state is :

this.state = {
    companies: [
         {logo_url: require("../../../img/company_logos/ald.png")},
         {logo_url: require("../../../img/company_logos/arval.png")},
         {logo_url: require("../../../img/company_logos/businesslease.png")},
         {logo_url: require("../../../img/company_logos/dieterenusedcars.png")},
         {logo_url: require("../../../img/company_logos/psa.png")},
         {logo_url: require("../../../img/company_logos/remarketing_center.png")},
         {logo_url: require("../../../img/company_logos/vdfin.png")}
   ]
}

And then in the render method :

render(){
    return (
        <View style={{flex: 1, flexDirection: 'row'}}>
                    {this.state.companies.map(company => {
                        return (
                            <View style={{width: Dimensions.get('window').width * 0.5, height: 150}}>
                                <Image source={company.logo_url} style={{width: Dimensions.get('window').width * 0.5, height: 100}}/>
                            </View>
                        );
                    })}
                </View>
    )
}

But I see only first two logos.

All items are probably shown in one row instead of going to second row if there is no more place on the screen.

Any advice?

Upvotes: 1

Views: 445

Answers (1)

Boky
Boky

Reputation: 12054

In case somebody else has the same problem.

I solved it by adding flexWrap: "wrap" to the parent View 

<View style={{flex: 1, flexDirection: 'row', flexWrap: "wrap"}}>

Upvotes: 2

Related Questions