Building Algolia Powered Search In React Native

Algolia provides in a nutshell, Search As A Service, which if you think is a pretty cool service. It takes away all the heavy lifting of building & maintaining a search infrastructure, gives you a nice API to work with and a robust monitoring to keep everything in check.

The team at Algolia has open sourced API client for most of the programming languages & also built libraries for a bunch of popular platforms out there. React-InstantSearch is one of
such library which we will be using in this example.

Here is the demo of what we’re going to build in this blog post

Add the library we’re going to use to build this

    yarn add react-instantsearch

Let’s open App.js in our editor and initialise InstantSearch

<InstantSearch
   appId="TLCDTR8BIO"
   apiKey="686cce2f5dd3c38130b303e1c842c3e3"
   indexName="repositories"
>
<View style={styles.searchBoxContainer}>
  <SearchBox />
</View>
  <Results />
</InstantSearch>

InstantSearch component above will empower our search –– think of it as a
pipeline which takes appId, apiKey & indexName as a prop and connects us to
Algolia service. This component also takes child components which will provide
us with a search box & results provided.

Let’s code SearchBox component to be able to perform search against the data

import { connectSearchBox } from "react-instantsearch/connectors";
//...
const SearchBox = connectSearchBox(({ refine, currentRefinement }) => {
return (
        <TextInput
           style={styles.textBox}
           onChangeText={text => refine(text)}
           value={currentRefinement}
           placeholder="Search Something"
           clearButtonMode="always"
           spellCheck={false}
           autoCorrect={false}
           autoCapitalize="none"
         />
       );
});

InstantSearch library ships with connectors which provides ready to use
functions which can be hooked to the components to be able to perform defined
actions –– saving us all the effort of writing those logics.

In this case connectSearchBox enables us to connect our TextInput and
perform search directly on our dataset (Pretty Cool? Huh).

Let’s now add Results component to handle result sets provided by Algolia
service.

import { connectInfiniteHits } from "react-instantsearch/connectors";
//...
const Results = connectInfiniteHits(({ hits, hasMore, refine }) => {
const onEndReached = () => {
  if (hasMore) {
    refine();
  }
};
return (
    <FlatList
      data={hits}
      onEndReached={onEndReached}
      keyExtractor={repo => repo.objectID}
      renderItem={({ item }) => <Repository repo={item} />}
    />
   );
});

Similarly connectInfiniteHits function provides us with the data that can be
used to display the result sets.

Let us now write the component which will be responsible to display search item
and highlight searched term

const Repository = ({ repo }) => (
  <View style={styles.repoContainer}>
    <FontAwesome name="github" style={styles.repoIcon} />
    <View style={{ flex: 1 }}>
      <Text style={styles.repoTitle}>

  <Highlight attributeName="name" hit={repo} style={styles.repoTitle} />
      </Text>
      <Text
        ellipsizeMode="tail"
        numberOfLines={2}
        style={styles.repoDescription}
      >
       {repo.description}
     </Text>
   </View>
   <View style={styles.metaContainer}>
     <FontAwesome name="star" style={styles.starIcon} />
     <Text>{repo.stars}</Text>
   </View>
  </View>
);

If you’re familiar with React Native than you should be fairly comfortable with
the above code except Highlight component (Don’t worry I’ve explained that
below).

Everything is now in place except one thing. Now, Let us write the last piece of
the puzzle. I’m going to break down the component into small chunks to make it
easier for understanding.

As we would expect there’s a connector ship with the library to help us figure
out the part as well

import { connectHighlight } from "react-instantsearch/connectors";

//...
const Highlight = connectHighlight(
({ highlight, attributeName, hit }) => {
const parsedHit = highlight({
    attributeName,
    hit,
});

If you remember the Repository component code we’ve used Highlight component
and passed some props (go refer that above). We will accept those props with one
more extra prop which is provided by connectHighlight called highlight

We will compose parsedHit function using highlight & other props. This
function will return us an array of the objects with a property called
isHighlighted –– which can be used to build highlight functionality in our
app. Let’s complete the above component code

const highlightedHit = parsedHit.map((part, idx) => {
if (part.isHighlighted) {
   return (
     <Text key={idx} style={{ backgroundColor: "#ffff00" }}>
        {part.value}
     </Text>
   );
}
 return part.value;
});

If the part of the content is highlighted then wrap it with Text component
with a background color yellow else do nothing just return the content.

That’s it! You should now have a fully working search with a searched term
highlight functionality. You can be more creative and add *animations *or any
other fancy functionality as per your design requirements.

I’ve kept the code snippets to minimal for brevity purpose –– whole code of the
example application shown in the video above is hosted on Github

Github link: https://github.com/codeinfuse/react-native-github-algolia-search

originally posted at: https://blog.codeinfuse.com/building-algolia-powered-search-in-react-native-ee3621775f2