Add files via upload

Author: Programmer-RD-AI

app/components/AppPicker.js

@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+import {
+  View,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  Modal,
+  Button,
+  FlatList,
+} from "react-native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+
+import AppText from "./AppText";
+import Screen from "./Screen";
+import defaultStyles from "../config/styles";
+import PickerItem from "./PickerItem";
+
+function AppPicker({ icon, items, onSelectItem, placeholder, selectedItem }) {
+  const [modalVisible, setModalVisible] = useState(false);
+
+  return (
+    <>
+      <TouchableWithoutFeedback onPress={() => setModalVisible(true)}>
+        <View style={styles.container}>
+          {icon && (
+            <MaterialCommunityIcons
+              name={icon}
+              size={20}
+              color={defaultStyles.colors.medium}
+              style={styles.icon}
+            />
+          )}
+          <AppText style={styles.text}>
+            {selectedItem ? selectedItem.label : placeholder}
+          </AppText>
+          <MaterialCommunityIcons
+            name="chevron-down"
+            size={20}
+            color={defaultStyles.colors.medium}
+          />
+        </View>
+      </TouchableWithoutFeedback>
+      <Modal visible={modalVisible} animationType="slide">
+        <Screen>
+          <Button title="Close" onPress={() => setModalVisible(false)} />
+          <FlatList
+            data={items}
+            keyExtractor={(item) => item.value.toString()}
+            renderItem={({ item }) => (
+              <PickerItem
+                label={item.label}
+                onPress={() => {
+                  setModalVisible(false);
+                  onSelectItem(item);
+                }}
+              />
+            )}
+          />
+        </Screen>
+      </Modal>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: defaultStyles.colors.light,
+    borderRadius: 25,
+    flexDirection: "row",
+    width: "100%",
+    padding: 15,
+    marginVertical: 10,
+  },
+  icon: {
+    marginRight: 10,
+  },
+  text: {
+    flex: 1,
+  },
+});
+
+export default AppPicker;

app/components/AppText.js

@@ -1,10 +1,10 @@
 import React from "react";
-import { Text, StyleSheet, Platform } from "react-native";
-import defaultStyles from '../config/styles'
-function AppText({ children, style }) {
-  return <Text style={[defaultStyles, style]}>{children}</Text>;
-}
+import { Text } from "react-native";
 
+import defaultStyles from "../config/styles";
 
+function AppText({ children, style }) {
+  return <Text style={[defaultStyles.text, style]}>{children}</Text>;
+}
 
 export default AppText;

app/components/AppTextInput.js

@@ -1,26 +1,28 @@
 import React from "react";
-import { View, StyleSheet, TextInput } from "react-native";
+import { View, TextInput, StyleSheet } from "react-native";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
-import colors from "../config/colors";
-import defaultStyles from "../config/styles"
+
+import defaultStyles from "../config/styles";
+
 function AppTextInput({ icon, ...otherProps }) {
   return (
-    <View styles={styles.container}>
+    <View style={styles.container}>
       {icon && (
         <MaterialCommunityIcons
           name={icon}
           size={20}
-          color={colors.medium}
+          color={defaultStyles.colors.medium}
           style={styles.icon}
         />
       )}
       <TextInput style={defaultStyles.text} {...otherProps} />
     </View>
   );
 }
+
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: colors.light,
+    backgroundColor: defaultStyles.colors.light,
     borderRadius: 25,
     flexDirection: "row",
     width: "100%",
@@ -31,4 +33,5 @@ const styles = StyleSheet.create({
     marginRight: 10,
   },
 });
+
 export default AppTextInput;

app/components/Icon.js

@@ -1,6 +1,7 @@
 import React from "react";
-import {View} from "react-native";
-import {MaterialCommunityIcons} from "@expo/vector-icons";
+import { View } from "react-native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+
 function Icon({
   name,
   size = 40,
@@ -18,7 +19,6 @@ function Icon({
         alignItems: "center",
       }}
     >
-    
       <MaterialCommunityIcons name={name} color={iconColor} size={size * 0.5} />
     </View>
   );

app/components/ListItem.js

@@ -7,24 +7,25 @@ import {
   TouchableHighlight,
 } from "react-native";
 import AppText from "./AppText";
+import Swipeable from "react-native-gesture-handler/Swipeable";
 
 import colors from "../config/colors";
-import Swipeable from "react-native-gesture-handler/Swipeable";
+
 function ListItem({
   title,
   subTitle,
   image,
+  IconComponent,
   onPress,
   renderRightActions,
-  ImageComponent
 }) {
   return (
     <Swipeable renderRightActions={renderRightActions}>
-      <TouchableHighlight onPress={onPress} underlayColor={colors.light}>
+      <TouchableHighlight underlayColor={colors.light} onPress={onPress}>
         <View style={styles.container}>
-          {ImageComponent}
+          {IconComponent}
           {image && <Image style={styles.image} source={image} />}
-          <View style={styles.detailContainer}>
+          <View style={styles.detailsContainer}>
             <AppText style={styles.title}>{title}</AppText>
             {subTitle && <AppText style={styles.subTitle}>{subTitle}</AppText>}
           </View>
@@ -40,6 +41,10 @@ const styles = StyleSheet.create({
     padding: 15,
     backgroundColor: colors.white,
   },
+  detailsContainer: {
+    marginLeft: 10,
+    justifyContent: "center",
+  },
   image: {
     width: 70,
     height: 70,
@@ -51,10 +56,6 @@ const styles = StyleSheet.create({
   title: {
     fontWeight: "500",
   },
-  detailContainer: {
-    marginLeft: 10,
-    justifyContent: "center",
-  },
 });
 
 export default ListItem;

app/components/ListItemDeleteAction.js

@@ -1,24 +1,30 @@
 import React from "react";
 import { View, StyleSheet, TouchableWithoutFeedback } from "react-native";
-import colors from "../config/colors";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
+
+import colors from "../config/colors";
+
 function ListItemDeleteAction({ onPress }) {
   return (
     <TouchableWithoutFeedback onPress={onPress}>
-      <View
-        styles={{
-          backgroundColor: "red",
-          width: 70,
-        }}
-      >
+      <View style={styles.container}>
         <MaterialCommunityIcons
           name="trash-can"
           size={35}
-          color={colors.black}
+          color={colors.white}
         />
       </View>
     </TouchableWithoutFeedback>
   );
 }
-const styles = StyleSheet.create({});
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.danger,
+    width: 70,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});
+
 export default ListItemDeleteAction;

app/components/ListItemSeparator.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+
+import colors from "../config/colors";
+
+function ListItemSeparator() {
+  return <View style={styles.separator} />;
+}
+
+const styles = StyleSheet.create({
+  separator: {
+    width: "100%",
+    height: 1,
+    backgroundColor: colors.light,
+  },
+});
+
+export default ListItemSeparator;

app/components/PickerItem.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { TouchableOpacity, StyleSheet } from "react-native";
+import AppText from "./AppText";
+
+function PickerItem({ label, onPress }) {
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <AppText style={styles.text}>{label}</AppText>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: {
+    padding: 20,
+  },
+});
+
+export default PickerItem;

app/components/Screen.js

@@ -1,17 +1,20 @@
 import React from "react";
 import Constants from "expo-constants";
-import { SafeAreaView, StyleSheet, View } from "react-native";
+import { StyleSheet, SafeAreaView, View } from "react-native";
+
 function Screen({ children, style }) {
   return (
     <SafeAreaView style={[styles.screen, style]}>
-      <View>{children}</View>
+      <View style={style}>{children}</View>
     </SafeAreaView>
   );
 }
+
 const styles = StyleSheet.create({
   screen: {
     paddingTop: Constants.statusBarHeight,
     flex: 1,
   },
 });
+
 export default Screen;

app/config/colors.js

@@ -4,7 +4,7 @@ export default {
   black: "#000",
   white: "#fff",
   medium: "#6e6969",
-  light : "#f8f4f4",
-  danger :"red",
-  dark:"#0c0c0c"
+  light: "#f8f4f4",
+  dark: "#0c0c0c",
+  danger: "#ff5252",
 };