CODEWITHSUNDEEP
react-nativeflexbox
tomazahlin
tomazahlin

Reputation: 2167

Flexbox align images with different size to fill the area

I am using React Native's flexbox (not css flexbox). I am creating an image gallery and the first image has to be double the size, and the rest of the images smaller. Works good, but I have a problem that the third image is displayed in new row, instead where the blank space is.

Is it possible to achieve such behaviour with flex-box, so that the third image would be below the first small image?

I tried all combinations with aligning items, self aligning, flex directions, but no success. If needed I can provide a small example of the code which I already have.

Screenshot

Upvotes: 1

Views: 181

Answers (2)

Radek Czemerys
Radek Czemerys

Reputation: 1108

I don't have a fully responsive answer, but this may be helpful here:

<View style={{ flexDirection: 'column' }}>
        <View style={{ flexDirection: 'row' }}>
          {this.renderPhoto(0)}
          <View>
            {this.renderPhoto(1)}
            {this.renderPhoto(2)}
          </View>
        </View>
        <View style={{ flexDirection: 'row' }}>
          {render rest...}
        </View>
</View>

Upvotes: 2

stereodenis
stereodenis

Reputation: 3745

Try this component. Maybe it will help you https://xudafeng.github.io/autoresponsive-react/

Upvotes: 1

Related Questions