Repository: NMF-earth/nmf-app (language: typescript)

Issue:
Bug: aligment issue switch
**Describe the bug**

Fix alignment issue, see screenshot below. It should be center vertically and the trailing edge of the switch should have same margin as the chevron.

<img width="314" height="192" alt="Image" src="https://github.com/user-attachments/assets/cda14948-4e7b-4f51-b0c9-68feb4130676" />


Discussion hints:

Pull request: feat: Center the switch component within the ListItemSwitch by applying a new style.

<!-- Thanks for submitting a pull request! We appreciate a lot your help. Please provide some information so that others can review your pull request. The two last fields below are optional but appreciated. -->

✅ I have read the [contributing file](https://github.com/NMF-earth/nmf-app/blob/main/contributing.md)

## Summary

Fixes #406 

## Changelog

- Updates styles for the switch

## Demo

<img width="1170" height="2532" alt="image" src="https://github.com/user-attachments/assets/e5ec5c43-78f2-436d-9ae8-f04468d9515c" />



Test command: NODE_OPTIONS='--experimental-vm-modules --max-old-space-size=4096' npx --no-install jest app/components/ListItemSwitch/__tests__/ListItemSwitch.test.tsx --passWithNoTests 2>&1

Fix patch:
diff --git a/app/components/ListItemSwitch/ListItemSwitch.styles.ts b/app/components/ListItemSwitch/ListItemSwitch.styles.ts
index b412184b..f237406d 100644
--- a/app/components/ListItemSwitch/ListItemSwitch.styles.ts
+++ b/app/components/ListItemSwitch/ListItemSwitch.styles.ts
@@ -12,6 +12,9 @@ export default StyleSheet.create({
   text: {
     paddingVertical: 18,
   },
+  switch: {
+    alignSelf: "center",
+  },
   topLine: {
     borderTopColor: Colors.grey10,
     borderTopWidth: 1.6,
diff --git a/app/components/ListItemSwitch/ListItemSwitch.tsx b/app/components/ListItemSwitch/ListItemSwitch.tsx
index d32c8e6c..17ce4893 100644
--- a/app/components/ListItemSwitch/ListItemSwitch.tsx
+++ b/app/components/ListItemSwitch/ListItemSwitch.tsx
@@ -32,7 +32,7 @@ const ListItemSwitch: React.FC<Props> = ({
   return (
     <View style={containerStyle}>
       <Text.Secondary style={styles.text}>{title}</Text.Secondary>
-      <Switch value={value} onChange={onChange} />
+      <Switch style={styles.switch} value={value} onChange={onChange} />
     </View>
   );
 };


Test patch:
diff --git a/app/components/ListItemSwitch/__tests__/__snapshots__/ListItemSwitch.test.tsx.snap b/app/components/ListItemSwitch/__tests__/__snapshots__/ListItemSwitch.test.tsx.snap
index b1e08408..031fcd86 100644
--- a/app/components/ListItemSwitch/__tests__/__snapshots__/ListItemSwitch.test.tsx.snap
+++ b/app/components/ListItemSwitch/__tests__/__snapshots__/ListItemSwitch.test.tsx.snap
@@ -34,6 +34,11 @@ exports[`<ListItemSwitch /> ListItem renders correctly with both topLine and bot
   </RCTText>
   <Switch
     onChange={[Function]}
+    style={
+      {
+        "alignSelf": "center",
+      }
+    }
     value={true}
   />
 </View>
@@ -69,6 +74,11 @@ exports[`<ListItemSwitch /> ListItem renders correctly with bottomLine 1`] = `
   </RCTText>
   <Switch
     onChange={[Function]}
+    style={
+      {
+        "alignSelf": "center",
+      }
+    }
     value={true}
   />
 </View>
@@ -104,6 +114,11 @@ exports[`<ListItemSwitch /> ListItem renders correctly with topLine 1`] = `
   </RCTText>
   <Switch
     onChange={[Function]}
+    style={
+      {
+        "alignSelf": "center",
+      }
+    }
     value={true}
   />
 </View>
@@ -135,6 +150,11 @@ exports[`<ListItemSwitch /> render 1`] = `
   </RCTText>
   <Switch
     onChange={[Function]}
+    style={
+      {
+        "alignSelf": "center",
+      }
+    }
     value={true}
   />
 </View>