@ryantrem/react-native v0.0.7-alpha.3
@babylonjs/react-native
Usage
This quick overview will help you understand the constructs provided by Babylon React Native and how to use them in a React Native application.
Dependencies
This package has several peer dependencies. If these dependencies are unmet, the react-native
build will emit warnings. Be sure to add these dependencies to your project.
C++ Build Requirements
This package includes C++ source, so platform specific tooling to build C++ code must be installed.
Android Requirements
The minimum Android SDK version is 18. This must be set as minSdkVersion
in the consuming project's build.gradle
file.
useEngine
useEngine
is a custom React hook that manages the lifecycle of a Babylon engine instance in the context of an owning React component. useEngine
creates an engine instance asynchronously which is used to create and configure scenes. Typically scene initialization code should exist in a useEffect
triggered by an engine
state change. For example:
import { useEngine } from 'react-native-babylon';
import { Engine, Scene } from '@babylonjs/core';
const MyComponent: FunctionComponent<MyComponentProps> = (props: MyComponentProps) => {
const engine = useEngine();
useEffect(() => {
if (engine) {
const scene = new Scene(engine);
// Setup the scene!
}
}, [engine]);
return (
<>
</>
);
}
EngineView
EngineView
is a custom React Native view that presents a camera
from a Babylon scene
. A camera
therefore is assigned to the EngineView
. For example:
import { useEngine, EngineView } from 'react-native-babylon';
import { Engine, Scene, Camera } from '@babylonjs/core';
const MyComponent: FunctionComponent<MyComponentProps> = (props: MyComponentProps) => {
const engine = useEngine();
const [camera, setCamera] = useState<Camera>();
useEffect(() => {
if (engine) {
const scene = new Scene(engine);
scene.createDefaultCamera(true);
if (scene.activeCamera) {
setCamera(scene.activeCamera);
}
// Setup the scene!
}
}, [engine]);
return (
<>
<EngineView style={{flex: 1}} camera={camera} />
</>
);
}
Note: Currently only one EngineView
can be active at any given time. Multi-view will be supported in a future release.