You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="React Native URL Polyfill is released under the MIT license." />
28
-
</a>
29
-
</p>
30
-
31
-
<hr />
32
-
33
-
react-native-url-polyfill is an implementation of the WHATWG [URL Standard](https://url.spec.whatwg.org/) optimized for React Native.
34
-
35
-
-**Lightweight**. Uses a forked version of [`whatwg-url`](https://github.com/jsdom/whatwg-url) ([`whatwg-url-without-unicode`](https://github.com/charpeni/whatwg-url)) where unicode support has been stripped out — Going down from [372 KB](https://bundlephobia.com/[email protected]) to [40.9 KB](https://bundlephobia.com/[email protected]).
36
-
-**Trustworthy**. Follows closely the URL Standard spec, and relys on unit tests and Detox e2e tests within [React Native](https://github.com/facebook/react-native).
A lightweight and trustworthy URL polyfill for React Native, based on the WHATWG [URL Standard](https://url.spec.whatwg.org/) optimized for React Native.
11
+
12
+
-**Lightweight**. Uses a forked version of [`whatwg-url`](https://github.com/jsdom/whatwg-url) ([`whatwg-url-without-unicode`](https://github.com/charpeni/whatwg-url)) where Unicode support has been stripped out—Going down from [372 KB](https://bundlephobia.com/[email protected]) to [40.9 KB](https://bundlephobia.com/[email protected]).
13
+
-**Trustworthy**. Follows the URL Standard spec, and relies on unit tests and Detox e2e tests within [React Native](https://github.com/facebook/react-native).
37
14
-**Blob support**. Supports React Native's Blob without additional steps.
38
15
-**Hermes support**. Supports [Hermes](https://github.com/facebook/hermes), a JavaScript engine optimized for running React Native.
39
16
-**Expo support**. Supports [Expo](https://expo.dev/) and tested against.
40
17
-**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.
41
18
19
+
> [!IMPORTANT]
20
+
> As mentioned above, Unicode support has been stripped out to keep this polyfill lightweight on mobile. Therefore, [non-ASCII characters](https://unicode.org/reports/tr46/) aren't supported in the hostname.
21
+
42
22
## Why do we need this?
43
23
44
-
React Native does include [a polyfill for `URL`](https://github.com/facebook/react-native/blob/8c0c860e38f57e18296f689e47dfb4a54088c260/Libraries/Blob/URL.js#L115-L222), but this polyfill is homemade — in order to keep it light-weight — and was initially created to handle specific use cases.
24
+
React Native does include [a polyfill for `URL`](https://github.com/facebook/react-native/blob/8c0c860e38f57e18296f689e47dfb4a54088c260/Libraries/Blob/URL.js#L115-L222), but this polyfill is homemade—in order to keep it light-weight—and was initially created to handle specific use cases.
45
25
46
26
Meanwhile, React Native has grown around that polyfill, then some unexpected errors have arisen.
47
27
28
+
> [!NOTE]
48
29
> Known issues (non-exhaustive) with React Native's URL are:
49
30
>
50
31
> - URL cannot handle "localhost" domain for base url [react-native#26019](https://github.com/facebook/react-native/issues/26019).
51
32
> - URL implementation should add a trailing slash to the base [react-native#25717](https://github.com/facebook/react-native/issues/25717).
> - Creating an instance of URL like: `new URL('http://facebook.com')` throws an exception [react-native#16434](https://github.com/facebook/react-native/issues/16434).
54
35
55
-
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!
36
+
That's why you may need this external dependency. If you use [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) within your app, you should look at the installation steps below!
56
37
57
38
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.
58
39
59
40
## Installation
60
41
61
-
First, you need to install the polyfill, which can be done with [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/).
62
-
63
-
#### Yarn
42
+
First, you need to install the polyfill, which can be done with [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and others.
64
43
65
44
```bash
66
45
yarn add react-native-url-polyfill
67
46
```
68
47
69
-
#### npm
70
-
71
-
```bash
72
-
npm install --save react-native-url-polyfill
73
-
```
74
-
75
48
Then, the polyfill can be used in multiple ways. Pick your preferred option.
76
49
77
-
> ℹ️ 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`.
50
+
> [!TIP]
51
+
> 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`.
0 commit comments