Change select style

Select.tsx

@@ -1,6 +1,13 @@
 import React, { useCallback, useMemo, useState } from "react";
-import { View } from "react-native";
+import { Pressable, View } from "react-native";
-import { Button, Menu, Subheading, useTheme } from "react-native-paper";
+import {
+  Button,
+  IconButton,
+  Menu,
+  Subheading,
+  useTheme,
+} from "react-native-paper";
+import AppInput from "./AppInput";
 import { ITEM_PADDING } from "./constants";
 
 export interface Item {
@@ -22,13 +29,14 @@ function Select({
 }) {
   const [show, setShow] = useState(false);
   const { colors } = useTheme();
+  let menuButton: React.Ref<View> = null;
 
   const selected = useMemo(
     () => items.find((item) => item.value === value) || items[0],
     [items, value]
   );
 
-  const handlePress = useCallback(
+  const press = useCallback(
     (newValue: string) => {
       onChange(newValue);
       setShow(false);
@@ -37,38 +45,35 @@ function Select({
   );
 
   return (
-    <View
+    <Menu
-      style={{
+      visible={show}
-        flexDirection: "row",
+      onDismiss={() => setShow(false)}
-        alignItems: "center",
+      anchor={
-        paddingLeft: ITEM_PADDING,
+        <View>
-      }}
+          <Pressable onPress={() => setShow(true)}>
-    >
+            <AppInput label={label} value={selected.label} editable={false} />
-      {label && <Subheading style={{ width: 100 }}>{label}</Subheading>}
+          </Pressable>
-      <Menu
+          <View
-        visible={show}
+            style={{ position: "absolute", right: 0, flexDirection: "row" }}
-        onDismiss={() => setShow(false)}
-        anchor={
-          <Button
-            onPress={() => setShow(true)}
-            style={{
-              alignSelf: "flex-start",
-            }}
           >
-            {selected?.label}
+            <IconButton
-          </Button>
+              ref={menuButton}
-        }
+              icon="menu-down"
-      >
+              onPress={() => setShow(true)}
-        {items.map((item) => (
+            />
-          <Menu.Item
+          </View>
-            titleStyle={{ color: item.color || colors.onSurface }}
+        </View>
-            key={item.value}
+      }
-            title={item.label}
+    >
-            onPress={() => handlePress(item.value)}
+      {items.map((item) => (
-          />
+        <Menu.Item
-        ))}
+          title={item.label}
-      </Menu>
+          key={item.value}
-    </View>
+          onPress={() => press(item.value)}
+          titleStyle={{ color: item.color || colors.onSurface }}
+        />
+      ))}
+    </Menu>
   );
 }
 

SettingsPage.tsx

@@ -2,7 +2,7 @@ import { NavigationProp, useNavigation } from "@react-navigation/native";
 import { format } from "date-fns";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
-import { NativeModules, ScrollView } from "react-native";
+import { NativeModules, ScrollView, View } from "react-native";
 import DocumentPicker from "react-native-document-picker";
 import { Dirs, FileSystem } from "react-native-file-access";
 import ConfirmDialog from "./ConfirmDialog";
@@ -324,6 +324,7 @@ export default function SettingsPage() {
       <Page term={term} search={setTerm} style={{ flexGrow: 1 }}>
         <ScrollView style={{ marginTop: MARGIN, flex: 1 }}>
           {switchesMarkup}
+          <View style={{ marginBottom: MARGIN }} />
           {selectsMarkup}
           {buttonsMarkup}
         </ScrollView>