I'm back! Sadly not with the news I initially wanted.
Before I say anything, just let me say that I'm new to rendering anything and before this project I never really used react-native expo. It's quite possible that someone with more experience would have no problem making it work.
So, I gave up on the GIF. Even if it could have worked, I didn't really like this solution. I tried few runtimes, like spine-canvas, spine-webgl, spine-player, spine-three and was about to test pixi-spine. I feel like spine-webgl and spine-three were really close to work. When I gave up debugging, if I recall correctly, the problem was that it was trying to fetch the image using a localhost url. Expo uses Metro to create a server that exposes the app on a "exp" url which allow us to run the app on our cellphone without having to install the app. So trying to fetch an image using localhost just couldn't work. If I recall correctly it was always in the AssetManager. I probably should have been able to create my own AssetManager and require('myFile') instead of using a url.
I ended up using ThreeJS by itself and I could read the file as a string and load the file using a base64 string, so no url involved.
The part where it render something in GLView, I feel like with spine it wouldn't be a problem like mentionned previously since I could use both requestAnimationFrame(render) and gl.endFrameEXP(). This structure was identical for both spine and three.
const onContextCreate = async (gl: ExpoWebGLRenderingContext) => {
[...]
// Method to call to start everything
const animate = () => {
requestAnimationFrame(animate);
render();
gl.endFrameEXP();
};
}
return (
<View>
<GLView
onContextCreate={onContextCreate}
style={{ width: windowWidth, height: windowHeight }}
/>
</View>
)
Sorry I couldn't make it work! I hope it does one day!
