React Native and THREE.js (WebGL library) integration

Question

I'm working on a project where we are using React Web and React Native. I already implemented a React Web component which allows you to load 3D models from OBJ, MTL and image files, once the model is loaded you can edit it, attach 3D labels on it and stuff, and finally save your edited 3D model back into the server, and my implementation uses THREE.js behind the scenes.

Now, the next step is to be able to retrieve these files from the server and render the edited 3D Model within a React Native app (mobile). So my question is: how should I go about doing this? I was thinking of using some embedded web view for react native so that I could reuse as much code as possible from the React Web component, and then somehow implement some sort of communication between the web view and the native app but I'm not very sure about how to actually implement this.

I've done some research so far and what I found is the following:

Native WebView for React and A bridge between webview and native app

By reading those pages I got a sense that what I want to do might be doable but I am still not really sure about how to actually implement this. How do I make the React Web component live inside a Webview, and then how do I make the injected code interact with the inner workings of my web component inside the WebView?

If my intended approach turns out not being feasible, is there any alternative approaches to render a 3D model natively in a React Native app, hopefully with a high level of abstraction comparable to that of THREE.js (some sort of THREE-like library for React Native)?

Answer 1

Expo, the framework in which an app is created via create-react-native-app has a GLView which provides access native OpenGL.

There's a tutorial for using Three.js in expo.