CODEWITHSUNDEEP
cssreact-nativeflexbox
Harish
Harish

Reputation: 510

Why does flexWrap: 'wrap' doesn't work in my React Native application?

<View style={{
  flex: 1,
  height: 1200,
  width: 200,
  alignItems: 'flex-start',
  flexWrap: 'wrap',
  flexDirection: 'column',
  justifyContent: 'center'
}}>
  <View style={{
    flex: 1,
    width: 100,
    height: 100,
    backgroundColor: 'powderblue'
  }}>
    <Image source={require('./assets/zodiac/Aries.svg.png')} style={{width: undefined, height: '100%', resizeMode: 'contain'}}/>
  </View>

  {/* 11 more similarly sized images in View containers */}

</View>

When the height property of the parent View is 1200, the following is the result:

views are stacked one below the other

But when the height is changed to 600, instead of wrapping around as it should because of the flexWrap: 'wrap' property, the child Views get squeezed to accommodate the new height.

when the views are squeezed to accommodate new height

Why does this happen?

Upvotes: 0

Views: 52

Answers (2)

Aashish Garg
Aashish Garg

Reputation: 46

The issue here is with how you have defined the style in the child view components

style={{
    flex: 1,
    width: 100,
    height: 100,
    backgroundColor: 'powderblue'
  }}

Replace this with

style={{
    width: 100,
    height: 100,
    backgroundColor: 'powderblue'
  }}

This should do the job for you. What happens when you define a flex for each of the child view components is it fits them within the parent view according to the relative flex values set, irrespective of what you set as the heights and width.

Upvotes: 1

pacy.eth
pacy.eth

Reputation: 176

When the height of the content is greater than the height of the Screen, always think to use ScrollVIew instead You for a better UI it's also better to use Dimension package like

import {Dimension} from 'react-native';
//////////
const HEIGHT_DEVICE = Dimension.get('window').height;
///////////

Then use this prop as you like

Upvotes: 0

Related Questions