From 4e11ae3a97a476e98cff0f93a61a7e5a9affc768 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Kwa=C5=9Bniewski?= Date: Wed, 24 Jan 2024 15:28:30 +0100 Subject: [PATCH] feat: update docs (#80) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: update docs * Update README.md Co-authored-by: Michał Pierzchała * Update README.md Co-authored-by: Michał Pierzchała * Update README.md Co-authored-by: Michał Pierzchała * Update README.md Co-authored-by: Michał Pierzchała * Update README.md Co-authored-by: Michał Pierzchała --------- Co-authored-by: Michał Pierzchała --- README.md | 47 +++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 41 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 3a9e4b41a50f63..cd80cec0d3fe9a 100644 --- a/README.md +++ b/README.md @@ -17,9 +17,9 @@ React Native Vision OS allows you to write visionOS with full support for platfo ## New project creation 1. Make sure you have a [proper development environment setup](https://reactnative.dev/docs/environment-setup) -2. Download the latest Xcode beta [here](https://developer.apple.com/xcode/). -3. Install visionOS Simulator runtime. -4. Install the latest version of CMake (at least v3.28.0) +2. Download the latest Xcode (at least 15.2). +3. Install visionOS simulator runtime. +4. Install the latest version of CMake (at least v3.28.0). 5. Initialize the project using this command: ``` @@ -28,13 +28,13 @@ npx @callstack/react-native-visionos@latest init YourApp 6. Next, go to `YourApp/visionos` folder and run following commands to install Pods: ``` -cd visionos bundle install bundle exec pod install ``` -7. Open `YourApp/visionos/YourApp.xcworkspace` using Xcode 15 Beta. -8. Build the app by clicking the "Run" button in Xcode. +7. Now you can run `yarn visionos` +8. (Optional) you also can open project using Xcode (`xed YourApp/visionos/YourApp.xcworkspace`). + - Build the app by clicking the "Run" button in Xcode. ## Platform guidelines @@ -42,6 +42,41 @@ We suggest you read [Human Interface Guidelines for visionOS](https://developer. 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. +## API Reference + +### App entry point +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. + +Here is a example from the template: +```swift +// App.swift +@main +struct HelloWorldApp: App { + @UIApplicationDelegateAdaptor var delegate: AppDelegate + + var body: some Scene { + RCTMainWindow(moduleName: "HelloWorld") + } +} +``` + +We are using `@UIApplicationDelegateAdaptor`, a property wrapper that allows us to use familiar `AppDelegate` in SwiftUI life cycle. + +`AppDelegate` extends `RCTAppDelegate` which does most of React Native initialization. + +### Hover effect API +This is a prop on `` component allowing to add hover effect. It's applied to all Touchable and Pressable components by default. + +If you want to customize it you can use the `visionos_hoverEffect` prop, like so: + +```jsx + + Click me + +``` + +The available options are: `lift` or `highlight`. + ## Contributing 1. Follow the same steps as in the `New project creation` section.