React native support

[vuk-dev]

Hi, does algolia autocomplete component have support for React native?
The thing is that we have everything set on web and works correctly but when i try to create custom renderer on react native i get

The reason we need autocomplete is query suggestion on every page of app, and real search would be on 1 page.
Code used is from example: https://github.com/algolia/autocomplete/blob/next/examples/react-renderer/src/Autocomplete.tsx
Of course code is set to work with RN and all that :D

[sarahdayan]

Hey @vuk-dev!

The autocomplete-core library should be compatible with React Native, and you're on the right path with this guide 🙂 Erratum: there are current incompatibilities between Autocomplete and React Native, see further discussion.

The error you encountered is a bug that comes from how React Native polyfills window.navigator—I believe this could be the same issue as the one that this PR fixed.

I'll create an issue.

[vuk-dev]

Hi again,
when i try to use packages as suggested:

I get this error in console
///////
Error: While trying to resolve module @algolia/autocomplete-core from file .../src/components/Autocomplete/hooks/useAutocomplete.ts, the package .../node_modules/@algolia/autocomplete-core/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (.../node_modules/@algolia/autocomplete-core/dist/umd/index.production.js. Indeed, none of these files exist
/////
dig a bit, found this. try as suggested. Error persist :(
what I tried is clear: node-modules, reset cache, delete app , derivated data etc etc

[sarahdayan]

Are you using Metro? I believe it uses the main field and not module even when using ES6 imports. CodeSandbox apparently doesn't build UMD bundles, so that would make sense.

You can try changing your imports to specifically require the ES6 modules, like:

-import { autocomplete } from '@algolia/autocomplete-js';
+import { autocomplete } from '@algolia/autocomplete-js/dist/esm';

Or you can specify the resolverMainField option in your Metro configuration to use module instead of main.

[sarahdayan]

@vuk-dev Hey, did you get a chance to try it out?

[vuk-dev]

@sarahdayan hi,
I use CLI
My apologize i had some side stuff to attend, Ill look into it this afternoon and will shout results. thanks again

[vuk-dev]

@sarahdayan hi again,
works ok when debug is on. when turn it off i get this error, caused by refresh method.
ERROR ReferenceError: Can't find variable: Event

[sarahdayan]

Hey @vuk-dev, this comes from the fact that Autocomplete uses an Event object in its refresh API, and these objects aren't available in a React Native context. I may have gotten ahead of myself when I said autocomplete-core was compatible with React Native, it seems that we need to dig further to ensure proper compatibility. I'm sorry for the trouble!

It seems that the other issue is gone though, so I'll go ahead with the fix and will leave this discussion open to get you updated.

In the meantime, you may try to go around this issue by polyfilling the Event class (there are packages available) but I haven't tried it so I can't say for sure that it will work or that there aren't other issues.

Thanks for your patience!

[vuk-ivanovic-ananas]

hey again @sarahdayan.
I've been asked if u have plan to support react native and if you do when?
I can easily create custom solution for recent searches plugin, but query suggestions are bit complicated since algolia rocks in that segment soooo is there some documented url for query suggestions. I took a glance on docs but didn't find any tho i might be wrong

[Haroenv]

You can use query suggestions without autocomplete (using the search client or React InstantSearch) for now, as autocomplete wasn't conceived with react native compatibility. While it likely would work, you mentioned you got stuck in some places and nobody else has requested support before, so we haven't tried it yet

[Kaung-Htet-Hein]

hi @Haroenv, Can you provide me a reference link of how to implement query suggestion without using autocomplete in react native?

[Haroenv]

We have no guide specifically for query suggestions in react native, but you can combine this guide: https://www.algolia.com/doc/guides/building-search-ui/going-further/native/react/ with using useSearchBox in the results to set the query when a user taps

[Kaung-Htet-Hein]

hi @Haroenv, I have gone through the guide you provided. but it doesn't help me with how to implement query suggestion. What i want is that, when user type in the textInput, I want to show suggestion query.

i found this guide - https://www.algolia.com/doc/guides/building-search-ui/ui-and-ux-patterns/query-suggestions/tutorials/building-query-suggestions-ui/react/

but it is not useable with react native

[wildseansy]

I use the following parts of react-instantsearch-core

import {
  UseInfiniteHitsProps,
  useHitsPerPage,
  useInfiniteHits,
  useInstantSearch,
} from "react-instantsearch-core";

I have found that the latest version of react-instantsearch-core that supports react-native for my needs is ^7.15.8.

The newer versions (7.16+) added Algolia's AI chat feature which depends on the Vercel AI SDK (ai package), which isn't compatible with React Native. If you use 7.16+ with React Native, you'll get an error:

[runtime not ready]: TypeError: Cannot read property 'object' of undefined

...due to Algoia's dependence on vercel AI sdk, which assumes it's running in the browser or node.

It would be great if Algolia add real support for React Native, or at least documented this somewhere. Alternatively, break the AI piece out as a separate package from this package.