dimentions

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

@@ -90,7 +90,6 @@ export const TextPerson = styled(Text)`
 `
 export const StyledImage = styled(Image)`
     position: absolute;
-    resize-mode: contain;
     opacity: 0.05;
     height: 100%;
     width: 200px;

src/components/GroceryList/products/ListedProduct.js

@@ -1,11 +1,12 @@
 import React from 'react'
 //components
 //styling
-import { Wrapper, WrapperProduct, WrapperButton, CheckButton, WrapperText, TextProductName, TextTag, TextPrice, StyledImage, IconCheck} from './styles/listedProduct'
+import { Wrapper, WrapperProduct, WrapperButton, WrapperText, TextProductName, TextTag, TextPrice, StyledImage, IconCheck } from './styles/listedProduct'
 //redux
-import { useSelector, useDispatch, shallowEqual} from 'react-redux';
+import { useSelector, useDispatch, shallowEqual } from 'react-redux';
-import { selectProductById, checkToggle, modalToggle} from '../../../redux/slices/groceryList/productsSlice'
+import { selectProductById, checkToggle, modalToggle } from '../../../redux/slices/groceryList/productsSlice'
 import { findTag } from '../../../redux/slices/groceryList/tagsSlice'
+import { CheckButton } from '../../../styles/componentBlueprints';
 
 const ListedProduct = React.memo((props) => {
     const dispatch = useDispatch()
@@ -13,15 +14,15 @@ const ListedProduct = React.memo((props) => {
     const tag = useSelector(state => findTag(state, product.tag))
     return (
         <Wrapper>
-            <WrapperProduct color={tag.color} checked={product.checked} onPress={()=>{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 source={product.image}/>} */}
+                {product.image != "" && <StyledImage source={{ uri: product.image }} />}
             </WrapperProduct>
-            <WrapperButton onPress={()=>dispatch(checkToggle(product._id))} >
+            <WrapperButton onPress={() => dispatch(checkToggle(product._id))} >
                 <CheckButton checked={product.checked}>
                     {/* <IconCheck checked={product.checked} /> */}
                 </CheckButton>

src/components/GroceryList/products/ProductButtons.js

@@ -40,7 +40,7 @@ const DownloadProductsButton = (props) => {
         }
     }
     return (
-        <WrapperDownload toggle={toggleAnim} visible={props.visible} onClick={handlePress}>
+        <WrapperDownload toggle={toggleAnim} visible={props.visible} onPress={handlePress}>
             {/* <DownloadIcon /> */}
         </WrapperDownload>
     )
@@ -55,7 +55,7 @@ const RemoveProductsButton = (props) => {
         }
     }
     return (
-        <WrapperRemove toggle={toggleAnim} visible={props.visible} onClick={handlePress}>
+        <WrapperRemove toggle={toggleAnim} visible={props.visible} onPress={handlePress}>
             {/* <RemoveIcon /> */}
         </WrapperRemove>
     )
@@ -67,7 +67,7 @@ export const ContainerButtons = (props) => {
             <UploadProductsButton visible={visible} />
             <DownloadProductsButton visible={visible} />
             <RemoveProductsButton visible={visible} />
-            <WrapperButtons toggle={visible} onClick={() => setVisible(!visible)}>
+            <WrapperButtons toggle={visible} onPress={() => setVisible(!visible)}>
                 {/* <MenuIcon /> */}
             </WrapperButtons >
         </>
@@ -79,7 +79,7 @@ export const AddProductButton = (props) => {
     const closeModal = () => setVisible(false)
     return (
         <>
-            <WrapperAddProduct toggle={visible} onClick={() => setVisible(true)}>
+            <WrapperAddProduct toggle={visible} onPress={() => setVisible(true)}>
                 {/* <PlusIcon /> */}
             </WrapperAddProduct>
             <ModalAddProduct visible={visible} closeModal={closeModal} />

src/components/GroceryList/products/ProductsList.js

@@ -8,35 +8,28 @@ import { selectAllSortedProducts } from '../../../redux/slices/groceryList/produ
 //styles
 import { WrapperList } from './styles/list'
 import ModalEditProduct from '../../modals/groceries/ModalEditProduct';
-import { View } from 'react-native';
+import { ScrollView, View } from 'react-native';
+import HeaderPadding from '../../Header';
 
 const ProductsList = (props) => {
     const products = useSelector(selectAllSortedProducts)
 
-    const [count, setCount] = useState(11)
-    const [hasMore, setHasMore] = useState(true);
-
     const [visible, setVisible] = useState(false);
 
-    const productList = products.slice(0, count).map((product, index) => {
+    const productList = products.map((product, index) => {
         return (
             <ListedProduct key={index} _id={product._id} setVisible={setVisible} />
         )
     })
-    // const [current, setCurrent] = useState())
-    const getMoreData = () => {
-        if (productList.length === products.length) {
-            setHasMore(false);
-            return;
-        }
-        setCount((prevState) => prevState + 10)
-    }
 
     return (
         <WrapperList>
+            <ScrollView>
+                <HeaderPadding />
                 {productList}
                 <View style={{ height: 150 }} />
                 {products.find(product => product.modalVisible) && <ModalEditProduct visible={visible} setVisible={setVisible} />}
+            </ScrollView>
         </WrapperList>
     )
 }

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

@@ -9,45 +9,27 @@ import { TextInput } from 'react-native'
 export const WrapperButtons = styled(Button)`
     position:absolute;
     background-color: ${({ theme }) => theme.colors.primary};
-    bottom:50px;
-    left:20px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
     bottom:70px;
     left:10px;
-    }
 `
 export const WrapperAddProduct = styled(Button)`
     position:absolute;
     background-color: ${({ theme }) => theme.colors.primary};
-    bottom:50px;
-    right:20px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
     bottom:70px;
     right:10px;
-    }
 `
 export const WrapperRemove = styled(Button)`
     position:absolute;
     background-color: ${({ theme }) => theme.colors.error};
-    left:20px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
     left:10px;
     bottom: ${(props) => props.visible ? '140px' : '70px'};
-        }
-    
-    bottom: ${(props) => props.visible ? '140px' : '50px'};
     
 `
 export const WrapperUpload = styled(Button)`
     position:absolute;
     background-color: #ddb5e4;
-    left:20px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
     left:10px;
     bottom: ${(props) => props.visible ? '280px' : '70px'};
-        }
-
-    bottom: ${(props) => props.visible ? '320px' : '50px'};
 
 `
 export const UploadInput = styled(TextInput)`
@@ -58,16 +40,11 @@ export const UploadInput = styled(TextInput)`
     height:80px;
 `
 
-    export const WrapperDownload = styled(Button)`
+export const WrapperDownload = styled(Button)`
     position:absolute;
     background-color: #fff7ad;
-    left:20px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
     left:10px;
     bottom: ${(props) => props.visible ? '210px' : '70px'};
-        }
-        
-    bottom: ${(props) => props.visible ? '230px' : '50px'};
     
 `
 

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

@@ -3,7 +3,4 @@ import styled from 'styled-components'
 
 export const WrapperList = styled(View)`
     width:100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
 `

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

@@ -9,16 +9,16 @@ import LightenDarken from '../../../../functions'
 export const Wrapper = styled(View)`
     display: flex;
     flex-direction: row;
-    width: 768px;
+    width: 100%;
     align-items: flex-start;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
+    justify-content: flex-start;
-        width: 100vw;
-    }
 `
 export const WrapperProduct = styled(TouchableOpacity)`
     box-shadow: ${({theme})=> theme.colors.shadow};
     display: flex;
     flex: 1;
+    width: 100%;
+    min-height: 70px;
     position: relative;
     flex-direction: row;
     justify-content: center;
@@ -32,20 +32,8 @@ export const WrapperButton = styled(TouchableOpacity)`
     height: 60px;
     width:  40px;
 `
-export const CheckButton = styled(View)`
-    display:flex;
-    justify-content: center;
-    align-items: center;
 
-    height: 30px;
+export const WrapperText = styled(View)`
-    min-width:  30px;
-    border: 1px solid ${props => props.checked ? props.theme.colors.selected : props.theme.colors.dp04};
-    border-radius: 15px;
-    margin: 0px 5px ;
-    background-color: ${props => props.checked ? props.theme.colors.selected : props.theme.colors.buttonGrey};
-    `
-
-export const WrapperText = styled(Text)`
     flex:1;
     max-width:600px;
     @media ${({ theme }) => theme.mediaQueries.below768}{
@@ -80,7 +68,6 @@ export const StyledImage = styled(Image)`
     position: absolute;
     top:0;
     right:0;
-    resize-mode: contain;
     width: 100px;
     height: 100%;
     max-height:120px;

src/pages/groceryList/storageManagement/Products.js

@@ -16,7 +16,7 @@ import { useSelector } from 'react-redux'
 const Products = () => {
     const statusProducts = useSelector(state => state.products.status)
     return (
-        <View>
+        <View style={{height: '100%'}}>
             {statusProducts === 'loading' ? <LoadAnimation />
                 : <ProductsList />}
             <AddProductButton />