Skip to content

Conversation

cipolleschi
Copy link
Contributor

@cipolleschi cipolleschi commented Aug 5, 2025

Summary:

Apple changed the sizes of the UISwitchComponent and now, if you build an iOs app using the component, the layout of the app will be broken because of wrong layout measurements.
This has been reported also by #52823.

The <Switch> component was using hardcoded values for its size.
This change fixes the problem by:

  • Using codegen for interface only
  • Implementing a custom Sadow Node to ask the platform for the Switch measurements
  • Updating the JS layout to wrap the size around the native component.

Changelog:

[iOS][Fixed] - Fix Switch layout to work with iOS26

Test Plan:

Tested locally with RNTester.

iOS Version Before After
< iOS 26 Simulator Screen Recording - iPhone 16 Pro - 2025-08-05 at 17 53 06 Simulator Screen Recording - NewSim - 2025-08-05 at 17 51 34
>= iOS 26 Simulator Screen Recording - iPhone 16 Pro - 2025-08-05 at 17 41 56 Simulator Screen Recording - NewSim - 2025-08-05 at 17 36 48

@meta-cla meta-cla bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Aug 5, 2025
@facebook-github-bot facebook-github-bot added p: Facebook Partner: Facebook Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Aug 5, 2025
@facebook-github-bot
Copy link
Contributor

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this in D79653120.

@cipolleschi cipolleschi force-pushed the cipolleschi/fix-switch-ios26 branch 3 times, most recently from 99f0e9d to eaecb44 Compare August 5, 2025 21:28
@facebook-github-bot
Copy link
Contributor

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this in D79653120.

@cipolleschi cipolleschi force-pushed the cipolleschi/fix-switch-ios26 branch from eaecb44 to 677329f Compare August 5, 2025 21:56
@facebook-github-bot
Copy link
Contributor

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this in D79653120.

@cipolleschi cipolleschi force-pushed the cipolleschi/fix-switch-ios26 branch from a63e651 to 505db10 Compare August 6, 2025 09:23
@facebook-github-bot
Copy link
Contributor

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this in D79653120.

Copy link
Contributor

@matinzd matinzd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Asked a question just for me knowledge

Size SwitchShadowNode::measureContent(
const LayoutContext& /*layoutContext*/,
const LayoutConstraints& layoutConstraints) const {
if (iosSwitchSize.width != 0){
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why just checking the width? 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just because it is to verify whether the struct has been initialized or not. Checking for both is redundant.

Width and height are 0 only if we never cached the values, so when the struct has just been created. Once the values are cached, it will never be 0 again.

@cipolleschi cipolleschi force-pushed the cipolleschi/fix-switch-ios26 branch 4 times, most recently from 15f0aeb to 02c3e9d Compare August 8, 2025 15:19
@facebook-github-bot
Copy link
Contributor

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this in D79653120.

Summary:
Apple changed the sizes of the UISwitchComponent and now, if you build an iOs app using the <Switch> component, the layout of the app will be broken because of wrong layout measurements.
This has been reported also by [https://github.com/facebook/react-native/issues/52823](https://github.com/facebook/react-native/issues/52823).

The `<Switch>` component was using hardcoded values for its size.
This change fixes the problem by:
- Using codegen for interface only
- Implementing a custom Sadow Node to ask the platform for the Switch measurements
- Updating the JS layout to wrap the size around the native component.

## Changelog:

[iOS][Fixed] - Fix Switch layout to work with iOS26

Pull Request resolved: #53067

Test Plan:
Tested locally with RNTester.

| iOS Version | Before | After |
| --- | --- | --- |
| < iOS 26 | ![Simulator Screen Recording - iPhone 16 Pro - 2025-08-05 at 17 53 06](https://github.com/user-attachments/assets/91d73ea3-30ba-4a5c-948e-ea5c63aa7c6d) | ![Simulator Screen Recording - NewSim - 2025-08-05 at 17 51 34](https://github.com/user-attachments/assets/76061bc8-0f14-412a-a8fb-d1c3951772e6) |
| >=--sanitized--

Rollback Plan:

Differential Revision: D79653120

Pulled By: cipolleschi
@facebook-github-bot
Copy link
Contributor

This pull request was exported from Phabricator. Differential Revision: D79653120

@react-native-bot
Copy link
Collaborator

This pull request was successfully merged by @cipolleschi in 690fab6

When will my fix make it into a release? | How to file a pick request?

@react-native-bot react-native-bot added the Merged This PR has been merged. label Aug 12, 2025
facebook-github-bot pushed a commit that referenced this pull request Aug 13, 2025
Summary:
Apple changed the sizes of the UISwitchComponent and now, if you build an iOs app using the <Switch> component, the layout of the app will be broken because of wrong layout measurements.
This has been reported also by [https://github.com/facebook/react-native/issues/52823](https://github.com/facebook/react-native/issues/52823).

The `<Switch>` component was using hardcoded values for its size.
This change fixes the problem by:
- Using codegen for interface only
- Implementing a custom Sadow Node to ask the platform for the Switch measurements
- Updating the JS layout to wrap the size around the native component.

## Changelog:

[iOS][Fixed] - Fix Switch layout to work with iOS26


Test Plan:
Tested locally with RNTester.

| iOS Version | Before | After |
| --- | --- | --- |
| < iOS 26 | ![Simulator Screen Recording - iPhone 16 Pro - 2025-08-05 at 17 53 06](https://github.com/user-attachments/assets/91d73ea3-30ba-4a5c-948e-ea5c63aa7c6d) | ![Simulator Screen Recording - NewSim - 2025-08-05 at 17 51 34](https://github.com/user-attachments/assets/76061bc8-0f14-412a-a8fb-d1c3951772e6) |
| >=--sanitized--

Rollback Plan:

Differential Revision: D79653120

Pulled By: cipolleschi
cipolleschi added a commit that referenced this pull request Aug 13, 2025
Summary:
Pull Request resolved: #53247

Apple changed the sizes of the UISwitchComponent and now, if you build an iOs app using the <Switch> component, the layout of the app will be broken because of wrong layout measurements.
This has been reported also by [https://github.com/facebook/react-native/issues/52823](https://github.com/facebook/react-native/issues/52823).

The `<Switch>` component was using hardcoded values for its size.
This change fixes the problem by:
- Using codegen for interface only
- Implementing a custom Sadow Node to ask the platform for the Switch measurements
- Updating the JS layout to wrap the size around the native component.

## Changelog:

[iOS][Fixed] - Fix Switch layout to work with iOS26

Pull Request resolved: #53067

Test Plan:
Tested locally with RNTester.

| iOS Version | Before | After |
| --- | --- | --- |
| < iOS 26 | ![Simulator Screen Recording - iPhone 16 Pro - 2025-08-05 at 17 53 06](https://github.com/user-attachments/assets/91d73ea3-30ba-4a5c-948e-ea5c63aa7c6d) | ![Simulator Screen Recording - NewSim - 2025-08-05 at 17 51 34](https://github.com/user-attachments/assets/76061bc8-0f14-412a-a8fb-d1c3951772e6) |
| >=--sanitized--

Rollback Plan:

Differential Revision: D79653120

Pulled By: cipolleschi
cipolleschi added a commit that referenced this pull request Aug 15, 2025
Summary:
Pull Request resolved: #53247

Apple changed the sizes of the UISwitchComponent and now, if you build an iOs app using the <Switch> component, the layout of the app will be broken because of wrong layout measurements.
This has been reported also by [https://github.com/facebook/react-native/issues/52823](https://github.com/facebook/react-native/issues/52823).

The `<Switch>` component was using hardcoded values for its size.
This change fixes the problem by:
- Using codegen for interface only
- Implementing a custom Sadow Node to ask the platform for the Switch measurements
- Updating the JS layout to wrap the size around the native component.

## Changelog:

[iOS][Fixed] - Fix Switch layout to work with iOS26

Pull Request resolved: #53067

Test Plan:
Tested locally with RNTester.

| iOS Version | Before | After |
| --- | --- | --- |
| < iOS 26 | ![Simulator Screen Recording - iPhone 16 Pro - 2025-08-05 at 17 53 06](https://github.com/user-attachments/assets/91d73ea3-30ba-4a5c-948e-ea5c63aa7c6d) | ![Simulator Screen Recording - NewSim - 2025-08-05 at 17 51 34](https://github.com/user-attachments/assets/76061bc8-0f14-412a-a8fb-d1c3951772e6) |
| >=--sanitized--

Rollback Plan:

Reviewed By: sammy-SC

Differential Revision: D79653120

Pulled By: cipolleschi
cipolleschi added a commit to cipolleschi/react-native that referenced this pull request Aug 18, 2025
Summary:
Pull Request resolved: facebook#53247

Apple changed the sizes of the UISwitchComponent and now, if you build an iOs app using the <Switch> component, the layout of the app will be broken because of wrong layout measurements.
This has been reported also by [https://github.com/facebook/react-native/issues/52823](https://github.com/facebook/react-native/issues/52823).

The `<Switch>` component was using hardcoded values for its size.
This change fixes the problem by:
- Using codegen for interface only
- Implementing a custom Sadow Node to ask the platform for the Switch measurements
- Updating the JS layout to wrap the size around the native component.

## Changelog:

[iOS][Fixed] - Fix Switch layout to work with iOS26

Pull Request resolved: facebook#53067

Test Plan:
Tested locally with RNTester.

| iOS Version | Before | After |
| --- | --- | --- |
| < iOS 26 | ![Simulator Screen Recording - iPhone 16 Pro - 2025-08-05 at 17 53 06](https://github.com/user-attachments/assets/91d73ea3-30ba-4a5c-948e-ea5c63aa7c6d) | ![Simulator Screen Recording - NewSim - 2025-08-05 at 17 51 34](https://github.com/user-attachments/assets/76061bc8-0f14-412a-a8fb-d1c3951772e6) |
| >=--sanitized--

Differential Revision: D79653120

Reviewed By: sammy-SC

Pulled By: sammy-SC
cipolleschi added a commit to cipolleschi/react-native that referenced this pull request Aug 18, 2025
Summary:
Pull Request resolved: facebook#53247

Apple changed the sizes of the UISwitchComponent and now, if you build an iOs app using the <Switch> component, the layout of the app will be broken because of wrong layout measurements.
This has been reported also by [https://github.com/facebook/react-native/issues/52823](https://github.com/facebook/react-native/issues/52823).

The `<Switch>` component was using hardcoded values for its size.
This change fixes the problem by:
- Using codegen for interface only
- Implementing a custom Sadow Node to ask the platform for the Switch measurements
- Updating the JS layout to wrap the size around the native component.

## Changelog:

[iOS][Fixed] - Fix Switch layout to work with iOS26

Pull Request resolved: facebook#53067

Test Plan:
Tested locally with RNTester.

| iOS Version | Before | After |
| --- | --- | --- |
| < iOS 26 | ![Simulator Screen Recording - iPhone 16 Pro - 2025-08-05 at 17 53 06](https://github.com/user-attachments/assets/91d73ea3-30ba-4a5c-948e-ea5c63aa7c6d) | ![Simulator Screen Recording - NewSim - 2025-08-05 at 17 51 34](https://github.com/user-attachments/assets/76061bc8-0f14-412a-a8fb-d1c3951772e6) |
| >=--sanitized--

Differential Revision: D79653120

Reviewed By: sammy-SC

Pulled By: sammy-SC
cipolleschi added a commit to cipolleschi/react-native that referenced this pull request Aug 18, 2025
Summary:
Pull Request resolved: facebook#53247

Apple changed the sizes of the UISwitchComponent and now, if you build an iOs app using the <Switch> component, the layout of the app will be broken because of wrong layout measurements.
This has been reported also by [https://github.com/facebook/react-native/issues/52823](https://github.com/facebook/react-native/issues/52823).

The `<Switch>` component was using hardcoded values for its size.
This change fixes the problem by:
- Using codegen for interface only
- Implementing a custom Sadow Node to ask the platform for the Switch measurements
- Updating the JS layout to wrap the size around the native component.

## Changelog:

[iOS][Fixed] - Fix Switch layout to work with iOS26

Pull Request resolved: facebook#53067

Test Plan:
Tested locally with RNTester.

| iOS Version | Before | After |
| --- | --- | --- |
| < iOS 26 | ![Simulator Screen Recording - iPhone 16 Pro - 2025-08-05 at 17 53 06](https://github.com/user-attachments/assets/91d73ea3-30ba-4a5c-948e-ea5c63aa7c6d) | ![Simulator Screen Recording - NewSim - 2025-08-05 at 17 51 34](https://github.com/user-attachments/assets/76061bc8-0f14-412a-a8fb-d1c3951772e6) |
| >=--sanitized--

Differential Revision: D79653120

Reviewed By: sammy-SC

Pulled By: sammy-SC
cipolleschi added a commit to cipolleschi/react-native that referenced this pull request Aug 18, 2025
Summary:
Pull Request resolved: facebook#53247

Apple changed the sizes of the UISwitchComponent and now, if you build an iOs app using the <Switch> component, the layout of the app will be broken because of wrong layout measurements.
This has been reported also by [https://github.com/facebook/react-native/issues/52823](https://github.com/facebook/react-native/issues/52823).

The `<Switch>` component was using hardcoded values for its size.
This change fixes the problem by:
- Using codegen for interface only
- Implementing a custom Sadow Node to ask the platform for the Switch measurements
- Updating the JS layout to wrap the size around the native component.

## Changelog:

[iOS][Fixed] - Fix Switch layout to work with iOS26

Pull Request resolved: facebook#53067

Test Plan:
Tested locally with RNTester.

| iOS Version | Before | After |
| --- | --- | --- |
| < iOS 26 | ![Simulator Screen Recording - iPhone 16 Pro - 2025-08-05 at 17 53 06](https://github.com/user-attachments/assets/91d73ea3-30ba-4a5c-948e-ea5c63aa7c6d) | ![Simulator Screen Recording - NewSim - 2025-08-05 at 17 51 34](https://github.com/user-attachments/assets/76061bc8-0f14-412a-a8fb-d1c3951772e6) |
| >=--sanitized--

Differential Revision: D79653120

Reviewed By: sammy-SC

Pulled By: sammy-SC
cipolleschi added a commit that referenced this pull request Aug 21, 2025
Summary:
Pull Request resolved: #53247

Apple changed the sizes of the UISwitchComponent and now, if you build an iOs app using the <Switch> component, the layout of the app will be broken because of wrong layout measurements.
This has been reported also by [https://github.com/facebook/react-native/issues/52823](https://github.com/facebook/react-native/issues/52823).

The `<Switch>` component was using hardcoded values for its size.
This change fixes the problem by:
- Using codegen for interface only
- Implementing a custom Sadow Node to ask the platform for the Switch measurements
- Updating the JS layout to wrap the size around the native component.

[iOS][Fixed] - Fix Switch layout to work with iOS26

Pull Request resolved: #53067

Test Plan:
Tested locally with RNTester.

| iOS Version | Before | After |
| --- | --- | --- |
| < iOS 26 | https://github.com/user-attachments/assets/91d73ea3-30ba-4a5c-948e-ea5c63aa7c6d | https://github.com/user-attachments/assets/76061bc8-0f14-412a-a8fb-d1c3951772e6 |
| >= iOS 26 | https://github.com/user-attachments/assets/1abc477f-bc0a-4762-938e-98814fb2a054 | https://github.com/user-attachments/assets/77e562e1-b803-46ac-9cf6-102f062a1cd4 |

Rollback Plan:

Reviewed By: sammy-SC

Differential Revision: D79653120

Pulled By: cipolleschi

fbshipit-source-id: d99b353b7b7b5496b148779de4abe3e57dd38156
kikoso pushed a commit to kikoso/react-native that referenced this pull request Aug 26, 2025
Summary:
Pull Request resolved: facebook#53247

Apple changed the sizes of the UISwitchComponent and now, if you build an iOs app using the <Switch> component, the layout of the app will be broken because of wrong layout measurements.
This has been reported also by [https://github.com/facebook/react-native/issues/52823](https://github.com/facebook/react-native/issues/52823).

The `<Switch>` component was using hardcoded values for its size.
This change fixes the problem by:
- Using codegen for interface only
- Implementing a custom Sadow Node to ask the platform for the Switch measurements
- Updating the JS layout to wrap the size around the native component.

## Changelog:

[iOS][Fixed] - Fix Switch layout to work with iOS26

Pull Request resolved: facebook#53067

Test Plan:
Tested locally with RNTester.

| iOS Version | Before | After |
| --- | --- | --- |
| < iOS 26 | https://github.com/user-attachments/assets/91d73ea3-30ba-4a5c-948e-ea5c63aa7c6d | https://github.com/user-attachments/assets/76061bc8-0f14-412a-a8fb-d1c3951772e6 |
| >= iOS 26 | https://github.com/user-attachments/assets/1abc477f-bc0a-4762-938e-98814fb2a054 | https://github.com/user-attachments/assets/77e562e1-b803-46ac-9cf6-102f062a1cd4 |

Rollback Plan:

Reviewed By: sammy-SC

Differential Revision: D79653120

Pulled By: cipolleschi

fbshipit-source-id: d99b353b7b7b5496b148779de4abe3e57dd38156
motiz88 pushed a commit that referenced this pull request Aug 27, 2025
* Fix Switch layout with iOS26 (#53247)

Summary:
Pull Request resolved: #53247

Apple changed the sizes of the UISwitchComponent and now, if you build an iOs app using the <Switch> component, the layout of the app will be broken because of wrong layout measurements.
This has been reported also by [https://github.com/facebook/react-native/issues/52823](https://github.com/facebook/react-native/issues/52823).

The `<Switch>` component was using hardcoded values for its size.
This change fixes the problem by:
- Using codegen for interface only
- Implementing a custom Sadow Node to ask the platform for the Switch measurements
- Updating the JS layout to wrap the size around the native component.

[iOS][Fixed] - Fix Switch layout to work with iOS26

Pull Request resolved: #53067

Test Plan:
Tested locally with RNTester.

| iOS Version | Before | After |
| --- | --- | --- |
| < iOS 26 | https://github.com/user-attachments/assets/91d73ea3-30ba-4a5c-948e-ea5c63aa7c6d | https://github.com/user-attachments/assets/76061bc8-0f14-412a-a8fb-d1c3951772e6 |
| >= iOS 26 | https://github.com/user-attachments/assets/1abc477f-bc0a-4762-938e-98814fb2a054 | https://github.com/user-attachments/assets/77e562e1-b803-46ac-9cf6-102f062a1cd4 |

Rollback Plan:

Reviewed By: sammy-SC

Differential Revision: D79653120

Pulled By: cipolleschi

fbshipit-source-id: d99b353b7b7b5496b148779de4abe3e57dd38156

* feat: update js layout

* fix crash for feature flag
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. fb-exported Merged This PR has been merged. p: Facebook Partner: Facebook Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants