added two thumb slider for device auto brightness

locales/de.json

@@ -17,6 +17,8 @@
         "settingsTitle": "Einstellungen",
         "wifiStandByTitle": "WLAN im Standby",
         "wifiStandByDescription": "Die WLAN-Verbindung bleibt bestehen, auch wenn das Gerät ausgeschaltet ist. Bitte beachten Sie, dass dies zu einem erhöhten Stromverbrauch führen kann.",
+        "deviceAutoBrightnessTitle": "Automatische Helligkeit",
+        "deviceAutoBrightnessDescription": "Die Helligkeit des Geräts wird automatisch an die Umgebung angepasst.",
         "deviceInformationText": "Geräteinformationen",
         "deviceNameText": "Gerätename",
         "deviceModelText": "Gerätemodell",

locales/en.json

@@ -17,6 +17,8 @@
         "settingsTitle": "Settings",
         "wifiStandByTitle": "WLAN in standby",
         "wifiStandByDescription": "The WLAN connection remains established even if the device is switched off. Please note that this can lead to increased power consumption.",
+        "deviceAutoBrightnessTitle": "Automatic brightness",
+        "deviceAutoBrightnessDescription": "The brightness of the device is automatically adjusted to the ambient light.",
         "deviceInformationText": "Device information",
         "deviceNameText": "Device name",
         "deviceModelText": "Device model",

src/Components/Slider/index.js

@@ -1,8 +1,9 @@
 //import Slider from "@react-native-community/slider";
-import { useContext } from "react";
+import { Children, cloneElement, useContext, useState } from "react";
 import { AppContext } from "../../utils";
 import { Slider } from "@miblanchard/react-native-slider";
-import { View } from "react-native";
+import { Text, View } from "react-native";
+import MyIcon from "../Icon";
 
 export default function MySlider({
   style,
@@ -55,3 +56,76 @@ export default function MySlider({
     </View>
   );
 }
+
+export function MyTwoThumbsSlider({
+  sliderValue,
+  appContext,
+  unitOfMeasurement,
+  iconName,
+}) {
+  const [value, setValue] = useState(sliderValue);
+
+  const children = (
+    <Slider
+      animateTransitions
+      maximumValue={100}
+      minimumTrackTintColor={appContext.appTheme.slider.minimumTrackTintColor}
+      maximumTrackTintColor={appContext.appTheme.slider.maximumTrackTintColor}
+      minimumValue={1}
+      step={1}
+      thumbTintColor={appContext.appTheme.slider.thumbTintColor}
+    />
+  );
+
+  const renderChildren = () => {
+    return Children.map(children, (child) => {
+      if (!!child && child.type === Slider) {
+        return cloneElement(child, {
+          onValueChange: setValue,
+          //renderTrackMarkComponent,
+          //trackMarks,
+          value,
+        });
+      }
+
+      return child;
+    });
+  };
+
+  return (
+    <View>
+      <View
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 10,
+        }}
+      >
+        <MyIcon name={iconName} size={24} />
+        <View style={{ flex: 1 }}>{renderChildren()}</View>
+
+        <View style={{ width: 62, alignItems: "center" }}>
+          <Text style={{ color: appContext.appTheme.text }}>
+            {Array.isArray(value) ? value.join(" - ") : value}
+            {unitOfMeasurement}
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+/*
+const trackMarkStyles = StyleSheet.create({
+  activeMark: {
+    borderColor: "red",
+    borderWidth,
+    left: -borderWidth / 2,
+  },
+  inactiveMark: {
+    borderColor: "grey",
+    borderWidth,
+    left: -borderWidth / 2,
+  },
+});
+*/

src/Screens/Device/settings.js

@@ -14,6 +14,12 @@ import { useTranslation } from "react-i18next";
 import MySwitch from "../../Components/Switch";
 import MyButton, { MyIconButton } from "../../Components/Button";
 import { MyBottomSheetModal } from "../../Components/Modal";
+import { Slider } from "@miblanchard/react-native-slider";
+import {
+  MySliderContainer,
+  MyTwoThumbsSlider,
+  SliderContainer,
+} from "../../Components/Slider";
 
 export default function SettingsView({ navigation }) {
   const appContext = useContext(AppContext);
@@ -111,6 +117,22 @@ export default function SettingsView({ navigation }) {
             onValueChange={(e) => setSwitchState(e)}
           />
         </View>
+
+        <Divider />
+
+        <SettingsText
+          title={t("screens.device.settings.deviceAutoBrightnessTitle")}
+          description={t(
+            "screens.device.settings.deviceAutoBrightnessDescription"
+          )}
+        />
+
+        <MyTwoThumbsSlider
+          appContext={appContext}
+          sliderValue={[20, 80]}
+          unitOfMeasurement={"%"}
+          iconName="brightness-6"
+        />
       </Card>
 
       <Card