Expo / React Native avec l'adaptateur Typesense InstantSearch

Installez Instantsearch selon les guide d'Algolia:

npx expo installer algoliasearch react-instantsearch-core

Installez Typesense selon les guide de Typesense:

npm install --save typesense-instantsearch-adapter @babel/runtime

Configurez Typesense dans votre fichier App.js ou un fichier Expo Router selon les guide de Typesense pour React NativeCertains paramètres doivent être modifiés pour que cela fonctionne.

Vous devez créer un composant SearchBox et InfiniteHits :

# ./components/SearchBox.js

import React, { useRef, useState } from 'react';
import { StyleSheet, View, TextInput } from 'react-native';
import { useSearchBox } from 'react-instantsearch-core';

export function SearchBox(props) {
  const { query, refine } = useSearchBox(props);
  const [inputValue, setInputValue] = useState(query);
  const inputRef = useRef(null);

  function setQuery(newQuery) {
    setInputValue(newQuery);
    refine(newQuery);
  }

  // Track when the InstantSearch query changes to synchronize it with
  // the React state.
  // We bypass the state update if the input is focused to avoid concurrent
  // updates when typing.
  if (query !== inputValue && !inputRef.current?.isFocused()) {
    setInputValue(query);
  }

  return (
    <View style={styles.container}>
      <TextInput
        ref={inputRef}
        style={styles.input}i
        value={inputValue}
        onChangeText={setQuery}
        clearButtonMode="while-editing"
        autoCapitalize="none"
        autoCorrect={false}
        spellCheck={false}
        autoComplete="off"
        placeholder='Zoeken ...'
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#252b33',
    padding: 18,
  },
  input: {
    height: 48,
    padding: 12,
    fontSize: 16,
    backgroundColor: '#fff',
    borderRadius: 4,
    borderWidth: 1,
    borderColor: '#ddd',
  },
});

# ./components/InfiniteHits.js importer React depuis 'react'; importer { StyleSheet, View, FlatList } depuis 'react-native'; importer { useInfiniteHits } depuis 'react-instantsearch-core'; exporter la fonction InfiniteHits({ hitComponent: Hit, ...props }) { const { hits, isLastPage, showMore } = useInfiniteHits({ ...props, escapeHTML: false, }); retourner ( élément.objectID} ItemSeparatorComponent={() => } onEndReached={() => { si (!isLastPage) { showMore(); } }} renderItem={({ élément }) => ( )} /> ); }; const styles = StyleSheet.create({ séparateur: { borderBottomWidth: 1, borderColor: '#ddd', }, élément: { remplissage: 18, }, });

Tout cela mènera au fichier App.js :

# App.js importer { StyleSheet } depuis 'react-native'; importer React depuis "react"; importer { InstantSearch } depuis 'react-instantsearch-core'; importer TypesenseInstantSearchAdapter depuis "typesense-instantsearch-adapter"; importer { SearchBox } depuis '@/components/SearchBox'; importer { InfiniteHits } depuis '@/components/InifiniteHits'; const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({ server: { apiKey: "YOURKEY", // Assurez-vous d'utiliser une clé API qui autorise uniquement les opérations de recherche nodes: [ { host: "CLOUDURL.typesense.net", port: 443, path: "", // Facultatif. Exemple: Si votre typesense est monté dans localhost:8108/typesense, le chemin doit être égal à '/typesense' protocol: "https", }, ], cacheSearchResultsForSeconds: 2 * 60, // Mettre en cache les résultats de recherche du serveur. La valeur par défaut est de 2 minutes. Définissez sur 0 pour désactiver la mise en cache. }, // Les paramètres suivants sont directement transmis au point de terminaison de l'API de recherche de Typesense. // Vous pouvez donc transmettre tous les paramètres pris en charge par le point de terminaison de recherche ci-dessous. // query_by est requis. additionalSearchParameters: { query_by: "name", }, }); const searchClient = typesenseInstantsearchAdapter.searchClient; export default function App() { return (  ); } fonction Hit({ hit }) { retour ( {hit.name} ); }

Vous pouvez configurer plus de champs, comme un filtre, etc., en suivant les instructions guide d'Algolia.