CODEWITHSUNDEEP
reactjsreact-nativereact-native-iosnative-base
Syuzanna
Syuzanna

Reputation: 539

How do I render card items from array in NativeBase?

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?

Upvotes: 3

Views: 7181

Answers (4)

saeed eivazi
saeed eivazi

Reputation: 914

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>
  );

Upvotes: 0

HpDev
HpDev

Reputation: 2927

Here is an example that can correct your code. Below every this been used from NATIVE BASE 

 export default class DynamicListExample extends Component { 
     render() { 
      var items = ['Simon Mignolet','Nathaniel Clyne','Dejan']; 
     return ( 
       <Container>
        <Content>
          <List dataArray={items}
            renderRow={(item) =>
              <ListItem>
                **YOU CAN PUT YOUR HOLE CARD COMPONENT IN BETWEEN THESE LIST**
              </ListItem>
            }>
          </List>
        </Content>
      </Container>
    );
  }
}

Upvotes: 0

Rizal Sidik
Rizal Sidik

Reputation: 989

i have try your code, and that works in my device. but i have one example code if you want render card using array in native base, this is the code :

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

class CardsScreen extends Component {
  constructor(props) {
      super(props);
      this.state = {
        DATA : [
          { id: 1, title: 'Lorem ipsum dolor sit amet, everti rationibus his cu', views:'200', comments:'9', published:'4h ago', image: '../img/img1.jpeg' },

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

          { id: 3, title: 'Lorem ipsum dolor sit amet, everti rationibus hi', Views:'698', comments:'8', published:'14h ago', image: '../img/img1.jpeg' },
        ],
      }
  }
  render() {
    return (
      <Container>
        <Content>
        {this.state.DATA.map((item, index) => {
          return(
            <Card key={index} >
              <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>
      </Container>);
  }
}

AppRegistry.registerComponent('ExampleApps', () => CardsScreen);

Hope can help you :)

Upvotes: 2

Kapil Yadav
Kapil Yadav

Reputation: 790

class MyComponent extends Component {
  constructor() {
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(yourDataArray),
    };
  }

  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <card></card>}
      />
    );
  }
}

Use list View of react native with card layout within it.The below link will be helpful. http://facebook.github.io/react-native/releases/0.46/docs/listview.html#listview

Upvotes: 0

Related Questions