A modern search bar application built with React Native (Expo) and Typesense, featuring instant search capabilities for mobile devices.

• React Native (Expo)
• Typesense
• react-instantsearch-core
• typesense-instantsearch-adapter
• TypeScript

• Node.js 18+ and npm 9+.
• Docker (for running Typesense locally). Alternatively, you can use a Typesense Cloud cluster.
• Expo Go app on your mobile device or an iOS/Android simulator.
• Basic knowledge of React Native.

git clone https://github.com/typesense/code-samples.git
cd typesense-react-native-search-bar

npm install

Create a .env file in the project root with the following content:

EXPO_PUBLIC_TYPESENSE_API_KEY=xyz
EXPO_PUBLIC_TYPESENSE_HOST=10.0.2.2
EXPO_PUBLIC_TYPESENSE_PORT=8108
EXPO_PUBLIC_TYPESENSE_PROTOCOL=http

Note:

• 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 Typesense Cloud cluster.

├── components
│   ├── BookCard.tsx
│   ├── BookList.tsx
│   ├── Heading.tsx
│   └── SearchInput.tsx
├── types
│   └── Book.ts
├── utils
│   └── typesense.ts
├── App.tsx
├── app.json
└── package.json

npx expo start

This will start the Expo development server. You can then:

• Scan the QR code with Expo Go app (Android) or Camera app (iOS).
• Press a to open in Android emulator.
• Press i to open in iOS simulator.

For production deployment, we don't recommend storing sensitive information in the environment variables. Instead, use a backend service to handle the API requests with some form of authentication.