Hello folks,

In this article, I will show you how to implement a fast search service in your react-native app using the Algolia search engine.

‍

Context

I ran into 2 problems recently and I would like to share with you how a way to tackle both of them easily.

• 🍷 Problem 1 🍷 When the time comes to choose a wine bottle in a store, I’m always asking the same question to the sommelier:

Me: "Hello, a friend of mine has prepared a superb dinner for me tonight, he's a real cordon bleu. To do justice to its dish, I would like a subtle spicy red wine with fruity aromas?"

But at the local supermarket, there is no one to help me pick the right wine ?

• 👨‍💻 Problem 2 👨‍💻 On a recent project, the product owner wanted a solution to quickly find entities in the database that match some complex text input. It should be a clever solution with mistyping handling and low-latency that returns the most accurate results.

After some investigation, I discovered Algolia, a solution that addresses both the above strategic issues.

By the end of this tutorial, you will have a fully functional react-native app that allows you to search quickly through a wine database.

The steps

Not 4, not 2, but 3.

🔧 Setup your Algolia account

💾 Upload your data and play with the settings

🔍 Search the data with react-native

🔧 Setup your Algolia account

Go to Algolia to create your account. They've got a free plan to host up to 10.000 records.

Once you've created your account, it's now time to add data. To do so, you need to create an index, it will be the equivalent of your database table.

💾 Upload the data

The main purpose of Algolia is to easily search on text parameters. Get some data with text fields (JSON, CSV), and upload them on your freshly created index. In this tutorial, I used a wine dataset.

💡Hint 💡

If you've got a large JSON file with too many lines, run ++code>npx json-split --json=<path/to/file> -line=10000++/code> to split your file in 10.000 lines chunks.

💡Hint 💡

You can also upload your data with the Algolia Client available in many programming languages.

Once the data is uploaded, you can check that you can query it via the Algolia website.

In my case, the results appear quickly. I will have a nice dinner ?

And since it's a special occasion, I can afford some more expensive wine. To help me do so, Algolia provides built-in filters on numeric values: I've got my shortlist.

💡Hint💡

Go in the settings of your index, you'll find plenty of super useful options, such as query language, typo-tolerance or custom ranking of the results.

🔍 Integrate Algolia in your react-native app

Now that the index is ready to be queried, it's time to create an app with react native. With its cross-platform compatibility, it's the perfect companion for your Android or iOS phone.

Construction 🚧

To make things easier, you can clone this repo and go to the first step with ++code>git checkout first-step++/code>.

Nothing's too fancy in this first step, just basic layout without connection to Algolia yet. It's always easier to cut down the app development in small pieces.

Here's what our final app will look like, two components, a search box and a list of results.

Add Connection to Algolia 🔗

Checkout to second-step and Voilà, your app is connected to the Algolia index.

But what just happened ? After installing the library with ++code>yarn add react-instantsearch++/code>, I added the Algolia provider component InstantSearch with the API keys.

This component gives access to the Algolia results to its children.

I can now wrap my ++code><SearchBox/>++/code> and my ++code><FlatList/>++/code> with the connectors provided by the library.

‍

++pre>++code>++code class="prism  language-javascript">export const InfiniteHits = connectInfiniteHits(InfiniteHitsComponent);

export const SearchBox = connectSearchBox(({ refine, currentRefinement }) => (
   <SearchBoxComponent
       onChangeText={text => refine(text)}
       value={currentRefinement}
   />
));
++/code>++/pre>

‍

Conclusion ✅

You now have a fully functional app that can look through your Algolia store. Your product owner is happy and so is my friend who will surely invite me for dinner again!

‍

To Go further 🎉

Others solutions exist to get similar results, here's a link to a performant solution made with PostgreSQL full-text search.

To keep your search index in sync with your system databases, you can follow this great tutorial tutorial.