react-native-url-polyfill v2.0.0
react-native-url-polyfill is a full implementation of the WHATWG URL Standard that has been optimized for React Native.
- Trustworthy. Follows closely the URL Standard spec, and relys on unit tests and Detox e2e tests within React Native.
- Light. 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 361 KB to 54 KB. - 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.
Unfortunately, adding react-native-url-polyfill
to React Native source code will means adding š¦ 84.76 KB to the JavaScript bundle, even if you don't use 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!
Installation
First, you need to install the polyfill, which can be done with Yarn or npm.
Yarn
yarn add react-native-url-polyfill
npm
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: react-native-url-polyfill@CURRENT_VERSION
.
Option 1 (Simple)
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)
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.
10 months ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago