Switch bounding box is not centered

[chrisglein]

Screenshot taken from React Native Gallery and using Accessibility Insights:

Contrast with this screenshot from WinUI 2 Gallery:

I'm guessing this is related from using that switch but not in the usual Windows style of including a label?

Originally reported here:

@chrisglein , You can see the difference between Switch placeholders in the above screen.

Originally posted by @bahri-dev in #11554 (comment)

[acoates-ms]

I'm guessing this is related from using that switch but not in the usual Windows style of including a label?

I think the answer is worse than that.

https://github.com/facebook/react-native/blob/80ecbdf2b28f3ee6c80a183a09c32482caa36134/packages/react-native/Libraries/Components/Switch/Switch.js#L226

Switch has a hard coded size in core/iOS, and we are not using anything different for windows.

[bahri-dev]

I think the answer is worse than that.

Switch has a hard coded size in core/iOS, and we are not using anything different for windows.

I tried to change width, height, paddingLeft in the above file. width and height work fine, but paddingLeft doesn't work.
That's why I'm asking how I can fix the placeholder issue of Switch component.

[chrisglein]

I'm a bit worried about changing the alignment for Switch on Paper and breaking an unknown number of RNW apps' look and feel in a subtle way. We're working on moving to Fabric and it has its own Switch control that at least now shares no lineage with the XAML ToggleSwitch this time around.

Question is, what size should it be? That probably depends on what the Fluent standards are?

Action here: double check that we have good sizing/centering in Fabric. Let's get some screenshots in this issue?
For Paper, I'm proposing we won't fix this.
Also should check in what (if any) design tokens or styles that FURN has for Switch.

[bahri-dev]

@chrisglein , the size of Slider can be changed by using width, height styles. That's why it's okay. I wish to add paddingLeft too. Then, we can change the position as similar as size. Then it's okay even though it's not center align.

[marlenecota]

I can confirm that Switch is centered on Fabric:

[bahri-dev]

@marlenecota , how can I check out the above screen? Could you share the git repo?

[marlenecota]

@bahri-dev it's the playground app that is part of this repo. Be sure to use the composition (fabric) solution.

[bahri-dev]

@marlenecota , I tried to build playground app in Win 11, but it's failed.

Could you let me know how I can fix it?

[bahri-dev]

@marlenecota , I tried to use [email protected], but it's still same issue.
I compared the following files between [email protected] & playground app
node_modules\react-native-windows\Libraries\Components\Switch\Switch.js,
node_modules\react-native-windows\Libraries\Components\Switch\SwitchNativeComponent.js,
node_modules\react-native-windows\Microsoft.ReactNative\Views\SwitchViewManager.h,
node_modules\react-native-windows\Microsoft.ReactNative\Views\SwitchViewManager.cpp.
But there is no differences between them.
That's why I can't understand why [email protected] Switch doesn't work as expectedly.

[marlenecota]

@marlenecota , I tried to use [email protected], but it's still same issue. I compared the following files between [email protected] & playground app node_modules\react-native-windows\Libraries\Components\Switch\Switch.js, node_modules\react-native-windows\Libraries\Components\Switch\SwitchNativeComponent.js, node_modules\react-native-windows\Microsoft.ReactNative\Views\SwitchViewManager.h, node_modules\react-native-windows\Microsoft.ReactNative\Views\SwitchViewManager.cpp. But there is no differences between them. That's why I can't understand why [email protected] Switch doesn't work as expectedly.

Those files are for the Paper implementation which we're not changing per Chris' comment.

The Fabric code (which has centering fixed and will eventually be the default implementation) can be found here.

[bahri-dev]

@marlenecota , My UWP project is based on [email protected]. How can I use the above Fabric code for Switch component?

[chrisglein]

@marlenecota , My UWP project is based on [email protected]. How can I use the above Fabric code for Switch component?

Fabric support for RNW is still in active development. To try it out now you need to be on canary releases to get the latest and greatest, but at a minimum on version 0.72. That said, we're not recommending anyone make the migration quite yet. There's still a bunch of work to do, including getting automation around default app templates and all the support you'd need to get started.

As per my comment above, we are not going to change the placement of the existing Switch control on the mainline (Paper) versions of RNW. You'll have to work around the alignment within your app.

What we have done is confirm that this is fixed in the new version of Switch. However that will be only for Fabric, which is in an opt-in experimental state, and that'll be the case until likely 0.74+.