export TYPESENSE_API_KEY=xyz
docker run -p 8108:8108 \
-v"$(pwd)"/typesense-data:/data typesense/typesense:{{ $site.themeConfig.typesenseLatestVersion }} \
--data-dir /data \
--api-key=$TYPESENSE_API_KEY \
--enable-cors \
-d
- Verify if your Docker container was created properly:
```shell
docker ps
```
- You should see the Typesense container running without any issues:
```shell
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
82dd6bdfaf66 typesense/typesense:latest "/opt/typesense-serv…" 1 min ago Up 1 minutes 0.0.0.0:8108->8108/tcp, [::]:8108->8108/tcp nostalgic_babbage
```
- That's it! You are now ready to create collections and load data into your Typesense server.
:::tip
You can also set up a managed Typesense cluster on [Typesense Cloud](https://cloud.typesense.org) for a fully managed experience with a management UI, high availability, globally distributed search nodes and more.
:::
## Step 2: Create a new books collection and load sample dataset into Typesense
Typesense needs you to create a [collection](/30.2/api/collections.html) in order to search through documents. A collection is a named container that defines a schema and stores indexed documents for search. Collection bundles three things together:
1. Schema
2. Document
3. Index
You can create the books collection for this project using this `curl` command:
```shell
curl "http://localhost:8108/collections" \
-X POST \
-H "Content-Type: application/json" \
-H "X-TYPESENSE-API-KEY: ${TYPESENSE_API_KEY}" \
-d '{
"name": "books",
"fields": [
{"name": "title", "type": "string", "facet": false},
{"name": "authors", "type": "string[]", "facet": true},
{"name": "publication_year", "type": "int32", "facet": true},
{"name": "average_rating", "type": "float", "facet": true},
{"name": "image_url", "type": "string", "facet": false},
{"name": "ratings_count", "type": "int32", "facet": true}
],
"default_sorting_field": "ratings_count"
}'
```
Now that the collection is set up, we can load the sample dataset.
1. Download the sample dataset:
```shell
curl -O https://dl.typesense.org/datasets/books.jsonl.gz
```
2. Unzip the dataset:
```shell
gunzip books.jsonl.gz
```
3. Load the dataset in to Typesense:
```shell
curl "http://localhost:8108/collections/books/documents/import" \
-X POST \
-H "X-TYPESENSE-API-KEY: ${TYPESENSE_API_KEY}" \
--data-binary @books.jsonl
```
You should see a bunch of success messages if the data load is successful.
Now you're ready to actually build the application.
## Step 3: Set up your React Native project
Create a new Expo project using this command:
```shell
npx create-expo-app@latest typesense-react-native-search-bar --template blank-typescript
```
This will scaffold a new React Native project with TypeScript support using Expo.
Once your project scaffolding is ready, navigate to the project directory and install the required dependencies:
```shell
cd typesense-react-native-search-bar
npm install
npm i react-instantsearch-core typesense-instantsearch-adapter
```
Let's go over the key dependencies:
- **react-instantsearch-core** - Provides [InstantSearch](https://github.com/algolia/instantsearch) hooks and components for React Native. InstantSearch is an open-source UI library by Algolia for building search interfaces that works with any search backend through adapters.
- **typesense-instantsearch-adapter** - Connects InstantSearch with Typesense as the search engine
:::tip Note
React Native can use `react-instantsearch-core` with the [`typesense-instantsearch-adapter`](https://github.com/typesense/typesense-instantsearch-adapter), just like web frameworks. This gives you access to powerful InstantSearch hooks and widgets. Alternatively, you can make direct API calls to Typesense using the Fetch API for a lighter implementation.
:::
## Project Structure
Let's create the project structure step by step. After each step, we'll show you how the directory structure evolves.
1. After creating the basic Expo app and installing the required dependencies, your project structure should look like this:
```plaintext
typesense-react-native-search-bar/
├── node_modules/
├── assets/
│ ├── adaptive-icon.png
│ ├── favicon.png
│ ├── icon.png
│ └── splash-icon.png
├── App.tsx
├── app.json
├── package-lock.json
├── package.json
└── tsconfig.json
```
2. Create the project directories:
```bash
mkdir -p components types utils
```
Your project structure should now look like this:
```plaintext
typesense-react-native-search-bar/
├── assets/
│ ├── adaptive-icon.png
│ ├── favicon.png
│ ├── icon.png
│ └── splash-icon.png
├── components/
├── types/
├── utils/
├── App.tsx
├── app.json
├── package-lock.json
├── package.json
└── tsconfig.json
```
3. Create the environment configuration file `.env`:
```bash
touch .env
```
Add this content to `.env`:
```bash
EXPO_PUBLIC_TYPESENSE_API_KEY=xyz
EXPO_PUBLIC_TYPESENSE_HOST=10.0.2.2
EXPO_PUBLIC_TYPESENSE_PORT=8108
EXPO_PUBLIC_TYPESENSE_PROTOCOL=http
```
:::tip Important
- For **Android emulator**, use `10.0.2.2` as the host (this maps to `localhost` on your machine)
- For **iOS simulator**, use `localhost` as the host
- For **physical devices**, use your machine's local IP address (e.g., `192.168.1.100`) or use a tunneling service like [ngrok](https://ngrok.com/)
Expo automatically loads environment variables starting with `EXPO_PUBLIC_` and makes them available to your app via `process.env`.
:::
Using env variables is **NOT recommended** for production apps since they are bundled with the app. Instead, you want to generate a [search-only API key](/30.2/api/api-keys.html#search-only-api-key) and serve it to your app from a backend endpoint, along with your Typesense cluster endpoints. This way you can rotate your API keys and change your cluster endpoints at any point as needed.
4. Create the types file:
```bash
touch types/Book.ts
```
Add this to `types/Book.ts`:
```typescript
export interface Book {
id: string;
title: string;
authors: string[];
image_url: string;
publication_year: number;
average_rating?: number;
ratings_count?: number;
}
```
Your project structure should now look like this:
```plaintext
typesense-react-native-search-bar/
├── assets/
├── components/
├── types/
│ └── Book.ts
├── utils/
├── .env
├── App.tsx
├── app.json
├── package.json
└── tsconfig.json
```
5. Create the Typesense utility file:
```bash
touch utils/typesense.ts
```
Add this to `utils/typesense.ts`:
```typescript
import TypesenseInstantSearchAdapter from "typesense-instantsearch-adapter";
const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
server: {
apiKey: process.env.EXPO_PUBLIC_TYPESENSE_API_KEY || "xyz",
nodes: [
{
host: process.env.EXPO_PUBLIC_TYPESENSE_HOST || "localhost",
port: Number(process.env.EXPO_PUBLIC_TYPESENSE_PORT) || 8108,
protocol: process.env.EXPO_PUBLIC_TYPESENSE_PROTOCOL || "http",
},
],
},
additionalSearchParameters: {
query_by: "title,authors",
},
});
export const searchClient = typesenseInstantsearchAdapter.searchClient;
```
This utility file creates the Typesense InstantSearch adapter, which bridges Typesense with InstantSearch. The adapter handles all the communication with Typesense and provides a search client that works seamlessly with `react-instantsearch-core` hooks.
6. Create the component files:
```bash
touch components/SearchInput.tsx
touch components/BookCard.tsx
touch components/BookList.tsx
```
Your project structure should now look like this:
```plaintext
typesense-react-native-search-bar/
├── assets/
├── components/
│ ├── BookCard.tsx
│ ├── BookList.tsx
│ └── SearchInput.tsx
├── types/
│ └── Book.ts
├── utils/
│ └── typesense.ts
├── .env
├── App.tsx
├── app.json
├── package.json
└── tsconfig.json
```
7. Create the `SearchInput` component in `components/SearchInput.tsx`:
```typescript
import React from "react";
import { StyleSheet, TextInput } from "react-native";
import { useSearchBox } from "react-instantsearch-core";
export const SearchInput = () => {
const { query, refine } = useSearchBox();
return (
