React-native render

[gut4]

Do you think about making react-native renders (for ios & android)?

[jonobr1]

Not yet..! Does React Native support canvas drawing or expose a GL context? I haven't looked into it much.

[mike-marcacci]

I'm interested in this as well. The fact that two.js is renderer-agnostic and already has WebGL support is compelling: I imagine it would be fairly straightforward to port it to OpenGL.

[jonobr1]

Is that what React Native uses as the underlying drawing for iOS / Android?

[mike-marcacci]

Not exactly. React native is a weird word since it's got several of parts:

1. Native rendering code written in Objective C, Swift, or Java
2. Binding helpers to make native code callable from JS
3. React components that call the native rendering code
4. React, so you can assemble your app in JS using react components, which are written in JS but call native code, which does the rendering

In the case of two.js, it is probably possible to write a renderer with a combination of native code and JS (using parts 1 and 2 above). Since both iOS and Android support OpenGL ES, the logic from the WebGL render could be re-used, even though the code itself would have to be ported to the native language. The key here is that developers using two.js could share all their code between iOS, Android, and web apps, and it would be rendered natively on each platform.

Note that you wouldn't actually define a react component.

[jonobr1]

Ah hah, interesting interesting. I've spent some time exploring a Swift renderer... I agree that it's not out of the question to bring a Two.js style API to mobile app development. I'll continue to simmer on this and welcome any ideas you have!

[anion155]

@jonobr1 Maybe using something like this as backend? https://github.com/alibaba/GCanvas

[jonobr1]

Thanks @anion155. That looks like a very promising API and avenue for realisation!

[logan-markewich]

Just giving this a bump... would be a fantastic addition

[jonobr1]

Thanks. The more datapoints the better I can prioritize features. This is a good point of reference and repository to see how to develop the native hooks: https://www.npmjs.com/package/create-react-native-plugin

[jonobr1]

Actually, this looks better: https://github.com/callstack/react-native-builder-bob And this SVG renderer react native library is a good reference: https://github.com/software-mansion/react-native-svg

And as far as iOS development, the process looks straightforward: https://reactnative.dev/docs/native-modules-ios

[jonobr1]

FYI, if and when released this would be a separate repository and npm package.

[jonobr1]

Inspecting React Three Fiber's implementation, there should be a way to import Two.js and iterate through each of its exported modules to create React components at runtime. This can be handled through a root bound to the React.createContext method: https://react.dev/reference/react/createContext#usage

For bitmap rendering, React Three Fiber uses Expo.

[HeroOfOdyssey]

Any updates on this? Would love two.js react native support :))

[jonobr1]

Thanks for the bump. Getting these messages helps me prioritize features. Unfortunately at the moment I'm pretty steeped in client work, so I don't have a lot of free time to undertake this. But, I am tracking it! And will post updates here when I make progress