Expo / React Native con Typesense InstantSearch Adapter

Instale Instantsearch de acuerdo con las guía de algolia:

npx expo instala algoliasearch reacciona-instantsearch-core

Instale Typesense de acuerdo con las guía de Typesense:

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

Configure Typesense en su archivo App.js o en un archivo Expo Router de acuerdo con las guía de Typesense para React Native. Es necesario cambiar algunas configuraciones para que funcione.

Necesita crear un componente SearchBox e 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 importar Reaccionar desde 'react'; importar {Hoja de estilo, Vista, Lista plana} desde 'react-native'; importar {useInfiniteHits} desde 'react-instantsearch-core'; función de exportación InfiniteHits({ hitComponent: Hit, ...props }) { const { hits, isLastPage, showMore } = useInfiniteHits({ ...props, escapeHTML: false, }); devolver ( item.objectID} ItemSeparatorComponent={() => } onEndReached={() => { if (!isLastPage) { mostrarMás(); } }} renderItem={({ elemento }) => ( )} /> ); }; const estilos = StyleSheet.create({ separador: { borderBottomWidth: 1, borderColor: '#ddd', }, elemento: { padding: 18, }, });

Todo esto conducirá al archivo App.js:

# App.js importa {Hoja de estilo} desde 'react-native'; importar Reaccionar desde "reaccionar"; importar {InstantSearch} desde 'react-instantsearch-core'; importar TypesenseInstantSearchAdapter desde "typesense-instantsearch-adapter"; importar { SearchBox } desde '@/components/SearchBox'; importar {InfiniteHits} desde '@/components/InifiniteHits'; const tiposenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({ server: { apiKey: "YOURKEY", // Asegúrese de utilizar una clave API que solo permita operaciones de búsqueda en nodos: [ { host: "CLOUDURL.typesense.net", puerto: 443, ruta: "", // Opcional. Ejemplo: si tiene su typesense montado en localhost:8108/typesense, la ruta debe ser igual al protocolo '/typesense': "https", }, ], cacheSearchResultsForSeconds: 2 * 60, // Caché resultados de búsqueda del servidor. El valor predeterminado es 2 minutos. Establezca en 0 para deshabilitar el almacenamiento en caché. }, // Los siguientes parámetros se pasan directamente al punto final de la API de búsqueda. // Por lo tanto, puede pasar cualquier parámetro admitido por el punto final de búsqueda a continuación. query_by es obligatorio. parámetros de búsqueda adicionales: {query_by: "nombre", }, }); const searchClient = tiposenseInstantsearchAdapter.searchClient; exportar función predeterminada App() { return (  ); } función Hit({ hit }) { return ( {hit.nombre} ); }

Puede configurar más campos, como un filtro, etc., siguiendo el guía de algolia.