From f77a850fad6103b57373260cd77eb02852895304 Mon Sep 17 00:00:00 2001
From: Srirang Kalantri <srirang.kalantri@mendix.com>
Date: Mon, 23 Feb 2026 12:14:55 +0530
Subject: [PATCH 1/2] feat: improve existing switch component functionality

---
 .../switch-native/src/Switch.tsx              | 92 +++++++++++++------
 .../switch-native/src/Switch.xml              | 32 ++++---
 .../src/__tests__/Switch.spec.tsx             |  3 +-
 .../switch-native/src/assets/checked-dark.svg |  2 +-
 .../switch-native/src/assets/checked.svg      |  2 +-
 .../switch-native/src/ui/Styles.ts            |  2 -
 .../switch-native/typings/SwitchProps.d.ts    |  4 +
 7 files changed, 91 insertions(+), 46 deletions(-)

diff --git a/packages/pluggableWidgets/switch-native/src/Switch.tsx b/packages/pluggableWidgets/switch-native/src/Switch.tsx
index 3a8e4bc97..fdf6ef6b5 100644
--- a/packages/pluggableWidgets/switch-native/src/Switch.tsx
+++ b/packages/pluggableWidgets/switch-native/src/Switch.tsx
@@ -1,5 +1,5 @@
 import { flattenStyles } from "@mendix/piw-native-utils-internal";
-import { ReactElement, useCallback } from "react";
+import React, { ReactElement, useCallback } from "react";
 import { View, Text, Switch as SwitchComponent, Platform } from "react-native";
 import { executeAction } from "@mendix/piw-utils-internal";
 import { extractStyles } from "@mendix/pluggable-widgets-tools";
@@ -10,7 +10,7 @@ import { SwitchStyle, defaultSwitchStyle, CheckBoxInputType } from "./ui/Styles"
 export type Props = SwitchProps<SwitchStyle>;
 
 export function Switch(props: Props): ReactElement {
-    const { label, labelOrientation, showLabel, name, onChange, booleanAttribute } = props;
+    const { label, labelOrientation, showLabel, name, onChange, booleanAttribute, labelPosition } = props;
     const combinedStyles = flattenStyles(defaultSwitchStyle, props.style);
     const styles = processStyles(combinedStyles);
     const horizontalOrientation = showLabel && labelOrientation === "horizontal";
@@ -39,36 +39,72 @@ export function Switch(props: Props): ReactElement {
 
     const labelValue = label?.status === "available" ? label.value : "";
 
+    const switchElement = (
+        <SwitchComponent
+            disabled={!editable}
+            testID={name}
+            style={inputStyle}
+            onValueChange={editable ? onChangeCallback : undefined}
+            value={booleanAttribute.value}
+            trackColor={{
+                true: inputProps.trackColorOn,
+                false: inputProps.trackColorOff
+            }}
+            thumbColor={booleanAttribute.value ? inputProps.thumbColorOn : inputProps.thumbColorOff}
+            {...(Platform.OS === "ios" ? { ios_backgroundColor: inputProps.trackColorOff } : {})}
+        />
+    );
+
+    const labelElement = showLabel ? (
+        <Text testID={`${name}$label`} style={[labelStyles]}>
+            {labelValue}
+        </Text>
+    ) : null;
+
+    const validationMessage = hasValidationMessage ? (
+        <Text testID={`${name}$alert`} style={styles.validationMessage}>
+            {booleanAttribute.validation}
+        </Text>
+    ) : null;
+
     return (
         <View
             testID={`${name}$wrapper`}
-            style={[containerStyles, horizontalOrientation ? { flexDirection: "row", alignItems: "center" } : null]}
+            style={[containerStyles, { flexDirection: "column", alignItems: "flex-start" }]}
         >
-            {showLabel ? (
-                <Text testID={`${name}$label`} style={[labelStyles, horizontalOrientation ? { flex: 1 } : null]}>
-                    {labelValue}
-                </Text>
-            ) : null}
-            <View style={[horizontalOrientation ? { flex: 1, alignItems: "flex-end" } : { alignItems: "flex-start" }]}>
-                <SwitchComponent
-                    disabled={!editable}
-                    testID={name}
-                    style={inputStyle}
-                    onValueChange={editable ? onChangeCallback : undefined}
-                    value={booleanAttribute.value}
-                    trackColor={{
-                        true: inputProps.trackColorOn,
-                        false: inputProps.trackColorOff
-                    }}
-                    thumbColor={booleanAttribute.value ? inputProps.thumbColorOn : inputProps.thumbColorOff}
-                    {...(Platform.OS === "ios" ? { ios_backgroundColor: inputProps.trackColorOff } : {})}
-                />
-                {hasValidationMessage ? (
-                    <Text testID={`${name}$alert`} style={styles.validationMessage}>
-                        {booleanAttribute.validation}
-                    </Text>
-                ) : null}
-            </View>
+            {horizontalOrientation ? (
+                // Horizontal layout: label and switch in a row, validation message below
+                <>
+                    <View
+                        style={{
+                            flexDirection: "row",
+                            alignItems: "center",
+                            width: "100%",
+                            justifyContent: "space-between"
+                        }}
+                    >
+                        {labelPosition === "right" ? (
+                            <>
+                                {React.cloneElement(switchElement, { key: "switch" })}
+                                {labelElement && React.cloneElement(labelElement, { key: "label" })}
+                            </>
+                        ) : (
+                            <>
+                                {labelElement && React.cloneElement(labelElement, { key: "label" })}
+                                {React.cloneElement(switchElement, { key: "switch" })}
+                            </>
+                        )}
+                    </View>
+                    {validationMessage}
+                </>
+            ) : (
+                // Vertical layout: label, switch, and validation message all in a column
+                <>
+                    {labelElement && React.cloneElement(labelElement, { key: "label" })}
+                    {React.cloneElement(switchElement, { key: "switch" })}
+                    {validationMessage}
+                </>
+            )}
         </View>
     );
 }
diff --git a/packages/pluggableWidgets/switch-native/src/Switch.xml b/packages/pluggableWidgets/switch-native/src/Switch.xml
index 1bffec638..ae69d2e2f 100644
--- a/packages/pluggableWidgets/switch-native/src/Switch.xml
+++ b/packages/pluggableWidgets/switch-native/src/Switch.xml
@@ -1,7 +1,5 @@
-<?xml version="1.0" encoding="utf-8"?>
-<widget id="com.mendix.widget.native.switch.Switch" supportedPlatform="Native" needsEntityContext="true" offlineCapable="true"
-        pluginWidget="true" xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-        xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../../../node_modules/mendix/custom_widget.xsd">
+<?xml version="1.0" encoding="utf-8" ?>
+<widget id="com.mendix.widget.native.switch.Switch" supportedPlatform="Native" needsEntityContext="true" offlineCapable="true" pluginWidget="true" xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../../../node_modules/mendix/custom_widget.xsd">
     <name>Switch</name>
     <description>Toggle a boolean attribute.</description>
     <studioProCategory>Display</studioProCategory>
@@ -11,44 +9,52 @@
             <propertyGroup caption="Data source">
                 <property key="booleanAttribute" type="attribute">
                     <caption>Attribute</caption>
-                    <description/>
+                    <description />
                     <attributeTypes>
-                        <attributeType name="Boolean"/>
+                        <attributeType name="Boolean" />
                     </attributeTypes>
                 </property>
             </propertyGroup>
             <propertyGroup caption="Events">
                 <property key="onChange" type="action" required="false">
                     <caption>On change</caption>
-                    <description/>
+                    <description />
                 </property>
             </propertyGroup>
             <propertyGroup caption="Label">
                 <property key="showLabel" type="boolean" defaultValue="false">
                     <caption>Show label</caption>
-                    <description/>
+                    <description />
                 </property>
                 <property key="label" type="textTemplate" required="false">
                     <caption>Label</caption>
-                    <description/>
+                    <description />
                 </property>
                 <property key="labelOrientation" type="enumeration" defaultValue="horizontal">
                     <caption>Label orientation</caption>
-                    <description/>
+                    <description />
                     <enumerationValues>
                         <enumerationValue key="horizontal">Horizontal</enumerationValue>
                         <enumerationValue key="vertical">Vertical</enumerationValue>
                     </enumerationValues>
                 </property>
+                <property key="labelPosition" type="enumeration" defaultValue="left">
+                    <caption>Label position</caption>
+                    <description>The position of the label relative to the switch</description>
+                    <enumerationValues>
+                        <enumerationValue key="left">Left</enumerationValue>
+                        <enumerationValue key="right">Right</enumerationValue>
+                    </enumerationValues>
+                </property>
             </propertyGroup>
             <propertyGroup caption="Editability">
-                <systemProperty key="Editability"/>
+                <systemProperty key="Editability" />
             </propertyGroup>
             <propertyGroup caption="Visibility">
-                <systemProperty key="Visibility"/>
+                <systemProperty key="Visibility" />
             </propertyGroup>
             <propertyGroup caption="Common">
-                <systemProperty key="Name"/>
+                <systemProperty key="Name" />
             </propertyGroup>
         </propertyGroup>
     </properties>
diff --git a/packages/pluggableWidgets/switch-native/src/__tests__/Switch.spec.tsx b/packages/pluggableWidgets/switch-native/src/__tests__/Switch.spec.tsx
index b48a70aa4..a675c075f 100644
--- a/packages/pluggableWidgets/switch-native/src/__tests__/Switch.spec.tsx
+++ b/packages/pluggableWidgets/switch-native/src/__tests__/Switch.spec.tsx
@@ -13,7 +13,8 @@ const createProps = (props?: Partial<Props>): Props => {
         showLabel: false,
         booleanAttribute: new EditableValueBuilder<boolean>().withValue(false).build(),
         onChange: undefined,
-        style: [{ ...defaultSwitchStyle, ...style }]
+        style: [{ ...defaultSwitchStyle, ...style }],
+        labelPosition: "left"
     };
 
     return { ...defaultProps, ...props };
diff --git a/packages/pluggableWidgets/switch-native/src/assets/checked-dark.svg b/packages/pluggableWidgets/switch-native/src/assets/checked-dark.svg
index bd5e31bb6..d80ba755e 100644
--- a/packages/pluggableWidgets/switch-native/src/assets/checked-dark.svg
+++ b/packages/pluggableWidgets/switch-native/src/assets/checked-dark.svg
@@ -1,4 +1,4 @@
-<svg width="80" height="30" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="51" height="30" viewBox="0 0 51 30" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs>
         <path d="M15 0h21c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15H15C6.716 30 0 23.284 0 15 0 6.716 6.716 0 15 0z"
               id="a"/>
diff --git a/packages/pluggableWidgets/switch-native/src/assets/checked.svg b/packages/pluggableWidgets/switch-native/src/assets/checked.svg
index 15afc0cea..6a828d278 100644
--- a/packages/pluggableWidgets/switch-native/src/assets/checked.svg
+++ b/packages/pluggableWidgets/switch-native/src/assets/checked.svg
@@ -1,4 +1,4 @@
-<svg width="80" height="30" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="51" height="30" viewBox="0 0 51 30" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs>
         <path d="M15 0h21c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15H15C6.716 30 0 23.284 0 15 0 6.716 6.716 0 15 0z"
               id="a"/>
diff --git a/packages/pluggableWidgets/switch-native/src/ui/Styles.ts b/packages/pluggableWidgets/switch-native/src/ui/Styles.ts
index f97731217..c4af5569e 100644
--- a/packages/pluggableWidgets/switch-native/src/ui/Styles.ts
+++ b/packages/pluggableWidgets/switch-native/src/ui/Styles.ts
@@ -25,7 +25,6 @@ export interface SwitchStyle extends Style {
 export const defaultSwitchStyle: SwitchStyle = {
     container: {
         // All ViewStyle properties are allowed
-        paddingVertical: 4,
         justifyContent: "center"
     },
     containerDisabled: {
@@ -50,6 +49,5 @@ export const defaultSwitchStyle: SwitchStyle = {
     },
     validationMessage: {
         // All TextStyle properties are allowed
-        alignSelf: "stretch"
     }
 };
diff --git a/packages/pluggableWidgets/switch-native/typings/SwitchProps.d.ts b/packages/pluggableWidgets/switch-native/typings/SwitchProps.d.ts
index c14598ddd..88130d80c 100644
--- a/packages/pluggableWidgets/switch-native/typings/SwitchProps.d.ts
+++ b/packages/pluggableWidgets/switch-native/typings/SwitchProps.d.ts
@@ -8,6 +8,8 @@ import { ActionValue, DynamicValue, EditableValue } from "mendix";
 
 export type LabelOrientationEnum = "horizontal" | "vertical";
 
+export type LabelPositionEnum = "left" | "right";
+
 export interface SwitchProps<Style> {
     name: string;
     style: Style[];
@@ -16,6 +18,7 @@ export interface SwitchProps<Style> {
     showLabel: boolean;
     label?: DynamicValue<string>;
     labelOrientation: LabelOrientationEnum;
+    labelPosition: LabelPositionEnum;
 }
 
 export interface SwitchPreviewProps {
@@ -34,4 +37,5 @@ export interface SwitchPreviewProps {
     showLabel: boolean;
     label: string;
     labelOrientation: LabelOrientationEnum;
+    labelPosition: LabelPositionEnum;
 }

From 92bb774fd45b7adac3d95502af1bef3e705ddb24 Mon Sep 17 00:00:00 2001
From: Srirang Kalantri <srirang.kalantri@mendix.com>
Date: Mon, 23 Feb 2026 13:01:14 +0530
Subject: [PATCH 2/2] fix: fix unit test for switch widget

---
 .../switch-native/package.json                |  2 +-
 .../switch-native/src/Switch.tsx              |  1 +
 .../src/__tests__/Switch.spec.tsx             | 20 ++++++++++++++-----
 .../switch-native/src/package.xml             |  2 +-
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/pluggableWidgets/switch-native/package.json b/packages/pluggableWidgets/switch-native/package.json
index 0e0a2e361..f26e99a7f 100644
--- a/packages/pluggableWidgets/switch-native/package.json
+++ b/packages/pluggableWidgets/switch-native/package.json
@@ -1,7 +1,7 @@
 {
   "name": "switch-native",
   "widgetName": "Switch",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
diff --git a/packages/pluggableWidgets/switch-native/src/Switch.tsx b/packages/pluggableWidgets/switch-native/src/Switch.tsx
index fdf6ef6b5..3b5618717 100644
--- a/packages/pluggableWidgets/switch-native/src/Switch.tsx
+++ b/packages/pluggableWidgets/switch-native/src/Switch.tsx
@@ -76,6 +76,7 @@ export function Switch(props: Props): ReactElement {
                 // Horizontal layout: label and switch in a row, validation message below
                 <>
                     <View
+                        testID={`${name}$horizontalContainer`}
                         style={{
                             flexDirection: "row",
                             alignItems: "center",
diff --git a/packages/pluggableWidgets/switch-native/src/__tests__/Switch.spec.tsx b/packages/pluggableWidgets/switch-native/src/__tests__/Switch.spec.tsx
index a675c075f..cd4e36259 100644
--- a/packages/pluggableWidgets/switch-native/src/__tests__/Switch.spec.tsx
+++ b/packages/pluggableWidgets/switch-native/src/__tests__/Switch.spec.tsx
@@ -56,14 +56,23 @@ describe("Switch", () => {
         expect(screen.getByTestId(`${name}$label`)).toBeTruthy();
     });
 
-    it("with showLabel true renders label horizontally", () => {
+    it("with showLabel true and horizontal orientation, renders label and switch in a row", () => {
         const props = createProps({
-            showLabel: true
+            showLabel: true,
+            labelOrientation: "horizontal",
+            label: dynamicValue<string>("Test Label", false)
         });
 
         render(<Switch {...props} />);
-        const wrapper = screen.getByTestId(`${name}$wrapper`);
-        expect(wrapper.props.style).toEqual(expect.arrayContaining([{ flexDirection: "row", alignItems: "center" }]));
+
+        const horizontalContainer = screen.getByTestId(`${name}$horizontalContainer`);
+
+        expect(horizontalContainer.props.style).toEqual(
+            expect.objectContaining({ flexDirection: "row", alignItems: "center" })
+        );
+
+        expect(horizontalContainer).toContainElement(screen.getByTestId(`${name}$label`));
+        expect(horizontalContainer).toContainElement(screen.getByTestId(name));
     });
 
     it("with showLabel true and labelOrientation vertical, renders vertical", () => {
@@ -75,8 +84,9 @@ describe("Switch", () => {
         render(<Switch {...props} />);
         const wrapper = screen.getByTestId(`${name}$wrapper`);
         expect(wrapper.props.style).toEqual(
-            expect.not.arrayContaining([{ flexDirection: "row", alignItems: "center" }])
+            expect.arrayContaining([{ flexDirection: "column", alignItems: "flex-start" }])
         );
+        expect(screen.queryByTestId(`${name}$horizontalContainer`)).toBeNull();
     });
 
     it("with error renders validation message", () => {
diff --git a/packages/pluggableWidgets/switch-native/src/package.xml b/packages/pluggableWidgets/switch-native/src/package.xml
index b7e7c6f86..36e64d933 100644
--- a/packages/pluggableWidgets/switch-native/src/package.xml
+++ b/packages/pluggableWidgets/switch-native/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Switch" version="1.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Switch" version="1.1.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Switch.xml" />
         </widgetFiles>