# @expo/browser-polyfill

> Browser polyfill for making React Native compatible with web libs like pixi.js, three.js, phaser.js

Latest version **1.0.1** (published 2024-04-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @expo/browser-polyfill
pnpm add @expo/browser-polyfill
yarn add @expo/browser-polyfill
bun add @expo/browser-polyfill
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2024-04-24 |
| First published | 2018-02-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 20.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Evan Bacon |
| Maintainers | szdziedzic, alanhughes, kadikraman, radoslawkrzemien, aleqsio, marklawlor, gabrieldonadel, simek, keith-kurak, christopherwalter, kbrandwijk, fiber-god, ide, brentvatne, evanbacon, quinlanj, expoadmin, tsapeta, exponent, wschurman, wkozyra, bycedric, lukmccall, jonsamp, princefleaswallow, kudochien |
| Keywords | expo, browser, polyfill, react-native, react, web, dom, document, shim |

## Links

- npm: https://www.npmjs.com/package/@expo/browser-polyfill
- Repository: https://github.com/expo/browser-polyfill
- Homepage: https://github.com/expo/browser-polyfill#readme
- Issues: https://github.com/expo/browser-polyfill/issues
- npm.io page: https://npm.io/package/@expo/browser-polyfill

## Dependencies (5)

- [uuid](https://npm.io/package/uuid.md) ^8.3.2
- [fbemitter](https://npm.io/package/fbemitter.md) ^2.1.1
- [xmldom-qsa](https://npm.io/package/xmldom-qsa.md) ^1.0.3
- [text-encoding](https://npm.io/package/text-encoding.md) ^0.7.0
- [expo-2d-context](https://npm.io/package/expo-2d-context.md) ^0.0.3

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2024-04-24
- 1.0.0 — 2022-01-12
- 0.1.1 — 2021-01-19
- 0.1.0 — 2019-07-16
- 0.0.1-alpha.6 — 2019-07-02
- 0.0.1-alpha.5 — 2019-04-22
- 0.0.1-alpha.4 — 2019-04-22
- 0.0.1-alpha.3 — 2018-09-24
- 0.0.1-alpha.2 — 2018-08-08
- 0.0.1-alpha.1 — 2018-08-06
- 0.0.1-alpha.0 — 2018-07-29
- 0.0.0-alpha.10 — 2018-07-10
- 0.0.0-alpha.9 — 2018-06-25
- 0.0.0-alpha.8 — 2018-04-18
- 0.0.0-alpha.7 — 2018-04-12
- … 7 more at https://npm.io/package/@expo/browser-polyfill/versions

## README

# @expo/browser-polyfill

Browser polyfill for React Native

### Installation

```bash
yarn add @expo/browser-polyfill
```

### Usage

Import the library into your JavaScript file:

```js
import '@expo/browser-polyfill';
```

## Implements

## DOM

DOM is provided with very low support, these are used for libs like pixi.js that validate type.

```js
class Node
class Element
class Document
class HTMLImageElement
class Image
class ImageBitmap
class HTMLVideoElement
class Video
class HTMLCanvasElement
class Canvas
```

### Image, HTMLImageElement, ImageBitmap

Image has support for loading callbacks, however the loaded uri must be passed to the src already.

```js
const image = new Image();
image.src = '';
image.onload = () => {
  const { src, width, height } = image;
};
image.addEventListener('loading', () => {});
image.addEventListener('error', () => {});
```

### Document

```js
const element = document.createElement('div');
const fakeContext = element.getContext('');
```

### Element

#### All sizes return the window size:

```js
element.clientWidth;
element.clientHeight;
element.innerWidth;
element.innerHeight;
element.offsetWidth;
element.offsetHeight;
```

#### Empty attributes that prevent libraries from crashing

```js
element.tagName;
element.addEventListener;
element.removeEventListener;
element.setAttributeNS;
element.createElementNS;
```

### Node

```js
node.ownerDocument;
node.className;
node.appendChild;
node.insertBefore;
node.removeChild;
node.setAttributeNS;
node.getBoundingClientRect;
```

# External Libraries

Some external node.js polyfills are added as well.

## [text-encoding](https://github.com/inexorabletash/text-encoding)

```
global.TextEncoder
global.TextDecoder
```

## [xmldom-qsa](https://github.com/zeligzhou/xmldom-qsa)

```
window.DOMParser
```

## [react-native-console-time-polyfill](https://github.com/MaxGraey/react-native-console-time-polyfill)

```
console.time(label);
console.timeEnd(label);
console.count(label);
```

# Debug flags

For debugging base64 image transformations toggle:

```js
global.__debug_browser_polyfill_image = true;
```

By default `global.__debug_browser_polyfill_image` is false.

---
_Source: https://npm.io/package/@expo/browser-polyfill · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._