Comments (6)
I finally succeeded to draw a local image file with this modified version of the basic example:
import React from 'react';
import Expo from 'expo';
import { GLView } from 'expo-gl';
import { PIXI } from 'expo-pixi';
export default () => (
<GLView
style={{ flex: 1 }}
onContextCreate={async context => {
const app = new PIXI.Application({ context });
const sprite = await PIXI.Sprite.fromExpoAsync(require('./assets/img.png'));
app.stage.addChild(sprite);
}}
/>
);
from expo-pixi.
Same issue!!
from expo-pixi.
I just adapted the imports
and did those installs :
expo install expo-gl
expo install expo-pixi
App.js
import React, { Component } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import * as FileSystem from 'expo-file-system';
import base64 from 'base64-js';
import ExpoPixi from 'expo-pixi';
export default class App extends Component {
constructor(props) {
super(props);
this.sketch = null;
}
stringToUint8Array(str) {
const length = str.length;
const array = new Uint8Array(new ArrayBuffer(length));
for (let i = 0; i < length; i++) array[i] = str.charCodeAt(i);
return array;
}
async fileToBase64(uri) {
try {
const content = await FileSystem.readAsStringAsync(uri);
return base64.fromByteArray(this.stringToUint8Array(content));
} catch (e) {
console.warn('fileToBase64()', e.message);
return '';
}
}
fileToBase64Helper(uri) {
return this.fileToBase64(uri);
}
render() {
const color = 0x000000;
const width = 4;
const alpha = 1;
return (
<View style={{ flex: 1 }}>
<ExpoPixi.Signature
ref={ref => (this.sketch = ref)}
strokeColor={color}
strokeWidth={width}
strokeAlpha={alpha}
style={{ flex: 1 }}
onChange={async () => {
const { uri } = await this.sketch.takeSnapshotAsync({
format: 'png',
});
// console.log(await this.fileToBase64Helper(uri))
console.log(uri);
try {
const file = await FileSystem.readAsStringAsync(uri, {
encoding: 'base64',
});
console.log(file);
} catch (e) {
console.error(e.message);
}
}}
/>
<View
style={{
height: 80,
alignItems: 'center',
justifyContent: 'space-between',
flexDirection: 'row',
paddingHorizontal: 20,
}}>
<TouchableOpacity
style={{
backgroundColor: 'white',
height: 50,
justifyContent: 'center',
alignItems: 'center',
width: '45%',
borderRadius: 6,
borderColor: '#0d52bd',
borderWidth: 2,
}}>
<Text style={{ fontSize: 19, color: 'black' }}>Cancel</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
backgroundColor: '#0d52bd',
height: 50,
justifyContent: 'center',
alignItems: 'center',
width: '45%',
borderRadius: 6,
}}>
<Text style={{ fontSize: 19, color: 'white' }}>Save</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
from expo-pixi.
Thanks @rafipiccolo for your answer,
Your 'Signature' example is working for me.
But, are you able to execute this code that use a GLView
:
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 = new ExpoPixi.Application({ context });
const sprite = await ExpoPixi.Sprite.fromExpoAsync(
'http://i.imgur.com/uwrbErh.png',
);
app.stage.addChild(sprite);
}}
/>
);
This is the same code as the example from https://github.com/expo/expo-pixi, but with "PIXI" swapped with "ExpoPixi".
from expo-pixi.
I have also tried this:
import React from 'react';
import Expo from 'expo';
import { GLView } from 'expo-gl';
import { ExpoPixi } from 'expo-pixi';
export default () => (
<GLView
style={{ flex: 1 }}
onContextCreate={async context => {
const app = new ExpoPixi.Application({ context });
const sprite = await ExpoPixi.Sprite.fromExpoAsync(
'http://i.imgur.com/uwrbErh.png',
);
app.stage.addChild(sprite);
}}
/>
);
In this case, no TypeError: undefined is not an object (evaluating '_expo.default.GLView)
error, but a Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'new _expoPixi.ExpoPixi.Application')
warning instead and a white screen with no image.
from expo-pixi.
hello,
this one would work if it wasn't for this other bug wich prevent loading https files : #103
although It may work with http or local file. I'm pretty lazy now as i dont know how to test it.
:) 👍
import { PIXI } from 'expo-pixi';
import React from 'react';
export default () => (
<GLView
style={{ flexGrow: 1, flexShrink: 0, flexBasis: 'auto' }}
onContextCreate={async context => {
const app = new PIXI.Application({ context });
// const texture = await PIXI.Texture.fromExpoAsync('http://i.imgur.com/uwrbErh.png');
// const texture = await PIXI.Texture.from('http://i.imgur.com/uwrbErh.png');
// const sprite = PIXI.Sprite.from(texture);
// const sprite = await PIXI.Sprite.from('http://i.imgur.com/uwrbErh.png');
const sprite = await PIXI.Sprite.fromExpoAsync('https://i.imgur.com/uwrbErh.png');
app.stage.addChild(sprite);
}}
/>
);```
from expo-pixi.
Related Issues (20)
- Unable to Use ExpoPixi in VS Code HOT 1
- Unable to resolve "uuid/v1" from "node_modules/@expo/browser-polyfill/src/DOM/HTMLImageElement.js" HOT 2
- iOS 14 support HOT 1
- Asset not loading for Sprite Sheet animation
- 'expo' does not contain a default export
- Library doesn't work with Camera Roll assets HOT 3
- Not compatible with Expo sdk 39 HOT 5
- Typescript Definition File HOT 1
- Examples and Pixi Spine is not working
- Issue when running Signature on Expo Web
- Upgrade to pixi 5.xxx HOT 1
- Outdated expo-gl peer-dependency HOT 3
- GLView doesn't show anything
- Unable to resolve module @pixi/core HOT 10
- Expo Client 2.21.5 (SDK 39) this.nativeVaoExtension.createVertexArrayOES is not a function HOT 15
- Sketch example crashes on Android (undefined is not an object (evaluating '_this.lastPoint.x')) HOT 6
- Incompatible with Expo 43 HOT 1
- To make it compatible with expo SDK 44
- Incompatible with Expo 46
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from expo-pixi.