changed pressed modal picker list item color

src/Components/Modal/index.js

@@ -1,6 +1,6 @@
 import { useContext, useEffect, useState } from "react";
 import { AppContext, AppStyles, ModalContainer } from "../../utils";
-import { Text, TouchableOpacity, View } from "react-native";
+import { Pressable, Text, TouchableOpacity, View } from "react-native";
 import { Divider } from "../Divider";
 import MyIcon from "../Icon";
 import MyTextInput from "../TextInput";
@@ -113,13 +113,22 @@ export function MyPickerModalListItem({
 
   return (
     <>
-      <TouchableOpacity onPress={onPress} disabled={disabled}>
+      <Pressable
+        onPress={onPress}
+        disabled={disabled}
+        style={({ pressed }) => [
+          {
+            backgroundColor: pressed
+              ? appContext.appTheme.modal.pressedPickerItemColor
+              : appContext.appTheme.backgroundColor,
+          },
+        ]}
+      >
         <View
           style={{
             flexDirection: "row",
             justifyContent: "space-between",
-            marginLeft: 10,
-            marginRight: 10,
+            padding: 12,
           }}
         >
           <Text
@@ -140,9 +149,7 @@ export function MyPickerModalListItem({
             />
           )}
         </View>
-      </TouchableOpacity>
-
-      <Divider />
+      </Pressable>
     </>
   );
 }

src/Screens/Device/modals/ChooseScene/CreateScene/index.js

@@ -31,7 +31,7 @@ export default function CreateSceneModalContent({ navigation }) {
   ];
 
   return (
-    <ModalContainer>
+    <ModalContainer withoutPadding>
       <FlatList
         data={options}
         keyExtractor={(item) => item.id}

src/Screens/Device/modals/ChooseScene/index.js

@@ -21,7 +21,7 @@ export default function ChooseSceneModalContent({ navigation, route }) {
   );
 
   return (
-    <ModalContainer>
+    <ModalContainer withoutPadding>
       {deviceScenes.length === 0 ? (
         <MyResult
           text={t("screens.device.scenes.modalChooseScene.noResult")}

src/Screens/FAQ/index.js

@@ -1,18 +0,0 @@
-import { useContext } from "react";
-import { AppContext } from "../../utils";
-import { Text, View } from "react-native";
-
-export default function FaqScreen() {
-  const appContext = useContext(AppContext);
-
-  return (
-    <View
-      style={{
-        backgroundColor: appContext.appTheme.backgroundColor,
-        height: "100%",
-      }}
-    >
-      <Text>Feedback</Text>
-    </View>
-  );
-}

src/Screens/Feedback/index.js

@@ -1,18 +0,0 @@
-import { useContext } from "react";
-import { AppContext } from "../../utils";
-import { Text, View } from "react-native";
-
-export default function FeedbackScreen() {
-  const appContext = useContext(AppContext);
-
-  return (
-    <View
-      style={{
-        backgroundColor: appContext.appTheme.backgroundColor,
-        height: "100%",
-      }}
-    >
-      <Text>Feedback</Text>
-    </View>
-  );
-}

src/Screens/Help/index.js

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { AppContext } from "../../../utils";
+import { AppContext } from "../../utils";
 import { Text, View } from "react-native";
 
 export default function HelpScreen() {

src/utils.js

@@ -54,10 +54,6 @@ export const AppStyles = StyleSheet.create({
     shadowOpacity: 0.2, // only ios
     shadowRadius: 1, // only ios
   },
-  modal: {
-    flex: 1,
-    padding: 10,
-  },
   disabled: {
     opacity: 0.6,
   },
@@ -108,6 +104,9 @@ const DarkAppTheme = {
     },
   },
   colorPickerDisabled: "rgba(0, 0, 0, 0.3)",
+  modal: {
+    pressedPickerItemColor: "rgba(0, 0, 0, 0.3)",
+  },
 };
 
 const LightAppTheme = {
@@ -154,6 +153,9 @@ const LightAppTheme = {
     },
   },
   colorPickerDisabled: "rgba(0, 0, 0, 0.3)",
+  modal: {
+    pressedPickerItemColor: "rgba(0, 0, 0, 0.1)",
+  },
 };
 
 export async function StoreData(key, value) {
@@ -521,9 +523,9 @@ export function VibrateShort() {
   Vibration.vibrate(50);
 }
 
-export function ModalContainer({ children }) {
+export function ModalContainer({ children, withoutPadding }) {
   return (
-    <View style={AppStyles.modal}>
+    <View style={[{ flex: 1 }, !withoutPadding && { padding: 10 }]}>
       <View>{children}</View>
     </View>
   );