CODEWITHSUNDEEP
react-native
Segun Moses
Segun Moses

Reputation: 21

React native Card horizontal scrollView and/or FlatList

Good day I've been trying to create a scroll for my Card which contains a 4 grid of Images. The Card is fine but the scrollView makes everything horizontal Do you suggest I import Card from React-Native-element?

` {

 import {Card} from 'react-native-elements'
 export default class App extends Component{
 render(){
    return(
             <ScrollView horizontal={true}>
                         <Card  >

                          {
                                <View style={styles.card}>....</View>
                              }
                         </Card>
                      </ScrollView>
      );
         }
           }

`

Upvotes: 2

Views: 4948

Answers (1)

Yogaraj Saravanan
Yogaraj Saravanan

Reputation: 443

What I understand from your question is, you have multiple images and you need to arrange 4 images in a row then wrap and again 4 in the next row so on and so forth.

So I suggest flatlist. Try the below code,

renderCard = item => {
  <Card image={item} />
}

render() {
  <FlatList
    data={this.state.data}
    renderItem={(item) => this.renderCard(item)}
    horizontal={false}
    noOfColumns={4}
  />
}

Upvotes: 2

Related Questions