title: React Native and Laravel API
body: <p>I'm very new to API, and recently I started learning React Native and found some quick tutorial about RN frontend and Laravel backend just App just to show how is API working between. So I done everything step by step but my data from laravel, server is not fetching... Here is my whole code</p>
  
  <p>Starting from Laravel first
  This is my <code>CoinController</code>:</p>
  
  <pre><code>&lt;?php
  
  namespace App\Http\Controllers;
  
  use Illuminate\Http\Request;
  use App\Coin;
  
  class CoinController extends Controller
  {
      public function index()
      {
          $coins = Coin::all();
  
          return response()-&gt;json($coins);
      }
  }
  </code></pre>
  
  <p>Here is my migration for coin table:</p>
  
  <pre><code>class CreateCoinsTable extends Migration
  {
      /**
       * Run the migrations.
       *
       * @return void
       */
      public function up()
      {
          Schema::create('coins', function (Blueprint $table) {
              $table-&gt;bigIncrements('id');
              $table-&gt;string('name');
              $table-&gt;integer('price');
              $table-&gt;timestamps();
          });
      }
  
      /**
       * Reverse the migrations.
       *
       * @return void
       */
      public function down()
      {
          Schema::dropIfExists('coins');
      }
  }
  </code></pre>
  
  <p>Here is my <code>api.php</code> file:</p>
  
  <pre><code>Route::get('coins', 'CoinController@index');
  </code></pre>
  
  <p>And here is my <code>env</code> file:</p>
  
  <pre><code>APP_NAME=Laravel
  APP_ENV=local
  APP_KEY=base64:sqFYSTaGklMTMtSFjRWQjKbIfhPWiGFq1p3JzJOdfOg=
  APP_DEBUG=true
  APP_URL=http://localhost
  
  LOG_CHANNEL=stack
  
  DB_CONNECTION=mysql
  DB_HOST=127.0.0.1
  DB_PORT=3306
  DB_DATABASE=routingproj
  DB_USERNAME=root
  DB_PASSWORD=
  
  BROADCAST_DRIVER=log
  CACHE_DRIVER=file
  QUEUE_CONNECTION=sync
  SESSION_DRIVER=file
  SESSION_LIFETIME=120
  
  REDIS_HOST=127.0.0.1
  REDIS_PASSWORD=null
  REDIS_PORT=6379
  
  MAIL_DRIVER=smtp
  MAIL_HOST=smtp.mailtrap.io
  MAIL_PORT=2525
  MAIL_USERNAME=null
  MAIL_PASSWORD=null
  MAIL_ENCRYPTION=null
  
  AWS_ACCESS_KEY_ID=
  AWS_SECRET_ACCESS_KEY=
  AWS_DEFAULT_REGION=us-east-1
  AWS_BUCKET=
  
  PUSHER_APP_ID=
  PUSHER_APP_KEY=
  PUSHER_APP_SECRET=
  PUSHER_APP_CLUSTER=mt1
  
  MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
  MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
  </code></pre>
  
  <p>And now React Native app
  Here is my <code>App.js</code></p>
  
  <pre><code>// App.js
  
  import React, {Component} from 'react';
  import {Platform, StyleSheet, Text, View} from 'react-native';
  import {createStackNavigator} from 'react-navigation-stack';
  import {createAppContainer} from 'react-navigation';
  import Coin from './src/screens/Coin';
  
  const AppNavigator = createStackNavigator({
    CoinScreen: {screen: Coin},
  });
  
  export default createAppContainer(AppNavigator);
  </code></pre>
  
  <p>My <code>Coin.js</code></p>
  
  <pre><code>// 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 (
        &lt;View style={styles.container}&gt;
          {this.state.coins.length &gt; 0 ? (
            &lt;CoinList coins={this.state.coins} /&gt;
          ) : (
            &lt;Text&gt;No coins&lt;/Text&gt;
          )}
        &lt;/View&gt;
      );
    }
  }
  
  export default Coin;
  </code></pre>
  
  <p>Here is my <code>FetchCoin.js</code></p>
  
  <pre><code>// FetchCoins.js
  
  const URI = 'http://my_ip_address/routingproj/public/api/coins';
  
  export default {
    async fetchCoins() {
      try {
        let response = await fetch(URI + '/api/coins');
        let responseJsonData = await response.json();
        return responseJsonData;
      } catch (e) {
        console.log(e);
      }
    },
  };
  </code></pre>
  
  <p>And my <code>CoinList.js</code></p>
  
  <pre><code>// 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 (
        &lt;View style={styles.coinsList}&gt;
          {this.props.coins.map(coin =&gt; {
            return (
              &lt;View key={coin.id}&gt;
                &lt;Text style={styles.cointext}&gt;
                  {coin.name} | {coin.price}
                &lt;/Text&gt;
              &lt;/View&gt;
            );
          })}
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    coinsList: {
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'space-around',
    },
    cointext: {
      fontSize: 24,
      fontWeight: 'bold',
      textAlign: 'center',
    },
  });
  </code></pre>
  
  <p>That is all of my code and when i run <code>react-native run-android</code>
  it shows me No Coins, so that mean my data from server doesn't fetch.
  Any solutions?</p>