CODEWITHSUNDEEP
react-native
rnn
rnn

Reputation: 2563

Items in view go out of screen

I put images to View with .map. But when I have add 5 items last image goes out of screen. because I give width:'25%' to view.

I want my images which are out of screen go next row. How could I do this ?

This is my method :

renderImages() {
 return images.map((items, key) => 
  {
      return (
            <View key={key} style={{ backgroundColor: items.renk, width: '22%', marginLeft: '3%', marginTop: '2%',alignItems: 'center' }}>
               <Image source={items.img} style={{ height: 60, width: 60 }} />
            </View>
      );
   }
    );
}

this is my render : 

 render() {
    return (
      <View> 

       <ScrollView style={{ flex: 1}}>
        <View style={{ flexDirection: 'row' }}>
          {this.renderImages()}
        </View>
       </ScrollView>

      </View>
    );
  }
}

Upvotes: 1

Views: 1596

Answers (1)

Mervzs
Mervzs

Reputation: 1154

Modify your code View component like this:

<View style={{ flexDirection: 'row', flexWrap:'wrap' }}>
          {this.renderImages()}
        </View>

also it is unecessary to set the style of scrollview to flex:1 if its not set into horizontal: true.

Upvotes: 1

Related Questions