From dcde2c35fb548f01366730845cf22261db4728b2 Mon Sep 17 00:00:00 2001
From: "wolfmoyaers@gmail.com" <wolfmoyaers@gmail.com>
Date: Mon, 1 Nov 2021 13:54:31 +0100
Subject: [PATCH] all modals

---
 src/components/GroceryList/groceries/List.js  |  11 +-
 .../GroceryList/groceries/styles/list.js      |   6 +-
 .../GroceryList/products/ProductsList.js      |   4 +-
 .../modals/groceries/ModalAddItem.js          |  12 +-
 .../modals/groceries/ModalAddList.js          |  51 +++---
 .../modals/groceries/ModalAddProduct.js       |  94 ++++++-----
 .../modals/groceries/ModalEditItem.js         | 157 +++++++++---------
 .../modals/groceries/ModalEditList.js         |  55 +++---
 .../modals/groceries/ModalEditProduct.js      | 103 ++++++------
 .../modals/groceries/styles/addProduct.js     |   2 +-
 10 files changed, 262 insertions(+), 233 deletions(-)

diff --git a/src/components/GroceryList/groceries/List.js b/src/components/GroceryList/groceries/List.js
index 37181dd..f5e4598 100644
--- a/src/components/GroceryList/groceries/List.js
+++ b/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)} />
-                        <ButtonRemoveList onClick={removeList} />
+                        <ButtonEditList pressFunc={() => setModalListVisible(true)} />
+                        <ButtonRemoveList pressFunc={removeList} />
                     </>}
                     <IconArrowDown visible={list.open.toString()} />
                 </WrapperRight>
@@ -51,7 +52,7 @@ export default React.memo((props) => {
             <ListSizeWrapper height={height} visible={list.open} >
                 < WrapperList listLength={items.length} onLayout={(event) => { setHeight(event.nativeEvent.layout.height) }}>
                     {list.open &&
-                        <FlatList style={{width: '100%'}}
+                        <FlatList style={{ width: '100%' }}
                             initialNumToRender={20}
                             maxToRenderPerBatch={10}
                             // ListFooterComponent={items.length === 0 && <ListSubtitle style={{ fontSize: 22 }} >Add a grocery</ListSubtitle>}
@@ -66,8 +67,8 @@ export default React.memo((props) => {
                     }
                     {items.find(item => item.modalVisible) && <ModalEditItem visible={modalItemVisible} setVisible={setModalItemVisible} />}
                 </WrapperList >
-                <ModalEditList id={props.listId} visible={modalListVisible} setVisible={setModalListVisible} /> 
-           </ListSizeWrapper>
+                <ModalEditList id={props.listId} visible={modalListVisible} closeModal={() => setModalListVisible(false)} />
+            </ListSizeWrapper>
         </Wrapper>
     )
 })
\ No newline at end of file
diff --git a/src/components/GroceryList/groceries/styles/list.js b/src/components/GroceryList/groceries/styles/list.js
index a51028d..c508ffe 100644
--- a/src/components/GroceryList/groceries/styles/list.js
+++ b/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;
 `
 
diff --git a/src/components/GroceryList/products/ProductsList.js b/src/components/GroceryList/products/ProductsList.js
index 3e4df0c..812e21d 100644
--- a/src/components/GroceryList/products/ProductsList.js
+++ b/src/components/GroceryList/products/ProductsList.js
@@ -21,7 +21,7 @@ const ProductsList = (props) => {
         <WrapperList>
 
             <FlatList
-                ListHeaderComponent={ <HeaderPadding/> }
+                ListHeaderComponent={<HeaderPadding />}
                 ListFooterComponent={<View style={{ height: 100 }} />}
                 initialNumToRender={10}
                 maxToRenderPerBatch={10}
@@ -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>
     )
 }
diff --git a/src/components/modals/groceries/ModalAddItem.js b/src/components/modals/groceries/ModalAddItem.js
index dbfcd8f..eb4cc1e 100644
--- a/src/components/modals/groceries/ModalAddItem.js
+++ b/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>
diff --git a/src/components/modals/groceries/ModalAddList.js b/src/components/modals/groceries/ModalAddList.js
index 0fa68ed..9fe604a 100644
--- a/src/components/modals/groceries/ModalAddList.js
+++ b/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}>
-            <ModalHeader>Add a grocery list</ModalHeader>
-            <WrapperInput>
-                <Input
-                    type="text"
-                    value={listName}
-                    onChange={(text) => setListName(text.target.value)}
-                    // onKeyDown={(event) => handleKeyDown(event)}
-                    placeholder="List name" />
-                {/* {listName ? <IconCheck /> : <IconWrong />} */}
-            </WrapperInput>
-            <WrapperInput>
-                <Input type="text"
-                    value={description}
-                    onChange={(text) => setDescription(text.target.value)}
-                    placeholder="List description" />
-            </WrapperInput>
-            <WrapperButtons>
-                <Button onClick={props.closeModal}>Close</Button>
-                <VerticalSeperator />
-                <Button onClick={() => handleSubmit()}>Add List</Button>
-            </WrapperButtons>
+        <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
+                        value={listName}
+                        onChangeText={(text) => setListName(text)}
+                        // onKeyDown={(event) => handleKeyDown(event)}
+                        placeholder="List name" />
+                    {listName ? <IconCheck /> : <IconWrong />}
+                </WrapperInput>
+                <WrapperInput>
+                    <Input 
+                        value={description}
+                        onChangeText={(text) => setDescription(text)}
+                        placeholder="List description" />
+                </WrapperInput>
+                <WrapperButtons>
+                    <Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button>
+                    <VerticalSeperator />
+                    <Button onPress={() => handleSubmit()}><ButtonText>Add List</ButtonText></Button>
+                </WrapperButtons>
+            </Wrapper>
         </StyledModal >
     )
 }
diff --git a/src/components/modals/groceries/ModalAddProduct.js b/src/components/modals/groceries/ModalAddProduct.js
index f7a02fd..72b9313 100644
--- a/src/components/modals/groceries/ModalAddProduct.js
+++ b/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,49 +42,55 @@ export const ModalAddProduct = (props) => {
         }
     }
     return (
-        <StyledModal show={props.visible} centered={true} onHide={props.closeModal} >
-            <ModalHeader>Add product</ModalHeader>
-            <WrapperInput>
-                <IconProduct />
-                <InputSmall type="text"
-                    value={productName}
-                    onChange={(text) => setProductName(text.target.value)}
-                    // onKeyDown={(event) => handleKeyDown(event)}
-                    placeholder="Product name" />
-                {productName ? <IconCheck /> : <IconWrong />}
-            </WrapperInput>
-            <WrapperInput>
-                <IconTag />
-                <InputSmall onFocus={() => setFocused(true)} onBlur={() => { setTimeout(() => { setFocused(false) }, 100) }}
-                    type="text"
-                    value={tag}
-                    onChange={(text) => setTag(text.target.value)}
-                    placeholder="Tag" />
-                {tag ? <IconCheck /> : <IconWrong />}
-            </WrapperInput>
-            {focused && <WrapperDropdown>
-                <Dropdown array={tags.map(tag => tag.tagName)} text={tag} setElement={setTag} />
-            </WrapperDropdown>}
-            <WrapperInput>
-                <IconDollar />
-                <InputSmall type="number"
-                    value={price}
-                    onChange={(text) => setPrice(text.target.value)}
-                    placeholder="Price" />
-            </WrapperInput>
-            <WrapperInput>
-                <IconLink />
-                <InputSmall type="text"
-                    value={image}
-                    onChange={(text) => setImage(text.target.value)}
-                    placeholder="Image link" />
-            </WrapperInput>
-            {image && <StyledImage source={image} alt={'No link...'} />}
-            <WrapperButtons>
-                <Button onClick={props.closeModal}>Close</Button>
-                <VerticalSeperator />
-                <Button onClick={() => handleSubmit()}>Add  </Button>
-            </WrapperButtons>
+        <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
+                        value={productName}
+                        onChangeText={(text) => setProductName(text)}
+                        // onKeyDown={(event) => handleKeyDown(event)}
+                        placeholder="Product name" />
+                    {productName ? <IconCheck /> : <IconWrong />}
+                </WrapperInput>
+                <WrapperInput>
+                    <IconTag />
+                    <InputSmall onFocus={() => setFocused(true)} onEndEditing={() => setFocused(false) }
+                        value={tag}
+                        onChangeText={(text) => setTag(text)}
+                        placeholder="Tag" />
+                    {tag ? <IconCheck /> : <IconWrong />}
+                </WrapperInput>
+                {focused && <WrapperDropdown>
+                    <Dropdown array={tags.map(tag => tag.tagName)} text={tag} setElement={setTag} />
+                </WrapperDropdown>}
+                <WrapperInput>
+                    <IconDollar />
+                    <InputSmall 
+                        keyboardType={"number-pad"}
+                        value={price}
+                        onChangeText={(text) => setPrice(text)}
+                        placeholder="Price" />
+                </WrapperInput>
+                <WrapperInput>
+                    <IconLink />
+                    <InputSmall 
+                        value={image}
+                        onChangeText={(text) => setImage(text)}
+                        placeholder="Image link" />
+                </WrapperInput>
+                {image != "" && <StyledImage source={{uri: image}} alt={'No link...'} />}
+                <WrapperButtons>
+                    <Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button>
+                    <VerticalSeperator />
+                    <Button onPress={() => handleSubmit()}><ButtonText>Add  </ButtonText></Button>
+                </WrapperButtons>
+            </Wrapper>
         </StyledModal>
     )
 }
\ No newline at end of file
diff --git a/src/components/modals/groceries/ModalEditItem.js b/src/components/modals/groceries/ModalEditItem.js
index cfb70da..9b629ad 100644
--- a/src/components/modals/groceries/ModalEditItem.js
+++ b/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'
@@ -32,7 +32,7 @@ const ModalEditItem = (props) => {
     const [focusedTag, setFocusedTag] = React.useState(false)
 
     let product = products.find((product) => product.productName === productName);
-    let tagState = tags.find(t=>t.tagName===tag)
+    let tagState = tags.find(t => t.tagName === tag)
     tagState = tagState ? tagState : tags[0]
     const handleSubmit = async () => {
         let amountObj = {
@@ -61,80 +61,85 @@ const ModalEditItem = (props) => {
         props.setVisible(false)
     }
     return (
-        <StyledModal show={props.visible} centered={true} onHide={closeModal} >
-            <WrapperProduct color={tagState.color}>
-                {product && product.image && <StyledImage source={product.image} />}
-                <WrapperProductInfo>
-                    <TextPrice>€ {price}</TextPrice>
-                    <TextTag color={tagState.color}>{tagState.tagName}</TextTag>
-                </WrapperProductInfo>
-            </WrapperProduct>
-            <WrapperInput>
-                <IconProduct />
-                <Input onFocus={() => setFocusedProduct(true)} onBlur={() => { setTimeout(() => { setFocusedProduct(false) }, 100) }}
-                    type="text"
-                    value={productName}
-                    onChange={(text) => setProductName(text.target.value)}
-                    // onKeyDown={(event) => handleKeyDown(event)}
-                    placeholder="Product name" />
-                {productName ? <IconCheck /> : <IconWrong />}
-            </WrapperInput>
-            {focusedProduct && <WrapperDropdown>
-                <Dropdown array={products.map(product => product.productName)} text={productName} setElement={handleDropdownPress} />
-            </WrapperDropdown>}
-            <WrapperInput>
-                <IconAmount />
-                <Input style={{ width: '67%' }}
-                    type="number"
-                    value={amount}
-                    onChange={(text) => setAmount(text.target.value)}
-                    placeholder="Amount" />
-                {amount ? <IconCheck /> : <IconWrong />}
-                <InputSmall style={{ marginLeft: "1%", width: '10%' }}
-                    onFocus={() => setFocusedQt(true)} onBlur={() => { setTimeout(() => { setFocusedQt(false) }, 100) }}
-                    type="text"
-                    value={qt}
-                    onChange={(text) => setQt(text.target.value)}
-                    placeholder="Qt." />
-            </WrapperInput>
-            {focusedQt && <WrapperDropdown style={{ marginLeft: "60%"}}>
-                <QtDropdown  text={qt} setElement={setQt} />
-            </WrapperDropdown>}
-            <WrapperInput>
-                <IconPerson />
-                <Input type="text"
-                    value={person}
-                    onChange={(text) => setPerson(text.target.value)}
-                    placeholder="For" />
-            </WrapperInput>
-            <WrapperInput>
-                <IconDetails />
-                <Input type="text"
-                    value={details}
-                    onChange={(text) => setDetails(text.target.value)}
-                    placeholder="Additional details" />
-            </WrapperInput>
-            <WrapperInput>
-                <IconTag />
-                <Input type="text"
-                    onFocus={() => setFocusedTag(true)} onBlur={() => { setTimeout(() => { setFocusedTag(false) }, 100) }}
-                    value={tag}
-                    onChange={(text) => setTag(text.target.value)}
-                    placeholder="Tag" />
-            </WrapperInput>
-            {focusedTag && <WrapperDropdown>
-                <Dropdown array={tags.map(t => t.tagName)} text={tag} setElement={setTag} />
-            </WrapperDropdown>}
-            <WrapperInput>
-                <IconDollar />
-                <Input type="text"
-                    value={price}
-                    onChange={(text) => setPrice(text.target.value)}
-                    placeholder="Price" />
-            </WrapperInput>
-            <WrapperButtons>
-                <Button onClick={() => handleSubmit()}>Save</Button>
-            </WrapperButtons>
+        <StyledModal isVisible={props.visible} animationIn={'slideInUp'} animationOut={'slideOutDown'}
+            onBackdropPress={closeModal}
+            onBackButtonPress={closeModal}
+            useNativeDriverForBackdrop
+            style={{ margin: 0 }} >
+            <Wrapper>
+                <WrapperProduct color={tagState.color}>
+                    {product != undefined && product.image != "" && <StyledImage source={{uri: product.image}} />}
+                    <WrapperProductInfo>
+                        <TextPrice>€ {price}</TextPrice>
+                        <TextTag color={tagState.color}>{tagState.tagName}</TextTag>
+                    </WrapperProductInfo>
+                </WrapperProduct>
+                <WrapperInput>
+                    <IconProduct />
+                    <Input onFocus={() => setFocusedProduct(true)} onEndEditing={() => setFocusedProduct(false)}
+                        value={productName}
+                        onChangeText={(text) => setProductName(text)}
+                        // onKeyDown={(event) => handleKeyDown(event)}
+                        placeholder="Product name" />
+                    {productName ? <IconCheck /> : <IconWrong />}
+                </WrapperInput>
+                {focusedProduct && <WrapperDropdown>
+                    <Dropdown array={products.map(product => product.productName)} text={productName} setElement={handleDropdownPress} />
+                </WrapperDropdown>}
+                <WrapperInput>
+                    <IconAmount />
+                    <Input style={{ width: '67%' }}
+                        keyboardType={"number-pad"}
+                        value={amount}
+                        onChangeText={(text) => setAmount(text)}
+                        placeholder="Amount" />
+                    {amount ? <IconCheck /> : <IconWrong />}
+                    <InputSmall style={{ marginLeft: "1%", width: '10%' }}
+                        onFocus={() => setFocusedQt(true)} onEndEditing={() => { setFocusedQt(false) }}
+                        value={qt}
+                        onChangeText={(text) => setQt(text)}
+                        placeholder="Qt." />
+                </WrapperInput>
+                {focusedQt && <WrapperDropdown style={{ marginLeft: "60%" }}>
+                    <QtDropdown text={qt} setElement={setQt} />
+                </WrapperDropdown>}
+                <WrapperInput>
+                    <IconPerson />
+                    <Input
+                        value={person}
+                        onChangeText={(text) => setPerson(text)}
+                        placeholder="For" />
+                </WrapperInput>
+                <WrapperInput>
+                    <IconDetails />
+                    <Input
+                        value={details}
+                        onChangeText={(text) => setDetails(text)}
+                        placeholder="Additional details" />
+                </WrapperInput>
+                <WrapperInput>
+                    <IconTag />
+                    <Input
+                        onFocus={() => setFocusedTag(true)} onEndEditing={() => setFocusedTag(false)}
+                        value={tag}
+                        onChangeText={(text) => setTag(text)}
+                        placeholder="Tag" />
+                </WrapperInput>
+                {focusedTag && <WrapperDropdown>
+                    <Dropdown array={tags.map(t => t.tagName)} text={tag} setElement={setTag} />
+                </WrapperDropdown>}
+                <WrapperInput>
+                    <IconDollar />
+                    <Input
+                        keyboardType={"number-pad"}
+                        value={price}
+                        onChangeText={(text) => setPrice(text)}
+                        placeholder="Price" />
+                </WrapperInput>
+                <WrapperButtons>
+                    <Button onPress={() => handleSubmit()}><ButtonText>Save</ButtonText></Button>
+                </WrapperButtons>
+            </Wrapper>
         </StyledModal>
     )
 }
diff --git a/src/components/modals/groceries/ModalEditList.js b/src/components/modals/groceries/ModalEditList.js
index 0ee35af..638648a 100644
--- a/src/components/modals/groceries/ModalEditList.js
+++ b/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';
@@ -10,40 +10,45 @@ import { listEdited } from '../../../redux/slices/groceryList/listsSlice';
 
 const ModalEditList = (props) => {
     const dispatch = useDispatch()
-    const list = useSelector(state => state.lists.entities.find(list=>list._id === props.id)) 
+    const list = useSelector(state => state.lists.entities.find(list => list._id === props.id))
     const [listName, setListName] = useState(list.listName);
     const [description, setDescription] = useState(list.listDescription);
     const handleSubmit = () => {
         if (props.visible && listName !== '') {
-            dispatch(listEdited({listName, _id: props.id, listDescription: description }));
-            props.setVisible(false)
+            dispatch(listEdited({ listName, _id: props.id, listDescription: description }));
+            props.closeModal()
         }
         else {
             alert('You need to give a list name');
         }
     }
     return (
-        <StyledModal show={props.visible} centered={true} onHide={() => props.setVisible(false)}>
-            <ModalHeader>Edit the list</ModalHeader> 
-            <WrapperInput>
-                <Input
-                    type="text"
-                    value={listName}
-                    onChange={(text) => setListName(text.target.value)}
-                    placeholder="List name" />
-                {listName ? <IconCheck /> : <IconWrong />}
-            </WrapperInput>
-            <WrapperInput>
-                <Input type="text"
-                    value={description}
-                    onChange={(text) => setDescription(text.target.value)}
-                    placeholder="List description" />
-            </WrapperInput>
-            <WrapperButtons>
-                <Button onClick={() => props.setVisible(false)}>Close</Button>
-                <VerticalSeperator />
-                <Button onClick={() => handleSubmit()}>Edit List</Button>
-            </WrapperButtons>
+        <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
+                        value={listName}
+                        onChangeText={(text) => setListName(text)}
+                        placeholder="List name" />
+                    {listName ? <IconCheck /> : <IconWrong />}
+                </WrapperInput>
+                <WrapperInput>
+                    <Input
+                        value={description}
+                        onChangeText={(text) => setDescription(text)}
+                        placeholder="List description" />
+                </WrapperInput>
+                <WrapperButtons>
+                    <Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button>
+                    <VerticalSeperator />
+                    <Button onPress={() => handleSubmit()}><ButtonText>Edit List</ButtonText></Button>
+                </WrapperButtons>
+            </Wrapper>
         </StyledModal >
     )
 }
diff --git a/src/components/modals/groceries/ModalEditProduct.js b/src/components/modals/groceries/ModalEditProduct.js
index 10e882b..46bcad0 100644
--- a/src/components/modals/groceries/ModalEditProduct.js
+++ b/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
@@ -30,10 +30,10 @@ const ModalEditProduct = (props) => {
     if (!usedTag) {
         usedTag = tags[0]
     }
-    const handleSubmit =  () => {
+    const handleSubmit = () => {
         if (props.visible && productName) {
             dispatch(productRemoved(product._id))
-            dispatch(productAdded({ productName, tag: tags.find(t=>t.tagName===tag) ? tag : "uncategorized", price, image}))
+            dispatch(productAdded({ productName, tag: tags.find(t => t.tagName === tag) ? tag : "uncategorized", price, image }))
 
             props.setVisible(false);
         }
@@ -46,52 +46,57 @@ const ModalEditProduct = (props) => {
         props.setVisible(false)
     }
     return (
-        <StyledModal show={props.visible} centered={true} onHide={closeModal} >
-            <WrapperProduct color={usedTag.color}>
-                {image && <StyledImage source={image} alt="No image found" />}
-                <WrapperProductInfo>
-                    <TextPrice>€ {price}</TextPrice>
-                    <TextTag color={usedTag.color}>{usedTag.tagName}</TextTag>
-                </WrapperProductInfo>
-            </WrapperProduct>
-            <WrapperInput>
-                <IconProduct />
-                <Input type="text"
-                    value={productName}
-                    onChange={(text) => setProductName(text.target.value)}
-                    // onKeyDown={(event) => handleKeyDown(event)}
-                    placeholder="Product name" />
-                {productName ? <IconCheck /> : <IconWrong />}
-            </WrapperInput>
-            <WrapperInput>
-                <IconTag />
-                <Input onFocus={() => setFocused(true)} onBlur={() => { setTimeout(() => { setFocused(false) }, 100) }}
-                    type="text"
-                    value={tag}
-                    onChange={(text) => setTag(text.target.value)}
-                    placeholder="Tag" />
-                {tag ? <IconCheck /> : <IconWrong />}
-            </WrapperInput>
-            {focused && <WrapperDropdown>
-                <Dropdown array={tags.map(tag => tag.tagName)} text={tag} setElement={setTag} />
-            </WrapperDropdown>}
-            <WrapperInput>
-                <IconDollar />
-                <Input type="number"
-                    value={price}
-                    onChange={(text) => setPrice(text.target.value)}
-                    placeholder="Price" />
-            </WrapperInput>
-            <WrapperInput>
-                <IconLink />
-                <Input type="text"
-                    value={image}
-                    onChange={(text) => setImage(text.target.value)}
-                    placeholder="Image link" />
-            </WrapperInput>
-            <WrapperButtons>
-                <Button onClick={handleSubmit}>Save</Button>
-            </WrapperButtons>
+        <StyledModal isVisible={props.visible} animationIn={'slideInUp'} animationOut={'slideOutDown'}
+            onBackdropPress={closeModal}
+            onBackButtonPress={closeModal}
+            useNativeDriverForBackdrop
+            style={{ margin: 0 }} >
+            <Wrapper>
+                <WrapperProduct color={usedTag.color}>
+                    {image != "" && <StyledImage source={{uri: image}} alt="No image found" />}
+                    <WrapperProductInfo>
+                        <TextPrice>€ {price}</TextPrice>
+                        <TextTag color={usedTag.color}>{usedTag.tagName}</TextTag>
+                    </WrapperProductInfo>
+                </WrapperProduct>
+                <WrapperInput>
+                    <IconProduct />
+                    <Input type="text"
+                        value={productName}
+                        onChangeText={(text) => setProductName(text)}
+                        // onKeyDown={(event) => handleKeyDown(event)}
+                        placeholder="Product name" />
+                    {productName ? <IconCheck /> : <IconWrong />}
+                </WrapperInput>
+                <WrapperInput>
+                    <IconTag />
+                    <Input onFocus={() => setFocused(true)} onEndEditing={() => setFocused(false)}
+                        value={tag}
+                        onChangeText={(text) => setTag(text)}
+                        placeholder="Tag" />
+                    {tag ? <IconCheck /> : <IconWrong />}
+                </WrapperInput>
+                {focused && <WrapperDropdown>
+                    <Dropdown array={tags.map(tag => tag.tagName)} text={tag} setElement={setTag} />
+                </WrapperDropdown>}
+                <WrapperInput>
+                    <IconDollar />
+                    <Input type={"number-pad"}
+                        value={price}
+                        onChangeText={(text) => setPrice(text)}
+                        placeholder="Price" />
+                </WrapperInput>
+                <WrapperInput>
+                    <IconLink />
+                    <Input
+                        value={image}
+                        onChangeText={(text) => setImage(text)}
+                        placeholder="Image link" />
+                </WrapperInput>
+                <WrapperButtons>
+                    <Button onPress={handleSubmit}><ButtonText>Save</ButtonText></Button>
+                </WrapperButtons>
+            </Wrapper>
         </StyledModal>
     )
 }
diff --git a/src/components/modals/groceries/styles/addProduct.js b/src/components/modals/groceries/styles/addProduct.js
index d4dba49..774ce67 100644
--- a/src/components/modals/groceries/styles/addProduct.js
+++ b/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} />