added device tab button container and component for device live preview

src/Screens/Device/deviceTabButton.js

@@ -1,17 +1,9 @@
 import { useContext } from "react";
-import { AppContext } from "../../utils";
-import { TouchableHighlight, TouchableOpacity } from "react-native";
+import { AppContext, AppStyles } from "../../utils";
+import { TouchableHighlight, TouchableOpacity, View } from "react-native";
 import MyIcon from "../../Components/Icon";
 
-const spaceToSide = 10; // left and right
-const top = 35;
-const spaceBetweenButtons = 60;
-
-export const topFirst = top;
-export const topSecond = top + spaceBetweenButtons;
-export const topThird = top + 2 * spaceBetweenButtons;
-
-export const MyDeviceTabButton = ({ top, iconName, iconColor, onPress }) => {
+export function MyDeviceTabButton({ iconName, iconColor, onPress }) {
   const appContext = useContext(AppContext);
 
   const TouchComponent =
@@ -23,15 +15,31 @@ export const MyDeviceTabButton = ({ top, iconName, iconColor, onPress }) => {
     <TouchComponent
       onPress={onPress}
       style={{
-        position: "absolute",
         backgroundColor: appContext.appTheme.card.backgroundColor,
         borderRadius: 10,
         padding: 8,
-        top: top,
-        right: spaceToSide,
       }}
     >
       <MyIcon name={iconName} size={30} color={iconColor} />
     </TouchComponent>
   );
-};
+}
+
+export function MyDeviceTabButtonContainer({ children }) {
+  return (
+    <View
+      style={[
+        {
+          justifyContent: "space-evenly",
+          position: "absolute",
+          paddingTop: 6,
+          paddingBottom: 6,
+          right: 10,
+        },
+        AppStyles.deviceLivePreview,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}

src/Screens/Device/index.js

@@ -1,13 +1,11 @@
 import { useContext, useState } from "react";
-import { Image, ScrollView, StyleSheet, View, Text, Alert } from "react-native";
-import { AppContext } from "../../utils";
+import { Image, View, Text, Alert } from "react-native";
+import { AppContext, AppStyles } from "../../utils";
 import SettingsView from "./settings";
 import SceneView from "./scene";
 import {
   MyDeviceTabButton,
-  topFirst,
-  topSecond,
-  topThird,
+  MyDeviceTabButtonContainer,
 } from "./deviceTabButton";
 
 export default function DeviceScreen({ navigation }) {
@@ -38,44 +36,33 @@ export default function DeviceScreen({ navigation }) {
         backgroundColor: appContext.appTheme.backgroundColor,
       }}
     >
-      {appContext.isUserDeveloperModeEnabled ? (
-        <Image
-          source={require("../../../assets/device.png")}
-          style={styles.image}
-          resizeMode="contain"
-        />
-      ) : (
-        <>
-          {selectedView !== 4 && (
-            <View style={[styles.image, { backgroundColor: "#ddd" }]} />
-          )}
-        </>
-      )}
+      <DeviceLivePreview />
 
+      <MyDeviceTabButtonContainer>
         <MyDeviceTabButton
           iconName={"cog-outline"}
           selectedViewNumber={0}
-        top={topFirst}
           iconColor={getIconColor(0)}
           onPress={() => setSelectedView(0)}
         />
         <MyDeviceTabButton
           iconName={"rotate-3d-variant"}
           selectedViewNumber={1}
-        top={topSecond}
           iconColor={getIconColor(1)}
-        onPress={() => {
-          console.log("rotate");
-          Alert.alert("Rotate device", "Soon the device will turn 180 degrees");
-        }}
+          onPress={() =>
+            Alert.alert(
+              "Rotate device",
+              "Soon the device will turn 180 degrees"
+            )
+          }
         />
         <MyDeviceTabButton
           iconName={"group"}
           selectedViewNumber={2}
-        top={topThird}
           iconColor={getIconColor(2)}
           onPress={() => setSelectedView(2)}
         />
+      </MyDeviceTabButtonContainer>
 
       <View style={{ flex: 1 }}>
         <SelectedView />
@@ -84,19 +71,28 @@ export default function DeviceScreen({ navigation }) {
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: "#2e2e30",
-  },
-  scrollView: {
+export function DeviceLivePreview() {
+  const appContext = useContext(AppContext);
+
+  return (
+    <>
+      {appContext.isUserDeveloperModeEnabled ? (
+        <Image
+          source={require("../../../assets/device.png")}
+          style={[{ width: "100%" }, AppStyles.deviceLivePreview]}
+          resizeMode="contain"
+        />
+      ) : (
+        <View
+          style={[
+            {
               width: "100%",
-    padding: 20,
+              backgroundColor: "#ddd",
             },
-  image: {
-    width: "100%",
-    height: 250,
-  },
-});
+            AppStyles.deviceLivePreview,
+          ]}
+        />
+      )}
+    </>
+  );
+}

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

@@ -1,6 +1,5 @@
 import {
   FlatList,
-  Image,
   ScrollView,
   Text,
   TouchableOpacity,
@@ -8,18 +7,14 @@ import {
 } from "react-native";
 import {
   MyDeviceTabButton,
+  MyDeviceTabButtonContainer,
   topFirst,
   topSecond,
 } from "../../../deviceTabButton";
 import Card from "../../../../../Components/Card";
 import MyDropdown from "../../../../../Components/Dropdown";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
-import {
-  AppContext,
-  AppStyles,
-  GetUuid,
-  ModalContainer,
-} from "../../../../../utils";
+import { AppContext, AppStyles, ModalContainer } from "../../../../../utils";
 import {
   MyDotsModal,
   MyPickerModalListItem,
@@ -36,6 +31,7 @@ import EditActionAnimationsCardContent, {
 } from "..";
 import { useTranslation } from "react-i18next";
 import { useFocusEffect } from "@react-navigation/native";
+import { DeviceLivePreview } from "../../..";
 
 function LightModeDefaultColor({
   sharedColor,
@@ -180,12 +176,6 @@ export function LightsEditActionModalContent({ navigation, route }) {
         (a) => a.actionId === selectedSceneAction.actionId
       );
 
-      console.log(
-        "foundSceneActionIndex",
-        foundSceneActionIndex,
-        newArr[foundSceneActionIndex]
-      );
-
       if (foundSceneActionIndex !== -1) {
         newArr[foundSceneActionIndex].modeAdjustments.colors =
           sharedLightModeDefaultColors.value;
@@ -204,29 +194,18 @@ export function LightsEditActionModalContent({ navigation, route }) {
         height: "100%",
       }}
     >
-      {appContext.isUserDeveloperModeEnabled ? (
-        <Image
-          source={require("../../../../../../assets/device.png")}
-          style={{ width: "100%", height: 200 }}
-          resizeMode="contain"
-        />
-      ) : (
-        <View
-          style={[
-            {
-              width: "100%",
-              height: 200,
-            },
-            { backgroundColor: "#ddd" },
-          ]}
-        />
-      )}
+      <DeviceLivePreview />
 
-      <MyDeviceTabButton iconName="play-network-outline" top={topFirst + 10} />
+      <MyDeviceTabButtonContainer>
+        <MyDeviceTabButton
+          iconName="play-network-outline"
+          onPress={() => console.log("pressed")}
+        />
         <MyDeviceTabButton
           iconName="play-box-multiple-outline"
-        top={topSecond + 15}
+          onPress={() => console.log("pressed2")}
         />
+      </MyDeviceTabButtonContainer>
 
       <ScrollView>
         <Card>

src/Screens/Device/scene.js

@@ -113,9 +113,9 @@ export default function SceneView({ navigation }) {
     (a) => a.sceneId === device.selectedScene
   );
 
-  const DropdownCard = (style) => {
+  const DropdownCard = () => {
     return (
-      <Card style={style}>
+      <Card>
         <MyDropdown
           label={t("screens.device.scenes.dropdownSceneSelection.label")}
           onPress={() =>
@@ -131,7 +131,6 @@ export default function SceneView({ navigation }) {
 
   return (
     <>
-      {console.log("actions", appContext.deviceSceneActions)}
       {device.selectedScene === "" ? (
         <>
           <DropdownCard />
@@ -159,7 +158,11 @@ export default function SceneView({ navigation }) {
             })
           }
           keyExtractor={(item) => item.actionId}
-          ListHeaderComponent={<DropdownCard style={{ marginBottom: 10 }} />}
+          ListHeaderComponent={
+            <View style={{ marginBottom: 10 }}>
+              <DropdownCard />
+            </View>
+          }
           ListEmptyComponent={
             <MyResult
               text={t("screens.device.scenes.infoNoActionsAvailableInScene")}

src/utils.js

@@ -68,6 +68,9 @@ export const AppStyles = StyleSheet.create({
   headerNavigationIcons: {
     padding: 17,
   },
+  deviceLivePreview: {
+    height: 200,
+  },
 });
 
 const DarkAppTheme = {