Skip to content

Commit 880e1cd

Browse files
committed
Update docs
1 parent 50354a2 commit 880e1cd

File tree

2 files changed

+70
-82
lines changed

2 files changed

+70
-82
lines changed

Apps/Playground/node_modules/@babylonjs/react-native/README.md

Lines changed: 68 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

README.md

Lines changed: 2 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -9,79 +9,9 @@ Babylon React Native is in the early phase of its development, and has the follo
99
1. Android support only - support for both iOS and Windows is planned.
1010
1. JavaScriptCore only - support for Hermes is planned, and support for other JavaScript engines used by React Native is uncertain.
1111

12-
## Consuming
12+
## Usage
1313

14-
This quick overview will help you understand the constructs provided by Babylon React Native and how to use them in a React Native application. See the Playground app's [App.tsx](Apps/Playground/App.tsx) for example usage.
15-
16-
### Dependencies
17-
18-
This package has several **peer dependencies**. If these dependencies are unmet, `react-native` will emit warnings. Be sure to add these dependencies to your project.
19-
20-
### C++ Build Requirements
21-
22-
This package includes C++ source, so platform specific tooling to build C++ code must be installed.
23-
24-
### Android Requirements
25-
26-
The minimum Android SDK version is 24. This must be set as `minSdkVersion` in the consuming project's `build.gradle` file.
27-
28-
### `useEngine`
29-
30-
`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:
31-
32-
```tsx
33-
import { useEngine } from 'react-native-babylon';
34-
import { Engine, Scene } from '@babylonjs/core';
35-
36-
const MyComponent: FunctionComponent<MyComponentProps> = (props: MyComponentProps) => {
37-
const engine = useEngine();
38-
39-
useEffect(() => {
40-
if (engine) {
41-
const scene = new Scene(engine);
42-
// Setup the scene!
43-
}
44-
}, [engine]);
45-
46-
return (
47-
<>
48-
</>
49-
);
50-
}
51-
```
52-
53-
### `EngineView`
54-
55-
`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:
56-
57-
```tsx
58-
import { useEngine, EngineView } from 'react-native-babylon';
59-
import { Engine, Scene, Camera } from '@babylonjs/core';
60-
61-
const MyComponent: FunctionComponent<MyComponentProps> = (props: MyComponentProps) => {
62-
const engine = useEngine();
63-
const [camera, setCamera] = useState<Camera>();
64-
65-
useEffect(() => {
66-
if (engine) {
67-
const scene = new Scene(engine);
68-
scene.createDefaultCamera(true);
69-
if (scene.activeCamera) {
70-
setCamera(scene.activeCamera);
71-
}
72-
// Setup the scene!
73-
}
74-
}, [engine]);
75-
76-
return (
77-
<>
78-
<EngineView style={{flex: 1}} camera={camera} />
79-
</>
80-
);
81-
}
82-
```
83-
84-
Note: Currently only one `EngineView` can be active at any given time. Multi-view will be supported in a future release.
14+
See the [package usage](Apps/Playground/node_modules/@babylonjs/react-native/README.md) or the Playground app's [App.tsx](Apps/Playground/App.tsx) for example usage.
8515

8616
## Contributing
8717

0 commit comments

Comments
 (0)