Integração entre Laravel e React Native

Neste tutorial aprenderemos como integrar o seu app mobile criado no React Native com o framework PHP Laravel.

React Native

App.js

No nosso entry point App.js vamos criar um botão simples para enviar uma requisição para o Laravel:

import { StatusBar } from 'expo-status-bar';
import {StyleSheet, Text, View,  TouchableOpacity} from 'react-native';

export default function App() {

  async function sendLaravel()
  {
    let reqs = await fetch('https://www.SEU_SITE.com.br/api/formulario',{
      method:'post',
      headers:{
        'Content-Type':'application/json'
      },
      body: JSON.stringify({
        'nome':'OUTRO NOME'
      })
    });
    let ress = await reqs.json();
    console.log(ress);
  }

  return (
    <View style={styles.container}>

      <TouchableOpacity onPress={()=>sendLaravel()}>
          <Text>Enviar</Text>
      </TouchableOpacity>

      <StatusBar style="auto" />
    </View>
  );
}

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

Laravel

routes/api.php

Vamos criar a rota api que receberá os dados do celular:

Route::post('formulario', [FormularioController::class,'storeData'])->name('api.formulario');

app/Http/Controllers/Api/FormularioController.php

No nosso controller retornaremos os dados para o app:

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class FormularioController extends Controller
{
    public function storeData(Request $request)
    {
        return json_encode("Você enviou o dado {$request->nome} do RN para o Laravel.");
    }
}

Por hoje é só! Fiquem todos com Deus! Sucesso nos códigos e na vida!

Precisa de um auxílio nos códigos? webdesignemfoco@gmail.com

“Porque Deus amou o mundo de tal maneira, que deu o seu Filho Unigênito, para que todo aquele que nele crê não pereça, mas tenha a vida eterna” (João 3:16)