Native switch design for iOS

0
Since upgrading iOS the switches look strange in my app and does not follow the new iOS format where they are a bit more stretched out. Upgraded to Atlas Core 3.19 but that did not fix the issue. Anyone know if this is a known issue or have you created a custom switch.js to correct? Off state:  On state: 
asked
2 answers
1

I have identified the issue to be related to the trackColorOff setting in switch.js. If this setting specifies a color, like border.color, iOS will switch from the liquid glass switch which is wider to the standard, narrower, switch. 

You can force the app to use the standard liquid glass look by setting this in a custom switch.js:

input: {

marginRight: Platform.select({ android: -3 }),

thumbColorOn: "#FFFFFF",

thumbColorOff: "#FFFFFF",

trackColorOn: brand.primary,

// CRITICAL: Must be undefined on iOS for the 'stretched' Liquid shape.

// Custom colors here force the legacy 'narrow' fallback.

trackColorOff: Platform.select({

ios: undefined,

android: border.color

}),

},

 

Keep in mind that the switch will use the default track color from the OS, so it might not be fitting your app.

 

answered
0

This is likely not an iOS bug but a Mendix Native theme issue. In native apps, the Switch uses the iOS UISwitch and normally adapts automatically to new iOS designs. However, Atlas or a custom native theme may apply scale / transform styling to the Switch, which can cause it to look incorrect after an iOS update. Updating Atlas Core alone does not always fix this. As a recommendation, try overriding the Switch styling in your native theme (for example in switch.js) by removing or resetting any scale / transform values to 1, then rebuild the native app to see if the Switch follows the new iOS format correctly.

answered