diff --git a/.github/workflow-scripts/maestro-ios.js b/.github/workflow-scripts/maestro-ios.js index c2b4b80b61178a..ca9b546cd17bae 100644 --- a/.github/workflow-scripts/maestro-ios.js +++ b/.github/workflow-scripts/maestro-ios.js @@ -87,11 +87,11 @@ async function launchAppOnSimulator(appId, udid, isDebug) { function startVideoRecording(jsengine, currentAttempt) { console.log( - `Start video record using pid: video_record_${jsengine}_${currentAttempt}.pid`, + `Start video record using pid: video_record_${currentAttempt}.pid`, ); const recordingArgs = - `simctl io booted recordVideo video_record_${jsengine}_${currentAttempt}.mov`.split( + `simctl io booted recordVideo video_record_${currentAttempt}.mov`.split( ' ', ); const recordingProcess = childProcess.spawn('xcrun', recordingArgs, { diff --git a/packages/react-native/Libraries/Components/Switch/Switch.js b/packages/react-native/Libraries/Components/Switch/Switch.js index a5cb3bba141ecc..1047396d6b58fa 100644 --- a/packages/react-native/Libraries/Components/Switch/Switch.js +++ b/packages/react-native/Libraries/Components/Switch/Switch.js @@ -264,7 +264,7 @@ const Switch: component( disabled, onTintColor: trackColorForTrue, style: StyleSheet.compose( - {height: 31, width: 51}, + {alignSelf: 'flex-start' as const}, StyleSheet.compose( style, ios_backgroundColor == null diff --git a/packages/react-native/Package.swift b/packages/react-native/Package.swift index bf6f3e98149ab6..051e5fdddf8e80 100644 --- a/packages/react-native/Package.swift +++ b/packages/react-native/Package.swift @@ -424,6 +424,7 @@ let reactRCTFabric = RNTarget( let reactFabricComponents = RNTarget( name: .reactFabricComponents, path: "ReactCommon/react/renderer", + // searchPaths: [ReactFBReactNativeSpecPath], excludedPaths: [ "components/modal/platform/android", "components/modal/platform/cxx", @@ -442,7 +443,7 @@ let reactFabricComponents = RNTarget( "conponents/rncore", // this was the old folder where RN Core Components were generated. If you ran codegen in the past, you might have some files in it that might make the build fail. ], dependencies: [.reactNativeDependencies, .reactCore, .reactJsiExecutor, .reactTurboModuleCore, .jsi, .logger, .reactDebug, .reactFeatureFlags, .reactUtils, .reactRuntimeScheduler, .reactCxxReact, .yoga, .reactRendererDebug, .reactGraphics, .reactFabric, .reactTurboModuleBridging], - sources: ["components/inputaccessory", "components/modal", "components/safeareaview", "components/text", "components/text/platform/cxx", "components/textinput", "components/textinput/platform/ios/", "components/unimplementedview", "components/virtualview", "components/virtualviewexperimental", "textlayoutmanager", "textlayoutmanager/platform/ios"] + sources: ["components/inputaccessory", "components/modal", "components/safeareaview", "components/text", "components/text/platform/cxx", "components/textinput", "components/textinput/platform/ios/", "components/unimplementedview", "components/virtualview", "components/virtualviewexperimental", "textlayoutmanager", "textlayoutmanager/platform/ios", "components/switch/iosswitch"] ) /// React-FabricImage.podspec diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/Switch/RCTSwitchComponentView.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/Switch/RCTSwitchComponentView.mm index 552dd5def91afa..ba836bf5fd441f 100644 --- a/packages/react-native/React/Fabric/Mounting/ComponentViews/Switch/RCTSwitchComponentView.mm +++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/Switch/RCTSwitchComponentView.mm @@ -9,10 +9,10 @@ #import -#import #import #import #import +#import #import "RCTFabricComponentsPlugins.h" diff --git a/packages/react-native/React/React-RCTFabric.podspec b/packages/react-native/React/React-RCTFabric.podspec index f18e190c43e07b..83000572e5baad 100644 --- a/packages/react-native/React/React-RCTFabric.podspec +++ b/packages/react-native/React/React-RCTFabric.podspec @@ -75,6 +75,7 @@ Pod::Spec.new do |s| "react/renderer/components/scrollview/platform/cxx", "react/renderer/components/text/platform/cxx", "react/renderer/components/textinput/platform/ios", + "react/renderer/components/switch/iosswitch", ]); add_dependency(s, "React-graphics", :additional_framework_paths => ["react/renderer/graphics/platform/ios"]) diff --git a/packages/react-native/ReactCommon/React-FabricComponents.podspec b/packages/react-native/ReactCommon/React-FabricComponents.podspec index a2a6944da86b79..e7c4378f38d6b3 100644 --- a/packages/react-native/ReactCommon/React-FabricComponents.podspec +++ b/packages/react-native/ReactCommon/React-FabricComponents.podspec @@ -127,6 +127,13 @@ Pod::Spec.new do |s| sss.header_dir = "react/renderer/components/iostextinput" end + ss.subspec "switch" do |sss| + sss.source_files = podspec_sources( + ["react/renderer/components/switch/iosswitch/**/*.{m,mm,cpp,h}"], + ["react/renderer/components/switch/iosswitch/**/*.h"]) + sss.header_dir = "react/renderer/components/switch/" + end + ss.subspec "textinput" do |sss| sss.source_files = podspec_sources("react/renderer/components/textinput/*.{m,mm,cpp,h}", "react/renderer/components/textinput/**/*.h") sss.header_dir = "react/renderer/components/textinput" diff --git a/packages/react-native/ReactCommon/react/renderer/components/switch/iosswitch/react/renderer/components/switch/AppleSwitchComponentDescriptor.h b/packages/react-native/ReactCommon/react/renderer/components/switch/iosswitch/react/renderer/components/switch/AppleSwitchComponentDescriptor.h new file mode 100644 index 00000000000000..de4cef29aaa36b --- /dev/null +++ b/packages/react-native/ReactCommon/react/renderer/components/switch/iosswitch/react/renderer/components/switch/AppleSwitchComponentDescriptor.h @@ -0,0 +1,30 @@ +/* + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +#pragma once + +#include "AppleSwitchShadowNode.h" + +#include + +namespace facebook::react { + +/* + * Descriptor for component. + */ +class SwitchComponentDescriptor final + : public ConcreteComponentDescriptor { + public: + SwitchComponentDescriptor(const ComponentDescriptorParameters& parameters) + : ConcreteComponentDescriptor(parameters) {} + + void adopt(ShadowNode& shadowNode) const override { + ConcreteComponentDescriptor::adopt(shadowNode); + } +}; + +} // namespace facebook::react diff --git a/packages/react-native/ReactCommon/react/renderer/components/switch/iosswitch/react/renderer/components/switch/AppleSwitchShadowNode.h b/packages/react-native/ReactCommon/react/renderer/components/switch/iosswitch/react/renderer/components/switch/AppleSwitchShadowNode.h new file mode 100644 index 00000000000000..cca88332037799 --- /dev/null +++ b/packages/react-native/ReactCommon/react/renderer/components/switch/iosswitch/react/renderer/components/switch/AppleSwitchShadowNode.h @@ -0,0 +1,45 @@ +/* + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +#pragma once + +#include +#include +#include + +namespace facebook::react { + +extern const char IOSSwitchComponentName[]; + +// iOS Switch size is a constant, depending on the iOS version +static Size iosSwitchSize{}; + +/* + * `ShadowNode` for component. + */ +class SwitchShadowNode final : public ConcreteViewShadowNode< + IOSSwitchComponentName, + SwitchProps, + SwitchEventEmitter> { + public: + using ConcreteViewShadowNode::ConcreteViewShadowNode; + + static ShadowNodeTraits BaseTraits() { + auto traits = ConcreteViewShadowNode::BaseTraits(); + traits.set(ShadowNodeTraits::Trait::LeafYogaNode); + traits.set(ShadowNodeTraits::Trait::MeasurableYogaNode); + return traits; + } + +#pragma mark - LayoutableShadowNode + + Size measureContent( + const LayoutContext& layoutContext, + const LayoutConstraints& layoutConstraints) const override; +}; + +} // namespace facebook::react diff --git a/packages/react-native/ReactCommon/react/renderer/components/switch/iosswitch/react/renderer/components/switch/IOSSwitchShadowNode.mm b/packages/react-native/ReactCommon/react/renderer/components/switch/iosswitch/react/renderer/components/switch/IOSSwitchShadowNode.mm new file mode 100644 index 00000000000000..4ed8572448dc85 --- /dev/null +++ b/packages/react-native/ReactCommon/react/renderer/components/switch/iosswitch/react/renderer/components/switch/IOSSwitchShadowNode.mm @@ -0,0 +1,38 @@ +/* + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +#import +#include "AppleSwitchShadowNode.h" + +namespace facebook::react { + +extern const char IOSSwitchComponentName[] = "Switch"; + +#pragma mark - LayoutableShadowNode + +Size SwitchShadowNode::measureContent( + const LayoutContext & /*layoutContext*/, + const LayoutConstraints &layoutConstraints) const +{ + if (iosSwitchSize.width != 0) { + return iosSwitchSize; + } + // Let's cache the value of the SwitchSize the first time we compute it. + __block CGSize cgsize; + dispatch_sync(dispatch_get_main_queue(), ^{ + cgsize = [UISwitch new].intrinsicContentSize; + }); + + // The width returned by iOS is not exactly the width of the component. + // For some reason, it is lacking 2 pixels. That can be seen clearly by setting a background + // This is an iOS bug. + iosSwitchSize = {.height = cgsize.height, .width = cgsize.width + 2}; + + return iosSwitchSize; +} + +} // namespace facebook::react diff --git a/packages/react-native/ReactCommon/react/renderer/components/switch/iosswitch/react/renderer/components/switch/MacOSSwitchShadowNode.mm b/packages/react-native/ReactCommon/react/renderer/components/switch/iosswitch/react/renderer/components/switch/MacOSSwitchShadowNode.mm new file mode 100644 index 00000000000000..8c7b5867e32c21 --- /dev/null +++ b/packages/react-native/ReactCommon/react/renderer/components/switch/iosswitch/react/renderer/components/switch/MacOSSwitchShadowNode.mm @@ -0,0 +1,37 @@ +/* + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +#import +#include "AppleSwitchShadowNode.h" + +namespace facebook::react { + +extern const char IOSSwitchComponentName[] = "Switch"; + +#pragma mark - LayoutableShadowNode + +Size SwitchShadowNode::measureContent( + const LayoutContext & /*layoutContext*/, + const LayoutConstraints &layoutConstraints) const +{ + if (iosSwitchSize.width != 0) { + return iosSwitchSize; + } + // Let's cache the value of the SwitchSize the first time we compute it. + __block CGSize cgsize; + dispatch_sync(dispatch_get_main_queue(), ^{ + NSSwitch *switchControl = [[NSSwitch alloc] init]; + cgsize = [switchControl intrinsicContentSize]; + }); + + // For macOS, use the intrinsic size as-is + iosSwitchSize = {.height = cgsize.height, .width = cgsize.width}; + + return iosSwitchSize; +} + +} // namespace facebook::react diff --git a/packages/react-native/src/private/specs_DEPRECATED/components/SwitchNativeComponent.js b/packages/react-native/src/private/specs_DEPRECATED/components/SwitchNativeComponent.js index 6ddb0cb20d977e..1f9f75a3bb4294 100644 --- a/packages/react-native/src/private/specs_DEPRECATED/components/SwitchNativeComponent.js +++ b/packages/react-native/src/private/specs_DEPRECATED/components/SwitchNativeComponent.js @@ -58,4 +58,5 @@ export const Commands: NativeCommands = codegenNativeCommands({ export default (codegenNativeComponent('Switch', { paperComponentName: 'RCTSwitch', excludedPlatforms: ['android'], + interfaceOnly: true, }): ComponentType);