Skip to content

Commit 4e11ae3

Browse files
feat: update docs (#80)
* feat: update docs * Update README.md Co-authored-by: Michał Pierzchała <[email protected]> * Update README.md Co-authored-by: Michał Pierzchała <[email protected]> * Update README.md Co-authored-by: Michał Pierzchała <[email protected]> * Update README.md Co-authored-by: Michał Pierzchała <[email protected]> * Update README.md Co-authored-by: Michał Pierzchała <[email protected]> --------- Co-authored-by: Michał Pierzchała <[email protected]>
1 parent d31623e commit 4e11ae3

File tree

1 file changed

+41
-6
lines changed

1 file changed

+41
-6
lines changed

README.md

+41-6
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ React Native Vision OS allows you to write visionOS with full support for platfo
1717
## New project creation
1818

1919
1. Make sure you have a [proper development environment setup](https://reactnative.dev/docs/environment-setup)
20-
2. Download the latest Xcode beta [here](https://developer.apple.com/xcode/).
21-
3. Install visionOS Simulator runtime.
22-
4. Install the latest version of CMake (at least v3.28.0)
20+
2. Download the latest Xcode (at least 15.2).
21+
3. Install visionOS simulator runtime.
22+
4. Install the latest version of CMake (at least v3.28.0).
2323
5. Initialize the project using this command:
2424

2525
```
@@ -28,20 +28,55 @@ npx @callstack/react-native-visionos@latest init YourApp
2828
6. Next, go to `YourApp/visionos` folder and run following commands to install Pods:
2929

3030
```
31-
cd visionos
3231
bundle install
3332
bundle exec pod install
3433
```
3534

36-
7. Open `YourApp/visionos/YourApp.xcworkspace` using Xcode 15 Beta.
37-
8. Build the app by clicking the "Run" button in Xcode.
35+
7. Now you can run `yarn visionos`
36+
8. (Optional) you also can open project using Xcode (`xed YourApp/visionos/YourApp.xcworkspace`).
37+
- Build the app by clicking the "Run" button in Xcode.
3838

3939
## Platform guidelines
4040

4141
We suggest you read [Human Interface Guidelines for visionOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-visionos) when creating visionOS apps.
4242

4343
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.
4444

45+
## API Reference
46+
47+
### App entry point
48+
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.
49+
50+
Here is a example from the template:
51+
```swift
52+
// App.swift
53+
@main
54+
struct HelloWorldApp: App {
55+
@UIApplicationDelegateAdaptor var delegate: AppDelegate
56+
57+
var body: some Scene {
58+
RCTMainWindow(moduleName: "HelloWorld")
59+
}
60+
}
61+
```
62+
63+
We are using `@UIApplicationDelegateAdaptor`, a property wrapper that allows us to use familiar `AppDelegate` in SwiftUI life cycle.
64+
65+
`AppDelegate` extends `RCTAppDelegate` which does most of React Native initialization.
66+
67+
### Hover effect API
68+
This is a prop on `<View />` component allowing to add hover effect. It's applied to all Touchable and Pressable components by default.
69+
70+
If you want to customize it you can use the `visionos_hoverEffect` prop, like so:
71+
72+
```jsx
73+
<TouchableOpacity visionos_hoverEffect="lift">
74+
<Text>Click me</Text>
75+
</TouchableOpacity>
76+
```
77+
78+
The available options are: `lift` or `highlight`.
79+
4580
## Contributing
4681

4782
1. Follow the same steps as in the `New project creation` section.

0 commit comments

Comments
 (0)