React Native URL Polyfill
A lightweight and trustworthy URL polyfill for React Native
react-native-url-polyfill is a full implementation of the WHATWG URL Standard that has been optimized for React Native.
- Lightweight. Instead of using directly
whatwg-url, this polyfill uses a forked version (
whatwg-url-without-unicode) where unicode support has been stripped out — Going down from 372 KB to 41 KB.
- Trustworthy. Follows closely the URL Standard spec, and relys on unit tests and Detox e2e tests within React Native.
- Blob support. Supports React Native's Blob without additional steps.
Why do we need this?
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.
Known issues (non-exhaustive) with React Native's URL are:
- URL cannot handle "localhost" domain for base url react-native#26019.
- URL implementation should add a trailing slash to the base react-native#25717.
- URL incorrectly adds trailing slash react-native#24428.
- Creating an instance of URL like:
new URL('http://facebook.com')throws an exception react-native#16434.
URL because 🚇 Metro doesn't support optional imports.
That's why you may need this external dependency. So, if you use
URL within your app, you probably want to take a look at the installation steps below!
yarn add react-native-url-polyfill
npm install --save react-native-url-polyfill
Then, the polyfill can be used in multiple ways. Pick your preferred option.
ℹ️ To verify if the polyfill has been correctly applied, you can check if the global variable
REACT_NATIVE_URL_POLYFILL contains the current package and version like:
Option 1 (Simple)
index.js at the root of your React Native project.
react-native-url-polyfill/auto at the top of your entry-point file, the polyfill will be automatically applied.
Option 2 (Flexible)
If you want to apply the polyfill when you're ready, you can import
setupURLPolyfill and call it yourself.
⚠️ Metro doesn't support optional imports.
Option 3 (Convenient)
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.
;const url = '';const searchParams = 'q=GitHub';
react-native-url-polyfill is MIT licensed.