react-native-netclient

react-native-netclient

A network library which provides the most fastest & efficient way to handle the HTTP request and response. It acts like a rest client and supports on both ios & android. It uses the core fetch react native API. This library follows the oops standard for accessing javascript objects. User-friendly API that allows you to maintain your API code neat and would be useful for maintenance.

• Getting Started
• Example
• Documentation
• References

Getting Started

1. Install npm i react-native-netclient --save

2. Import network components

import {
  Request,
  Response,
  RNETWORK,
} from 'react-native-netclient;

3. Create the request object

let request = new Request('http://demo9062349.mockable.io/country');
    request.addHeaders({
      'Content-Type': 'application/json',
      'Accept-Encoding': '*',
    });//To add multiple headers
    request.setQueryParams({
      code : 'US'
    });//To set query params

4. Make the API request

    RNETWORK.get(request, () => {
      // Pre execute call back
      //This will be called before making API call
      //Show the loader here
    }, (response: Response) =>{
      // Post execute call back
      // Success and Failure resposne in same callback
      //Check for error then process
      if(response.getError()){
        alert(response.getError().message);
      }else{
        alert(response.getBodyString());
      }
    });

Example

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ScrollView,
  Button,
} from 'react-native';

import {
  Request,
  Response,
  RNETWORK,
} from 'react-native-netclient';

export default class RNETWORKExample extends Component {
  render() {
    let jsonData = {
      'name': 'XXXXXX',
      'city': 'YYYYYY'
    };
    return (
      <View style={styles.container}>
        <ScrollView style={{flex:1, padding: 16}}>

          <Text style={styles.welcome}>
            Network Library Example
          </Text>

          <Text style={styles.title}>
            Get Method Example
          </Text>
          <Text style={styles.label}>
             http://demo9062349.mockable.io/country
          </Text>

          <View style={{marginTop: 16}} >
            <Button onPress={()=>{this.getRequestExample()}}
              title="Execute"
              color="#841584"
              >

            </Button>
          </View>

          <Text style={styles.title}>
            Get Method With QueryParams Example
          </Text>
          <Text style={styles.label}>
             http://demo9062349.mockable.io/country?code=US
          </Text>

          <View style={{marginTop: 16}} >
            <Button onPress={()=>{this.getRequestWithQueryParamsExample()}}
              title="Execute"
              color="#841584"
              >

            </Button>
          </View>


          <Text style={styles.title}>
            Post Method JSON Data Example
          </Text>
          <Text style={styles.label}>
             {
               "http://demo9062349.mockable.io/postJsonData" + "\n\n" + JSON.stringify(jsonData)
             }
          </Text>

          <View style={{marginTop: 16}} >
            <Button onPress={()=>{this.postJsonDataExample()}}
              title="Execute"
              color="#841584"
              >

            </Button>
          </View>

          <Text style={styles.title}>
            Post Method Form Data Example
          </Text>
          <Text style={styles.label}>
            {
              "http://demo9062349.mockable.io/postFormData" + "\n\n'name=XXXXXX&city=YYYYYY'"
            }
          </Text>

          <View style={{marginTop: 16}} >
            <Button onPress={()=>{this.postFormDataExample()}}
              title="Execute"
              color="#841584"
              >

            </Button>
          </View>


          <Text style={styles.title}>
            Post Method String Data Example
          </Text>
          <Text style={styles.label}>
             http://demo9062349.mockable.io/postStringData
          </Text>

          <View style={{marginTop: 16}} >
            <Button onPress={()=>{this.postStringDataExample()}}
              title="Execute"
              color="#841584"
              >

            </Button>
          </View>

          <View style={{height:200}}></View>


        </ScrollView>

      </View>
    );
  }

  getRequestExample() {
    let request = new Request('http://demo9062349.mockable.io/country');
    request.addHeader('Content-Type', 'application/json');  //To add single header
    RNETWORK.get(request, () => {
      // Pre execute call back
      //This will be called before making API call
      //Show the loader here
    }, (response: Response) =>{
      // Post execute call back
      // Success and Failure resposne in same callback
      //Check for error then process
      if(response.getError()){
        alert(response.getError().message);
      }else{
        alert(response.getBodyString());
      }

    });
  }

  getRequestWithQueryParamsExample() {
    let request = new Request('http://demo9062349.mockable.io/country');
    request.addHeaders({
      'Content-Type': 'application/json',
      'Accept-Encoding': '*',
    });//To add multiple headers
    request.setQueryParams({
      code : 'US'
    });//To set query params
    RNETWORK.get(request, () => {
      // Pre execute call back
      //This will be called before making API call
      //Show the loader here
    }, (response: Response) =>{
      // Post execute call back
      // Success and Failure resposne in same callback
      //Check for error then process
      if(response.getError()){
        alert(response.getError().message);
      }else{
        alert(response.getBodyString());
      }
    });
  }

  postJsonDataExample() {
    let request = new Request('http://demo9062349.mockable.io/postJsonData');
    request.addHeader('Content-Type', 'application/json');  //To add single header
    request.setJsonData({
      name: 'XXXXXX',
      city: 'YYYYYY'
    }); //To set json data in request object
    RNETWORK.post(request, () => {
      // Pre execute call back
      //This will be called before making API call
      //Show the loader here
    }, (response: Response) =>{
      // Post execute call back
      // Success and Failure resposne in same callback
      //Check for error then process
      if(response.getError()){
        alert(response.getError().message);
      }else{
        alert(response.getBodyString());
      }

    });
  }

  postFormDataExample() {
    let request = new Request('http://demo9062349.mockable.io/postFormData');
    request.addHeader('Content-Type', 'application/x-www-form-urlencoded');  //To add single header
    request.setFormData({
      name: 'XXXXXX',
      city: 'YYYYYY'
    }); //To set form data in request object
    RNETWORK.post(request, () => {
      // Pre execute call back
      //This will be called before making API call
      //Show the loader here
    }, (response: Response) =>{
      // Post execute call back
      // Success and Failure resposne in same callback
      //Check for error then process
      if(response.getError()){
        alert(response.getError().message);
      }else{
        alert(response.getBodyString());
      }

    });
  }

  postStringDataExample() {
    let request = new Request('http://demo9062349.mockable.io/postStringData');
    request.setStringData("XXXXXX"); //To set string data in request object
    RNETWORK.post(request, () => {
      // Pre execute call back
      //This will be called before making API call
      //Show the loader here
    }, (response: Response) =>{
      // Post execute call back
      // Success and Failure resposne in same callback
      //Check for error then process
      if(response.getError()){
        alert(response.getError().message);
      }else{
        alert(response.getBodyString());
      }
    });
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    fontWeight: 'bold'
  },
  label: {
    fontSize: 16,
    fontSize: 17,
    marginTop: 10,
  },
  title: {
    marginTop: 10,
    fontWeight: 'bold'
  },
});

AppRegistry.registerComponent('RNETWORK', () => RNETWORKExample);

Documentation

Core Classes

• Request (Used to build the request)
• Response (Provides the API response in standard format)
• RNETWORK (Used to handle the API request methods and hit the API)

1. Request Class

Constructor This class takes an URL string as a constructor params.

Ex) new Request("http://demo9062349.mockable.io/country")

Instance Methods

Methods	Params	Param Types	Usage	Example
setUrl	url	string	API url(Without the query params)	request.setUrl(http://demo9062349.mockable.io/country)
addHeader	key value	string string	To add a single API header	request.addHeader('Content-Type', 'application/json');
addHeaders	headersmap	map/javscript object	To add a multiple API headers	request.addHeaders({'Content-Type': 'application/json', 'Accept-Encoding': '*'});
setQueryParams	queryPrams	map/javscript object	To add a query params	request.setQueryParams({code : 'US'});
setStringData	stringData	string	To post a string data	request.setStringData("XXXXXX");
setJsonData	jsonData	json	To post a json data	request.setJsonData({name: 'XXXXXX',city: 'YYYYYY'});
setFormData	formData	json	To post a form data	request.setFormData({name: 'XXXXXX',city: 'YYYYYY'});
getUrl	-	-	returns a URL string	request.getUrl()
getHeaders	-	-	returns a headrs map	request.getHeaders()
getQueryParamsMap	-	-	returns a query params map	request.getQueryParamsMap()
getQueryParams	-	-	returns a query params constructed string	request.getQueryParams()
getStringData	-	-	returns a string post data	request.getStringData()
getJsonData	-	-	returns a json post data	request.getJsonData()
getFormData	-	-	returns a form post data	request.getFormData()

2. Response Class

Instance Methods

Methods	Params	Return Types	Usage	Example
getStatus	-	integer/string	returns a API status code	response.getStatus()
getUrl	-	string	returns a request URL	response.getUrl()
getHeaders	-	map/json	returns a response headers	response.getHeaders()
getBodyString	-	string	returns a response body as string	response.getBodyString()
getBodyJson	-	map/json	returns a response body as json	response.getBodyJson()
getError	-	map	returns a error object {error: 'Javscript error object', message: 'Error message string'}	response.getError()

3. RNETWORK Class

Instance Methods

1. get(request: Request, preExecuteCallback, postExecuteCallback) Used to make the "GET" request.

Params

request - The request object have to build using Request class.

preExecuteCallback- A normal javascript function has no params. It will be called before making API call. Here you can show the progress loader.

postExecuteCallback- A normal javascript function has only one param with Response return type. It will be called after making API call. Here you can hide the progress loader and add your response logic here.

Example

let request = new Request('http://demo9062349.mockable.io/country');
request.addHeader('Content-Type', 'application/json');  //To add single header
RNETWORK.get(request, () => {
      // Pre execute call back
      //This will be called before making API call
      //Show the loader here
    }, (response: Response) =>{
      // Post execute call back
      // Success and Failure resposne in same callback
      //Check for error then process
      if(response.getError()){
        alert(response.getError().message);
      }else{
        alert(response.getBodyString());
      }

    });

2. post(request: Request, preExecuteCallback, postExecuteCallback) Used to make the "POST" request.

Params

request - The request object have to build using Request class.

preExecuteCallback- A normal javascript function has no params. It will be called before making API call. Here you can show the progress loader.

postExecuteCallback- A normal javascript function has only one param with Response return type. It will be called after making API call. Here you can hide the progress loader and add your response logic here.

Example

    let request = new Request('http://demo9062349.mockable.io/postJsonData');
    request.addHeader('Content-Type', 'application/json');  //To add single header
    request.setJsonData({
      name: 'XXXXXX',
      city: 'YYYYYY'
    }); //To set json data in request object
    RNETWORK.post(request, () => {
      // Pre execute call back
      //This will be called before making API call
      //Show the loader here
    }, (response: Response) =>{
      // Post execute call back
      // Success and Failure resposne in same callback
      //Check for error then process
      if(response.getError()){
        alert(response.getError().message);
      }else{
        alert(response.getBodyString());
      }

    });

To enable logs - RNETWORK.DEBUG_ENABLED = true;

References

1. https://facebook.github.io/react-native/docs/network.html
2. https://developer.android.com/reference/android/os/AsyncTask.html
3. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API