Nondigestible Purple Mayonnaise


    2.1.1 • Public • Published


    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';.


    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): ''
     * - Static Resource: require('./icon.png')
    // ✅
    const sprite = await PIXI.Sprite.fromExpoAsync('');
    // OR 
    const texture = await PIXI.Texture.fromExpoAsync('');
    // ❌
    const sprite = await ExpoPIXI.spriteAsync('');
    // OR 
    const texture = await ExpoPIXI.textureAsync('');

    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!);


    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.


    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


    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


    A Image component that uses PIXI.Filter


    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



    import React from 'react';
    import Expo from 'expo';
    import { PIXI } from 'expo-pixi';
    export default () => (
        style={{ flex: 1 }}
        onContextCreate={async context => {
          const app = new PIXI.Application({ context });
          const sprite = await PIXI.Sprite.fromExpoAsync(



    npm i expo-pixi

    DownloadsWeekly Downloads






    Unpacked Size

    42.4 kB

    Total Files


    Last publish


    • keith-kurak
    • christopherwalter
    • kbrandwijk
    • fiber-god
    • ide
    • brentvatne
    • evanbacon
    • quinlanj
    • expoadmin
    • tsapeta
    • dsokal
    • tcdavis
    • exponent
    • wschurman
    • wkozyra
    • bycedric
    • lukmccall
    • jonsamp
    • princefleaswallow
    • kudochien