all modals

src/components/GroceryList/groceries/List.js

@@ -10,6 +10,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import { selectAllSortedItems, itemsRemovedByList } from '../../../redux/slices/groceryList/itemsSlice'
 import { toggleOpen, listRemoved } from '../../../redux/slices/groceryList/listsSlice'
 import { FlatList, View } from 'react-native';
+import { TouchableOpacity } from 'react-native-gesture-handler';
 
 export default React.memo((props) => {
     const items = useSelector(selectAllSortedItems)
@@ -42,8 +43,8 @@ export default React.memo((props) => {
                 </WrapperLeft>
                 <WrapperRight>
                     {list.open && <>
-                        <ButtonEditList onClick={() => setModalListVisible(true)} />
+                        <ButtonEditList pressFunc={() => setModalListVisible(true)} />
-                        <ButtonRemoveList onClick={removeList} />
+                        <ButtonRemoveList pressFunc={removeList} />
                     </>}
                     <IconArrowDown visible={list.open.toString()} />
                 </WrapperRight>
@@ -66,7 +67,7 @@ export default React.memo((props) => {
                     }
                     {items.find(item => item.modalVisible) && <ModalEditItem visible={modalItemVisible} setVisible={setModalItemVisible} />}
                 </WrapperList >
-                <ModalEditList id={props.listId} visible={modalListVisible} setVisible={setModalListVisible} /> 
+                <ModalEditList id={props.listId} visible={modalListVisible} closeModal={() => setModalListVisible(false)} />
             </ListSizeWrapper>
         </Wrapper>
     )

src/components/GroceryList/groceries/styles/list.js

@@ -60,15 +60,17 @@ export const ListSubtitle = styled(Text)`
     font-size: 17px;
 `
 
-const Close = () => <MaterialCommunityIcons name="close" color={theme.colors.textW5} size={28} />
+const Close = (props) => <TouchableOpacity onPress={props.pressFunc}><MaterialCommunityIcons name="close" color={theme.colors.textW5} size={28} /></TouchableOpacity>
 
 export const ButtonRemoveList = styled(Close)`
     margin: 4px 10px 4px 0px;
 `
 
-const Edit = () => <MaterialCommunityIcons name="pencil-outline" color={theme.colors.textW5} size={28} />
+const Edit = (props) => <TouchableOpacity onPress={props.pressFunc}><MaterialCommunityIcons name="pencil-outline" color={theme.colors.textW5} size={28} /></TouchableOpacity>
 
 export const ButtonEditList = styled(Edit)`
+    background-color: green;
+    width: 50px;
     margin: 4px 10px 4px 0px;
 `
 

src/components/GroceryList/products/ProductsList.js

@@ -33,7 +33,7 @@ const ProductsList = (props) => {
                     return index.toString();
                 }}
             />
-            {products.find(product => product.modalVisible) && <ModalEditProduct visible={visible} setVisible={setVisible} />}
+            {products.find(product => product.modalVisible) != undefined && <ModalEditProduct visible={visible} setVisible={setVisible} />}
         </WrapperList>
     )
 }

src/components/modals/groceries/ModalAddItem.js

@@ -88,13 +88,13 @@ const ModalAddItem = (props) => {
                 <Input style={{ width: '69%' }}
                     keyboardType={'number-pad'}
                     value={amount}
-                    onChange={(text) => setAmount(text)}
+                    onChangeText={(text) => setAmount(text)}
                     placeholder="Amount" />
                 {amount ? <IconCheck /> : <IconWrong />}
                 <InputSmall style={{ marginLeft: "1%", width: '10%' }}
                     onFocus={() => setFocusedQt(true)} onEndEditing={() => setFocusedQt(false)}
                     value={qt}
-                    onChange={(text) => setQt(text)}
+                    onChangeText={(text) => setQt(text)}
                     placeholder="Qt." />
             </WrapperInput>
             {focusedQt && <WrapperDropdown style={{ marginLeft: "60%"}}>
@@ -104,22 +104,22 @@ const ModalAddItem = (props) => {
                 <IconPerson />
                 <Input 
                     value={person}
-                    onChange={(text) => setPerson(text)}
+                    onChangeText={(text) => setPerson(text)}
                     placeholder="For" />
             </WrapperInput>
             <WrapperInput>
                 <IconDetails />
                 <Input
                     value={details}
-                    onChange={(text) => setDetails(text.target.value)}
+                    onChangeText={(text) => setDetails(text.target.value)}
                     placeholder="Additional details" />
             </WrapperInput>
             <WrapperInput>
                 <IconTag />
                 <Input type="text"
-                    onFocus={() => setFocusedTag(true)} onBlur={() => setFocusedTag(false)}
+                    onFocus={() => setFocusedTag(true)} onEndEditing={() => setFocusedTag(false)}
                     value={tag}
-                    onChange={(text) => setTag(text)}
+                    onChangeText={(text) => setTag(text)}
                     placeholder="Tag" />
             </WrapperInput>
             {focusedTag && <WrapperDropdown>

src/components/modals/groceries/ModalAddList.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 
 //styles
 import {
-    StyledModal, ModalHeader, WrapperInput, WrapperButtons, VerticalSeperator, Input, Button, IconWrong, IconCheck
+    StyledModal, ModalHeader, WrapperInput, WrapperButtons, VerticalSeperator, Input, Button, IconWrong, IconCheck, ButtonText, Wrapper
 } from '../styles/modal'
 //redux
 import { useDispatch } from 'react-redux';
@@ -26,28 +26,33 @@ const ModalAddList = (props) => {
         }
     }
     return (
-        <StyledModal show={props.visible} centered={true} onHide={props.closeModal}>
+        <StyledModal isVisible={props.visible} animationIn={'slideInUp'} animationOut={'slideOutDown'}
+            onBackdropPress={props.closeModal}
+            onBackButtonPress={props.closeModal}
+            useNativeDriverForBackdrop
+            style={{ margin: 0 }} >
+            <Wrapper>
                 <ModalHeader>Add a grocery list</ModalHeader>
                 <WrapperInput>
                     <Input
-                    type="text"
                         value={listName}
-                    onChange={(text) => setListName(text.target.value)}
+                        onChangeText={(text) => setListName(text)}
                         // onKeyDown={(event) => handleKeyDown(event)}
                         placeholder="List name" />
-                {/* {listName ? <IconCheck /> : <IconWrong />} */}
+                    {listName ? <IconCheck /> : <IconWrong />}
                 </WrapperInput>
                 <WrapperInput>
-                <Input type="text"
+                    <Input 
                         value={description}
-                    onChange={(text) => setDescription(text.target.value)}
+                        onChangeText={(text) => setDescription(text)}
                         placeholder="List description" />
                 </WrapperInput>
                 <WrapperButtons>
-                <Button onClick={props.closeModal}>Close</Button>
+                    <Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button>
                     <VerticalSeperator />
-                <Button onClick={() => handleSubmit()}>Add List</Button>
+                    <Button onPress={() => handleSubmit()}><ButtonText>Add List</ButtonText></Button>
                 </WrapperButtons>
+            </Wrapper>
         </StyledModal >
     )
 }

src/components/modals/groceries/ModalAddProduct.js

@@ -4,7 +4,7 @@ import Dropdown from '../../Dropdown'
 
 //styles
 import {
-    StyledModal, ModalHeader, WrapperInput, WrapperDropdown, WrapperButtons, VerticalSeperator, InputSmall, Button, IconWrong, IconCheck
+    StyledModal, ModalHeader, WrapperInput, WrapperDropdown, WrapperButtons, VerticalSeperator, InputSmall, Button, IconWrong, IconCheck, Wrapper, ButtonText
 } from '../styles/modal'
 import {
     StyledImage, IconProduct, IconTag, IconDollar, IconLink
@@ -42,23 +42,27 @@ export const ModalAddProduct = (props) => {
         }
     }
     return (
-        <StyledModal show={props.visible} centered={true} onHide={props.closeModal} >
+        <StyledModal isVisible={props.visible} animationIn={'slideInUp'} animationOut={'slideOutDown'}
+            onBackdropPress={props.closeModal}
+            onBackButtonPress={props.closeModal}
+            useNativeDriverForBackdrop
+            style={{ margin: 0 }} >
+            <Wrapper>
                 <ModalHeader>Add product</ModalHeader>
                 <WrapperInput>
                     <IconProduct />
-                <InputSmall type="text"
+                    <InputSmall
                         value={productName}
-                    onChange={(text) => setProductName(text.target.value)}
+                        onChangeText={(text) => setProductName(text)}
                         // onKeyDown={(event) => handleKeyDown(event)}
                         placeholder="Product name" />
                     {productName ? <IconCheck /> : <IconWrong />}
                 </WrapperInput>
                 <WrapperInput>
                     <IconTag />
-                <InputSmall onFocus={() => setFocused(true)} onBlur={() => { setTimeout(() => { setFocused(false) }, 100) }}
+                    <InputSmall onFocus={() => setFocused(true)} onEndEditing={() => setFocused(false) }
-                    type="text"
                         value={tag}
-                    onChange={(text) => setTag(text.target.value)}
+                        onChangeText={(text) => setTag(text)}
                         placeholder="Tag" />
                     {tag ? <IconCheck /> : <IconWrong />}
                 </WrapperInput>
@@ -67,24 +71,26 @@ export const ModalAddProduct = (props) => {
                 </WrapperDropdown>}
                 <WrapperInput>
                     <IconDollar />
-                <InputSmall type="number"
+                    <InputSmall 
+                        keyboardType={"number-pad"}
                         value={price}
-                    onChange={(text) => setPrice(text.target.value)}
+                        onChangeText={(text) => setPrice(text)}
                         placeholder="Price" />
                 </WrapperInput>
                 <WrapperInput>
                     <IconLink />
-                <InputSmall type="text"
+                    <InputSmall 
                         value={image}
-                    onChange={(text) => setImage(text.target.value)}
+                        onChangeText={(text) => setImage(text)}
                         placeholder="Image link" />
                 </WrapperInput>
-            {image && <StyledImage source={image} alt={'No link...'} />}
+                {image != "" && <StyledImage source={{uri: image}} alt={'No link...'} />}
                 <WrapperButtons>
-                <Button onClick={props.closeModal}>Close</Button>
+                    <Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button>
                     <VerticalSeperator />
-                <Button onClick={() => handleSubmit()}>Add  </Button>
+                    <Button onPress={() => handleSubmit()}><ButtonText>Add  </ButtonText></Button>
                 </WrapperButtons>
+            </Wrapper>
         </StyledModal>
     )
 }

src/components/modals/groceries/ModalEditItem.js

@@ -4,7 +4,7 @@ import Dropdown, { QtDropdown } from '../../Dropdown'
 
 //styles
 import {
-    StyledModal, WrapperInput, WrapperDropdown, WrapperButtons, Input, Button, IconWrong, IconCheck, InputSmall
+    StyledModal, WrapperInput, WrapperDropdown, WrapperButtons, Input, Button, IconWrong, IconCheck, InputSmall, Wrapper, ButtonText
 } from '../styles/modal'
 import { IconProduct, IconAmount, IconPerson, IconDetails } from './styles/addItem'
 import { WrapperProduct, WrapperProductInfo, TextPrice, TextTag, StyledImage } from './styles/edit'
@@ -61,9 +61,14 @@ const ModalEditItem = (props) => {
         props.setVisible(false)
     }
     return (
-        <StyledModal show={props.visible} centered={true} onHide={closeModal} >
+        <StyledModal isVisible={props.visible} animationIn={'slideInUp'} animationOut={'slideOutDown'}
+            onBackdropPress={closeModal}
+            onBackButtonPress={closeModal}
+            useNativeDriverForBackdrop
+            style={{ margin: 0 }} >
+            <Wrapper>
                 <WrapperProduct color={tagState.color}>
-                {product && product.image && <StyledImage source={product.image} />}
+                    {product != undefined && product.image != "" && <StyledImage source={{uri: product.image}} />}
                     <WrapperProductInfo>
                         <TextPrice>€ {price}</TextPrice>
                         <TextTag color={tagState.color}>{tagState.tagName}</TextTag>
@@ -71,10 +76,9 @@ const ModalEditItem = (props) => {
                 </WrapperProduct>
                 <WrapperInput>
                     <IconProduct />
-                <Input onFocus={() => setFocusedProduct(true)} onBlur={() => { setTimeout(() => { setFocusedProduct(false) }, 100) }}
+                    <Input onFocus={() => setFocusedProduct(true)} onEndEditing={() => setFocusedProduct(false)}
-                    type="text"
                         value={productName}
-                    onChange={(text) => setProductName(text.target.value)}
+                        onChangeText={(text) => setProductName(text)}
                         // onKeyDown={(event) => handleKeyDown(event)}
                         placeholder="Product name" />
                     {productName ? <IconCheck /> : <IconWrong />}
@@ -85,16 +89,15 @@ const ModalEditItem = (props) => {
                 <WrapperInput>
                     <IconAmount />
                     <Input style={{ width: '67%' }}
-                    type="number"
+                        keyboardType={"number-pad"}
                         value={amount}
-                    onChange={(text) => setAmount(text.target.value)}
+                        onChangeText={(text) => setAmount(text)}
                         placeholder="Amount" />
                     {amount ? <IconCheck /> : <IconWrong />}
                     <InputSmall style={{ marginLeft: "1%", width: '10%' }}
-                    onFocus={() => setFocusedQt(true)} onBlur={() => { setTimeout(() => { setFocusedQt(false) }, 100) }}
+                        onFocus={() => setFocusedQt(true)} onEndEditing={() => { setFocusedQt(false) }}
-                    type="text"
                         value={qt}
-                    onChange={(text) => setQt(text.target.value)}
+                        onChangeText={(text) => setQt(text)}
                         placeholder="Qt." />
                 </WrapperInput>
                 {focusedQt && <WrapperDropdown style={{ marginLeft: "60%" }}>
@@ -102,24 +105,24 @@ const ModalEditItem = (props) => {
                 </WrapperDropdown>}
                 <WrapperInput>
                     <IconPerson />
-                <Input type="text"
+                    <Input
                         value={person}
-                    onChange={(text) => setPerson(text.target.value)}
+                        onChangeText={(text) => setPerson(text)}
                         placeholder="For" />
                 </WrapperInput>
                 <WrapperInput>
                     <IconDetails />
-                <Input type="text"
+                    <Input
                         value={details}
-                    onChange={(text) => setDetails(text.target.value)}
+                        onChangeText={(text) => setDetails(text)}
                         placeholder="Additional details" />
                 </WrapperInput>
                 <WrapperInput>
                     <IconTag />
-                <Input type="text"
+                    <Input
-                    onFocus={() => setFocusedTag(true)} onBlur={() => { setTimeout(() => { setFocusedTag(false) }, 100) }}
+                        onFocus={() => setFocusedTag(true)} onEndEditing={() => setFocusedTag(false)}
                         value={tag}
-                    onChange={(text) => setTag(text.target.value)}
+                        onChangeText={(text) => setTag(text)}
                         placeholder="Tag" />
                 </WrapperInput>
                 {focusedTag && <WrapperDropdown>
@@ -127,14 +130,16 @@ const ModalEditItem = (props) => {
                 </WrapperDropdown>}
                 <WrapperInput>
                     <IconDollar />
-                <Input type="text"
+                    <Input
+                        keyboardType={"number-pad"}
                         value={price}
-                    onChange={(text) => setPrice(text.target.value)}
+                        onChangeText={(text) => setPrice(text)}
                         placeholder="Price" />
                 </WrapperInput>
                 <WrapperButtons>
-                <Button onClick={() => handleSubmit()}>Save</Button>
+                    <Button onPress={() => handleSubmit()}><ButtonText>Save</ButtonText></Button>
                 </WrapperButtons>
+            </Wrapper>
         </StyledModal>
     )
 }

src/components/modals/groceries/ModalEditList.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 
 //styles
 import {
-    StyledModal, ModalHeader, WrapperInput, WrapperButtons, VerticalSeperator, Input, Button, IconWrong, IconCheck
+    StyledModal, ModalHeader, WrapperInput, WrapperButtons, VerticalSeperator, Input, Button, IconWrong, IconCheck, Wrapper, ButtonText
 } from '../styles/modal'
 //redux
 import { useDispatch, useSelector } from 'react-redux';
@@ -16,34 +16,39 @@ const ModalEditList = (props) => {
     const handleSubmit = () => {
         if (props.visible && listName !== '') {
             dispatch(listEdited({ listName, _id: props.id, listDescription: description }));
-            props.setVisible(false)
+            props.closeModal()
         }
         else {
             alert('You need to give a list name');
         }
     }
     return (
-        <StyledModal show={props.visible} centered={true} onHide={() => props.setVisible(false)}>
+        <StyledModal isVisible={props.visible} animationIn={'slideInUp'} animationOut={'slideOutDown'}
+            onBackdropPress={props.closeModal}
+            onBackButtonPress={props.closeModal}
+            useNativeDriverForBackdrop
+            style={{ margin: 0 }} >
+            <Wrapper>
                 <ModalHeader>Edit the list</ModalHeader>
                 <WrapperInput>
                     <Input
-                    type="text"
                         value={listName}
-                    onChange={(text) => setListName(text.target.value)}
+                        onChangeText={(text) => setListName(text)}
                         placeholder="List name" />
                     {listName ? <IconCheck /> : <IconWrong />}
                 </WrapperInput>
                 <WrapperInput>
-                <Input type="text"
+                    <Input
                         value={description}
-                    onChange={(text) => setDescription(text.target.value)}
+                        onChangeText={(text) => setDescription(text)}
                         placeholder="List description" />
                 </WrapperInput>
                 <WrapperButtons>
-                <Button onClick={() => props.setVisible(false)}>Close</Button>
+                    <Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button>
                     <VerticalSeperator />
-                <Button onClick={() => handleSubmit()}>Edit List</Button>
+                    <Button onPress={() => handleSubmit()}><ButtonText>Edit List</ButtonText></Button>
                 </WrapperButtons>
+            </Wrapper>
         </StyledModal >
     )
 }

src/components/modals/groceries/ModalEditProduct.js

@@ -4,7 +4,7 @@ import Dropdown from '../../Dropdown'
 
 //styles
 import {
-    StyledModal, WrapperInput, WrapperDropdown, WrapperButtons, Input, Button, IconWrong, IconCheck
+    StyledModal, WrapperInput, WrapperDropdown, WrapperButtons, Input, Button, IconWrong, IconCheck, Wrapper, ButtonText
 } from '../styles/modal'
 import {
     IconProduct, IconTag, IconDollar, IconLink
@@ -46,9 +46,14 @@ const ModalEditProduct = (props) => {
         props.setVisible(false)
     }
     return (
-        <StyledModal show={props.visible} centered={true} onHide={closeModal} >
+        <StyledModal isVisible={props.visible} animationIn={'slideInUp'} animationOut={'slideOutDown'}
+            onBackdropPress={closeModal}
+            onBackButtonPress={closeModal}
+            useNativeDriverForBackdrop
+            style={{ margin: 0 }} >
+            <Wrapper>
                 <WrapperProduct color={usedTag.color}>
-                {image && <StyledImage source={image} alt="No image found" />}
+                    {image != "" && <StyledImage source={{uri: image}} alt="No image found" />}
                     <WrapperProductInfo>
                         <TextPrice>€ {price}</TextPrice>
                         <TextTag color={usedTag.color}>{usedTag.tagName}</TextTag>
@@ -58,17 +63,16 @@ const ModalEditProduct = (props) => {
                     <IconProduct />
                     <Input type="text"
                         value={productName}
-                    onChange={(text) => setProductName(text.target.value)}
+                        onChangeText={(text) => setProductName(text)}
                         // onKeyDown={(event) => handleKeyDown(event)}
                         placeholder="Product name" />
                     {productName ? <IconCheck /> : <IconWrong />}
                 </WrapperInput>
                 <WrapperInput>
                     <IconTag />
-                <Input onFocus={() => setFocused(true)} onBlur={() => { setTimeout(() => { setFocused(false) }, 100) }}
+                    <Input onFocus={() => setFocused(true)} onEndEditing={() => setFocused(false)}
-                    type="text"
                         value={tag}
-                    onChange={(text) => setTag(text.target.value)}
+                        onChangeText={(text) => setTag(text)}
                         placeholder="Tag" />
                     {tag ? <IconCheck /> : <IconWrong />}
                 </WrapperInput>
@@ -77,21 +81,22 @@ const ModalEditProduct = (props) => {
                 </WrapperDropdown>}
                 <WrapperInput>
                     <IconDollar />
-                <Input type="number"
+                    <Input type={"number-pad"}
                         value={price}
-                    onChange={(text) => setPrice(text.target.value)}
+                        onChangeText={(text) => setPrice(text)}
                         placeholder="Price" />
                 </WrapperInput>
                 <WrapperInput>
                     <IconLink />
-                <Input type="text"
+                    <Input
                         value={image}
-                    onChange={(text) => setImage(text.target.value)}
+                        onChangeText={(text) => setImage(text)}
                         placeholder="Image link" />
                 </WrapperInput>
                 <WrapperButtons>
-                <Button onClick={handleSubmit}>Save</Button>
+                    <Button onPress={handleSubmit}><ButtonText>Save</ButtonText></Button>
                 </WrapperButtons>
+            </Wrapper>
         </StyledModal>
     )
 }

src/components/modals/groceries/styles/addProduct.js

@@ -13,7 +13,7 @@ export const StyledImage = styled(Image)`
     border-radius: 15px; 
 `
 const iconSize = 32
-export const IconProduct = () => <MaterialCommunityIcons name="fast-food" color={theme.colors.iconGrey} size={iconSize} />
+export const IconProduct = () => <MaterialCommunityIcons name="food" color={theme.colors.iconGrey} size={iconSize} />
 
 export const IconTag = () => <MaterialCommunityIcons name="tag-outline" color={theme.colors.iconGrey} size={iconSize} />