A lightweight and trustworthy URL polyfill for React Native
react-native-url-polyfill is an implementation of the WHATWG URL Standard optimized for React Native.
whatwg-url
(whatwg-url-without-unicode
) where unicode support has been stripped out â Going down from 372 KB to 40.9 KB.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.
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.
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!
Unfortunately, adding react-native-url-polyfill
to React Native source code would mean adding ð¦ 73.67 KB (as of RN 0.72) to the JavaScript bundle, that's why it's not included by default.
First, you need to install the polyfill, which can be done with Yarn or npm.
Yarnyarn add react-native-url-polyfillnpm
npm install --save react-native-url-polyfill
Then, the polyfill can be used in multiple ways. Pick your preferred option.
Option 1 (Simple)â¹ï¸ 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:react-native-url-polyfill@CURRENT_VERSION
.
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';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.
If you do not apply the polyfill, it will still be added to your JavaScript bundle. Even if it's wrapped in a condition, Metro won't strip it in production.
import { setupURLPolyfill } from 'react-native-url-polyfill'; setupURLPolyfill();Option 3 (Convenient / ponyfill)
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');License
react-native-url-polyfill is MIT licensed.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4