From 2a5993883d416fd213354b4b462561fe6a1d927e Mon Sep 17 00:00:00 2001 From: AbhishekGiri04 Date: Tue, 16 Dec 2025 23:32:18 +0530 Subject: [PATCH 1/3] docs: Clarify systrace tool deprecation in profiling guide Fixes #3679 Added a note clarifying that the standalone systrace tool has been removed from Android platform-tools and users should use Android Studio Profiler instead. This addresses confusion around the deprecated systrace command-line tool while maintaining the documentation for the Systrace API in React Native. Changes: - Added deprecation notice for standalone systrace tool - Clarified that Android Studio Profiler is the recommended alternative - Improved documentation clarity for developers migrating from systrace --- docs/profiling.md | 4 ++++ 1 file changed, 4 insertions(+) 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). From 91b4667fdf4ed7202139d107e6934cf2ee4aa7a5 Mon Sep 17 00:00:00 2001 From: AbhishekGiri04 Date: Wed, 17 Dec 2025 16:44:12 +0530 Subject: [PATCH 2/3] Add systrace deprecation note to versioned docs --- website/versioned_docs/version-0.77/profiling.md | 6 +++++- website/versioned_docs/version-0.78/profiling.md | 6 +++++- website/versioned_docs/version-0.79/profiling.md | 6 +++++- website/versioned_docs/version-0.80/profiling.md | 6 +++++- website/versioned_docs/version-0.81/profiling.md | 4 ++++ website/versioned_docs/version-0.82/profiling.md | 4 ++++ website/versioned_docs/version-0.83/profiling.md | 4 ++++ 7 files changed, 32 insertions(+), 4 deletions(-) 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). From bacf367334ec072de6eae629a0e4c3853a4c438d Mon Sep 17 00:00:00 2001 From: AbhishekGiri04 Date: Sat, 27 Dec 2025 23:14:29 +0530 Subject: [PATCH 3/3] Add Swift code snippets to Fabric native component iOS documentation - Added tabbed code examples (Objective-C/Swift) for iOS Fabric components - Implemented complete Swift version of RCTWebView class - Maintains consistency with Android documentation structure (Java/Kotlin tabs) - Fixes #4897 --- docs/fabric-native-components-ios.md | 122 ++++++++++++++++++++++++++- 1 file changed, 120 insertions(+), 2 deletions(-) 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: