Wondering what’s next for npm?Check out our public roadmap! »

    @scale-at/expo-pixi
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.7 • Public • Published

    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:

    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<PIXI.Filter> 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: 1 }}
        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);
        }}
      />
    );

    NPM

    Install

    npm i @scale-at/expo-pixi

    DownloadsWeekly Downloads

    0

    Version

    1.2.7

    License

    MIT

    Unpacked Size

    32.1 kB

    Total Files

    15

    Last publish

    Collaborators

    • avatar