To connect the 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 the React Native application to Laravel’s API server, get the response, and show that response in the app.

Here is the step-by-step guide:

Step 1: Install the 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 the 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 it into the StackNavigator function, which 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 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 using 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 to the client in JSON format; in our case, it’s react native.

We are sending the crypto coins JSON object containing 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 using 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 out manually because we are not writing any screen that can store the details of the coins.

You need to fill that out manually. Later in this blog, I will write a complete CRUD application.

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

We have already written the code to fetch this data from the database and return it 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');

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 coin data on the Coin screen. We have created a folder called services. So, we will create a file called FetchCoins.js in that folder. 

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.

We have also used the ES7 async/await feature, which is 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, I first used the componentDidMount lifecycle method to fetch 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 must create that component, so let’s create it 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 used the map function to display the data in formatted text. 

If you have worked with React.js before, the design style is probably familiar. But, of course, it differs from React.js web components. So, now, reload our application.

You will see something like the below screen.

Now press the Coins button. You will see the screen with our two coins data.

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.

Krunal Lathiya

With a career spanning over eight years in the field of Computer Science, Krunal’s expertise is rooted in a solid foundation of hands-on experience, complemented by a continuous pursuit of knowledge.