loading...
Cover image for Finding Nearby Places with using Yelp API in React Native

Finding Nearby Places with using Yelp API in React Native

therealyusa profile image Yuşa Sarısoy Updated on ・3 min read

Hi, everyone. As I mentioned in my first article, the subject of this article is “Finding Nearby Places with using Yelp API in React Native”. In this article, I will explain step by step how to fetch nearby places to your current location in React Native using the Yelp API. Let’s briefly explain to the following question: “What is Yelp?”. Yelp is a public company headquartered in San Francisco, California. The company develops, hosts, and markets the Yelp.com website and the Yelp mobile app, which publish crowd-sourced reviews about businesses. Since React Native is cross-platform framework, you can use this method both for Android and iOS devices, as we use in the Places API. I would like to emphasize that this will be for those who want to apply this method to an existing project. After these minor explanations, we can get to work.

First of all, we will open the Yelp Developers to get our unique API key. In the Yelp Developers, if you have not any account, then click to “Sign Up”. Else click to “Log In”. I log in directly because I have an account. After this process, we will face with the following screen:

Alt Text

To get the API key, click the “Yelp Fusion”, then “Get Started” button at the screen. After getting the API key, fill the related fields and press the “Create New App “ button in the following screen:

Alt Text

Great! Now we got the API key.

Alt Text

After these procedures, we can start coding. I will use Visual Studio Code to develop my React Native projects. In my YelpAPI.js, I will add my API key.

export const yelpAPIKey = YOUR_API_KEY;

I will import this constant where I want to use them.

import {yelpAPIKey} from ../../Helpers/YelpAPI;

Then, I will set radius as 4 km and the place limits as 30.

// Set radius from current location as 4 km.
const radius = 4000;
// Set limit for number of places as 30.
const limit = 30;

I created a custom component to show every items.

// This array will contain locations received from Yelp API.
const [places, setPlaces] = useState([]);
const renderPlaces = itemData => {
  return (
    <NearByPlaceItem
      image={itemData.item.image_url}
      name={itemData.item.name}
      onPress={() => {
        props.navigation.navigate(PlaceDetailsScreen);
      }}
    />
  );
};

Then, I will set my config and create an async function called “fetchNearbyPlacesWithYelp”. In this case, I will only assign specific values to latitude and longitude, since I take the location in a different way. Let’s assign the location values of San Francisco, CA, USA, as we did in the first article. By the way, latitude and longitude coordinates of San Francisco, CA, USA are: 37.773972, -122.431297.

const config = {
  headers: {
    Authorization: Bearer  + yelpAPIKey,
  },
};
const fetchNearbyPlacesWithYelp = async () => {
  return axios
    .get(
      https://api.yelp.com/v3/businesses/search?term=delis&latitude=' +
        (37.773972) +
        &longitude= +
        (-122.431297) +
        &radius= +
        radius +
        &limit= +
        limit,
        config,
    )
    .then(place => {
      // Get places’ names and images.
      setPlaces(
        place.data.businesses.map(x => ({
          name: x.name,
          image_url: x.image_url,
      })),
    );
  })
  .catch(error => {
    console.log(error);
  });
};

I will render the data from the renderPlaces(). Also, I will use FlatList from ‘react-native’ to show the nearby places.

{/* Yelp goes here. */}
<FlatList
  horizontal
  showsVerticalScrollIndicator={false}
  keyExtractor={index => index.toString()}
  data={places}
  renderItem={item => renderPlaces(item)}
  ListEmptyComponent={props => {
    return (
      <View style={styles.noFavoriteChargersContainer}>
        <Image
          source={Images.notFound}
          style={styles.chargerImage}
        /> 
      </View>
    );
  }}
/>

And we are in the last step. Let’s call the function at the beginning of the page and see what its result will be.

Alt Text

We get exactly what we want. If you have any questions, do not hesitate to contact me. Thank you for reading my second article. The next article will be about "Sign In with Apple on React Native". I wish you have a great day!

Alt Text

Posted on by:

therealyusa profile

Yuşa Sarısoy

@therealyusa

Not talented, just obsessed.

Discussion

markdown guide
 

Great article! This will help to my next side project :)