React Native JSON Parsing and Helper Functions - Tutorial Part 2
Wall Script
Follow Me:
Sunday, April 02, 2017

React Native JSON Parsing and Helper Functions - Tutorial Part 2

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



Video Tutorial - React Native Parsing JSON Data


Create a New Component
React Native Template Design

appBody.js
Here super and componentDidMount are React builtin functions. Using super you can initialize state this value and componentDidMount is calls first.
import React, {Component} from 'react';
import {Textfrom 'react-native';
import {Content, Card, CardItem, Body} from 'native-base';
import AppBodyData from './appBodyData';

export default class AppBody extends Component {

   constructor(){
        super()
        this.state ={
            data:[]
        }
    }

    getData(){
       return fetch('https://www.thewallscript.com/blogfeed/javascript/10')
      .then((response) => response.json())
      .then((responseJson) => {
       this.setState({data: responseJson.feed.entry});
      })
      .catch((error) => {
        console.error(error);
      });

    }

    componentDidMount() {
        this.getData();
    }
    render() {
        return (
        <AppBodyData data = {this.state.data}/>
        );
    }
}

module.export = AppBody;

appBodyData.js
This component renders all of the JSON data titles.
import React, {Component} from 'react';
import {Textfrom 'react-native';
import { Content, Card, CardItem, Body, Left} from 'native-base';
export default class AppBodyData extends Component {

    render() {
        let articles = this.props.data.map(function (articleData, index) {
                return (
                  <Card>
                    <CardItem>
                        <Body>
                            <Text>
                                {articleData.title.$t}
                            </Text>
                        </Body>
                    </CardItem>
                </Card>
                )
            });

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

        );

    }
}
module.export = AppBodyData;

Installing React Packages
This JSON feed contains HTML and improper data, we need to install packages/plugins for improving this.

Time Ago
This package helps to convert timestamp to time ago text.
$npm install react-native-timeago --save

HTMLView
Binding HTML tags data to the component.
$npm install react-native-htmlview --save

Fit Image
For different mobile dimensions, you need to make images in responsive style.
$npm install react-native-fit-image --save

Helper Function

Create a file directory under src folder.
React Native Template Design

helpers.js
This file contains two functions, GetImage is filtering first image source from HTML content. ContentSnippet is displaying first 50 words.

export function GetImage(content){
    var myRegexp = new RegExp(/<img.*?src="(.*?)"/);
    var match = myRegexp.exec(content);
        if (match){
            return match[1];
         }
}

export function ContentSnippet(content){
     return content.split(/\s+/).slice(0, 30).join(" ")+"...";
}

Video Tutorial - React Native Helper/Injectable Functions



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.
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


2 comments:

Make in India