React Native Simple Card View Tutorial

3 min readMar 19, 2018

Hello everyone, this is my first React Native Tutorial. I want to share with you how to create dynamic Cards using NativeBase UI library.
First of all, React Native is a JavaScript code library developed by Facebook and Instagram for building user interfaces which targets mobile platforms Android and IOS which was released in 2013.

Native Base

NativeBase is a free and open source UI component library for ReactNative to build native mobile apps for iOS and Android platforms.

Install Native Base

First step allow us to work with NativeBase is to install the library packages in our project directory with the following command:

npm install native-base --save

If you are using CRNA CLI you just have to add expo vector icons to your project

npm install @expo/vector-icons --save

and load custom fonts that NativeBase use in your componentWillMount function :

async componentWillMount() {
  await Expo.Font.loadAsync({
    'Roboto': require('native-base/Fonts/Roboto.ttf'),
    'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
  });
}

Now we have all things set up correctly so let us start playing with some code

Basic Usage NativeBase Card

Before we start fetching data from news API , let’s discover the most basic way to use NativeBase Card.
First we have to import the element that we will use from NativeBase

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

Then we go inside our render method and we create one simple card

render() {
    return (
      <Container>
        <Header />
        <Content>
          <Card>
            <CardItem cardBody >
              <Image source={require('./images/example.jpg')} style= {{height: 200, width: null, flex: 1}}/>

           </CardItem>
           <CardItem>
             <Body>
               <Text>this is a simple card with image and title</Text>
             </Body>
           </CardItem>
         </Card>

Fetching Data From a remote URL inside Card

Occasionally we have static data in our applications, in most cases we need to display data from a remote URL, we may want to make requests from a Rest API. In this case we need to use Fetch that react native provide, So we will :

1- Create a function getData and we call it in ComponentDidMount
2- Set every card data and map it in a new array called display
3- Return our display array in render

   //...
    constructor() {
        super()
        this.state = {
            isLoading: false,
            data: [],
        };
    }

getData function :

getData() {
    const {page, seed} = this.state;
    this.setState({isLoading: true});
    const url = 'rest api url';
    return fetch(url)
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState({
                data: responseJson,
                isLoading: false,
            });
        })
        .catch((error) => {
            console.error(error);
        });

}

in componentDidMount() we check if there is any internet connection using NetInfo from react-native and then we call our getData function

componentDidMount() {
    NetInfo.isConnected.fetch().then(isConnected => {
        if (isConnected) {
            this.setState({isConnected: true})
            this.getData();
        } else {
            this.setState({
                isLoading: false
            })
        }
    })

}

mapping data :

//...
render() {
let display = this.state.data.map(function (NewsData, index) {
    return (
        <View key={NewsData.id}>
            <Card>
                <CardItem cardBody>
                    <Image source={{uri: NewsData.image}} style={{height: 200, width: null, flex: 1}}/>

                </CardItem>
                <CardItem>
                    <Body>
                    <Text>
                        {NewsData.titre}
                    </Text>
                    </Body>
                </CardItem>
            </Card>
        </View>
    )
});

displaying data :

return (
    <Container>
        <Header>
            <Left>
                <Button transparent>
                   <Icon name="menu"/>
                </Button>
            </Left>
            <Body>
            <Title>News</Title>
            <Right>
                <Button transparent><Icon name="refresh"/>                 </Button>  
            </Right>        
        </Header>
        <Content>
            {display}
        </Content>
    </Container>
)

After running the project this is the result :

i hope that you enjoyed this tutorial.

React Native Simple Card View Tutorial

Written by Ahmed Nehzi