https://github.com/expo/browser-polyfill
Browser polyfill for making React Native compatible with web libs like pixi.js, three.js, phaser.js
https://github.com/expo/browser-polyfill
browser-polyfill expo pixi polyfill react react-native reactjs reactnative
Last synced: 10 months ago
JSON representation
Browser polyfill for making React Native compatible with web libs like pixi.js, three.js, phaser.js
- Host: GitHub
- URL: https://github.com/expo/browser-polyfill
- Owner: expo
- License: mit
- Created: 2018-02-10T00:02:56.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-04-24T08:55:09.000Z (almost 2 years ago)
- Last Synced: 2025-03-30T22:53:50.652Z (11 months ago)
- Topics: browser-polyfill, expo, pixi, polyfill, react, react-native, reactjs, reactnative
- Language: JavaScript
- Size: 1.53 MB
- Stars: 63
- Watchers: 4
- Forks: 25
- Open Issues: 38
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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.