Skip to content

Commit 83ed548

Browse files
okwasniewskiokwasniewski
authored
Merge pull request #2 from callstack/docs/migrate-from-readme
docs: migrate from README
2 parents 3f1a380 + 1b54b88 commit 83ed548

14 files changed

+240
-4
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Website
1+
# React Native visionOS Docs
22

33
This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
44

‎docs/api/XR.md

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
Manage Immersive Experiences.
2+
3+
## Methods
4+
5+
#### **`requestSession`**
6+
7+
```js
8+
requestSession: (sessionId?: string) => Promise<void>
9+
```
10+
11+
Opens a new [`ImmersiveSpace`](https://developer.apple.com/documentation/swiftui/immersive-spaces) given it's unique `Id`.
12+
13+
:::warning
14+
15+
Opening an `ImmersiveSpace` can fail in following scenarios:
16+
17+
- `ImmersiveSpace` is not declared.
18+
- `UIApplicationSupportsMultipleScenes` is set to `false`.
19+
- User cancels the request.
20+
21+
:::
22+
23+
#### **`endSession`**
24+
25+
```js
26+
endSession: () => Promise<void>
27+
```
28+
29+
Closes currently open `ImmersiveSpace`.
30+
31+
## Constants
32+
33+
#### **`supportsMultipleScenes`**
34+
35+
```js
36+
supportsMultipleScenes: boolean;
37+
```
38+
39+
A Boolean value that indicates whether the app may display multiple scenes simultaneously. Returns the value of `UIApplicationSupportsMultipleScenes` key from `Info.plist`.
40+
41+
:::info
42+
43+
## UIApplicationSupportsMultipleScenes
44+
45+
In order to use this API, make sure your app supports multiple scenes. Set `UIApplicationSupportsMultipleScenes` to `true` in `Info.plist`:
46+
47+
```json
48+
<dict>
49+
<key>UIApplicationSceneManifest</key>
50+
<dict>
51+
<key>UIApplicationPreferredDefaultSceneSessionRole</key>
52+
<string>UIWindowSceneSessionRoleApplication</string>
53+
<key>UIApplicationSupportsMultipleScenes</key>
54+
// highlight-next-line
55+
<true/>
56+
<key>UISceneConfigurations</key>
57+
<dict/>
58+
</dict>
59+
</dict>
60+
</plist>
61+
62+
```
63+
64+
:::

‎docs/api/hoverEffect.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Hover Effects
2+
3+
:::warning
4+
5+
This prop is soon to be removed in favour of applying this effect using `cursor: pointer` style.
6+
7+
:::
8+
9+
This is a prop on `<View />` component allowing to add hover effect. It's applied to all Touchable and Pressable components by default.
10+
11+
If you want to customize it you can use the `visionos_hoverEffect` prop, like so:
12+
13+
```tsx
14+
<TouchableOpacity visionos_hoverEffect="lift">
15+
<Text>Click me</Text>
16+
</TouchableOpacity>
17+
```
18+
19+
The available options are: `lift` or `highlight`.

‎docs/api/intro.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
sidebar_position: 1
3+
---
4+
5+
# Introduction
6+
7+
React Native visionOS builds upon APIs provided by [React Native Core](https://reactnative.dev), so every API listed in React Native docs is available, this documentation lists React Native visionOS specific APIs.
8+
9+
### List of APIs provided by React Native visionOS
10+
11+
- `XR` - API to manage Immersive Experiences
12+
- `visionos_hoverEffect` - Hover effects (soon to be removed in favour of `cursor: 'pointer'`).

‎docs/getting-started/_category_.json renamed to ‎docs/docs/getting-started/_category_.json

File renamed without changes.

‎docs/getting-started/create-first-app.md renamed to ‎docs/docs/getting-started/create-first-app.md

File renamed without changes.

‎docs/docs/getting-started/entry-point.md

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# App Entry Point
2+
3+
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.
4+
5+
Here is an example from the template:
6+
7+
```swift title="App.swift"
8+
@main
9+
struct HelloWorldApp: App {
10+
@UIApplicationDelegateAdaptor var delegate: AppDelegate
11+
12+
var body: some Scene {
13+
RCTMainWindow(moduleName: "HelloWorld")
14+
}
15+
}
16+
```
17+
18+
We are using `@UIApplicationDelegateAdaptor`, a property wrapper that allows us to use familiar `AppDelegate` in SwiftUI life cycle.
19+
20+
`AppDelegate` extends `RCTAppDelegate` which does most of React Native initialization.

‎docs/docs/getting-started/folder-structure.md

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Folder Structure
2+
3+
React Native visionOS builds upon the same template used for iOS and Android. Native visionOS files are stored inside of `visionos` folder (that's why it's required to run `pod install` in this folder instead of `ios`).
4+
5+
Your folder structure should look like so:
6+
7+
```
8+
SpatialApp
9+
├── __tests__
10+
├── android
11+
│   ├── app
12+
│   └── gradle
13+
├── ios
14+
│   ├── SpatialApp
15+
│   ├── SpatialApp.xcworkspace
16+
│   ├── SpatialApp.xcodeproj
17+
│   └── SpatialAppTests
18+
├── visionos
19+
│ ├── SpatialApp
20+
│ ├── SpatialApp.xcodeproj
21+
│ ├── SpatialApp.xcworkspace
22+
│ └── SpatialAppTests
23+
├── node_modules
24+
└── src
25+
```

‎docs/getting-started/platform-guidelines.md renamed to ‎docs/docs/getting-started/platform-guidelines.md

File renamed without changes.

‎docs/docs/guides/_category_.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"label": "Guides",
3+
"position": 2,
4+
"link": {
5+
"type": "generated-index"
6+
},
7+
}

‎docs/docs/guides/immersive-spaces.md

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
# Immersive Spaces
2+
3+
One of the key features of visionOS are [`ImmersiveSpaces`](https://developer.apple.com/documentation/swiftui/immersive-spaces), which allow to display unbounded content in a person’s surroundings.
4+
5+
:::warning
6+
Make sure to set `UIApplicationSupportsMultipleScenes` to `true` in `Info.plist` as described [here](/api/XR#uiapplicationsupportsmultiplescenes).
7+
:::
8+
9+
### Declare ImmersiveSpace in `App.swift`
10+
11+
```swift title="App.swift"
12+
@main
13+
struct HelloWorldApp: App {
14+
@UIApplicationDelegateAdaptor var delegate: AppDelegate
15+
// highlight-next-line
16+
@State private var immersionLevel: ImmersionStyle = .mixed
17+
18+
var body: some Scene {
19+
RCTMainWindow(moduleName: "HelloWorldApp")
20+
// highlight-start
21+
ImmersiveSpace(id: "TestImmersiveSpace") {
22+
// RealityKit content goes here
23+
}
24+
.immersionStyle(selection: $immersionLevel, in: .mixed, .progressive, .full)
25+
// highlight-end
26+
}
27+
}
28+
```
29+
30+
ImmersiveSpaces can have multiple levels of immersion:
31+
32+
- The mixed style blends your content with passthrough.
33+
- The full style displays only your content, with passthrough turned off.
34+
- The progressive style completely replaces passthrough in a portion of the display.
35+
36+
For more information about `ImmersiveSpace` API refer to [Apple documentation](https://developer.apple.com/documentation/swiftui/immersive-spaces).
37+
38+
### Open new ImmersiveSpace from JS
39+
40+
In order to open a new ImmersiveSpace, call `XR.requestSession()`.
41+
42+
```ts
43+
import { XR } from "@callstack/react-native-visionos";
44+
//...
45+
const openXRSession = async () => {
46+
try {
47+
if (!XR.supportsMultipleScenes) {
48+
Alert.alert("Error", "Multiple scenes are not supported");
49+
return;
50+
}
51+
// highlight-next-line
52+
await XR.requestSession("TestImmersiveSpace"); // Pass the same identifier from `App.swift`
53+
} catch (e) {
54+
Alert.alert("Error", e.message);
55+
}
56+
};
57+
```
58+
59+
:::warning
60+
61+
Opening an `ImmersiveSpace` can fail in following scenarios:
62+
63+
- `ImmersiveSpace` is not declared.
64+
- `UIApplicationSupportsMultipleScenes` is set to `false`.
65+
- User cancels the request.
66+
67+
:::
68+
69+
This will open a new immersive space for the user. Later on if you want to close it, call:
70+
71+
```ts
72+
const closeXRSession = async () => {
73+
// highlight-next-line
74+
await XR.endSession();
75+
};
76+
```
77+
78+
:::note
79+
80+
Only one immersive space can be open at a time.
81+
82+
:::

‎docs/intro.md renamed to ‎docs/docs/intro.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ This project is still at an early stage of development and is not ready for prod
1515
1616
React Native visionOS allows you to write visionOS **apps with full support for platform SDK**. This is a full fork of the main repository with changes needed to support visionOS.
1717

18-
![Welcome](../static/img/welcome-rn-visionos.png)
18+
![Welcome](../../static/img/welcome-rn-visionos.png)
1919

2020
## How is it different from running app in compatibility mode?
2121

‎docusaurus.config.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,16 @@ const config = {
5252
items: [
5353
{
5454
type: 'docSidebar',
55-
sidebarId: 'tutorialSidebar',
55+
sidebarId: 'docs',
5656
position: 'left',
5757
label: 'Docs',
5858
},
59+
{
60+
type: 'docSidebar',
61+
position: 'left',
62+
sidebarId: 'api',
63+
label: 'API',
64+
},
5965
{
6066
href: 'https://github.com/callstack/react-native-visionos',
6167
label: 'GitHub',

‎sidebars.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313

1414
/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
1515
const sidebars = {
16-
tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
16+
docs: [{type: 'autogenerated', dirName: 'docs'}],
17+
api: [{type: 'autogenerated', dirName: 'api'}]
1718
};
1819

1920
export default sidebars;

0 commit comments

Comments
 (0)