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.
  • https://github.com/facebook/react-native/blob/v0.63.3/Libraries/Blob/URL.js#L56
  • https://github.com/facebook/react-native/blob/v0.63.3/Libraries/Blob/URL.js#L115
  • Related discussions:
    • facebook/react-native#30188
    • facebook/react-native#25719
    • facebook/react-native#23922
    • facebook/react-native#24428
    • facebook/react-native#16434
    • facebook/react-native#25717
    • facebook/react-native#26019
• 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:
    • facebook/react-native#21209
• ReadableStream is not supported and, by extension, Response.body is not implemented. Related discussions:
  • facebook/react-native#27741
  • facebook/react-native#12912
  • JakeChampion/fetch#198
  • JakeChampion/fetch#746
• btoa and atob are not supported
• TextEncoder and TextDecoder are not supported
• ...and others

Installation

$ npm install react-native-polyfill-globals

Peer dependencies

• react-native-url-polyfill
• web-streams-polyfill
• base-64
• text-encoding
• react-native-fetch-api
• react-native-get-random-values

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.

Related

• 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.

License

MIT © André Costa Lima