slider

App.js

@@ -65,7 +65,7 @@ export function MyApp() {
           screenOptions={{
             // headerShown: false,
             headerStyle: {
-              backgroundColor: appContext.appTheme.drawer.backgroundColor,
+              backgroundColor: appContext.appTheme.backgroundColor,
             },
             headerTintColor: appContext.appTheme.text,
             drawerStyle: {

README.md

@@ -6,10 +6,6 @@ npx expo start -c
 
 https://pictogrammers.com/library/mdi/
 
-# RNUILib
-
-https://wix.github.io/react-native-ui-lib/docs/getting-started/setup
-
 https://stackoverflow.com/questions/68243384/dark-mode-usecolorscheme-always-returns-light-on-android
 
 https://stackoverflow.com/questions/70493788/i18nextpluralresolver-your-environment-seems-not-to-be-intl-api-compatible-u

locales/de.json

@@ -10,7 +10,9 @@
     "device": {
       "light": {
         "pickerColorModeText": "Farbauswahl",
-        "pickerColorModePlaceholder": "Wählen Sie einen Farbmodus"
+        "pickerColorModePlaceholder": "Wählen Sie einen Farbmodus",
+        "minimumBrightnessText": "Minimale Helligkeit",
+        "maximumBrightnessText": "Maximale Helligkeit"
       },
       "settings": {
         "settingsTitle": "Einstellungen",

locales/en.json

@@ -10,7 +10,9 @@
     "device": {
       "light": {
         "pickerColorModeText": "Color selection",
-        "pickerColorModePlaceholder": "Select a color mode"
+        "pickerColorModePlaceholder": "Select a color mode",
+        "minimumBrightnessText": "Minimum brightness",
+        "maximumBrightnessText": "Maximum brightness"
       },
       "settings": {
         "settingsTitle": "Settings",

src/Components/Slider/index.js

@@ -8,6 +8,7 @@ export default function MySlider({
   onValueChange,
   minimumValue,
   maximumValue,
+  inverted,
 }) {
   const appContext = useContext(AppContext);
 
@@ -17,6 +18,7 @@ export default function MySlider({
       minimumValue={minimumValue}
       maximumValue={maximumValue}
       value={value}
+      inverted={inverted}
       onValueChange={onValueChange}
       minimumTrackTintColor={appContext.appTheme.slider.minimumTrackTintColor}
       maximumTrackTintColor={appContext.appTheme.slider.maximumTrackTintColor}

src/Components/Switch/index.js

@@ -2,11 +2,12 @@ import { useContext } from "react";
 import { Switch } from "react-native";
 import { AppContext } from "../../utils";
 
-export default function MySwitch({ value, onValueChange }) {
+export default function MySwitch({ style, value, onValueChange }) {
   const appContext = useContext(AppContext);
 
   return (
     <Switch
+      style={style}
       value={value}
       onValueChange={onValueChange}
       trackColor={{

src/Screens/Device/light.js

@@ -16,7 +16,7 @@ import ColorPicker, {
   HueCircular,
   Panel1,
 } from "reanimated-color-picker";
-import { AppContext } from "../../utils";
+import { AppContext, AppStyles } from "../../utils";
 import Card from "../../Components/Card";
 import MySwitch from "../../Components/Switch";
 import MyIcon from "../../Components/Icon";
@@ -113,6 +113,10 @@ export default function LightView() {
   const selectedColorLayer3 = useSharedValue(selectedColorPickerColor.value);
   const selectedColorLayer4 = useSharedValue(selectedColorPickerColor.value);
 
+  const [sliderBrightness, setSliderBrightness] = useState(10);
+  const [sliderMinimumBrightness, setSliderMinimumBrightness] = useState(25);
+  const [sliderMaximumBrightness, setSliderMaximumBrightness] = useState(75);
+
   const onColorSelect = (color) => {
     selectedColorPickerColor.value = color.hex;
 
@@ -133,6 +137,7 @@ export default function LightView() {
   };
 
   return (
+    <>
       <Card>
         <TouchableOpacity onPress={() => setModalDeviceColorModeVisible(true)}>
           <View
@@ -180,13 +185,25 @@ export default function LightView() {
             onValueChange={(e) => setSwitchState(e)}
           />
           <MyIcon
-          name={"brightness-7"}
+            name={
+              sliderBrightness < 1
+                ? "brightness-5"
+                : sliderBrightness < 40
+                ? "brightness-4"
+                : sliderBrightness < 80
+                ? "brightness-6"
+                : "brightness-7"
+            }
             color={appContext.appTheme.icon}
             size={20}
           />
-        <View style={{ flex: 1 }}>
-          <MySlider />
-        </View>
+          <MySlider
+            style={{ flex: 1 }}
+            minimumValue={0}
+            maximumValue={100}
+            value={sliderBrightness}
+            onValueChange={(v) => setSliderBrightness(v)}
+          />
         </View>
 
         <Animated.View>
@@ -297,27 +314,91 @@ export default function LightView() {
           </ColorPicker>
         </Animated.View>
       </Card>
+
+      <Card>
+        <View style={{ flexDirection: "row", alignItems: "center" }}>
+          <MyIcon
+            name="brightness-6"
+            size={24}
+            color={appContext.appTheme.icon}
+          />
+          <Text style={{ color: appContext.appTheme.text, marginLeft: 10 }}>
+            Auto brightness
+          </Text>
+          <MySwitch
+            style={{ flex: 1 }}
+            value={switchState}
+            onValueChange={(e) => setSwitchState(e)}
+          />
+        </View>
+
+        <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
+          <Text
+            style={[
+              AppStyles.typography14,
+              { color: appContext.appTheme.text },
+            ]}
+          >
+            {t("screens.device.light.minimumBrightnessText")}
+          </Text>
+          <Text
+            style={[
+              AppStyles.typography14,
+              { color: appContext.appTheme.text },
+            ]}
+          >
+            {sliderMinimumBrightness} %
+          </Text>
+        </View>
+        <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
+          <Text
+            style={[
+              AppStyles.typography14,
+              { color: appContext.appTheme.text },
+            ]}
+          >
+            {t("screens.device.light.maximumBrightnessText")}
+          </Text>
+          <Text
+            style={[
+              AppStyles.typography14,
+              { color: appContext.appTheme.text },
+            ]}
+          >
+            {sliderMaximumBrightness} %
+          </Text>
+        </View>
+
+        <View
+          style={{
+            flexDirection: "row",
+            justifyContent: "space-around",
+            marginTop: 10,
+          }}
+        >
+          <View style={{ width: "60%" }}>
+            <MySlider
+              minimumValue={50}
+              maximumValue={0}
+              inverted
+              value={sliderMinimumBrightness}
+              onValueChange={(v) => setSliderMinimumBrightness(Math.round(v))}
+            />
+          </View>
+          <View style={{ width: "60%", right: 1 }}>
+            <MySlider
+              minimumValue={51}
+              maximumValue={100}
+              value={sliderMaximumBrightness}
+              onValueChange={(v) => setSliderMaximumBrightness(Math.round(v))}
+            />
+          </View>
+        </View>
+      </Card>
+    </>
   );
 }
 
-/*
- <View row center style={{ flexWrap: "wrap", marginTop: 5 }}>
-  {colorSwatchesFavorites.map((color, i) => (
-    <ColorSwatch
-      key={i}
-      color={color}
-      onPress={() => {
-        console.log("press", color, renderKey);
-        selectedColorPickerColor.value = color;
-        setRenderKey((prevKey) => prevKey + 1);
-      }}
-    />
-  ))}
-</View>
-*/
-
-//  <BrightnessSlider style={styles.sliderStyle} /> <Panel3 style={styles.panelStyle} />
-
 const styles = StyleSheet.create({
   previewTxtContainer: {
     paddingTop: 20,

src/utils.js

@@ -54,12 +54,12 @@ const DarkAppTheme = {
       activeBackgroundColor: "rgba(0, 0, 0, 0.1)",
     },
   },
-  divider: "#888",
+  divider: "#434443",
   icon: "#ddd",
   switch: {
-    trackColorTrue: "#b2b3b3",
+    trackColorTrue: "#01d064",
     trackColorFalse: "#b2b3b3",
-    thumbColorTrue: "#e67e22",
+    thumbColorTrue: "#f4f3f4",
     thumbColorFalse: "#f4f3f4",
     ios_backgroundColor: "#3e3e3e",
   },
@@ -93,9 +93,9 @@ const LightAppTheme = {
   divider: "#ddd",
   icon: "#000",
   switch: {
-    trackColorTrue: "#b2b3b3",
+    trackColorTrue: "#01d064",
     trackColorFalse: "#b2b3b3",
-    thumbColorTrue: "#e67e22",
+    thumbColorTrue: "#f4f3f4",
     thumbColorFalse: "#f4f3f4",
     ios_backgroundColor: "#3e3e3e",
   },