React-native-polyfill-globals NPM

react-native-polyfill-globals

Polyfills and patches missing or partially supported web and core APIs.

Motivation

There are several APIs which React Native does not support. When available, they usally are not spec-conformant. This package aims to fill that gap by providing polyfills and patches to said APIs.

As of React Native v0.63.3:

URL and URLSearchParams are partially implemented.
FormData is partially implemented
- https://github.com/facebook/react-native/blob/v0.63.3/Libraries/Network/FormData.js
FileReader.readAsArrayBuffer is not implemented
- https://github.com/facebook/react-native/blob/v0.63.3/Libraries/Blob/FileReader.js#L84
- Related discussions:
  - https://github.com/facebook/react-native/issues/21209
ReadableStream is not supported and, by extension, Response.body is not implemented. Related discussions:
btoa and atob are not supported
TextEncoder and TextDecoder are not supported
...and others

Installation

$ npm install react-native-polyfill-globals

Peer dependencies

Install the above as necessary.

Included support

Implemented by react-native+0.63.3.patch
- FormData.set
- Handling of Blobs by FormData
- FileReader.readAsArrayBuffer
URL and URLSearchParams provided by react-native-url-polyfill
ReadableStream provided by web-streams-polyfill
btoa and atob provided by base-64
TextEncoder and TextDecoder provided by text-encoding
fetch for text streaming provided by react-native-fetch-api
crypto.getRandomValues provided by react-native-get-random-values

Usage

Polyfill all on demand

Import the polyfill function and call it whenever.

import { polyfill } from 'react-native-polyfill-globals';

polyfill();

Polyfill all automatically

Add the following import to the top of your app's entry file, index.js, located at the root of your project.

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

Polyfill selectively

import { polyfill as polyfillBase64 } from 'react-native-polyfill-globals/src/base64';
import { polyfill as polyfillEncoding } from 'react-native-polyfill-globals/src/encoding';
import { polyfill as polyfillReadableStream } from 'react-native-polyfill-globals/src/readable-stream';
import { polyfill as polyfillURL } from 'react-native-polyfill-globals/src/url';
import { polyfill as polyfillFetch } from 'react-native-polyfill-globals/src/fetch';
import { polyfill as polyfillCrypto } from 'react-native-polyfill-globals/src/crypto';

Apply patches

Patch files located at the patches directory provide additional polyfills and fixes.

Apply all at once with patch-package:

$ npm install -D patch-package
$ npx patch-package --patch-dir node_modules/react-native-polyfill-globals/patches

Apply invidually with Git:

$ git apply --ignore-whitespace node_modules/react-native-polyfill-globals/react-native+0.63.3.patch

Apply invidually with patch:

$ patch -p1 -i node_modules/react-native-polyfill-globals/react-native+0.63.3.patch

⚠️ Bundling

Note that Metro, React Native's bundler, at this time does not support tree-shaking nor dead code elimination. As such, beware that even if you apply polyfills selectively and don't use them at runtime, the code will be included in the production bundle regardless. If you don't need a given polyfill, do not import it at all.

node-libs-react-native - Node.js core modules for React Native.
rn-nodeify - Hack to allow React Native projects to use Node core modules and npm modules that use them.
ReactNativify - A saner approach on how to use Node.js libraries in React Native.