From ea51b8a73b82b07b9d5fef6e18ab57721afd0bd1 Mon Sep 17 00:00:00 2001 From: ThatNinjaGuy Date: Tue, 30 Jul 2024 02:26:18 +0530 Subject: [PATCH 1/6] Enforced order management screent o appear from start instead of being centered. Still it is not taking up the complete screen when menu items are less --- screens/common/styles.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/screens/common/styles.js b/screens/common/styles.js index 9c8290d..0319dd3 100644 --- a/screens/common/styles.js +++ b/screens/common/styles.js @@ -3,8 +3,8 @@ import { StyleSheet } from "react-native"; export default StyleSheet.create({ mainContainer: { flex: 1, - justifyContent: "center", - alignItems: "center", + // justifyContent: "center", + alignItems: "flex-start", }, container: { flex: 1, From e70bf467e4ff517d8e02ee4ee883790d5635ec82 Mon Sep 17 00:00:00 2001 From: ThatNinjaGuy Date: Fri, 16 Aug 2024 00:44:22 +0530 Subject: [PATCH 2/6] Resolved the error with modals in the menu screen and updated the form schema --- components/Modal/Modal.js | 12 ++++++---- screens/MenuScreen/MenuScreenView.js | 34 +++++++++++++++++----------- 2 files changed, 29 insertions(+), 17 deletions(-) diff --git a/components/Modal/Modal.js b/components/Modal/Modal.js index 15f82bd..ec188c3 100644 --- a/components/Modal/Modal.js +++ b/components/Modal/Modal.js @@ -6,8 +6,13 @@ import ThemedButton from "../common/ThemedButton"; import { ThemedText } from "../common/ThemedText"; import { View } from "react-native-animatable"; -const CustomModal = ({ visible, onClose, onSave, onDelete, item, schema }) => { - const [formData, setFormData] = useState({}); +const CustomModal = ({ onClose, onSave, onDelete, item, schema }) => { + const [formData, setFormData] = useState(() => { + return schema.reduce((acc, field) => { + acc[field.name] = ""; + return acc; + }, {}); + }); useEffect(() => { if (item) { @@ -39,7 +44,6 @@ const CustomModal = ({ visible, onClose, onSave, onDelete, item, schema }) => { return ( { key={field.name} style={styles.input} placeholder={field.placeholder} - value={formData[field.name]} + value={formData[field.name] ? formData[field.name] : ""} onChangeText={(value) => handleInputChange(field.name, value)} keyboardType={field.keyboardType} /> diff --git a/screens/MenuScreen/MenuScreenView.js b/screens/MenuScreen/MenuScreenView.js index 036b4de..76683d5 100644 --- a/screens/MenuScreen/MenuScreenView.js +++ b/screens/MenuScreen/MenuScreenView.js @@ -10,11 +10,18 @@ import { ThemedText } from "@/components/common/ThemedText"; import { ThemedButton } from "@/components/common/ThemedButton"; const formSchema = [ - { name: "searchableKey", placeholder: "Key", keyboardType: "default" }, - { name: "name", placeholder: "Item Name", keyboardType: "default" }, - { name: "price", placeholder: "Price", keyboardType: "numeric" }, - { name: "cuisine", placeholder: "Cuisine", keyboardType: "default" }, - { name: "image", placeholder: "Image URL", keyboardType: "default" }, + { name: "searchableKey", placeholder: "Key", inputMode: "default" }, + { name: "name", placeholder: "Item Name", inputMode: "default" }, + { name: "type", placeholder: "Type", inputMode: "default" }, + { + name: "isAvailable", + placeholder: "Is Available?", + inputMode: "default", + }, + { name: "category", placeholder: "Category", inputMode: "default" }, + { name: "price", placeholder: "Price", inputMode: "numeric" }, + { name: "cuisine", placeholder: "Cuisine", inputMode: "default" }, + { name: "image", placeholder: "Image URL", inputMode: "default" }, ]; const MenuScreenView = ({ @@ -95,14 +102,15 @@ const MenuScreenView = ({ /> )} /> - setModalVisible(false)} - onSave={handleSaveItem} - onDelete={handleDeleteItem} - item={currentItem} - schema={formSchema} - /> + {modalVisible && ( + setModalVisible(false)} + onSave={handleSaveItem} + onDelete={handleDeleteItem} + item={currentItem} + schema={formSchema} + /> + )} Date: Fri, 16 Aug 2024 00:52:23 +0530 Subject: [PATCH 3/6] Added dropdowns and radio buttons to the form fields to display more dynamic options --- components/Modal/Modal.js | 71 +++++++++++++++++++++------- package-lock.json | 50 ++++++++++++++++++++ package.json | 3 +- screens/MenuScreen/MenuScreenView.js | 61 +++++++++++++++++++++--- 4 files changed, 160 insertions(+), 25 deletions(-) diff --git a/components/Modal/Modal.js b/components/Modal/Modal.js index ec188c3..02a5d93 100644 --- a/components/Modal/Modal.js +++ b/components/Modal/Modal.js @@ -1,10 +1,11 @@ import React, { useState, useEffect } from "react"; -import { Modal, TextInput } from "react-native"; +import { Modal, TextInput, View } from "react-native"; +import { Picker } from "@react-native-picker/picker"; // Import Picker for dropdown +import { RadioButton } from "react-native-paper"; // Import RadioButton for radio inputs import styles from "./styles"; import { ThemedView } from "../common/ThemedView"; import ThemedButton from "../common/ThemedButton"; import { ThemedText } from "../common/ThemedText"; -import { View } from "react-native-animatable"; const CustomModal = ({ onClose, onSave, onDelete, item, schema }) => { const [formData, setFormData] = useState(() => { @@ -27,11 +28,7 @@ const CustomModal = ({ onClose, onSave, onDelete, item, schema }) => { }, [item, schema]); const handleInputChange = (name, value) => { - console.log(`Updating ${name} with value:`, value); - setFormData((prevData) => { - const newData = { ...prevData, [name]: value }; - return newData; - }); + setFormData((prevData) => ({ ...prevData, [name]: value })); }; const handleSave = () => { @@ -52,16 +49,56 @@ const CustomModal = ({ onClose, onSave, onDelete, item, schema }) => { transparent={true} > - {schema.map((field) => ( - handleInputChange(field.name, value)} - keyboardType={field.keyboardType} - /> - ))} + {schema.map((field) => { + switch (field.type) { + case "dropdown": + return ( + + handleInputChange(field.name, value) + } + style={styles.input} + > + {field.options.map((option) => ( + + ))} + + ); + case "radio": + return ( + + {field.placeholder} + {field.options.map((option) => ( + + handleInputChange(field.name, option)} + /> + {option} + + ))} + + ); + default: + return ( + handleInputChange(field.name, value)} + keyboardType={field.inputMode} + /> + ); + } + })} =16.3.0" + } + }, + "node_modules/@callstack/react-theme-provider/node_modules/deepmerge": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz", + "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/@egjs/hammerjs": { "version": "2.0.17", "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz", @@ -18412,6 +18435,33 @@ "react": "^16.6.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-native-paper": { + "version": "5.12.5", + "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.12.5.tgz", + "integrity": "sha512-Qpqd1g9PClmjGj/Dkr1htAwt8cTZ3SCHVmhttxRuG/QML7KzHm5ArLNgR7vz5dW1EwJqTmyl/3gd6gnrtw90mw==", + "license": "MIT", + "dependencies": { + "@callstack/react-theme-provider": "^3.0.9", + "color": "^3.1.2", + "use-latest-callback": "^0.1.5" + }, + "peerDependencies": { + "react": "*", + "react-native": "*", + "react-native-safe-area-context": "*", + "react-native-vector-icons": "*" + } + }, + "node_modules/react-native-paper/node_modules/color": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz", + "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==", + "license": "MIT", + "dependencies": { + "color-convert": "^1.9.3", + "color-string": "^1.6.0" + } + }, "node_modules/react-native-parallax-scroll-view": { "version": "0.21.3", "resolved": "https://registry.npmjs.org/react-native-parallax-scroll-view/-/react-native-parallax-scroll-view-0.21.3.tgz", diff --git a/package.json b/package.json index 8287e95..eb088f6 100644 --- a/package.json +++ b/package.json @@ -38,13 +38,14 @@ "react-native-animatable": "^1.4.0", "react-native-elements": "^3.4.3", "react-native-gesture-handler": "~2.16.1", + "react-native-paper": "^5.12.5", "react-native-parallax-scroll-view": "^0.21.3", "react-native-reanimated": "~3.10.1", "react-native-responsive-screen": "^1.4.2", "react-native-safe-area-context": "4.10.1", "react-native-screens": "3.31.1", - "react-native-vector-icons": "^10.1.0", "react-native-super-grid": "^6.0.1", + "react-native-vector-icons": "^10.1.0", "react-native-web": "^0.19.12" }, "devDependencies": { diff --git a/screens/MenuScreen/MenuScreenView.js b/screens/MenuScreen/MenuScreenView.js index 76683d5..78782c1 100644 --- a/screens/MenuScreen/MenuScreenView.js +++ b/screens/MenuScreen/MenuScreenView.js @@ -10,18 +10,65 @@ import { ThemedText } from "@/components/common/ThemedText"; import { ThemedButton } from "@/components/common/ThemedButton"; const formSchema = [ - { name: "searchableKey", placeholder: "Key", inputMode: "default" }, - { name: "name", placeholder: "Item Name", inputMode: "default" }, - { name: "type", placeholder: "Type", inputMode: "default" }, + { + name: "searchableKey", + placeholder: "Key", + inputMode: "default", + type: "text", + }, + { + name: "name", + placeholder: "Item Name", + inputMode: "default", + type: "text", + }, + { + name: "type", + placeholder: "Type", + inputMode: "default", + type: "dropdown", + options: ["Veg", "Non-Veg", "Vegan"], + }, { name: "isAvailable", placeholder: "Is Available?", inputMode: "default", + type: "radio", + options: ["Yes", "No"], + }, + { + name: "category", + placeholder: "Category", + inputMode: "default", + type: "dropdown", + options: [ + "Beverages", + "Burgers", + "EGG", + "Chicken", + "Chakhna", + "Chinese Snacks", + "Chinese Soups", + "Garlic Bread", + "Gravy Items", + "Hawaiian Wraps", + "Maggie Lover", + ], + }, + { name: "price", placeholder: "Price", inputMode: "numeric", type: "text" }, + { + name: "cuisine", + placeholder: "Cuisine", + inputMode: "default", + type: "dropdown", + options: ["Italian", "Chinese", "Indian"], + }, + { + name: "image", + placeholder: "Image URL", + inputMode: "default", + type: "text", }, - { name: "category", placeholder: "Category", inputMode: "default" }, - { name: "price", placeholder: "Price", inputMode: "numeric" }, - { name: "cuisine", placeholder: "Cuisine", inputMode: "default" }, - { name: "image", placeholder: "Image URL", inputMode: "default" }, ]; const MenuScreenView = ({ From 72a8f40a9fc61d7630466a48aafd71e01c0d9b59 Mon Sep 17 00:00:00 2001 From: ThatNinjaGuy Date: Fri, 16 Aug 2024 01:23:33 +0530 Subject: [PATCH 4/6] Improved the rendering of the modal input fields by adding css --- .../FloatingLabelInput/FloatingLabelInput.js | 54 +++++++++++++++++++ components/Modal/styles.js | 32 +++++++++++ package-lock.json | 7 +-- 3 files changed, 90 insertions(+), 3 deletions(-) create mode 100644 components/FloatingLabelInput/FloatingLabelInput.js diff --git a/components/FloatingLabelInput/FloatingLabelInput.js b/components/FloatingLabelInput/FloatingLabelInput.js new file mode 100644 index 0000000..9774ba9 --- /dev/null +++ b/components/FloatingLabelInput/FloatingLabelInput.js @@ -0,0 +1,54 @@ +import React, { useState } from "react"; +import { View, TextInput, Text, Animated } from "react-native"; + +const FloatingLabelInput = ({ label, value, onChangeText, ...props }) => { + const [isFocused, setIsFocused] = useState(false); + const animatedIsFocused = new Animated.Value(value === "" ? 0 : 1); + + const handleFocus = () => setIsFocused(true); + const handleBlur = () => setIsFocused(false); + + React.useEffect(() => { + Animated.timing(animatedIsFocused, { + toValue: isFocused || value !== "" ? 1 : 0, + duration: 200, + useNativeDriver: false, + }).start(); + }, [isFocused, value]); + + const labelStyle = { + position: "absolute", + left: 15, + top: animatedIsFocused.interpolate({ + inputRange: [0, 1], + outputRange: [20, 0], + }), + fontSize: animatedIsFocused.interpolate({ + inputRange: [0, 1], + outputRange: [16, 12], + }), + color: "#aaa", + }; + + return ( + + {label} + + + ); +}; + +export default FloatingLabelInput; diff --git a/components/Modal/styles.js b/components/Modal/styles.js index 12f1572..dac8dda 100644 --- a/components/Modal/styles.js +++ b/components/Modal/styles.js @@ -18,6 +18,7 @@ export default StyleSheet.create({ elevation: 10, backgroundColor: "#fff", }, + // Input fields input: { borderWidth: 1, borderColor: "#ccc", @@ -26,6 +27,37 @@ export default StyleSheet.create({ marginBottom: 15, fontSize: 16, }, + radioGroup: { + flexDirection: "row", + alignItems: "center", + justifyContent: "space-between", + marginBottom: 15, + padding: 10, + paddingHorizontal: 20, + borderWidth: 1, + borderColor: "#ccc", + borderRadius: 10, + backgroundColor: "#fff", + }, + radioItem: { + flexDirection: "row", + alignItems: "center", + }, + radioLabel: { + marginLeft: 8, + fontSize: 16, + color: "#333", + }, + dropdown: { + width: "100%", + marginBottom: 15, + borderWidth: 1, + borderColor: "#ccc", + borderRadius: 10, + padding: 10, + backgroundColor: "#fff", + }, + buttonContainer: { flexDirection: "row", justifyContent: "space-between", diff --git a/package-lock.json b/package-lock.json index b8b820f..8f983c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11847,9 +11847,9 @@ "integrity": "sha512-MWipKbbYiYI0UC7cl8m/i/IWTqfC8YXsqjzybjddLsFjStroQzsHXkc73JutMvBiXmOvapk+axIl79ig5t55Bw==" }, "node_modules/fast-xml-parser": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.4.0.tgz", - "integrity": "sha512-kLY3jFlwIYwBNDojclKsNAC12sfD6NwW74QB2CoNGPvtVxjliYehVunB3HYyNi+n4Tt1dAcgwYvmKF/Z18flqg==", + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.4.1.tgz", + "integrity": "sha512-xkjOecfnKGkSsOwtZ5Pz7Us/T6mrbPQrq0nh+aCO5V9nk5NLWmasAHumTKjiPJPWANe+kAZ84Jc8ooJkzZ88Sw==", "funding": [ { "type": "github", @@ -11860,6 +11860,7 @@ "url": "https://paypal.me/naturalintelligence" } ], + "license": "MIT", "dependencies": { "strnum": "^1.0.5" }, From 97e7330b5eac7705ec555c02caa147fe2f661301 Mon Sep 17 00:00:00 2001 From: ThatNinjaGuy Date: Fri, 16 Aug 2024 01:37:05 +0530 Subject: [PATCH 5/6] Improving the dropdown styles --- components/Modal/Modal.js | 2 +- components/Modal/styles.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/components/Modal/Modal.js b/components/Modal/Modal.js index 02a5d93..b9bbb33 100644 --- a/components/Modal/Modal.js +++ b/components/Modal/Modal.js @@ -59,7 +59,7 @@ const CustomModal = ({ onClose, onSave, onDelete, item, schema }) => { onValueChange={(value) => handleInputChange(field.name, value) } - style={styles.input} + style={styles.dropdown} > {field.options.map((option) => ( diff --git a/components/Modal/styles.js b/components/Modal/styles.js index dac8dda..646eb1c 100644 --- a/components/Modal/styles.js +++ b/components/Modal/styles.js @@ -54,8 +54,9 @@ export default StyleSheet.create({ borderWidth: 1, borderColor: "#ccc", borderRadius: 10, - padding: 10, + padding: 15, backgroundColor: "#fff", + fontSize: 16, }, buttonContainer: { From 935202c73958baf0dfc4acfdbc51e9c274a25bfe Mon Sep 17 00:00:00 2001 From: ThatNinjaGuy Date: Fri, 16 Aug 2024 01:47:01 +0530 Subject: [PATCH 6/6] Updated the modal across all screens to implement the new structure. Menu items updated to have the current complete structure for usage in table management screen --- .../Modal.js => CustomModal/CustomModal.js} | 24 ++++---- components/{Modal => CustomModal}/styles.js | 0 .../InventoryScreen/InventoryScreenView.js | 56 ++++++++++++++----- screens/MenuScreen/MenuScreenView.js | 2 +- screens/StaffsScreen/StaffScreenView.js | 41 +++++++++----- 5 files changed, 79 insertions(+), 44 deletions(-) rename components/{Modal/Modal.js => CustomModal/CustomModal.js} (89%) rename components/{Modal => CustomModal}/styles.js (100%) diff --git a/components/Modal/Modal.js b/components/CustomModal/CustomModal.js similarity index 89% rename from components/Modal/Modal.js rename to components/CustomModal/CustomModal.js index b9bbb33..1524cd8 100644 --- a/components/Modal/Modal.js +++ b/components/CustomModal/CustomModal.js @@ -8,23 +8,19 @@ import ThemedButton from "../common/ThemedButton"; import { ThemedText } from "../common/ThemedText"; const CustomModal = ({ onClose, onSave, onDelete, item, schema }) => { - const [formData, setFormData] = useState(() => { + const initializeFormData = (schema, item) => { return schema.reduce((acc, field) => { - acc[field.name] = ""; + acc[field.name] = item ? item[field.name] : ""; return acc; }, {}); - }); + }; + + const [formData, setFormData] = useState(() => + initializeFormData(schema, item) + ); useEffect(() => { - if (item) { - setFormData(item); - } else { - const initialFormData = schema.reduce((acc, field) => { - acc[field.name] = ""; - return acc; - }, {}); - setFormData(initialFormData); - } + setFormData(initializeFormData(schema, item)); }, [item, schema]); const handleInputChange = (name, value) => { @@ -41,6 +37,7 @@ const CustomModal = ({ onClose, onSave, onDelete, item, schema }) => { return ( { return ( handleInputChange(field.name, value) } style={styles.dropdown} > + {field.options.map((option) => ( ))} diff --git a/components/Modal/styles.js b/components/CustomModal/styles.js similarity index 100% rename from components/Modal/styles.js rename to components/CustomModal/styles.js diff --git a/screens/InventoryScreen/InventoryScreenView.js b/screens/InventoryScreen/InventoryScreenView.js index d5d4a8e..1e99553 100644 --- a/screens/InventoryScreen/InventoryScreenView.js +++ b/screens/InventoryScreen/InventoryScreenView.js @@ -1,7 +1,7 @@ import React, { useState, useEffect } from "react"; import { FlatList } from "react-native"; import InventoryItem from "@/components/InventoryItem/InventoryItem"; -import CustomModal from "@/components/Modal/Modal"; +import CustomModal from "@/components/CustomModal/CustomModal"; import { searchByNameKey } from "@/screens/common/searchCriteria"; import styles from "@/screens/common/styles"; import CustomSearchBar from "@/screens/common/SearchBar"; @@ -10,12 +10,37 @@ import ThemedButton from "@/components/common/ThemedButton"; import { ThemedText } from "@/components/common/ThemedText"; const formSchema = [ - { name: "searchableKey", placeholder: "Key", keyboardType: "default" }, - { name: "name", placeholder: "Item Name", keyboardType: "default" }, - { name: "price", placeholder: "Price", keyboardType: "numeric" }, - { name: "quantity", placeholder: "Quantity", keyboardType: "numeric" }, - { name: "unit", placeholder: "Unit", keyboardType: "default" }, - { name: "image", placeholder: "Image URL", keyboardType: "default" }, + { + name: "searchableKey", + placeholder: "Key", + inputMode: "default", + type: "text", + }, + { + name: "name", + placeholder: "Item Name", + inputMode: "default", + type: "text", + }, + { + name: "price", + placeholder: "Price", + inputMode: "numeric", + type: "text", + }, + { + name: "quantity", + placeholder: "Quantity", + inputMode: "numeric", + type: "text", + }, + { name: "unit", placeholder: "Unit", inputMode: "default", type: "text" }, + { + name: "image", + placeholder: "Image URL", + inputMode: "default", + type: "text", + }, ]; const InventoryScreenView = ({ @@ -81,14 +106,15 @@ const InventoryScreenView = ({ /> )} /> - setModalVisible(false)} - onSave={handleSaveItem} - onDelete={handleDeleteItem} - item={currentItem} - schema={formSchema} - /> + {modalVisible && ( + setModalVisible(false)} + onSave={handleSaveItem} + onDelete={handleDeleteItem} + item={currentItem} + schema={formSchema} + /> + )} ); diff --git a/screens/MenuScreen/MenuScreenView.js b/screens/MenuScreen/MenuScreenView.js index 78782c1..ef30eea 100644 --- a/screens/MenuScreen/MenuScreenView.js +++ b/screens/MenuScreen/MenuScreenView.js @@ -1,7 +1,7 @@ import React, { useState, useEffect } from "react"; import { FlatList } from "react-native"; import MenuItem from "../../components/MenuItem/MenuItem"; -import CustomModal from "../../components/Modal/Modal"; +import CustomModal from "../../components/CustomModal/CustomModal"; import { searchByNameKey } from "@/screens/common/searchCriteria"; import styles from "@/screens/common/styles"; import CustomSearchBar from "@/screens/common/SearchBar"; diff --git a/screens/StaffsScreen/StaffScreenView.js b/screens/StaffsScreen/StaffScreenView.js index aaf5897..f30685a 100644 --- a/screens/StaffsScreen/StaffScreenView.js +++ b/screens/StaffsScreen/StaffScreenView.js @@ -1,7 +1,7 @@ import React, { useState, useEffect } from "react"; import { FlatList } from "react-native"; import StaffItem from "../../components/StaffItem/StaffItem"; -import CustomModal from "../../components/Modal/Modal"; +import CustomModal from "../../components/CustomModal/CustomModal"; import { searchByNameKey } from "@/screens/common/searchCriteria"; import styles from "@/screens/common/styles"; import CustomSearchBar from "@/screens/common/SearchBar"; @@ -10,11 +10,21 @@ import ThemedButton from "@/components/common/ThemedButton"; import { ThemedText } from "@/components/common/ThemedText"; const formSchema = [ - { name: "searchableKey", placeholder: "Key", keyboardType: "default" }, - { name: "name", placeholder: "Name", keyboardType: "default" }, - { name: "age", placeholder: "Age", keyboardType: "numeric" }, - { name: "role", placeholder: "Role", keyboardType: "default" }, - { name: "image", placeholder: "Image URL", keyboardType: "default" }, + { + name: "searchableKey", + placeholder: "Key", + inputMode: "default", + type: "text", + }, + { name: "name", placeholder: "Name", inputMode: "default", type: "text" }, + { name: "age", placeholder: "Age", inputMode: "numeric", type: "text" }, + { name: "role", placeholder: "Role", inputMode: "default", type: "text" }, + { + name: "image", + placeholder: "Image URL", + inputMode: "default", + type: "text", + }, ]; const StaffScreenView = ({ staffs, addStaff, deleteStaff, updateStaff }) => { @@ -91,15 +101,16 @@ const StaffScreenView = ({ staffs, addStaff, deleteStaff, updateStaff }) => { )} style={styles.itemList} /> - setModalVisible(false)} - onSave={handleSaveItem} - onDelete={handleDeleteItem} - item={currentItem} - schema={formSchema} - style={styles.container} - /> + {modalVisible && ( + setModalVisible(false)} + onSave={handleSaveItem} + onDelete={handleDeleteItem} + item={currentItem} + schema={formSchema} + style={styles.container} + /> + )}