expo-pixi-drgsr
expo-pixi-drgsr
npm i expo-pixi-drgsr
expo-pixi-drgsr

expo-pixi-drgsr

Tools for using pixi.js in Expo

by expo

1.4.0 (see all)License:MITTypeScript:Not Found
npm i expo-pixi-drgsr
Readme

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

Functions

ExpoPixi.application(props): PIXI.Application

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

ExpoPixi.spriteAsync(resource: any): Promise

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

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

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

PropertyTypeDefaultDescription
strokeColornumber0x000000Color of the lines
strokeWidthnumber10Weight of the lines
strokeAlphanumber1Opacity of the lines
onChange() => PIXI.RenderernullInvoked whenever a user is done drawing a line
onReady() => WebGLRenderingContextnullInvoked when the GL context is ready to be used

ExpoPixi.FilterImage

A Image component that uses PIXI.Filter

Props

PropertyTypeDefaultDescription
resizeModestringnullCurrently only supports cover, and contain
filtersArray<PIXI.Filter>nullArray of filters to apply to the image
sourcenumber, string, Expo.AssetnullSource can be a static resource, image url (not {uri}), or an Expo.Asset

Example

Snack

import React from 'react';
import Expo from 'expo';
import ExpoPixi from 'expo-pixi';

export default () => (
  <Expo.GLView
    style={{ flex: 1 }}
    onContextCreate={async context => {
      const app = ExpoPixi.application({ context });
      const sprite = await ExpoPixi.spriteAsync(
        'http://i.imgur.com/uwrbErh.png',
      );
      app.stage.addChild(sprite);
    }}
  />
);

NPM

Downloads/wk

0

GitHub Stars

299

LAST COMMIT

7mos ago

MAINTAINERS

1

CONTRIBUTORS

11

OPEN ISSUES

75

OPEN PRs

23
VersionTagPublished
1.4.0
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate