From 8bc8753486656fec1a3e280f70caacec3ffcdc39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Kwas=CC=81niewski?= Date: Tue, 23 Jan 2024 15:57:37 +0100 Subject: [PATCH 1/6] feat: update docs --- README.md | 46 ++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 40 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 3a9e4b41a50f63..24e32f54c5db8e 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,40 @@ 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 to use full capabilities of the visionOS SDK. + +Here is a example from the template: +```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 View 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. From dfdd7cc55d2b44c2f4a8913b1555f7eac3d121c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Kwa=C5=9Bniewski?= Date: Wed, 24 Jan 2024 15:17:03 +0100 Subject: [PATCH 2/6] Update README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michał Pierzchała --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 24e32f54c5db8e..f16877290e74a1 100644 --- a/README.md +++ b/README.md @@ -45,7 +45,7 @@ It's important not to cover the translucent background with a solid color, as it ## 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 to use full capabilities of the visionOS SDK. +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 From de71cdd7355c258ff9b68e2e7a6be3ba1463dac7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Kwa=C5=9Bniewski?= Date: Wed, 24 Jan 2024 15:17:12 +0100 Subject: [PATCH 3/6] Update README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michał Pierzchała --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index f16877290e74a1..81bec5a80f85e2 100644 --- a/README.md +++ b/README.md @@ -49,6 +49,7 @@ React native visionOS uses SwiftUI lifecycle. The app entry point is now `App.sw Here is a example from the template: ```swift +// App.swift @main struct HelloWorldApp: App { @UIApplicationDelegateAdaptor var delegate: AppDelegate From 2323b072441aa3aed7bc65a641726ab165a55b43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Kwa=C5=9Bniewski?= Date: Wed, 24 Jan 2024 15:17:19 +0100 Subject: [PATCH 4/6] Update README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michał Pierzchała --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 81bec5a80f85e2..c9c2c8587cd555 100644 --- a/README.md +++ b/README.md @@ -60,7 +60,7 @@ struct HelloWorldApp: App { } ``` -We are using `@UIApplicationDelegateAdaptor` a property wrapper that allows us to use familiar `AppDelegate` in SwiftUI life cycle. +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. From 1c68742fde668ab2ca7f012269e92845b52dc99a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Kwa=C5=9Bniewski?= Date: Wed, 24 Jan 2024 15:17:27 +0100 Subject: [PATCH 5/6] Update README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michał Pierzchała --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c9c2c8587cd555..091573ddbd3c88 100644 --- a/README.md +++ b/README.md @@ -62,7 +62,7 @@ struct HelloWorldApp: App { 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. +`AppDelegate` extends `RCTAppDelegate` which does most of React Native initialization. ### Hover effect API This is a prop on View component allowing to add hover effect. It's applied to all Touchable and Pressable components by default. From 1c82323db5431e7e82214af1ba3c78ed17c8abc2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Kwa=C5=9Bniewski?= Date: Wed, 24 Jan 2024 15:17:34 +0100 Subject: [PATCH 6/6] Update README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michał Pierzchała --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 091573ddbd3c88..cd80cec0d3fe9a 100644 --- a/README.md +++ b/README.md @@ -65,7 +65,7 @@ We are using `@UIApplicationDelegateAdaptor`, a property wrapper that allows us `AppDelegate` extends `RCTAppDelegate` which does most of React Native initialization. ### Hover effect API -This is a prop on View component allowing to add hover effect. It's applied to all Touchable and Pressable components by default. +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: