Skip to content

Commit

Permalink
Update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
ryantrem committed May 30, 2020
1 parent 50354a2 commit 880e1cd
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 82 deletions.
78 changes: 68 additions & 10 deletions Apps/Playground/node_modules/@babylonjs/react-native/README.md

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

74 changes: 2 additions & 72 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,79 +9,9 @@ Babylon React Native is in the early phase of its development, and has the follo
1. Android support only - support for both iOS and Windows is planned.
1. JavaScriptCore only - support for Hermes is planned, and support for other JavaScript engines used by React Native is uncertain.

## Consuming
## 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. See the Playground app's [App.tsx](Apps/Playground/App.tsx) for example usage.

### Dependencies

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.

### 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 24. 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:

```tsx
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:

```tsx
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.
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.

## Contributing

Expand Down

0 comments on commit 880e1cd

Please sign in to comment.