CODEWITHSUNDEEP
javascriptreactjsreact-nativeuser-interface
Hassan Shahzad
Hassan Shahzad

Reputation: 33

How to display cards in two columns in React Native?

I have this code that makes cards but it only displays three cards and does not display the fourth card and it does not display cards in 2 columns. Is there any way to change a code a bit so that it can display cards in 2 columns and display all cards? I have tried squeaking the code by changing Stylesheet.create with different options but due to lack of knowledge and experience, I cannot implement it.

import React from 'react'
import { Card, ListItem, Button, Icon } from 'react-native-elements';
import {ScrollView, StyleSheet, Text,Image, TouchableOpacity, View} from 'react-native';
import { Ionicons, AntDesign } from '@expo/vector-icons';
class App extends React.Component{
render(){
        return(
            <ScrollView>
            <View style = {styles.container}>
                <Card
                    image={{uri:('https://www.mrmunro.co.uk/wp-content/uploads/2018/08/Cavani-Tommy-Three-Piece-Suit-Worn.jpg')}} style ={styles.item}>
                    <Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
                        $299.99
                    </Text>
                    <AntDesign style={{flexDirection:'row', justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
                    <Text>
                        Grey Suit
                    </Text>
                </Card>
                <Card
                    image={{uri:('https://simages.ericdress.com/Upload/Image/2018/14/watermark/99e027f5-1e4f-4b77-93d2-827e0c2db2e7.jpg')}} style ={styles.item}>
                    <Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
                        $299.99
                    </Text>
                    <AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
                    <Text>
                        Grey Suit
                    </Text>
                </Card>
                <Card
                    image={{uri:('https://simages.ericdress.com/Upload/Image/2018/14/watermark/99e027f5-1e4f-4b77-93d2-827e0c2db2e7.jpg')}} style ={styles.item}>
                    <Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
                        $299.99
                    </Text>
                    <AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
                    <Text>
                        Grey Suit
                    </Text>
                </Card>
                <Card
                    image={{uri:('https://www.mrmunro.co.uk/wp-content/uploads/2018/08/Cavani-Tommy-Three-Piece-Suit-Worn.jpg')}} style ={styles.item}>
                    <Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
                        $299.99
                    </Text>
                    <AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
                    <Text>
                        Grey Suit
                    </Text>
                </Card>
                </View>
            </ScrollView>
        )
    }

}

export default App;

const styles = StyleSheet.create({
    container:{
          flexDirection: 'row',
          alignContent:'stretch',

    },
    item:{

      width: '50%'
    }
})

Upvotes: 3

Views: 7273

Answers (4)

Vijay Kahar
Vijay Kahar

Reputation: 1076

You can use flatlist instead.

Code:

<FlatList style={{margin:5}}
    data={this.state.items}
    numColumns={2} <-- you can change number of columns by changing this value
    keyExtractor={(item, index) => item.id }
    renderItem={(item) => 
        <Card /> <-- render your card component here
    }
/>

Upvotes: 8

Bruno Angeles
Bruno Angeles

Reputation: 51

container:{
      flexDirection: 'row',
      flexWrap: 'wrap',
},

Upvotes: 4

akhtarvahid
akhtarvahid

Reputation: 9769

You need to wrap your Card in two View parts

Changed code

<View style = {styles.container}>
               <View style ={styles.item}>
                <Card
                    image={{uri:('https://www.mrmunro.co.uk/wp-content/uploads/2018/08/Cavani-Tommy-Three-Piece-Suit-Worn.jpg')}}>
                    <Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
                        $299.99
                    </Text>
                    <AntDesign style={{flexDirection:'row', justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
                    <Text>
                        Grey Suit
                    </Text>
                </Card>
                <Card
                    image={{uri:('https://simages.ericdress.com/Upload/Image/2018/14/watermark/99e027f5-1e4f-4b77-93d2-827e0c2db2e7.jpg')}} style ={styles.item}>
                    <Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
                        $299.99
                    </Text>
                    <AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
                    <Text>
                        Grey Suit
                    </Text>
                </Card>
                </View>
                <View style ={styles.item}>  
                <Card
                    image={{uri:('https://simages.ericdress.com/Upload/Image/2018/14/watermark/99e027f5-1e4f-4b77-93d2-827e0c2db2e7.jpg')}}>
                    <Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
                        $299.99
                    </Text>
                    <AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
                    <Text>
                        Grey Suit
                    </Text>
                </Card>
                <Card
                    image={{uri:('https://www.mrmunro.co.uk/wp-content/uploads/2018/08/Cavani-Tommy-Three-Piece-Suit-Worn.jpg')}} style ={styles.item}>
                    <Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
                        $299.99
                    </Text>
                    <AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
                    <Text>
                        Grey Suit
                    </Text>
                </Card>
                </View>
                </View>

Upvotes: 1

Ravi
Ravi

Reputation: 35569

Simplest way is to divide it in 2 views if you have limited/fixed number of cards

<View style={{flexDirection: 'column'}}>
    <View style={{flexDirection: 'row'}}>
        <Card1 style={{flex:1}}/>
        <Card2 style={{flex:1}}/>
    </View>
    <View style={{flexDirection: 'row'}}>
        <Card3 style={{flex:1}}/>
        <Card4 style={{flex:1}}/>
    </View>
<View>

Upvotes: 1

Related Questions