No errors grocery page

src/components/Dropdown.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Text, View } from 'react-native'
+import { Text, TouchableOpacity, View } from 'react-native'
 
 const WrapperDropdown = styled(View)`
     display: flex;
@@ -17,7 +17,7 @@ const WrapperDropdown = styled(View)`
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
 `
-const DropdownItem = styled(Text)`
+const DropdownItem = styled(TouchableOpacity)`
     color: ${({ theme }) => theme.colors.textW2};
     font-size: 20px;
 `
@@ -41,7 +41,7 @@ const Dropdown = (props) => {
     let dropdownList = newArray.map((element, index) => {
         return (
             <View key={index}>
-                <DropdownItem onClick={() => props.setElement(element)}>{element}</DropdownItem>
+                <DropdownItem onPress={() => props.setElement(element)}>{element}</DropdownItem>
                 <HorizontalSeperator />
             </View>
         )

src/components/GroceryList/TabMenu.js

@@ -15,10 +15,10 @@ const TabMenu = (props) => {
     return (
         <Wrapper>
             <WrapperSelected previousPos = {previousPos} currenttab={props.currentTab}/>
-            <WrapperGroceries currenttab={props.currentTab} onClick={()=>handleTabPress("Groceries")}>
+            <WrapperGroceries currenttab={props.currentTab} onPress={()=>handleTabPress("Groceries")}>
                 {/* <IconGroceries currenttab={props.currentTab}/> */}
             </WrapperGroceries>
-            <WrapperProducts currenttab={props.currentTab} onClick={()=>handleTabPress("Products")}>
+            <WrapperProducts currenttab={props.currentTab} onPress={()=>handleTabPress("Products")}>
                 {/* <IconProducts currenttab={props.currentTab}/> */}
             </WrapperProducts>
         </Wrapper>

src/components/GroceryList/groceries/GroceryButtons.js

@@ -18,7 +18,7 @@ const SelectAllItemsButton = (props) => {
         listId && setToggleAnim(!toggleAnim)
     }
     return (
-        <WrapperSelect toggle={toggleAnim} visible={props.visible} onClick={handlePress}>
+        <WrapperSelect toggle={toggleAnim} visible={props.visible} onPress={handlePress}>
             {/* <CheckIcon /> */}
         </WrapperSelect>
     )
@@ -33,7 +33,7 @@ const RemoveItemsButton = (props) => {
         }
     }
     return (
-        <WrapperRemove toggle={toggleAnim} visible={props.visible} onClick={handlePress}>
+        <WrapperRemove toggle={toggleAnim} visible={props.visible} onPress={handlePress}>
             {/* <RemoveIcon /> */}
         </WrapperRemove>
     )
@@ -45,7 +45,7 @@ export const ContainerButtons = (props) => {
         <>
             <SelectAllItemsButton visible={visible} />
             <RemoveItemsButton visible={visible} />
-            <WrapperButtons toggle={visible} onClick={() => setVisible(!visible)}>
+            <WrapperButtons toggle={visible} onPress={() => setVisible(!visible)}>
                 {/* <MenuIcon /> */}
             </WrapperButtons >
         </>
@@ -59,7 +59,7 @@ export const AddItemButton = (props) => {
     if (lists.find((list) => list.open === true)) {
         return (
             <>
-                <WrapperAddItem toggle={visibleItem} onClick={() => setVisibleItem(true)}>
+                <WrapperAddItem toggle={visibleItem} onPress={() => setVisibleItem(true)}>
                     {/* <PlusIcon /> */}
                 </WrapperAddItem>
                 <ModalAddItem visible={visibleItem} closeModal={() => setVisibleItem(false)} />
@@ -68,7 +68,7 @@ export const AddItemButton = (props) => {
     }
     return (
         <>
-            <WrapperAddList toggle={visibleList} onClick={() => setVisibleList(true)}>
+            <WrapperAddList toggle={visibleList} onPress={() => setVisibleList(true)}>
                 {/* <ListIcon /> */}
             </WrapperAddList>
             <ModalAddList visible={visibleList} closeModal={() => setVisibleList(false)} />

src/components/GroceryList/groceries/ListedItem.js

@@ -15,15 +15,15 @@ const ListedItem = React.memo((props) => {
     return (
         <Wrapper>
             <DarkLayer>
-                <WrapperItem person={item.person} color={tag.color} checked={item.checked} onClick={() => { props.setVisible(true); return dispatch(modalToggle(item._id)) }}>
+                <WrapperItem person={item.person} color={tag.color} checked={item.checked} onPress={() => { props.setVisible(true); return dispatch(modalToggle(item._id)) }}>
                     <TextProductName >{item.productName}</TextProductName>
                     <TextDetails>{item.details}</TextDetails>
                     <TextAmount>{item.amount.am}{item.amount.qt && " " + item.amount.qt}</TextAmount>
                     <TextPerson>{item.person && item.person}</TextPerson>
-                    {/* {product.image && <Image src={product.image} />} */}
+                    {/* {product.image && <Image source={product.image} />} */}
                 </WrapperItem>
             </DarkLayer>
-            <WrapperButton onClick={() => dispatch(checkToggle(item._id))} >
+            <WrapperButton onPress={() => dispatch(checkToggle(item._id))} >
                 <CheckButton checked = {item.checked} />
             </WrapperButton>
         </Wrapper>

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

@@ -85,7 +85,7 @@ export const TextTotalAmount = styled(Text)`
     position: absolute;
     align-self: flex-end;
     z-index: 2;
-    top:60px;
+    top:70px;
     right:0px;
     font-size: 20px;
     color: ${({ theme }) => theme.colors.textW1};

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

@@ -1,4 +1,4 @@
-import { Text, View, Image} from 'react-native'
+import { Text, View, Image, TouchableOpacity} from 'react-native'
 import styled, { css } from 'styled-components'
 
 export const Wrapper = styled(View)`
@@ -17,7 +17,7 @@ export const DarkLayer = styled(View)`
     margin-left: 7px;
 `
 
-export const WrapperItem = styled(View)`
+export const WrapperItem = styled(TouchableOpacity)`
     box-shadow: ${({ theme }) => theme.colors.shadow};
     display: flex;
     min-height: ${props => props.person ? css`60px` : css`30px`};
@@ -30,7 +30,7 @@ export const WrapperItem = styled(View)`
     
     background-color: ${props => props.checked ? props.theme.colors.itemSelected : props.color + '66'};
 `
-export const WrapperButton = styled(View)`
+export const WrapperButton = styled(TouchableOpacity)`
     height: 30px;
     width:  40px;
 `
@@ -90,7 +90,7 @@ export const TextPerson = styled(Text)`
 `
 export const StyledImage = styled(Image)`
     position: absolute;
-    object-fit: cover;
+    resize-mode: contain;
     opacity: 0.05;
     height: 100%;
     width: 200px;

src/components/GroceryList/products/ListedProduct.js

@@ -13,15 +13,15 @@ const ListedProduct = React.memo((props) => {
     const tag = useSelector(state => findTag(state, product.tag))
     return (
         <Wrapper>
-            <WrapperProduct color={tag.color} checked={product.checked} onClick={()=>{props.setVisible(true); return dispatch(modalToggle(product._id))}}>
+            <WrapperProduct color={tag.color} checked={product.checked} onPress={()=>{props.setVisible(true); return dispatch(modalToggle(product._id))}}>
                 <WrapperText>
                     <TextProductName >{product.productName}</TextProductName>
                     <TextTag color={tag.color}>{tag.tagName}</TextTag>
-                    {product.price !== 0&& <TextPrice>€ {product.price}</TextPrice>}
+                    {/* {product.price !== 0&& <TextPrice>€ {product.price}</TextPrice>} */}
                 </WrapperText>
-                {product.image && <StyledImage src={product.image}/>}
+                {/* {product.image && <StyledImage source={product.image}/>} */}
             </WrapperProduct>
-            <WrapperButton onClick={()=>dispatch(checkToggle(product._id))} >
+            <WrapperButton onPress={()=>dispatch(checkToggle(product._id))} >
                 <CheckButton checked={product.checked}>
                     {/* <IconCheck checked={product.checked} /> */}
                 </CheckButton>

src/components/GroceryList/products/styles/listedProduct.js

@@ -1,4 +1,4 @@
-import { View, Text, Image } from 'react-native'
+import { View, Text, Image, TouchableOpacity } from 'react-native'
 import styled, { css } from 'styled-components'
 //dependencies
 import { HiCheck } from 'react-icons/hi'
@@ -15,7 +15,7 @@ export const Wrapper = styled(View)`
         width: 100vw;
     }
 `
-export const WrapperProduct = styled(View)`
+export const WrapperProduct = styled(TouchableOpacity)`
     box-shadow: ${({theme})=> theme.colors.shadow};
     display: flex;
     flex: 1;
@@ -28,7 +28,7 @@ export const WrapperProduct = styled(View)`
     
     background-color: ${props => props.checked ? props.theme.colors.itemSelected : props.color + '66'};
 `
-export const WrapperButton = styled(View)`
+export const WrapperButton = styled(TouchableOpacity)`
     height: 60px;
     width:  40px;
 `
@@ -45,7 +45,7 @@ export const CheckButton = styled(View)`
     background-color: ${props => props.checked ? props.theme.colors.selected : props.theme.colors.buttonGrey};
     `
 
-export const WrapperText = styled(View)`
+export const WrapperText = styled(Text)`
     flex:1;
     max-width:600px;
     @media ${({ theme }) => theme.mediaQueries.below768}{
@@ -80,7 +80,7 @@ export const StyledImage = styled(Image)`
     position: absolute;
     top:0;
     right:0;
-    object-fit: cover;
+    resize-mode: contain;
     width: 100px;
     height: 100%;
     max-height:120px;

src/components/GroceryList/styles/tabMenu.js

@@ -1,4 +1,4 @@
-import { View } from 'react-native'
+import { TouchableOpacity, View } from 'react-native'
 import styled, { css } from 'styled-components'
 import { RiShoppingBasketLine } from 'react-icons/ri'
 import { FaAppleAlt } from 'react-icons/fa'
@@ -7,7 +7,7 @@ import { FaAppleAlt } from 'react-icons/fa'
 const iconSize = '2.0px'
 const iconSizeSelected = '2.5px'
 
-const WrapperIcon = styled(View)`
+const WrapperIcon = styled(TouchableOpacity)`
     display: flex;
     align-items: center;
     justify-content: center;

src/components/modals/groceries/ModalAddItem.js

@@ -66,7 +66,7 @@ const ModalAddItem = (props) => {
     return (
         <StyledModal show={props.visible} centered={true} onHide={props.closeModal} >
             <ModalHeader>Add product</ModalHeader>
-            {/* {product && product.image && <Image src={product.image} />} */}
+            {/* {product && product.image && <Image source={product.image} />} */}
             <WrapperInput>
                 <IconProduct />
                 <Input onFocus={() => setFocusedProduct(true)} onBlur={() => { setTimeout(() => { setFocusedProduct(false) }, 100) }}

src/components/modals/groceries/ModalAddProduct.js

@@ -79,7 +79,7 @@ export const ModalAddProduct = (props) => {
                     onChange={(text) => setImage(text.target.value)}
                     placeholder="Image link" />
             </WrapperInput>
-            {image && <StyledImage src={image} alt={'No link...'} />}
+            {image && <StyledImage source={image} alt={'No link...'} />}
             <WrapperButtons>
                 <Button onClick={props.closeModal}>Close</Button>
                 <VerticalSeperator />

src/components/modals/groceries/ModalEditItem.js

@@ -63,7 +63,7 @@ const ModalEditItem = (props) => {
     return (
         <StyledModal show={props.visible} centered={true} onHide={closeModal} >
             <WrapperProduct color={tagState.color}>
-                {product && product.image && <StyledImage src={product.image} />}
+                {product && product.image && <StyledImage source={product.image} />}
                 <WrapperProductInfo>
                     <TextPrice>€ {price}</TextPrice>
                     <TextTag color={tagState.color}>{tagState.tagName}</TextTag>

src/components/modals/groceries/ModalEditProduct.js

@@ -48,7 +48,7 @@ const ModalEditProduct = (props) => {
     return (
         <StyledModal show={props.visible} centered={true} onHide={closeModal} >
             <WrapperProduct color={usedTag.color}>
-                {image && <StyledImage src={image} alt="No image found" />}
+                {image && <StyledImage source={image} alt="No image found" />}
                 <WrapperProductInfo>
                     <TextPrice>€ {price}</TextPrice>
                     <TextTag color={usedTag.color}>{usedTag.tagName}</TextTag>

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

@@ -7,7 +7,7 @@ import { Image } from 'react-native'
 
 export const StyledImage = styled(Image)`
     position: absolute;
-    object-fit: cover;
+    resize-mode: contain;
     z-index:0;
     opacity: 0.1;
     width: 70%;

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

@@ -7,7 +7,7 @@ import { Image } from 'react-native'
 
 export const StyledImage = styled(Image)`
     position: absolute;
-    object-fit: cover;
+    resize-mode: contain;
     width: 35%;
     height: 50%;
     right:0;

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

@@ -33,7 +33,7 @@ export const TextTag = styled(Text)`
     margin: 0px 5px;
 `
 export const StyledImage = styled(Image)`
-    object-fit: cover;
+    resize-mode: contain;
     width:  150px;
     height: 150px;
     margin-top:-50px; 

src/components/modals/recipes/ModalAddIngredients.js

@@ -90,7 +90,7 @@ const ModalAddIngredients = (props) => {
                     min={amountOfServings}
                     step={amountOfServings}
                     placeholder="Multiplier" />
-                <p style={{ marginLeft: 5 }}>servings</p>
+                <Text style={{ marginLeft: 5 }}>servings</Text>
             </WrapperInput>
             {IngredientsList}
             <WrapperButtons>

src/components/recipes/RecipeCard.js

@@ -5,7 +5,7 @@ const RecipeCard = (props) => {
     let recipe = props.recipe
     return (
         <WrapperRecipeCard to={"/recipes/"+recipe._id}>
-            {recipe.image && <ImageRecipe src={recipe.image} />}
+            {recipe.image && <ImageRecipe source={recipe.image} />}
             <RecipeName>{recipe.name}</RecipeName>
         </WrapperRecipeCard>
     )

src/components/recipes/styles/recipeCard.js

@@ -32,7 +32,7 @@ export const RecipeName = styled(Text)`
 `
 
 export const ImageRecipe = styled(Image)`
-    object-fit: cover;
+    resize-mode: contain;
     width: 100%;
     height: 100%;
     border-radius: 20px;

src/pages/groceryList/GroceryListPage.js

@@ -13,7 +13,7 @@ const GroceryListPage = () => {
             {
                 currentTab === "Groceries" ? <Groceries /> : <Products />
             }
-            {/* <TabMenu currentTab={currentTab} setCurrentTab={setCurrentTab} /> */}
+            <TabMenu currentTab={currentTab} setCurrentTab={setCurrentTab} />
         </WrapperGroceryPage>
     )
 }

src/pages/groceryList/storageManagement/Groceries.js

@@ -14,7 +14,7 @@ import { useSelector } from 'react-redux'
 const Groceries = () => {
     const statusItems = useSelector(state => state.items.status)
     return (
-        <View>
+        <View style={{height: '100%'}}>
             {statusItems === 'loading' ? <LoadAnimation/>
                 : <GroceryList />}
             <ContainerButtons />

src/pages/recipes/AddRecipe.js

@@ -67,7 +67,7 @@ const AddRecipe = () => {
         <>
             <HeaderPadding/>
             <Wrapper >
-                {image && <StyledImage src={image} alt="Recipe" />}
+                {image && <StyledImage source={image} alt="Recipe" />}
                 <WrapperRecipe>
                     <View id="row">
                         {/* <IconRecipe /> */}

src/pages/recipes/Recipe.js

@@ -31,7 +31,7 @@ const Recipe = () => {
         <>
             <HeaderPadding/>
             <Wrapper >
-                {recipe.image && <StyledImage src={recipe.image} />}
+                {recipe.image && <StyledImage source={recipe.image} />}
                 <WrapperRecipe>
                     <Text>{recipe.name}</Text>
                     <Hr />

src/pages/recipes/styles/addRecipe.js

@@ -63,7 +63,7 @@ export const InputInstructions = styled(Text)`
     width: 100%;
 `
 export const StyledImage = styled(Image)`
-    object-fit: cover;
+    resize-mode: contain;
     width: 100px;
     height: 100px;
 `

src/pages/recipes/styles/recipe.js

@@ -34,7 +34,7 @@ export const InstructionNumber = styled(Text)`
 
 export const StyledImage = styled(Image)`
     margin-top: -70px;
-    object-fit: cover;
+    resize-mode: contain;
     height: 200px;
     width: 100%;
     @media ${({theme}) => theme.mediaQueries.above768}{

src/styles/componentBlueprints.js

@@ -1,4 +1,4 @@
-import { View } from "react-native"
+import { TouchableOpacity, View } from "react-native"
 import React from 'react'
 import styled, { css } from 'styled-components'
 //deps
@@ -6,7 +6,7 @@ import { HiCheck } from 'react-icons/hi'
 
 import LightenDarken from '../functions'
 //standard button layout 
-export const Button = styled(View)`
+export const Button = styled(TouchableOpacity)`
   box-shadow: ${({ theme }) => theme.colors.shadow};
   display: flex;
   align-items: center;