Repository files navigation

Tools to usePixi.js in Expo!

To get started:yarn add expo-pixi in your Expo project and import it withimport ExpoPixi from 'expo-pixi';.

To use Pixi.js with Expo & React Native you will want to import a modified version of Pixi.js like so:

// ✅import{PIXI}from'expo-pixi';// ❌import*asPIXIfrom'pixi.js';

Now you can create a new Application the way you would on the web, but be sure to pass in aWebGLRenderingContext.

// ✅constapp=newPIXI.Application({ context});// ❌constapp=ExpoPIXI.application({ context});

Finally, because of the way React Native currently works you must load in assets asynchronously.

/* * Accepts: * - Expo.Asset: import { Asset } from 'expo-asset'; Asset.fromModule( ... ); * - URL (with file extension): 'http://i.imgur.com/uwrbErh.png' * - Static Resource: require('./icon.png') */// ✅constsprite=awaitPIXI.Sprite.fromExpoAsync('http://i.imgur.com/uwrbErh.png');// ORconsttexture=awaitPIXI.Texture.fromExpoAsync('http://i.imgur.com/uwrbErh.png');// ❌constsprite=awaitExpoPIXI.spriteAsync('http://i.imgur.com/uwrbErh.png');// ORconsttexture=awaitExpoPIXI.textureAsync('http://i.imgur.com/uwrbErh.png');

Using web syntax will return aPromise, and throw a warning. It's bad practice, but if the asset is loaded already, this will work without throwing a warning.

constsprite=awaitPIXI.Sprite.from(require('./icon.png'));// > console.warning(PIXI.Sprite.from(asset: ${typeof asset}) is not supported. Returning a Promise!);// ORconsttexture=awaitPIXI.Texture.from(require('./icon.png'));// > console.warning(PIXI.Texture.from(asset: ${typeof asset}) is not supported. Returning a Promise!);

Deprecated: Usenew PIXI.Application({ context });

A helper function to create aPIXI.Application from a WebGL context.EXGL knows to end a frame when the function:endFrameEXP is called on the GL context.

context is the only required prop.

Learn more about PIXI.Application props

Deprecated: UsePIXI.Texture.fromExpoAsync(resource);

Deprecated: UsePIXI.Sprite.fromExpoAsync(resource);

a helper function to resolve the asset passed in.textureAsync accepts:

• localUri: string | ex: "file://some/path/image.png"
• static resource: number | ex: require('./image.png')
• remote url: string | ex: "https://www.something.com/image.png"
• asset-library: string (iOSCameraRoll) | ex: "asset-library://some/path/image.png"
• Expo Asset: Expo.Asset | learn more:https://docs.expo.io/versions/latest/guides/assets.html

You cannot send in relative string paths as Metro Bundler looks for static resources.

Deprecated: UsePIXI.Sprite.from(resource);

Deprecated: UsePIXI.Texture.from(resource);

Pixi.js does a type check so we wrap our asset in aHTMLImageElement shim.

A component used for drawing smooth signatures and sketches.

See the sketch example on how to save the images!

Notice: the edges and ends are not rounded as this is not supported in PIXI yet:Issue

A Image component that uses PIXI.Filter

Snack

importReactfrom'react';importExpofrom'expo';import{PIXI}from'expo-pixi';exportdefault()=>(<Expo.GLViewstyle={{flex:1}}onContextCreate={asynccontext=>{constapp=newPIXI.Application({ context});constsprite=awaitPIXI.Sprite.fromExpoAsync('http://i.imgur.com/uwrbErh.png',);app.stage.addChild(sprite);}}/>);