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
Top comments (0)