Add React Native for macOS support.

[jihoobyeon]

Describe the change

We can now run BabylonReactNative on macOS.

plus additional class component support - Higher-order component withEngine and Prop type for class WithEngineProps added.

usage:

import React from 'react';
import { View } from 'react-native';
import { Camera, Scene } from '@babylonjs/core';
import { EngineView, withEngine, WithEngineProps } from '@babylonjs/react-native';

class App extends React.Component<WithEngineProps, { camera: Camera | undefined }> {
    constructor(props: WithEngineProps) {
        super(props);
        this.state = { camera: undefined };
    }

    async componentDidMount() {
        while (!this.props.engine) await new Promise((_: any) => setTimeout(_, 100));

        const scene = new Scene(this.props.engine);
        scene.createDefaultCamera(true);

        const sphere = MeshBuilder.CreateSphere('sphere', { diameter: 1 }, scene);
        const camera = scene.activeCamera!;
        this.setState({ camera });
    }

    componentWillUnmount() { this.props.engine?.dispose(); }

    render() {
        return (
            <View style={{ flex: 1 }}>
                <EngineView style={{ flex: 1 }} camera={ this.state.camera } />
            </View>
        );
    }
}

export default withEngine(App);

Screenshots

Documentation

Have you updated the documentation to reflect your changes? Yes

Testing

Have you tested the final iteration of your changes? Yes

[jihoobyeon]

@jihoobyeon please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.

@microsoft-github-policy-service agree [company="{your company}"]

Options:

• (default - no company specified) I have sole ownership of intellectual property rights to my Submissions and I am not making Submissions in the course of work for my employer.

@microsoft-github-policy-service agree

• (when company given) I am making Submissions in the course of work for my employer (or my employer has intellectual property rights in my Submissions by contract or applicable law). I have permission from my employer to make Submissions and enter into this Agreement on behalf of my employer. By signing below, the defined term “You” includes me and my employer.

@microsoft-github-policy-service agree company="Microsoft"

Contributor License Agreement

@microsoft-github-policy-service agree

[matthargett]

looks like build pipeline locked up? what needs to be done, beyond fixing the branch conflicts for this to be merged? It looks like we'll need to do a few of these things to support visionOS as well.

[bghgary]

I would say it at least needs a full code review from the team and infrastructure to make sure it stays working.

See the original forum post for context: https://forum.babylonjs.com/t/im-trying-to-make-babylonreactnative-to-work-on-macos/39178

As for visionOS, maybe @CedricGuillemet has thoughts.

[jihoobyeon]

I was busy for working at other part of my app, so I almost forgot about it! Thanks for reminding me @matthargett :)

And @bghgary, When your team will do full code review?
Actually this is my first time to contribute to big open source like this, so I'm little nervous; I hope I did not made any mistake!

[bghgary]

When your team will do full code review?

It's a bit hard to do this since it's a change that we probably need to try locally before it will make sense. It might also be good to add infrastructure for macOS (CI, etc., build for macOS at a minimum) before we review the changes.

Actually this is my first time to contribute to big open source like this, so I'm little nervous; I hope I did not made any mistake!

No worries. Thanks for spending time contributing!

[Saadnajmi]

When your team will do full code review?

It's a bit hard to do this since it's a change that we probably need to try locally before it will make sense. It might also be good to add infrastructure for macOS (CI, etc., build for macOS at a minimum) before we review the changes.

Actually this is my first time to contribute to big open source like this, so I'm little nervous; I hope I did not made any mistake!

No worries. Thanks for spending time contributing!

Hi! I'm unfamiliar with the project, but I am excited to see more macOS support across packages! For macOS CI, have you considered using React Native Test App as your example app / playground? It's basically a template app that reduces the boiler plate as much as possible, targets multiple React Native versions, and has macOS and Windows support built in. If the playground was updated to use react-native-test-app, adding macOS to it and CI should be a breeze.

[Saadnajmi]

I think if !TARGET_OS_OSX would be better here

[ryantrem]

For macOS CI, have you considered using React Native Test App as your example app / playground? It's basically a template app that reduces the boiler plate as much as possible, targets multiple React Native versions, and has macOS and Windows support built in. If the playground was updated to use react-native-test-app, adding macOS to it and CI should be a breeze.

I was not aware of this. It looks pretty cool. Seems like it could help with reducing maintenance cost of the test app, and make it easier to add an additional platform (MacOS).

[CedricGuillemet]

React Native Test App

I've open an issue to keep track #632

[kelset]

@CedricGuillemet I forgot to post here, but I chatted with Ryan over on Teams and I'll be attempting to add RNTA to this repo myself soon-ish. We ironed out a few things over the last few days and I think I'm very close to be able to start on this 👍 (I'll also post a comment in the issue you made)

[kelset]

update, here's the PR adding a RNTA based example app: #641