gem-hunter

A lightweight and trustworthy URL polyfill for React Native, based on the WHATWG URL Standard optimized for React Native.

• Lightweight. Ships its own dependency-free implementation of the URL Standard where Unicode hostname support has been left out to keep the bundle small. Written in TypeScript, published as minified plain JavaScript.
• Trustworthy. Follows the URL Standard spec, and relies on unit tests generated from Web Platform Tests and Detox e2e tests within React Native. Types are verified to stay interchangeable with Node.js's built-in URL and whatwg-url.
• Blob support. Supports React Native's Blob without additional steps.
• Hermes support. Supports Hermes, a JavaScript engine optimized for running React Native.
• Expo support. Supports Expo.
• Web support. Most of the time, this polyfill isn't useful on web and therefore using react-native-url-polyfill/auto will be no-op on web.

React Native does include a polyfill for URL, but this polyfill is homemade—in order to keep it light-weight—and was initially created to handle specific use cases.

Meanwhile, React Native has grown around that polyfill, then some unexpected errors have arisen.

That's why you may need this external dependency. If you use URL within your app, you should look at the installation steps below!

First, you need to install the polyfill, which can be done with Yarn, npm, and others.

yarn add react-native-url-polyfill

Then, the polyfill can be used in multiple ways. Pick your preferred option.

Locate your JavaScript entry-point file, commonly called index.js at the root of your React Native project.

Then, import react-native-url-polyfill/auto at the top of your entry-point file, the polyfill will be automatically applied.

import 'react-native-url-polyfill/auto';

If you want to apply the polyfill when you're ready, you can import setupURLPolyfill and call it yourself.

import { setupURLPolyfill } from 'react-native-url-polyfill';

setupURLPolyfill();

If you prefer not to apply this polyfill over React Native's default URL, you can still import those classes manually when you want them.

import { URL, URLSearchParams } from 'react-native-url-polyfill';

const url = new URL('https://github.com');
const searchParams = new URLSearchParams('q=GitHub');

Run the URL workloads on Node with yarn benchmark [samples], or on the optimized standalone Hermes runtime bundled with React Native with yarn benchmark:hermes [samples]. The Hermes command currently relies on the standalone runtime shipped for supported host platforms (macOS in React Native 0.81.4); HERMES_BIN and HERMESC_BIN can point to another matching binary pair. These desktop standalone-Hermes measurements are not representative of device performance. Unsupported optional implementations and operations are reported and skipped.

react-native-url-polyfill is MIT licensed.