Skip to content

Commit 29cf1bb

Browse files
okwasniewskiokwasniewski
committed
docs: move to documentation website (#119)
1 parent 1be97ae commit 29cf1bb

File tree

1 file changed

+8
-164
lines changed

1 file changed

+8
-164
lines changed

‎README.md

Lines changed: 8 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<h1 align="center">
2-
<a href="https://reactnative.dev/">
2+
<a href="https://callstack.github.io/react-native-visionos-docs">
33
React Native visionOS
44
</a>
55
</h1>
@@ -13,175 +13,19 @@ React Native visionOS allows you to write visionOS with full support for platfor
1313

1414
![Screenshot](https://github.com/callstack/react-native-visionos/assets/52801365/0fcd5e5f-628c-49ef-84ab-d1d4675a011a)
1515

16-
## How is it different from running app in compatibility mode?
16+
## 🎉 Building your first spatial React Native app
17+
Follow the [Getting Started](https://callstack.github.io/react-native-visionos-docs/getting-started/create-first-app) guide. If you wish to get started quickly, you can utilize this command:
1718

18-
React Native visionOS unlocks full capabilities of the platform, giving your app transparent look that feels right at home next to other visionOS apps. It allows you to leverage the power of `ImmersiveSpace`s and multi-window apps.
19-
20-
Side by side comparison of running the same app: React Native visionOS vs React Native iOS (Compatibility mode).
21-
22-
https://github.com/callstack/react-native-visionos/assets/52801365/dd5d6351-3843-4f4a-ae67-541c068ac7be
23-
24-
> [!CAUTION]
25-
> This project is still at an early stage of development and is not ready for production use.
26-
27-
## New project creation
28-
29-
1. Make sure you have a [proper development environment setup](https://reactnative.dev/docs/environment-setup)
30-
2. Download the latest Xcode (at least 15.2).
31-
3. Install visionOS simulator runtime.
32-
4. Install the latest version of CMake (at least v3.28.0).
33-
5. Initialize the project using this command:
34-
35-
```
19+
```sh
3620
npx @callstack/react-native-visionos@latest init YourApp
37-
```
38-
6. Next, go to `YourApp/visionos` folder and run following commands to install Pods:
21+
```
3922

40-
```
41-
bundle install
42-
bundle exec pod install
43-
```
44-
45-
7. Now you can run `yarn visionos`
46-
8. (Optional) you also can open project using Xcode (`xed YourApp/visionos/YourApp.xcworkspace`).
47-
- Build the app by clicking the "Run" button in Xcode.
48-
49-
## Platform guidelines
50-
51-
We suggest you read [Human Interface Guidelines for visionOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-visionos) when creating visionOS apps.
52-
53-
It's important not to cover the translucent background with a solid color, as it helps to ground apps and make them feel like part of the environment.
54-
55-
## API Reference
56-
57-
### App entry point
58-
React Native visionOS uses SwiftUI lifecycle. The app entry point is now `App.swift` file (by default it is `main.m`). This change allows us to use full capabilities of the visionOS SDK.
59-
60-
Here is an example from the template:
61-
```swift
62-
// App.swift
63-
@main
64-
struct HelloWorldApp: App {
65-
@UIApplicationDelegateAdaptor var delegate: AppDelegate
66-
67-
var body: some Scene {
68-
RCTMainWindow(moduleName: "HelloWorld")
69-
}
70-
}
71-
```
7223

73-
We are using `@UIApplicationDelegateAdaptor`, a property wrapper that allows us to use familiar `AppDelegate` in SwiftUI life cycle.
24+
## 📖 Documentation
7425

75-
`AppDelegate` extends `RCTAppDelegate` which does most of React Native initialization.
76-
77-
### Hover effect API
78-
This is a prop on `<View />` component allowing to add hover effect. It's applied to all Touchable and Pressable components by default.
79-
80-
If you want to customize it you can use the `visionos_hoverEffect` prop, like so:
81-
82-
```tsx
83-
<TouchableOpacity visionos_hoverEffect="lift">
84-
<Text>Click me</Text>
85-
</TouchableOpacity>
86-
```
87-
88-
The available options are: `lift` or `highlight`.
89-
90-
### `XR` API (_nightly_)
91-
Manage Immersive Experiences.
92-
93-
#### Methods
94-
**`requestSession`**
95-
```js
96-
requestSession: (sessionId?: string) => Promise<void>
97-
```
98-
Opens a new [`ImmersiveSpace`](https://developer.apple.com/documentation/swiftui/immersive-spaces) given it's unique `Id`.
99-
100-
**`endSession`**
101-
```js
102-
endSession: () => Promise<void>
103-
```
104-
Closes currently open `ImmersiveSpace`.
105-
106-
#### Constants
107-
**`supportsMultipleScenes`**
108-
```js
109-
supportsMultipleScenes: boolean
110-
```
111-
A Boolean value that indicates whether the app may display multiple scenes simultaneously. Returns the value of `UIApplicationSupportsMultipleScenes` key from `Info.plist`.
112-
113-
### Example Usage
114-
115-
1. Set `UIApplicationSupportsMultipleScenes` to `true` in `Info.plist`:
116-
```diff
117-
<?xml version="1.0" encoding="UTF-8"?>
118-
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
119-
<plist version="1.0">
120-
<dict>
121-
<key>UIApplicationSceneManifest</key>
122-
<dict>
123-
<key>UIApplicationPreferredDefaultSceneSessionRole</key>
124-
<string>UIWindowSceneSessionRoleApplication</string>
125-
<key>UIApplicationSupportsMultipleScenes</key>
126-
- <false/>
127-
+ <true/>
128-
<key>UISceneConfigurations</key>
129-
<dict/>
130-
</dict>
131-
</dict>
132-
</plist>
133-
134-
```
135-
136-
137-
1. Inside `App.swift` add new `ImmersiveSpace`:
138-
```diff
139-
@main
140-
struct HelloWorldApp: App {
141-
@UIApplicationDelegateAdaptor var delegate: AppDelegate
142-
+ @State private var immersionLevel: ImmersionStyle = .mixed
143-
144-
var body: some Scene {
145-
RCTMainWindow(moduleName: "HelloWorldApp")
146-
+ ImmersiveSpace(id: "TestImmersiveSpace") {
147-
+ // RealityKit content goes here
148-
+ }
149-
+ .immersionStyle(selection: $immersionLevel, in: .mixed, .progressive, .full)
150-
}
151-
}
152-
```
153-
For more information about `ImmersiveSpace` API refer to [Apple documentation](https://developer.apple.com/documentation/swiftui/immersive-spaces).
154-
155-
In the above example we set `ImmersiveSpace` id to `TestImmersiveSpace`.
156-
157-
Now in our JS code, we can call:
158-
159-
```js
160-
import {XR} from "@callstack/react-native-visionos"
161-
//...
162-
const openXRSession = async () => {
163-
try {
164-
if (!XR.supportsMultipleScenes) {
165-
Alert.alert('Error', 'Multiple scenes are not supported');
166-
return;
167-
}
168-
await XR.requestSession('TestImmersiveSpace'); // Pass the same identifier from `App.swift`
169-
} catch (e) {
170-
Alert.alert('Error', e.message);
171-
}
172-
};
173-
174-
const closeXRSession = async () => {
175-
await XR.endSession();
176-
};
177-
```
178-
> [!CAUTION]
179-
> Opening an `ImmersiveSpace` can fail in this secarios:
180-
> - `ImmersiveSpace` is not declared.
181-
> - `UIApplicationSupportsMultipleScenes` is set to `false`.
182-
> - User cancels the request.
26+
The full documentation for React Native visionOS can be found on our [website](https://callstack.github.io/react-native-visionos-docs).
18327

184-
For a full example usage, refer to [`XRExample.js`](https://github.com/callstack/react-native-visionos/blob/main/packages/rn-tester/js/examples/XR/XRExample.js).
28+
The source for the React Native visionOS documentation and website is hosted on a separate repo, @callstack/react-native-visionos-docs.
18529

18630
## Contributing
18731

0 commit comments

Comments
 (0)