Have ideas to improve npm?Join in the discussion! »

    expo-pixi

    1.2.0 • 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:

    • 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<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 expo-pixi

    DownloadsWeekly Downloads

    533

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    54.4 kB

    Total Files

    18

    Last publish

    Collaborators

    • avatar