Advice on implementing Lottie texture in react-native

Questions
,
1

I am looking for some pointers and tips on how I could approach using Lottie animations as mesh or sprite textures in react-native.

I’ve looked at the web Lottie example, which seems to rely on the DOM tree.

Any pointers appreciated.

2

I think it only relies on dom to control the playback. You can use the loader without the dom, and drive the animation yourself I think?

3

I am able to load the lottie file, but under the hood it also uses CanvasTexture to draw which expects an html canvas…

4

I could use the code below to define a Lottie Animation as a texture in react. In react-native, since there’s no DOM element to pass, .container is undefined. How can I define texture.image ?

const texture = new THREE.CanvasTexture();
texture.minFilter = THREE.NearestFilter;
texture.colorSpace = THREE.SRGBColorSpace;
texture.animation = lottieViewRef.current;
texture.image = lottieViewRef.current.container;
5

You can create a canvas outside of react for your own use…

let mycanvas = document.createElement('canvas')
mycanvas.width = mycanvas.height = 256;
const texture = new THREE.CanvasTexture();

then later when you update the lottie animation, set

texture.needsUpdate = true;
6

There’s no “document” in react-native

7

How are you creating a renderer for threejs ?

8
9

I’m using expo-gl. So the 3D elements are drawn in GLView via @react-three/fiber/native Canvas.