React Native compatibility hint

[benhowes]

trafficstars

Hi!

I've just experimented with replacing Algolia with Meilisearch in my react-native application. I had a bit of a problem for a while which turned out to be that I needed a polyfill for URL on RN. I added https://www.npmjs.com/package/react-native-url-polyfill to my project which resolved the issue.

Leaving here more for the benefit of future react native developers than anything, however, it might be a good win for some documentation since that seems to be all that's needed to get Meilisearch in more react native apps as far as I can tell :)

[curquiza]

Hello @benhowes! Thanks a lot for opening this issue, sure it will help react-native developers! You are our first feedback from react-native 😉 I'm going to update the README with the polyfill as a first step.

Our JS developer is on vacation right now and I will discuss with her to fix or (better) update the README after having her opinion on it, so I let this issue open for the moment! 🙂

Thanks again!

[priofy]

Hi!

I've just experimented with replacing Algolia with Meilisearch in my react-native application. I had a bit of a problem for a while which turned out to be that I needed a polyfill for URL on RN. I added https://www.npmjs.com/package/react-native-url-polyfill to my project which resolved the issue.

Leaving here more for the benefit of future react native developers than anything, however, it might be a good win for some documentation since that seems to be all that's needed to get Meilisearch in more react native apps as far as I can tell :)

Thank you for mentioning this. On React, they use the Instant Search library. What did you use on the front end for react native?

[benhowes]

Still instant search, but with the react native components library (part of instant search)

[priofy]

Thank you @benhowes

[bidoubiwa]

I'm moving this issue to instant-meilisearch repository

[emeagenciadigital]

For react native Algolia has this but I don’t know if you need a different library

https://www.algolia.com/doc/guides/building-search-ui/going-further/native/react/

[emeagenciadigital]

Still instant search, but with the react native components library (part of instant search)

Did you use meilisearch-react or plain instant-meilisearch or Algolia instant search ? Please guide me on the library that was used , if you could share some code will be great .

[hgulersen]

@emeagenciadigital for react native, I used @meilisearch/instant-meilisearch and react-instantsearch-native. react-instantsearch-native is maintained by Algolia but you can easily use it with meilisearch as well.

You can initialize the the client using @meilisearch/instant-meilisearch and the hooks from react-instantsearch-native which is documented thoroughly here: https://www.algolia.com/doc/guides/building-search-ui/going-further/native/react-hooks/

Code to initialize the client:

import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";

const searchClient = instantMeiliSearch(
  <YOUR_URL>
  <YOUR_API_KEY
);

[leeadh]

Also asking for react native. I tried to do

import React from "react";
import "instantsearch.css/themes/algolia-min.css";


import {
  Hits,
  SortBy,
  SearchBox,
  Pagination,
  Highlight,
  ClearRefinements,
  RefinementList,
  Configure,
  Snippet
} from "react-instantsearch-dom";
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';
import { InstantSearch } from 'react-instantsearch-hooks';

const searchClient = instantMeiliSearch(
  "http://xxx:7700/",
  "xxxxx"
);


const Discover = () => (
  
    <InstantSearch indexName="test" searchClient={searchClient}>

        <SearchBox />
        <Hits hitComponent={Hit} />

    </InstantSearch>

  
);


const Hit = ({ hit }) => {
  <div key={hit.id}>
    <div className="hitname">
      <Highlight attribute="Entity" hit={hit} />
    </div>
    
  </div>
};

but this didn't work. createConnector.js:186 Uncaught TypeError: this.props.contextValue.store.getState is not a function

any sample codes please?

[bidoubiwa]

Hey instead of using react-instantsearch-hooks can you try with this library:react-instantsearch-native ?

See this doc

[bidoubiwa]

not critical and stale, closing