1

I'm communicating to an API to update a state in my application. Everything works fine on PC. But on iOS the network request is 400 and the API does not return anything. Why? I'm running both through CORS anywhere and I've made sure to activate it both on my PC and my iOS device. One of the APIs that I'm communicating with in another file does work on both devices.

Home.js

import React, { useEffect, useState } from "react";
import { View, Text, SafeAreaView, ScrollView } from "react-native";
import { Divider } from "react-native-elements";
import BottomTabs from "../components/home/BottomTabs";
import Categories from "../components/home/Categories";
import HeaderTabs from "../components/home/HeaderTabs";
import RestaurantItems, {
  localRestaurants,
} from "../components/home/RestaurantItems";
import SearchBar from "../components/home/SearchBar";

const YELP_API_KEY =
  "x";

export default function Home({ navigation }) {
  const [restaurantData, setRestaurantData] = useState(localRestaurants);
  const [city, setCity] = useState("City");
  const [activeTab, setActiveTab] = useState("Delivery");

  const getRestaurantsFromYelp = () => {
    const yelpUrl = `https://api.yelp.com/v3/businesses/search?term=restaurants&location=${city}`;
    const corsUrl = `https://cors-anywhere.herokuapp.com/${yelpUrl}`;

    const apiOptions = {
      headers: {
        Authorization: `Bearer ${YELP_API_KEY}`,
      },
    };

    return fetch(corsUrl, apiOptions)
      .then((res) => res.json())
      .then((json) => {
        console.log("JSON:", json.businesses);
        setRestaurantData(json.businesses);
      })
      .catch((e) => console.log(e));
  };

  useEffect(() => {
    getRestaurantsFromYelp();
  }, [city, activeTab]);

  useEffect(() => {
    console.log("Restaurant Data Updated", restaurantData);
  }, [restaurantData]);

  return (
    <SafeAreaView style={{ backgroundColor: "#eee", flex: 1 }}>
      <View style={{ backgroundColor: "white", padding: 15 }}>
        <HeaderTabs activeTab={activeTab} setActiveTab={setActiveTab} />
        <SearchBar cityHandler={setCity} />
      </View>
      <ScrollView showsVerticalScrollIndicator={false}>
        <Categories />
        <RestaurantItems
          restaurantData={restaurantData}
          navigation={navigation}
        />
      </ScrollView>
      <Divider width={1} />
      <BottomTabs />
    </SafeAreaView>
  );
}
Samuel Moskovitch
  • 23
  • 3
  • why do you need to use a proxy to call an API? yelp api supports jsonp, you can use it that – Nisharg Shah Feb 28 '22 at 17:56
  • It was giving me Access Denied Errors which I could not figure out so I've just been running things through the proxy. Do you think that could be causing the issue on iOS? – Samuel Moskovitch Feb 28 '22 at 17:58
  • There is a good chance that the server is returning some text to go along with the 400 - Examine what you are getting back in response – Paulw11 Feb 28 '22 at 18:49
  • The response I'm getting in the network seems like it's sending something back. IT says "data" and there's a size and everything seems right. But the console log inside the return fetch statement is never printed. It seems like that return statement is never ran. – Samuel Moskovitch Feb 28 '22 at 19:07

0 Answers0