React Native JSON Parsing and Helper Functions – Tutorial Part 2

This was originally published on link to post

This is the continuation of previous article Getting started with React Native Template Design – Tutorial Part I. Today’s article and video tutorial explains how to parse and render the json data using some of the best React Native packages. It explains how to make ajax calls using fetch. Fetch is the networking API, which is chosen by React Native to get the JSON data and render it in the page. I hope embedded videos with blog posts are more advantageous for you to learn. I appreciate to take any feedback if you have, so that I can make it better.
React Native Template Design
React Native Blog AppDownload this project on Github
Video Tutorial – React Native Parsing JSON Data

appBodyData.js
Final Code with all of the implementations.

import React, {Component} from ‘react‘;
import {Textfrom ‘react-native‘;
import HTMLView from ‘react-native-htmlview’;
import TimeAgo from ‘react-native-timeago’;
import FitImage from ‘react-native-fit-image’;
import {GetImage, ContentSnippet} from ‘../helpers/helpers‘;
import {Content, Card, CardItem, Body, Left, Thumbnail, Button, Icon} from ‘native-base‘;
export default class AppBodyData extends Component {

    render() {
        let articles = this.props.data.map(function (articleData, index) {
                return (
                    <Card>
                        <CardItem>
                            <Left>
 <Thumbnail source={require(‘../img/SrinivasTamada.png’)}/>
                                <Body>
                                     <Text>{articleData.title.$t}</Text>
                                </Body>
                            </Left>
                        </CardItem>
                        <CardItem>
<FitImage source={{uri: GetImage(articleData.content.$t)}}/>
                        </CardItem>
                        <CardItem content>
       
<HTMLView value={ContentSnippet(articleData.content.$t)}/>
                        </CardItem>
                        <CardItem>
                            <Button transparent>
                                <Icon active name=”time”/>
                                <Text>
<TimeAgo time={articleData.published.$t}/>
                               </Text>
                            </Button>
                            <Button transparent>
                                <Icon active name=”chatbubbles”/>
                                <Text>
                               {articleData.thr$total.$t} Comments
                                </Text>
                            </Button>
                        </CardItem>
                    </Card>
                )
            });

        return (
            <Content>
                {articles}
            </Content>
        );

    }
}
module.export = AppBodyData;

Part 3: React Native Routing and Navigation.

srinivas.tamada@gmail.com Srinivas Tamada

Leave a Reply

Your email address will not be published. Required fields are marked *