controlling

App.js

@@ -1,22 +1,72 @@
 import "react-native-gesture-handler";
 import { StatusBar } from "expo-status-bar";
-import { StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 import HomeScreen from "./src/Screens/Home";
-import { NativeBaseProvider } from "native-base";
 import { createDrawerNavigator } from "@react-navigation/drawer";
-import TestScreen from "./src/Screens/Test";
 import { NavigationContainer } from "@react-navigation/native";
 import SideBar from "./src/Components/SideBar";
 import FaqScreen from "./src/Screens/FAQ";
 import FeedbackScreen from "./src/Screens/Feedback";
+import { DefaultTheme, PaperProvider } from "react-native-paper";
 
 // fix: https://github.com/GeekyAnts/NativeBase/issues/5758
 
 const Drawer = createDrawerNavigator();
 
+/*
+    PRIMARY: "#e67e22",
+    SECONDARY: "#9b59b6",
+*/
+
+const theme = {
+  ...DefaultTheme,
+  colors: {
+    primary: "rgb(220, 184, 255)",
+    onPrimary: "rgb(71, 12, 122)",
+    primaryContainer: "rgb(95, 43, 146)",
+    onPrimaryContainer: "rgb(240, 219, 255)",
+    secondary: "rgb(208, 193, 218)",
+    onSecondary: "rgb(54, 44, 63)",
+    secondaryContainer: "#9b59b6",
+    onSecondaryContainer: "rgb(237, 221, 246)",
+    tertiary: "rgb(243, 183, 190)",
+    onTertiary: "rgb(75, 37, 43)",
+    tertiaryContainer: "rgb(101, 58, 65)",
+    onTertiaryContainer: "rgb(255, 217, 221)",
+    error: "rgb(255, 180, 171)",
+    onError: "rgb(105, 0, 5)",
+    errorContainer: "rgb(147, 0, 10)",
+    onErrorContainer: "rgb(255, 180, 171)",
+    background: "#2e2e30",
+    onBackground: "rgb(231, 225, 229)",
+    surface: "rgb(29, 27, 30)",
+    onSurface: "rgb(231, 225, 229)",
+    surfaceVariant: "rgb(74, 69, 78)",
+    onSurfaceVariant: "rgb(204, 196, 206)",
+    outline: "rgb(150, 142, 152)",
+    outlineVariant: "rgb(74, 69, 78)",
+    shadow: "rgb(0, 0, 0)",
+    scrim: "rgb(0, 0, 0)",
+    inverseSurface: "rgb(231, 225, 229)",
+    inverseOnSurface: "rgb(50, 47, 51)",
+    inversePrimary: "rgb(120, 69, 172)",
+    elevation: {
+      level0: "transparent",
+      level1: "rgb(39, 35, 41)",
+      level2: "rgb(44, 40, 48)",
+      level3: "rgb(50, 44, 55)",
+      level4: "rgb(52, 46, 57)",
+      level5: "rgb(56, 49, 62)",
+    },
+    surfaceDisabled: "rgba(231, 225, 229, 0.12)",
+    onSurfaceDisabled: "rgba(231, 225, 229, 0.38)",
+    backdrop: "rgba(51, 47, 55, 0.4)",
+  },
+};
+
 export default function App() {
   return (
-    <NativeBaseProvider>
+    <PaperProvider theme={theme}>
       <NavigationContainer>
         <Drawer.Navigator drawerContent={(props) => <SideBar {...props} />}>
           <Drawer.Screen name="Spinner V6" component={HomeScreen} />
@@ -26,7 +76,7 @@ export default function App() {
       </NavigationContainer>
 
       <StatusBar style="dark" />
-    </NativeBaseProvider>
+    </PaperProvider>
   );
 }
 

package-lock.json

@@ -20,7 +20,8 @@
         "react-native-paper": "^5.9.1",
         "react-native-reanimated": "~2.14.4",
         "react-native-safe-area-context": "4.5.0",
-        "react-native-screens": "~3.20.0"
+        "react-native-screens": "~3.20.0",
+        "reanimated-color-picker": "^2.3.1"
       },
       "devDependencies": {
         "@babel/core": "^7.20.0"
@@ -13794,6 +13795,21 @@
       "resolved": "https://registry.npmjs.org/readline/-/readline-1.3.0.tgz",
       "integrity": "sha512-k2d6ACCkiNYz222Fs/iNze30rRJ1iIicW7JuX/7/cozvih6YCkFZH+J6mAFDVgv0dRBaAyr4jDqC95R2y4IADg=="
     },
+    "node_modules/reanimated-color-picker": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/reanimated-color-picker/-/reanimated-color-picker-2.3.1.tgz",
+      "integrity": "sha512-bfGWt9PQp8RT+iYQv+Us3nN6P2JgiqYDVM0FsiFdr93Q9akzfMvfXKYqNpMC/Lrb0iV3hRwzusLfzT4FiuqHOw==",
+      "peerDependencies": {
+        "expo": ">=44.0.0",
+        "react-native-gesture-handler": ">=2.0.0",
+        "react-native-reanimated": "^2.0.0 || ^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/recast": {
       "version": "0.20.5",
       "resolved": "https://registry.npmjs.org/recast/-/recast-0.20.5.tgz",

package.json

@@ -21,7 +21,8 @@
     "react-native-paper": "^5.9.1",
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "4.5.0",
-    "react-native-screens": "~3.20.0"
+    "react-native-screens": "~3.20.0",
+    "reanimated-color-picker": "^2.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

src/Components/SideBar/index.js

@@ -1,21 +1,15 @@
-import {
+import { DrawerContentScrollView, DrawerItem } from "@react-navigation/drawer";
-  DrawerContentScrollView,
-  DrawerItem,
-  DrawerItemList,
-} from "@react-navigation/drawer";
-import { Icon, Text } from "native-base";
 import { Image, StyleSheet, View } from "react-native";
-import { Divider } from "react-native-paper";
+import { Divider, Text } from "react-native-paper";
 
 export default function Sidebar(props) {
   return (
     <>
-      {console.log(props.descriptors)}
       <Image
         source={require("../../../assets/image.png")}
         style={styles.image}
       />
-      <Text fontSize="md" style={{ fontWeight: "bold", marginLeft: 10 }}>
+      <Text variant="titleLarge" style={{ fontWeight: "bold", marginLeft: 10 }}>
         Geräte
       </Text>
       <DrawerContentScrollView contentContainerStyle={{ paddingTop: 0 }}>

src/Screens/Home/index.js

@@ -1,9 +1,241 @@
-import { Text } from "native-base";
+import { useState } from "react";
-import { StyleSheet, View } from "react-native";
+import {
-import { Avatar, Button } from "react-native-paper";
+  StyleSheet,
+  View,
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  Text,
+} from "react-native";
+import {
+  Button,
+  IconButton,
+  List,
+  SegmentedButtons,
+  Switch,
+} from "react-native-paper";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+} from "react-native-reanimated";
+import ColorPicker, {
+  Panel3,
+  Swatches,
+  colorKit,
+  BrightnessSlider,
+  InputWidget,
+} from "reanimated-color-picker";
 
 export default function HomeScreen() {
+  const customSwatches = new Array(12)
+    .fill("#fff")
+    .map(() => colorKit.randomRgbColor().hex());
+
+  const selectedColor = useSharedValue(customSwatches[0]);
+  const backgroundColorStyle = useAnimatedStyle(() => ({
+    backgroundColor: selectedColor.value,
+  }));
+
+  const onColorSelect = (color) => {
+    selectedColor.value = color.hex;
+  };
+
+  const [value, setValue] = useState("");
+
+  const [expanded, setExpanded] = useState(true);
+
+  const [isSwitchOn, setIsSwitchOn] = useState(false);
+
+  const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);
+
+  const handlePress = () => setExpanded(!expanded);
+
   return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView style={styles.scrollView}>
+        <SegmentedButtons
+          value={value}
+          onValueChange={setValue}
+          buttons={[
+            {
+              value: "acryl",
+              label: "Acryl",
+              checkedColor: "#fff",
+            },
+            {
+              value: "ambilight",
+              label: "Ambilight",
+              checkedColor: "#fff",
+            },
+            {
+              value: "motor",
+              label: "Motor",
+              checkedColor: "#fff",
+            },
+          ]}
+        />
+
+        <List.Section style={{ marginTop: 20 }}>
+          <List.Accordion
+            style={styles.listAccordion}
+            title="Farbsteuerung"
+            left={(props) => <List.Icon {...props} icon="palette" />}
+          >
+            <>
+              <View style={{ paddingBottom: 20 }}>
+                <Animated.View style={styles.animatedViewContainer}>
+                  <View style={styles.pickerContainer}>
+                    <Switch value={isSwitchOn} onValueChange={onToggleSwitch} />
+                    <IconButton
+                      icon="star-outline"
+                      onPress={() => console.log("press star")}
+                    />
+
+                    <ColorPicker
+                      value={selectedColor.value}
+                      sliderThickness={25}
+                      thumbSize={27}
+                      onChange={onColorSelect}
+                    >
+                      <Panel3 style={styles.panelStyle} />
+
+                      <BrightnessSlider style={styles.sliderStyle} />
+
+                      <Swatches
+                        style={styles.swatchesContainer}
+                        swatchStyle={styles.swatchStyle}
+                        colors={customSwatches}
+                      />
+
+                      <View style={styles.previewTxtContainer}>
+                        <InputWidget
+                          inputStyle={styles.inputWidget}
+                          iconColor="#707070"
+                        />
+                      </View>
+                    </ColorPicker>
+                  </View>
+                </Animated.View>
+              </View>
+            </>
+          </List.Accordion>
+
+          <List.Accordion
+            title="Einstellungen"
+            style={styles.listAccordion}
+            left={(props) => <List.Icon {...props} icon="cog" />}
+            expanded={expanded}
+            onPress={handlePress}
+          >
+            <>
+              <Button
+                icon="power"
+                mode="contained"
+                onPress={() => console.log("Pressed")}
+              >
+                Power1
+              </Button>
+              <List.Item title="Second item"></List.Item>
+            </>
+          </List.Accordion>
+        </List.Section>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#2e2e30",
+  },
+  scrollView: {
+    width: "100%",
+    padding: 20,
+  },
+  listAccordion: {
+    borderRadius: 20,
+    backgroundColor: "#3f4042",
+    marginBottom: 20,
+    elevation: 5,
+  },
+  previewTxtContainer: {
+    paddingTop: 20,
+    marginTop: 20,
+    borderTopWidth: 1,
+    borderColor: "#bebdbe",
+  },
+  pickerContainer: {
+    alignSelf: "center",
+    width: "100%",
+    backgroundColor: "#3f4042",
+    padding: 20,
+    borderRadius: 20,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 5,
+    },
+    shadowOpacity: 0.34,
+    shadowRadius: 6.27,
+    elevation: 5,
+  },
+  panelStyle: {
+    margin: 10,
+    marginLeft: 20,
+    borderRadius: 16,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  sliderStyle: {
+    borderRadius: 20,
+    marginTop: 20,
+
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  swatchesContainer: {
+    borderTopWidth: 1,
+    borderColor: "#bebdbe",
+    marginTop: 20,
+    paddingTop: 20,
+    alignItems: "center",
+    //flexWrap: "nowrap",
+    gap: 10,
+  },
+  swatchStyle: {
+    borderRadius: 20,
+    height: 30,
+    width: 30,
+    margin: 0,
+    marginBottom: 0,
+    marginHorizontal: 0,
+    marginVertical: 0,
+  },
+  inputWidget: {
+    color: "#fff",
+    paddingVertical: 2,
+    borderColor: "#707070",
+    fontSize: 12,
+    marginLeft: 5,
+  },
+});
+
+/*
  <View style={styles.container}>
   <Avatar.Icon size={82} icon="help" />
   <Text fontSize="xl" style={{ marginBottom: 10 }}>
@@ -17,14 +249,4 @@ export default function HomeScreen() {
     Gerät verbinden
   </Button>
 </View>
-  );
+*/
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});