Category Archives: React Native

React Native + Nativebase UI (Android)

Quick Setup

Install Android Studio [Download]
Install node >= 6.0 [Download]
Install npm >= 4.0 [Download]
Install git [Download]

Open Command
1. cd C:\project
2. react-native init [Project-Name]
3. cd [Project-Name]
4. npm install -g expo-cli
5. npm install native-base --save
6. react-native link

Go to C:\project\[Project-Name]\Android\
Create [local.properties] file
react-native-nativebase-ui
react-native-nativebase-ui

7. react-native run-android

react-native-nativebase-ui

8. Write code in C:\project\[Project-Name]\App.js

NativeBase UI : https://docs.nativebase.io/docs/GetStarted.html

Request and Response NodeJS in React Native

App.js – React Native

import React, { Component, PropTypes } from 'react';
import { Alert, AppRegistry, Button, StyleSheet, View, Text, TextInput, TouchableHighlight } from 'react-native';

export default class App extends Component {
	
  _onPressButtonGET() {
    fetch("http://study.ar-leung.net:1000/?search=nraboy", {method: "GET"})
        .then((response) => response.json())
        .then((responseData) => {
            Alert.alert(
                "GET Response",
                "Search Query -> " + responseData.search
            )
        })
    .done();
  }
	
  _onPressButtonPOST() {
		fetch("http://study.ar-leung.net:1000/", {method: "POST", 
		  headers: {
                     'Accept': 'application/json',
                     'Content-Type': 'application/json',
                 },
                body: JSON.stringify({
                    "Username":"Chan Tai Man",
                    "Password": "A1234567"

                })})
		.then((response) => response.json())
		.then((responseData) => {
			Alert.alert(
				"POST Response",
				"Response Body -> " + JSON.stringify(responseData)
			)
		})
		.done();
  }
  
  render() {
    return (
		<View style={styles.container}>
			<TouchableHighlight onPress={this._onPressButtonGET} style={styles.button}>
				<Text>GET</Text>
			</TouchableHighlight>
			<TouchableHighlight onPress={this._onPressButtonPOST} style={styles.button}>
				<Text>POST</Text>
			</TouchableHighlight>
		</View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    button: {
        backgroundColor: '#eeeeee',
        padding: 10,
        marginRight: 5,
        marginLeft: 5,
    }
})

// skip this line if using Create React Native App
AppRegistry.registerComponent('App', () => App);

request.js -NodeJS

var express = require('express');
var bodyParser = require('body-parser')

var app = express();

app.use( bodyParser.json() );       // to support JSON-encoded bodies

// respond with "hello world" when a GET request is made to the homepage
app.get('/', function (req, res, next) {
  res.send({"status":"success", "message": "a sample GET request", "search":req.query.search});
  console.log(req.query.search);
});


// POST method route
app.post('/', function (req, res, next) {
  res.send({"status":"success", "message": "a sample POST request", "body":req.body});
  console.log(req.body);
});

app.listen(1000);

request-and-response-NodeJS-in-React-Native.jpg