fix: moved to other slider library as the old has rendered a bigger thumb on ios then on android

package-lock.json

@@ -8,6 +8,7 @@
       "name": "app",
       "version": "1.0.0",
       "dependencies": {
+        "@miblanchard/react-native-slider": "^2.3.1",
         "@react-native-async-storage/async-storage": "1.17.11",
         "@react-native-community/slider": "^4.4.2",
         "@react-navigation/drawer": "^6.6.3",
@@ -3558,6 +3559,15 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
     },
+    "node_modules/@miblanchard/react-native-slider": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@miblanchard/react-native-slider/-/react-native-slider-2.3.1.tgz",
+      "integrity": "sha512-J/hZDBWmXq8fJeOnTVHqIUVDHshqMSpJVxJ4WqwuCBKl5Rke9OBYXIdkSlgi75OgtScAr8FKK5KNkDKHUf6JIg==",
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-native": ">=0.59"
+      }
+    },
     "node_modules/@nicolo-ribaudo/semver-v6": {
       "version": "6.3.3",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/semver-v6/-/semver-v6-6.3.3.tgz",

package.json

@@ -9,6 +9,7 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@miblanchard/react-native-slider": "^2.3.1",
     "@react-native-async-storage/async-storage": "1.17.11",
     "@react-native-community/slider": "^4.4.2",
     "@react-navigation/drawer": "^6.6.3",

src/Components/ColorPicker/index.js

@@ -416,7 +416,6 @@ export function MyColorSwatch({ size, backgroundColor, style }) {
           height: size,
           borderRadius: 16,
         },
-        AppStyles.Shadow,
         style,
       ]}
     />

src/Components/Slider/index.js

@@ -1,6 +1,8 @@
-import Slider from "@react-native-community/slider";
+//import Slider from "@react-native-community/slider";
 import { useContext } from "react";
 import { AppContext } from "../../utils";
+import { Slider } from "@miblanchard/react-native-slider";
+import { View } from "react-native";
 
 export default function MySlider({
   style,
@@ -8,12 +10,11 @@ export default function MySlider({
   onValueChange,
   minimumValue,
   maximumValue,
-  inverted,
   onSlidingComplete,
 }) {
   const appContext = useContext(AppContext);
 
-  return (
+  /*return (
     <Slider
       style={style}
       minimumValue={minimumValue}
@@ -27,5 +28,30 @@ export default function MySlider({
       step={1}
       onSlidingComplete={onSlidingComplete}
     />
+  ); */
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        marginLeft: 10,
+        marginRight: 10,
+        alignItems: "stretch",
+        justifyContent: "center",
+      }}
+    >
+      <Slider
+        style={style}
+        minimumValue={minimumValue}
+        maximumValue={maximumValue}
+        value={value}
+        onValueChange={onValueChange}
+        minimumTrackTintColor={appContext.appTheme.slider.minimumTrackTintColor}
+        maximumTrackTintColor={appContext.appTheme.slider.maximumTrackTintColor}
+        thumbTintColor={appContext.appTheme.slider.thumbTintColor}
+        step={1}
+        onSlidingComplete={onSlidingComplete}
+      />
+    </View>
   );
 }

src/Screens/Device/modals/EditActions/Lights/index.js

@@ -131,7 +131,7 @@ export default function LightsEditActionModalContent({ navigation, route }) {
       </MyDeviceTabButtonContainer>
 
       <ScrollView>
-        <Card>
+        <Card disablePaddingBottom>
           <MyDropdown
             style={{ marginBottom: 2 }}
             label={t(

src/Screens/Device/modals/EditActions/Motor/index.js

@@ -51,7 +51,7 @@ export default function MotorEditActionModalContent({ navigation, route }) {
       <DeviceLivePreview />
 
       <ScrollView>
-        <Card>
+        <Card disablePaddingBottom>
           <MyDropdown
             style={{ marginBottom: 2 }}
             label={t(