Search by Algolia
5 considerations for Black Friday 2023 readiness
e-commerce

5 considerations for Black Friday 2023 readiness

It’s hard to imagine having to think about Black Friday less than 4 months out from the previous one ...

Piyush Patel

Chief Strategic Business Development Officer

How to increase your sales and ROI with optimized ecommerce merchandising
e-commerce

How to increase your sales and ROI with optimized ecommerce merchandising

What happens if an online shopper arrives on your ecommerce site and: Your navigation provides no obvious or helpful direction ...

Catherine Dee

Search and Discovery writer

Mobile search UX best practices, part 3: Optimizing display of search results
ux

Mobile search UX best practices, part 3: Optimizing display of search results

In part 1 of this blog-post series, we looked at app interface design obstacles in the mobile search experience ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Mobile search UX best practices, part 2: Streamlining search functionality
ux

Mobile search UX best practices, part 2: Streamlining search functionality

In part 1 of this series on mobile UX design, we talked about how designing a successful search user experience ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Mobile search UX best practices, part 1: Understanding the challenges
ux

Mobile search UX best practices, part 1: Understanding the challenges

Welcome to our three-part series on creating winning search UX design for your mobile app! This post identifies developer ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Teaching English with Zapier and Algolia
engineering

Teaching English with Zapier and Algolia

National No Code Day falls on March 11th in the United States to encourage more people to build things online ...

Alita Leite da Silva

How AI search enables ecommerce companies to boost revenue and cut costs
ai

How AI search enables ecommerce companies to boost revenue and cut costs

Consulting powerhouse McKinsey is bullish on AI. Their forecasting estimates that AI could add around 16 percent to global GDP ...

Michelle Adams

Chief Revenue Officer at Algolia

What is digital product merchandising?
e-commerce

What is digital product merchandising?

How do you sell a product when your customers can’t assess it in person: pick it up, feel what ...

Catherine Dee

Search and Discovery writer

Scaling marketplace search with AI
ai

Scaling marketplace search with AI

It is clear that for online businesses and especially for Marketplaces, content discovery can be especially challenging due to the ...

Bharat Guruprakash

Chief Product Officer

The changing face of digital merchandising
e-commerce

The changing face of digital merchandising

This 2-part feature dives into the transformational journey made by digital merchandising to drive positive ecommerce experiences. Part 1 ...

Reshma Iyer

Director of Product Marketing, Ecommerce

What’s a convolutional neural network and how is it used for image recognition in search?
ai

What’s a convolutional neural network and how is it used for image recognition in search?

A social media user is shown snapshots of people he may know based on face-recognition technology and asked if ...

Catherine Dee

Search and Discovery writer

What’s organizational knowledge and how can you make it accessible to the right people?
product

What’s organizational knowledge and how can you make it accessible to the right people?

How’s your company’s organizational knowledge holding up? In other words, if an employee were to leave, would they ...

Catherine Dee

Search and Discovery writer

Adding trending recommendations to your existing e-commerce store
engineering

Adding trending recommendations to your existing e-commerce store

Recommendations can make or break an online shopping experience. In a world full of endless choices and infinite scrolling, recommendations ...

Ashley Huynh

Ecommerce trends for 2023: Personalization
e-commerce

Ecommerce trends for 2023: Personalization

Algolia sponsored the 2023 Ecommerce Site Search Trends report which was produced and written by Coleman Parkes Research. The report ...

Piyush Patel

Chief Strategic Business Development Officer

10 ways to know it’s fake AI search
ai

10 ways to know it’s fake AI search

You think your search engine really is powered by AI? Well maybe it is… or maybe not.  Here’s a ...

Michelle Adams

Chief Revenue Officer at Algolia

Cosine similarity: what is it and how does it enable effective (and profitable) recommendations?
ai

Cosine similarity: what is it and how does it enable effective (and profitable) recommendations?

You looked at this scarf twice; need matching mittens? How about an expensive down vest? You watched this goofy flick ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What is cognitive search, and what could it mean for your business?
ai

What is cognitive search, and what could it mean for your business?

“I can’t find it.”  Sadly, this conclusion is often still part of the modern enterprise search experience. But ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

How neural hashing can unleash the full potential of AI retrieval
ai

How neural hashing can unleash the full potential of AI retrieval

Search can feel both simple and complicated at the same time. Searching on Google is simple, and the results are ...

Bharat Guruprakash

Chief Product Officer

Looking for something?

How we updated our JS libraries for React Native
facebookfacebooklinkedinlinkedintwittertwittermailmail

Our mission at Algolia is to make sure that every website or app has the best search experience possible. That’s why we created several clients for iOS (in Swift and objective-C), Android, Windows/C# and JavaScript.

But we’re always looking for new ways to help developers and are very interested in the possibilities introduced by React Native, Facebook’s latest initiative to change the way we build apps.

Based on the awesome React library (that we already use), React Native lets you develop applications for Android and iOS using Javascript, hopefully making the development process easier and more consistent. What’s even cooler is that it can leverage what’s already available on NPM such as algoliasearch-client-js or algoliasearch-helper.

But React Native is a new execution environment different from Node or the web. Some expected features are implemented, some are not. When we tried to use our libraries to build an app using React Native, we hit a few bumps. We want to share with you what those were and how we got over them.

TL;DR : we made our JS libraries compatible with React Native, and it’s available right now! And we made a sample to help you get started.

Algolia and React Native in action.
Algolia and React Native in action.

Not a Node polyfill

The first thing we noticed when working with React-Native is that even though it looks similar to Node, it’s not quite the same. React Native lets you use require() but doesn’t polyfill the Node standard libraries like Browserify or Webpack do. The reason it doesn’t do this is that it’s not using the same tool to do the packaging and they made the choice not to implement this compatibility layer.

In order to make our module work in this new environment, we need to provide the core Node modules used by our libraries. Hopefully, all those Node standard libraries are available on NPM and we just need to add them to our package.json file as we are installing them (--save for the win).

But won’t we now run into issues with the module running on Node because we’ve modified the package.json? Nope! Because of the built-in rules of require() in Node, we know that it will always use the built-in version if it is available.

The web but not exactly

Most of the work in our JS-client library is based on HTTP calls. And hopefully, React Native implements a version of XHR for us. Unfortunately, its XHR implementation comes with some particularities. Some of these differences break stuff, whereas some simplify the work. Let’s see in more detail what differs from the web:

  • React-Native is for creating native apps, and they are not restricted to a single domain like web pages, so implementing CORS capabilities doesn’t make sense.
  • React-Native doesn’t come in many versions, and the set of features is clearly defined, so there’s no need for web fallbacks/compat hacks such as JSONP.
  • Our library also relies on XHR timeout, but it is not implemented there, so we rely on the good old setTimeout to implement this.

Those changes were only needed in the JS Client that handles the request to our API. The JS-Helper only relies on the client and some libraries, so it does not need further modifications.

New JS territories, here we come!

We applied what we learned about React Native to make our JS libraries, the JS client and the JS Helper compatible with it, so now you have a new way to build your mobile applications on Android, iOS and more. Let us know if you have any questions.

Get started with Algolia using React Native using our HN search sample.

About the author
Alexandre Stanislawski

Algolia documentation

It's extensive, clear, and, of course, searchable.

Read the docs
Algolia documentation

Recommended Articles

Powered byAlgolia Algolia Recommend

Modern JavaScript libraries: the isomorphic way
engineering

Vincent Voyer

Engineering Manager

Harnessing API’s with React: a different approach
engineering

Alexandre Stanislawski

Building for developers—a tour of new features and resources in 2017
algolia

Josh Dzielak