How do I render card items from array in NativeBase?

user_8345431 0
Viewed 7015

My code is not working. I would like to render cards from the array of objects. However, it seems quite hard with NativeBase.

CardsScreen.js:

import React, { Component } from 'react';
import { Image } from 'react-native';
import { Container, Header, Content, Card, CardItem, Thumbnail, Text, Button, Icon, Left, Body, Right } from 'native-base';

class CardsScreen extends Component {
  props:Props;


  DATA = [
 { id: 1, title: 'Lorem ipsum dolor sit amet, everti rationibus his cu', views:'200', comments:'9', published:'4h ago' image: require('../img/img1.jpeg') },

 { id: 2, title: 'Lorem ipsum dolor sit amet, everti rationibus his ', Views:'700', comments:'16', published:'9h ago' image: require ('../img/img2.jpg') },

 { id: 3, title: 'Lorem ipsum dolor sit amet, everti rationibus hi', Views:'698', comments:'8', published:'14h ago' image:require ('../img/img3.jpeg') },

 ];

  render() {

    let renderpostTypes = () => {

      let post = [];


      this.DATA.map( ( item )=> {

        post.push(

          <Content  key={item.id}>

             <Card>
            <CardItem>
              <Left>
                <Thumbnail source={require(item.image)} />
                <Body>
                  <Text>item.title</Text>
                  <Text note>GeekyAnts</Text>
                </Body>
              </Left>
            </CardItem>
            <CardItem cardBody>
              <Image source={require(item.image)} style={{height: 200, width: null, flex: 1}}/>
            </CardItem>
            <CardItem>
              <Left>
                <Button transparent>
                  <Icon active name="thumbs-up" />
                  <Text>item.views</Text>
                </Button>
              </Left>
              <Body>
                <Button transparent>
                  <Icon active name="chatbubbles" />
                  <Text>item.comments</Text>
                </Button>
              </Body>
              <Right>
                <Text>item.published</Text>
              </Right>
            </CardItem>
          </Card>
          </Content>
        );
      } );

      return post;
    };

    return (
      <Container>

        <Content >
          {renderpostTypes()}
        </Content>
      </Container>);
  }
}
export default CardsScreen;

How can I make it work and render the cards from that array of objects? Is there any example which solves this problem?

native-base react-native-ios react-native reactjs
4 Answers

Here is an example such as your code sample that used native base and handle this issue.

const result = this.props.articles.map((item, index) => (
    <Card key={index}>
      <CardItem header bordered>
        <Text>{item.title}</Text>
      </CardItem>
      <CardItem bordered>
        <Body>
          <Text>{item.body}</Text>
        </Body>
      </CardItem>
      <CardItem footer bordered>
        <Text>GeekyAnts</Text>
      </CardItem>
    </Card>
  ));

  return (
    <Container>
      <Content>{result}</Content>
    </Container>
  );
user_64987920
Related