Use Algolia For Geographical Search in a React Native App

I have been involved in many headless projects where we use Algolia as our search provider. In case you don’t know what Algolia is, Algolia is a search-as-a-service API that focuses on providing the best experience for end users. Not only does Algolia provide large-scale indexing, recommendations, autocomplete, and can process millions of queries in milliseconds, it also provides developers with pre-built front-end libraries. These libraries allow developers to quickly build applications using their language of choice.

In this example, I will be showing how easy it is to use Algolia’s InstantSearch react library. You can easily use InstantSearch in your React/Next.js solution. But for this example, I’m showing you how to use the library in a React native app and in particular, Algolia’s geo-search capabilities.

First step, let’s initialize a React native app.

npx create-expo-app ReactNativeAlgoliaGeoSearch

npm install @react-navigation/native @react-navigation/stack

Let’s install the packages we need for Algolia integration.

npm install algoliasearch react-instantsearch-core

Now we can look at our code. If you look at map.js, you can see this is our entry point to our Algolia search experience. The root component to start using Algolia search is the <InstantSearch> provider.

Let’s initialize our connection to our Algolia instance. Replace YourApplicationID and YourSearchOnlyAPIKey with your values. You can find these values from the Algolia dashboard by clicking on API Keys.

const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');

We wrap all our widgets that will use Algolia with the InstantSearch provider. You can read more about InstantSearch of the Algolia Documentation. As you can see, the provider takes in the search client we initialized before and an index which we call places. You can use any index name that exists in your Algolia instance but for our example, it will be called places.

<InstantSearch searchClient={searchClient} indexName="places">
  /* Our custom widgets */
</InstantSearch>

Algolia does come with some out-of-the-box widgets that interact with our Algolia instance. We will not be using those widgets. We will be using the react hooks provided to us by Algolia to do all of our interactions.

This is where the real fun begins. we will use the useGeoSearch() hook provided by Algolia to leverage geo-search capabilities with a map provider. Now we can use any provider we choose. For our demo, since we are creating a react native app, let’s choose the react-native-maps package.

npm install react-native-maps expo-location

Our custom widget that uses the useGeoSearch() hook is in CustomGeoSearch.js.

    const { items, refine } = useGeoSearch({...props});

If you look at the JSX returned by our component, it consists of the MapView widget and a collection of Markers.

            <MapView
                ref={(ref) => {
                    this.mapRef = ref;
                }}
                onRegionChangeComplete={this.onRegionChangeComplete}
                style={StyleSheet.absoluteFill}
                region={initialRegion}
            >
                {items.map((item) => (
                <Marker key={item.objectID} coordinate={{latitude: item._geoloc.lat, longitude: item._geoloc.lng}}>
                    <View style={{backgroundColor: "red", padding: 10}}>
                        <Text>{item.name}</Text>
                    </View>
                </Marker>
                ))}

            </MapView>

InitialRegion is initialized in a useEffect() hook using the expo-location package. Our items are provided to us by the useGeoSearch() hook.

Let’s look at what happens when we move the map around. We call the setter method named refine() provided to us by the useGeoSearch() hook.

 refine({
    northEast: {"lat": boundary.northEast.latitude, "lng": boundary.northEast.longitude},
    southWest: {"lat": boundary.southWest.latitude, "lng": boundary.southWest.longitude},
  });

Remember what a react hook is. Hooks are functions that let you “hook into” React state and lifestyle features from a function component. Take a look at our custom <SearchBox> widget in Searchbox.js. It also uses a react hook called useSearchBox(). Our two hooks in two different widgets work in tandem as they are both within our <InstantSearch> provider. Algolia provides us with the hooks to manage our state (search items) for us! And it is very simple to use!

One last point to cover. What does our index for places look like? For this, let’s look at our Algolia dashboard. Here is what one of our entries looks like in our places index. Look at the _geoloc field. You can see it has two fields: lat and lng. This is the format that is required for your index entry for geo search to work!

That’s it! You can download the source code from my GitHub. Go ahead and download it and try it out for yourself using Expo.