Skip to content

Fix Switch layout with iOS26 (#53067) #53247

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Conversation

cipolleschi
Copy link
Contributor

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
>=--sanitized--

Rollback Plan:

Differential Revision: D79653120

Pulled By: cipolleschi

@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 13, 2025
@facebook-github-bot
Copy link
Contributor

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

cipolleschi added 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
@facebook-github-bot
Copy link
Contributor

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

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
@react-native-bot
Copy link
Collaborator

This pull request was successfully merged by @cipolleschi in 6daf2ae

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 13, 2025
facebook-github-bot pushed a commit that referenced this pull request Aug 15, 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:

Reviewed By: sammy-SC

Differential Revision: D79653120

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

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

cipolleschi added a commit that referenced this pull request Aug 15, 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:

Reviewed By: sammy-SC

Differential Revision: D79653120

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

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

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
@react-native-bot
Copy link
Collaborator

This pull request was successfully merged by @cipolleschi in be69a79

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

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
facebook-github-bot pushed a commit that referenced this pull request Aug 18, 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:

Reviewed By: sammy-SC

Differential Revision: D79653120

Pulled By: cipolleschi
facebook-github-bot pushed a commit that referenced this pull request Aug 18, 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:

Reviewed By: sammy-SC

Differential Revision: D79653120

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

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

1 similar comment
@facebook-github-bot
Copy link
Contributor

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

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
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:

Reviewed By: sammy-SC

Differential Revision: D79653120

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

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

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
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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants