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.
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());
}
});
/**
* 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);
- 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)
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() |
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() |
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;