Hi, I'm trying to use the spine-player in a react-native app using Expo. I have this code

import React, { useRef } from "react";
import { ExpoWebGLRenderingContext, GLView } from 'expo-gl';
import spine from '@esotericsoftware/spine-player';

const Character = () => {
  const glViewRef = useRef<GLView>(null);

  const onContextCreate = async (gl: ExpoWebGLRenderingContext) => {

    const myString = glViewRef.current!.nativeRef!.toString();

    new spine.SpinePlayer(myString, {
      jsonUrl: "assets/spine/spineboy-pro.json",
      atlasUrl: "assets/spine/spineboy-pro.atlas",
      animation: "walk",
      showControls: false,
      premultipliedAlpha: true,
      backgroundColor: "#cccccc",
      alpha: true,
      preserveDrawingBuffer: true,
      defaultMix: 1,
      controlBones: ["root"],
      viewport: {
        debugRender: true,
      },
    });
  };

  return (
    <GLView
      style={{ flex: 1 }}
      onContextCreate={onContextCreate}
      ref={glViewRef}
    />
  );
};

export default Character;

It seems like myString is undefined. Since the SpinePlayer requires a string or a HTMLElement, I can't figure out how to make this work. Is it possible? If so, how?

Thank you

Problem is that it's not "React", but rather "React-Native". There's no such thing as an ID referencing an HTML element.. Actually, I initially thought that myString would reference the GLView element, which would in turn act as a div. I tried another approach

const Character = () => {
  useEffect(() => {
    new spine.SpinePlayer("test-id", {
      jsonUrl: "assets/spine/spineboy-pro.json",
      atlasUrl: "assets/spine/spineboy-pro.atlas",
      animation: "walk",
      showControls: false,
      premultipliedAlpha: true,
      backgroundColor: "#cccccc",
      alpha: true,
      preserveDrawingBuffer: true,
      defaultMix: 1,
      controlBones: ["root"],
      viewport: {
        debugRender: true,
      },
    });
  }, []);

  return (
    <View nativeID="test-id">
    </View>
  );
};

export default Character;

But I get the following : undefined is not an object (evaluating 'new _spinePlayer.default.SpinePlayer')

Actually I just read the source code for SpinePlayer and it uses the document variable, which doesn't exist in react-native, since it's made to build on mobile devices, not a web page. However, I see that a library exists for Flutter, which is also for mobile development.. So I guess there's a way to make this work for react-native.. ?

Could I possibly render the animation server side and return the result to the app? Do every runtime actually need the "frontend" to be able to render the animation itself?

In my specific case, all I need is to render an idle animation or a walking animation. There's no control for the player, therefor a GIF would be ideal. Would I need an additional lib to "simulate" a browser or something like that? If generating a GIF backend is an option, I would do it from an AWS Lambda, so serverless which supports c# or python that I saw in the available runtimes.. it also supports javascript, but as I understand it, I cannot use javascript without using "html variables" (like "document")?

I'll see what I can do with that However, I do need to customise the character.. like to add a hat. I do believe I can use OpenGL, so I'll try that! I'll come back here when I have a solution to offer.. or ran out of ideas! Thank you!

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!

Oh that's interesting I didn't see that! Well, with the onContextCreate example and this way of loading asset, it probably would have worked. That's good to know thank you!