-1

Code for mapping data from server:

{
  this.state.items.map((item, key) => (

    <View style= { styles.row } >    
    <View style={ [styles.inputWrap, styles.inputWrap2]} >
    <TouchableOpacity onPress={ this.FunctionToOpenitempage } >
    <Card>
    <CardItem>
    <Body>
    <Image style={{ resizeMode: 'cover' }} source={{ 
      uri: ("http://suburbiya.com/assets/files/item_gallery/" + item.banner_pic)
           .replace(" ", "%20") 
       }} style = { styles.logo1 } />
      <Text style={ styles.Text2 }>
        { item.price }
        < /Text>
        < Text style = { styles.Text2 } >

          { item.name }
          < /Text>
          < /Body>
          < /CardItem></Card >
          </TouchableOpacity></View > 
    </View>          
  ))}

Styles coding:

row: {
    flexDirection: "row",
    flexWrap:"wrap",

  inputWrap: {
    flex:1,
    borderColor: "#cccccc",
    borderBottomWidth: 0,
    marginBottom: 0,
    marginLeft: 2,
    justifyContent:"space-between",
  },
 }

its showing only one card in a row

Dacre Denny
  • 29,664
  • 5
  • 45
  • 65
Nazeer c s
  • 15
  • 1
  • 8

1 Answers1

0

if you wanna align two cards in a row ,set this style in each card style:

cardstyle:{flex:1,height:50}
Mojtaba Moshfeghi far
  • 571
  • 1
  • 5
  • 20