How to Connect React Native Application with Laravel API

In this application tutorial, I have described How To Connect React Native Application With Laravel API. I am using the iOS Simulator for this example.

How to Connect React Native Application to Laravel

To connect React Native app to Laravel, use the fetch() API. React Native application works on the front end, and Laravel API works on the back end.

To bridge the gap, we use the fetch() function to send a network request from React Native application to Laravel’s API server, get the response, and show that response in the app.

We connect our mobile frontend application to the backend Laravel API and display the frontend database values. Nothing is more complicated.

So you will see how we can send the Network request to the server, get the response, and append that into react-native components.

If you have worked with React.js, it is pretty familiar to you.

The first step will be to install a React Native application on Mac.

Step 1: Install React Native app.

Hit the following command on the terminal.

sudo npm install -g react-native-cli

Go to the directory where you need to generate the project.

react-native init RNLaravel
cd RNLaravel

Now, run the project by typing the following command.

react-native run-ios

After some compilation, the react package manager will be opened on the terminal, and after that iOS device will be opened with a screen like the one below.

Step 2: Create the required directories.

At the root of the project, make one directory called src. In that directory, create three folders.

1. screens
2. components
3. services

The screens folder contains the screens we need to display to the User. In our case, we will create two screens.

The components folder contains the mobile components we will use to display the data from the API.

The services folder contains network files. It is the files in which we will write the code to make a request to the server and get the response from the server.

Step 3: Create two screens.

Inside the src  >>  screens folder, create the following files.

1.  Home.js
2. Coin.js

Home.js is the pure React Native class.

// Home.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export class Home extends Component {
  render() {
    return (
      <View>
        <Text>Home Screen</Text>
      </View>
    )
  }
}

export default Home;

The same goes for the Coin.js file.

// Coin.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export class Coin extends Component {
  render() {
    return (
      <View>
        <Text>Coin Screen</Text>
      </View>
    )
  }
}

export default Coin;

Step 4: Integrate React Native Navigation.

We must install the React Navigation library to transition the app from one screen to another.

yarn add react-navigation

Now, after installing, go to the App.js file. We will use StackNavigator to transit from one screen to another. It is routing for our application.

// App.js

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Home from './src/screens/Home';
import Coin from './src/screens/Coin';

const AppNavigator = StackNavigator({
  HomeScreen: { screen: Home },
  CoinScreen: { screen: Coin }
});

export default class App extends Component {
  render() {
    return (
      <AppNavigator />
    );
  }
}

We have included the screen here and passed that screen into the StackNavigator function. It will handle the transition of our screens.

Step 5: Create Laravel Backend API.

Install Laravel 5.6 with the following command.

composer create-project laravel/laravel --prefer-dist RNativeLaravel

After installing the Laravel, configure the .env file. Enter your database credentials.

I am using MAMP, so mine is the following. If you are using XAMPP, your password should be empty; if you are AMPPS, your password should be MySQL.

Of course, I have already created the database in phpMyAdmin.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=reactnative
DB_USERNAME=root
DB_PASSWORD=root

We are merely building an application in which we need to send the data in JSON format to the client; in our case, it’s react native.

We are sending the crypto coins JSON object, which contains main fields like coin name and price. So let us create the migration, model, and controller file for our Laravel application.

Create the migration, model, and controller file.

Go to your Laravel root and hit the following command.

php artisan make:model Coin -m

It will create both Migration and Model files.

In the migration file, add the following code.

// create_coins_table

   /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('coins', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->integer('price');
            $table->timestamps();
        });
    }

Type the following command to migrate this schema into the database. So three tables will be created.

php artisan migrate

Now, create the controller file by the following command.

php artisan make:controller CoinController

Code the index function inside that file.

// CoinController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Coin;

class CoinController extends Controller
{
    public function index()
    {
        $coins = Coin::all();

        return response()->json($coins);
    }
}

The above code fetches all the data as a collection and returns an array of coins as a json response.

Right now, we do not have any coins in the database.

So for this example, we need to fill it manually because we are not writing any screen that can store the details of the coins.

So you need to fill that out manually. I will write a complete CRUD application later in this blog.

I inserted only two values, as this is a basic showcase tutorial.

So we have already written the code that fetches this data from the database and returns this data as a JSON response. 

Write the routes in the api.php file.

Go to the routes  >> api.php file and add the following route.

// web.php

Route::get('coins', 'CoinController@index');

Now, start the Laravel development server with the following command.

php artisan serve

It will open the server at port 8000.

You can access our Laravel API at this route: http://localhost:8000/api/coins.

Step 6: Use the fetch API of React Native to send the network request.

We need to display the coins data on the Coin screen. We have created a folder called services. So in that folder, we will create a file called FetchCoins.js. 

Write the following code in it.

// FetchCoins.js

const URI = 'http://localhost:8000';

export default {
    async fetchCoins() {
        try {
                let response = await fetch(URI + '/api/coins');
                let responseJsonData = await response.json();
                return responseJsonData;
            }
        catch(e) {
            console.log(e)
        }
    }
}

We have used fetch API by React Native to send network requests like GET and POST.

Also, we have used the ES7 feature async/await feature. It is pretty helpful in Asynchronous tasks.

Now, we will import the FetchCoins.js file inside the Coin.js file. I am writing the whole file.

// Coin.js

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import ajax from '../services/FetchCoins';
import CoinList from '../components/CoinList';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#B6A6BB',
  }
})

export class Coin extends Component {

  state = {
    coins: []
  }

  async componentDidMount() {
    const coins = await ajax.fetchCoins();
    this.setState({coins});
  }

  render() {
    return (
      <View style={styles.container}>
      {
        this.state.coins.length > 0
        ? <CoinList coins={this.state.coins} />
        : <Text>No coins</Text>
      }
      </View>
    )
  }
}

export default Coin;

In this file, what I did is that first, I used the componentDidMount lifecycle method for fetching the data from the server.

We are using async/await for the network request.

So I have written the async componentDidMount method. After fetching the data, I change the state of coins with the filled array data and pass that array to the new component, a CoinList.js file.

We need to create that component. So let us create that component inside the src >> components folder.

// CoinList.js

import React, { Component } from 'react';
import {  View, Text, StyleSheet} from 'react-native';
import PropTypes from 'prop-types';

export default class CoinList extends Component {

  static propTypes = {
      coins: PropTypes.array.isRequired
  }; 
  render() {
    return (
      <View style={styles.coinsList}>
        {this.props.coins.map((coin) => {
            return (
                <View key={coin.id}>
                    <Text style={styles.cointext}>{coin.name} | { coin.price }</Text>
                </View>
            )
        })}
      </View>
    );
  }
}

const styles = StyleSheet.create({
    coinsList: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-around',
    },
    cointext: {
        fontSize: 24,
        fontWeight: 'bold',
        textAlign: 'center',
    }
});

The CoinList.js file receives the data as a component. So I have used the map function to display the data into formatted text. 

It is pretty familiar to you if you have worked with React.js before. But, of course, the design style is different than React.js web components. So, now, reload our application.

You will see something like the below screen.

Okay, now press the Coins button. You will see the screen with our two coins data.

So this is how you can perform a network request in the React Native mobile application. It is a simple example of Fetch React Native API. 

That’s it.