BabylonReactNative icon indicating copy to clipboard operation
BabylonReactNative copied to clipboard

Add React Native for macOS support.

Open jihoobyeon opened this issue 1 year ago • 10 comments

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

스크린샷 2023-07-31 오후 6 18 21

Documentation

Have you updated the documentation to reflect your changes? Yes

Testing

Have you tested the final iteration of your changes? Yes

jihoobyeon avatar Jul 31 '23 09:07 jihoobyeon