diff --git a/docs/fabric-native-components-ios.md b/docs/fabric-native-components-ios.md index baad9bdb6d2..508127cce24 100644 --- a/docs/fabric-native-components-ios.md +++ b/docs/fabric-native-components-ios.md @@ -70,7 +70,10 @@ Demo After creating the header file and the implementation file, you can start implementing them. -This is the code for the `RCTWebView.h` file, which declares the component interface. +This is the code for the header file, which declares the component interface. + + + ```objc title="Demo/RCTWebView/RCTWebView.h" #import @@ -87,9 +90,28 @@ NS_ASSUME_NONNULL_BEGIN NS_ASSUME_NONNULL_END ``` + + + +```swift title="Demo/RCTWebView/RCTWebView.swift" +import React +import UIKit + +@objc(RCTWebView) +class RCTWebView: RCTViewComponentView { + // You would declare native methods you'd want to access from the view here +} +``` + + + + This class defines an `RCTWebView` which extends the `RCTViewComponentView` class. This is the base class for all the native components and it is provided by React Native. -The code for the implementation file (`RCTWebView.mm`) is the following: +The code for the implementation file is the following: + + + ```objc title="Demo/RCTWebView/RCTWebView.mm" #import "RCTWebView.h" @@ -184,6 +206,102 @@ using namespace facebook::react; @end ``` + + + +```swift title="Demo/RCTWebView/RCTWebView.swift" +import React +import WebKit + +@objc(RCTWebView) +class RCTWebView: RCTViewComponentView { + private var sourceURL: URL? + private var webView: WKWebView! + + override init(frame: CGRect) { + super.init(frame: frame) + setupWebView() + } + + required init?(coder: NSCoder) { + super.init(coder: coder) + setupWebView() + } + + private func setupWebView() { + // highlight-start + webView = WKWebView() + webView.navigationDelegate = self + addSubview(webView) + // highlight-end + } + + override func updateProps(_ props: Props, oldProps: Props) { + guard let oldViewProps = _props as? CustomWebViewProps, + let newViewProps = props as? CustomWebViewProps else { + super.updateProps(props, oldProps: oldProps) + return + } + + // Handle your props here + if oldViewProps.sourceURL != newViewProps.sourceURL { + let urlString = String(cString: newViewProps.sourceURL) + sourceURL = URL(string: urlString) + // highlight-start + if urlIsValid(newViewProps.sourceURL) { + if let url = sourceURL { + webView.load(URLRequest(url: url)) + } + } + // highlight-end + } + + super.updateProps(props, oldProps: oldProps) + } + + override func layoutSubviews() { + super.layoutSubviews() + webView.frame = bounds + } + + // highlight-start + private func urlIsValid(_ propString: String) -> Bool { + if !propString.isEmpty && sourceURL == nil { + let result = CustomWebViewEventEmitter.OnScriptLoaded( + result: .error + ) + eventEmitter.onScriptLoaded(result) + return false + } + return true + } + + private var eventEmitter: CustomWebViewEventEmitter { + return _eventEmitter as! CustomWebViewEventEmitter + } + // highlight-end + + @objc static func componentDescriptorProvider() -> ComponentDescriptorProvider { + return concreteComponentDescriptorProvider() + } +} + +// MARK: - WKNavigationDelegate +extension RCTWebView: WKNavigationDelegate { + // highlight-start + func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { + let result = CustomWebViewEventEmitter.OnScriptLoaded( + result: .success + ) + eventEmitter.onScriptLoaded(result) + } + // highlight-end +} +``` + + + + This code is written in Objective-C++ and contains various details: - the `@interface` implements two protocols: diff --git a/docs/profiling.md b/docs/profiling.md index e38911d6bc5..f833a4440c2 100644 --- a/docs/profiling.md +++ b/docs/profiling.md @@ -15,6 +15,10 @@ Android supports 10k+ different phones and is generalized to support software re The first step for debugging this jank is to answer the fundamental question of where your time is being spent during each 16ms frame. For that, we'll be using the [built-in System Tracing profiler in the Android Studio](https://developer.android.com/studio/profile). +:::note +The standalone `systrace` tool has been removed from Android platform-tools. Use the Android Studio Profiler instead, which provides the same functionality with a better user interface. +::: + ### 1. Collecting a trace First, connect a device that exhibits the stuttering you want to investigate to your computer via USB. Open your project's `android` folder in Android Studio, select your device in the top right pane, and [run your project as profileable](https://developer.android.com/studio/profile#build-and-run). diff --git a/website/versioned_docs/version-0.77/profiling.md b/website/versioned_docs/version-0.77/profiling.md index cec3698d2ef..f833a4440c2 100644 --- a/website/versioned_docs/version-0.77/profiling.md +++ b/website/versioned_docs/version-0.77/profiling.md @@ -7,7 +7,7 @@ Profiling is the process of analyzing an app's performance, resource usage, and For iOS, Instruments is an invaluable tool, and on Android you should learn to use the [Android Studio Profiler](profiling.md#profiling-android-ui-performance-with-system-tracing). -But first, [**make sure that Development Mode is OFF!**](performance.md#running-in-development-mode-devtrue) You should see `__DEV__ === false, development-level warning are OFF, performance optimizations are ON` in your application logs. +But first, [**make sure that Development Mode is OFF!**](performance.md#running-in-development-mode-devtrue). ## Profiling Android UI Performance with System Tracing @@ -15,6 +15,10 @@ Android supports 10k+ different phones and is generalized to support software re The first step for debugging this jank is to answer the fundamental question of where your time is being spent during each 16ms frame. For that, we'll be using the [built-in System Tracing profiler in the Android Studio](https://developer.android.com/studio/profile). +:::note +The standalone `systrace` tool has been removed from Android platform-tools. Use the Android Studio Profiler instead, which provides the same functionality with a better user interface. +::: + ### 1. Collecting a trace First, connect a device that exhibits the stuttering you want to investigate to your computer via USB. Open your project's `android` folder in Android Studio, select your device in the top right pane, and [run your project as profileable](https://developer.android.com/studio/profile#build-and-run). diff --git a/website/versioned_docs/version-0.78/profiling.md b/website/versioned_docs/version-0.78/profiling.md index cec3698d2ef..f833a4440c2 100644 --- a/website/versioned_docs/version-0.78/profiling.md +++ b/website/versioned_docs/version-0.78/profiling.md @@ -7,7 +7,7 @@ Profiling is the process of analyzing an app's performance, resource usage, and For iOS, Instruments is an invaluable tool, and on Android you should learn to use the [Android Studio Profiler](profiling.md#profiling-android-ui-performance-with-system-tracing). -But first, [**make sure that Development Mode is OFF!**](performance.md#running-in-development-mode-devtrue) You should see `__DEV__ === false, development-level warning are OFF, performance optimizations are ON` in your application logs. +But first, [**make sure that Development Mode is OFF!**](performance.md#running-in-development-mode-devtrue). ## Profiling Android UI Performance with System Tracing @@ -15,6 +15,10 @@ Android supports 10k+ different phones and is generalized to support software re The first step for debugging this jank is to answer the fundamental question of where your time is being spent during each 16ms frame. For that, we'll be using the [built-in System Tracing profiler in the Android Studio](https://developer.android.com/studio/profile). +:::note +The standalone `systrace` tool has been removed from Android platform-tools. Use the Android Studio Profiler instead, which provides the same functionality with a better user interface. +::: + ### 1. Collecting a trace First, connect a device that exhibits the stuttering you want to investigate to your computer via USB. Open your project's `android` folder in Android Studio, select your device in the top right pane, and [run your project as profileable](https://developer.android.com/studio/profile#build-and-run). diff --git a/website/versioned_docs/version-0.79/profiling.md b/website/versioned_docs/version-0.79/profiling.md index cec3698d2ef..f833a4440c2 100644 --- a/website/versioned_docs/version-0.79/profiling.md +++ b/website/versioned_docs/version-0.79/profiling.md @@ -7,7 +7,7 @@ Profiling is the process of analyzing an app's performance, resource usage, and For iOS, Instruments is an invaluable tool, and on Android you should learn to use the [Android Studio Profiler](profiling.md#profiling-android-ui-performance-with-system-tracing). -But first, [**make sure that Development Mode is OFF!**](performance.md#running-in-development-mode-devtrue) You should see `__DEV__ === false, development-level warning are OFF, performance optimizations are ON` in your application logs. +But first, [**make sure that Development Mode is OFF!**](performance.md#running-in-development-mode-devtrue). ## Profiling Android UI Performance with System Tracing @@ -15,6 +15,10 @@ Android supports 10k+ different phones and is generalized to support software re The first step for debugging this jank is to answer the fundamental question of where your time is being spent during each 16ms frame. For that, we'll be using the [built-in System Tracing profiler in the Android Studio](https://developer.android.com/studio/profile). +:::note +The standalone `systrace` tool has been removed from Android platform-tools. Use the Android Studio Profiler instead, which provides the same functionality with a better user interface. +::: + ### 1. Collecting a trace First, connect a device that exhibits the stuttering you want to investigate to your computer via USB. Open your project's `android` folder in Android Studio, select your device in the top right pane, and [run your project as profileable](https://developer.android.com/studio/profile#build-and-run). diff --git a/website/versioned_docs/version-0.80/profiling.md b/website/versioned_docs/version-0.80/profiling.md index cec3698d2ef..f833a4440c2 100644 --- a/website/versioned_docs/version-0.80/profiling.md +++ b/website/versioned_docs/version-0.80/profiling.md @@ -7,7 +7,7 @@ Profiling is the process of analyzing an app's performance, resource usage, and For iOS, Instruments is an invaluable tool, and on Android you should learn to use the [Android Studio Profiler](profiling.md#profiling-android-ui-performance-with-system-tracing). -But first, [**make sure that Development Mode is OFF!**](performance.md#running-in-development-mode-devtrue) You should see `__DEV__ === false, development-level warning are OFF, performance optimizations are ON` in your application logs. +But first, [**make sure that Development Mode is OFF!**](performance.md#running-in-development-mode-devtrue). ## Profiling Android UI Performance with System Tracing @@ -15,6 +15,10 @@ Android supports 10k+ different phones and is generalized to support software re The first step for debugging this jank is to answer the fundamental question of where your time is being spent during each 16ms frame. For that, we'll be using the [built-in System Tracing profiler in the Android Studio](https://developer.android.com/studio/profile). +:::note +The standalone `systrace` tool has been removed from Android platform-tools. Use the Android Studio Profiler instead, which provides the same functionality with a better user interface. +::: + ### 1. Collecting a trace First, connect a device that exhibits the stuttering you want to investigate to your computer via USB. Open your project's `android` folder in Android Studio, select your device in the top right pane, and [run your project as profileable](https://developer.android.com/studio/profile#build-and-run). diff --git a/website/versioned_docs/version-0.81/profiling.md b/website/versioned_docs/version-0.81/profiling.md index e38911d6bc5..f833a4440c2 100644 --- a/website/versioned_docs/version-0.81/profiling.md +++ b/website/versioned_docs/version-0.81/profiling.md @@ -15,6 +15,10 @@ Android supports 10k+ different phones and is generalized to support software re The first step for debugging this jank is to answer the fundamental question of where your time is being spent during each 16ms frame. For that, we'll be using the [built-in System Tracing profiler in the Android Studio](https://developer.android.com/studio/profile). +:::note +The standalone `systrace` tool has been removed from Android platform-tools. Use the Android Studio Profiler instead, which provides the same functionality with a better user interface. +::: + ### 1. Collecting a trace First, connect a device that exhibits the stuttering you want to investigate to your computer via USB. Open your project's `android` folder in Android Studio, select your device in the top right pane, and [run your project as profileable](https://developer.android.com/studio/profile#build-and-run). diff --git a/website/versioned_docs/version-0.82/profiling.md b/website/versioned_docs/version-0.82/profiling.md index e38911d6bc5..f833a4440c2 100644 --- a/website/versioned_docs/version-0.82/profiling.md +++ b/website/versioned_docs/version-0.82/profiling.md @@ -15,6 +15,10 @@ Android supports 10k+ different phones and is generalized to support software re The first step for debugging this jank is to answer the fundamental question of where your time is being spent during each 16ms frame. For that, we'll be using the [built-in System Tracing profiler in the Android Studio](https://developer.android.com/studio/profile). +:::note +The standalone `systrace` tool has been removed from Android platform-tools. Use the Android Studio Profiler instead, which provides the same functionality with a better user interface. +::: + ### 1. Collecting a trace First, connect a device that exhibits the stuttering you want to investigate to your computer via USB. Open your project's `android` folder in Android Studio, select your device in the top right pane, and [run your project as profileable](https://developer.android.com/studio/profile#build-and-run). diff --git a/website/versioned_docs/version-0.83/profiling.md b/website/versioned_docs/version-0.83/profiling.md index e38911d6bc5..f833a4440c2 100644 --- a/website/versioned_docs/version-0.83/profiling.md +++ b/website/versioned_docs/version-0.83/profiling.md @@ -15,6 +15,10 @@ Android supports 10k+ different phones and is generalized to support software re The first step for debugging this jank is to answer the fundamental question of where your time is being spent during each 16ms frame. For that, we'll be using the [built-in System Tracing profiler in the Android Studio](https://developer.android.com/studio/profile). +:::note +The standalone `systrace` tool has been removed from Android platform-tools. Use the Android Studio Profiler instead, which provides the same functionality with a better user interface. +::: + ### 1. Collecting a trace First, connect a device that exhibits the stuttering you want to investigate to your computer via USB. Open your project's `android` folder in Android Studio, select your device in the top right pane, and [run your project as profileable](https://developer.android.com/studio/profile#build-and-run).