Need help with expo-pixi?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

expo
253 Stars 105 Forks MIT License 92 Commits 104 Opened issues

Description

Tools for using pixi.js in Expo

Services available

!
?

Need anything else?

Contributors list

expo-pixi

Tools to use Pixi.js in Expo!

To get started:

yarn add expo-pixi
in your Expo project and import it with
import ExpoPixi from 'expo-pixi';
.

Side-Effects

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 * as PIXI from 'pixi.js';

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

WebGLRenderingContext
.
// ✅
const app = new PIXI.Application({ context });

// ❌ const app = 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')
 */

// ✅ const sprite = await PIXI.Sprite.fromExpoAsync('http://i.imgur.com/uwrbErh.png');

// OR

const texture = await PIXI.Texture.fromExpoAsync('http://i.imgur.com/uwrbErh.png');

// ❌ const sprite = await ExpoPIXI.spriteAsync('http://i.imgur.com/uwrbErh.png');

// OR

const texture = await ExpoPIXI.textureAsync('http://i.imgur.com/uwrbErh.png');

Using web syntax will return a

Promise
, and throw a warning. It's bad practice, but if the asset is loaded already, this will work without throwing a warning.
const sprite = await PIXI.Sprite.from(require('./icon.png'));

// > console.warning(PIXI.Sprite.from(asset: ${typeof asset}) is not supported. Returning a Promise!);

// OR

const texture = await PIXI.Texture.from(require('./icon.png'));

// > console.warning(PIXI.Texture.from(asset: ${typeof asset}) is not supported. Returning a Promise!);

Functions

ExpoPixi.application(props): PIXI.Application

Deprecated: Use

new PIXI.Application({ context });

A helper function to create a

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

ExpoPixi.textureAsync(resource: any): Promise

Deprecated: Use

PIXI.Texture.fromExpoAsync(resource);

ExpoPixi.spriteAsync(resource: any): Promise

Deprecated: Use

PIXI.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 (iOS
    CameraRoll
    ) | 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.


ExpoPixi.sprite({ localUri: string, width: number, height: number }): PIXI.Sprite

Deprecated: Use

PIXI.Sprite.from(resource);

ExpoPixi.texture({ localUri: string, width: number, height: number }): PIXI.Texture

Deprecated: Use

PIXI.Texture.from(resource);

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

HTMLImageElement
shim.

ExpoPixi.Sketch

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

Props

| Property | Type | Default | Description | | ----------- | :-------------------------: | :------: | ----------------------------------------------- | | strokeColor | number | 0x000000 | Color of the lines | | strokeWidth | number | 10 | Weight of the lines | | strokeAlpha | number | 1 | Opacity of the lines | | onChange | () => PIXI.Renderer | null | Invoked whenever a user is done drawing a line | | onReady | () => WebGLRenderingContext | null | Invoked when the GL context is ready to be used |

ExpoPixi.FilterImage

A Image component that uses PIXI.Filter

Props

| Property | Type | Default | Description | | ---------- | :------------------------: | :-----: | ---------------------------------------------------------------------------- | | resizeMode | string | null | Currently only supports

cover
, and
contain
| | filters | Array | null | Array of filters to apply to the image | | source | number, string, Expo.Asset | null | Source can be a static resource, image url (not
{uri}
), or an
Expo.Asset
|

Example

Snack

import React from 'react';
import Expo from 'expo';
import { PIXI } from 'expo-pixi';

export default () => ( <expo.glview style="{{" flex: oncontextcreate="{async" context=""> { const app = new PIXI.Application({ context }); const sprite = await PIXI.Sprite.fromExpoAsync( 'http://i.imgur.com/uwrbErh.png', ); app.stage.addChild(sprite); }} /> ); </expo.glview>

NPM

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.