animations

src/components/GroceryList/TabMenu.js

@@ -1,25 +1,37 @@
 import React from 'react'
+import { LayoutAnimation, Platform, UIManager } from 'react-native'
 //styles
-import {Wrapper,WrapperSelected, WrapperGroceries,IconGroceries, WrapperProducts, IconProducts} from './styles/tabMenu'
+import { Wrapper, WrapperSelected, WrapperGroceries, IconGroceries, WrapperProducts, IconProducts } from './styles/tabMenu'
+
+if (
+    Platform.OS === "android" &&
+    UIManager.setLayoutAnimationEnabledExperimental
+) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+}
 
 const calcPos = (pos) => {
-    return pos === 'Groceries' ? '-75px' 
+    return pos === 'Groceries' ? '-75px'
-    : '75px'
+        : '75px'
 }
 let previousPos = '-150px'
 const TabMenu = (props) => {
     const handleTabPress = (tab) => {
+        LayoutAnimation.configureNext({
+            duration: 400,
+            update: { type: 'spring', springDamping: 0.8 },
+        })
         previousPos = calcPos(props.currentTab)
         props.setCurrentTab(tab)
     }
     return (
         <Wrapper>
-            <WrapperSelected previousPos = {previousPos} currenttab={props.currentTab}/>
+            <WrapperSelected previousPos={previousPos} currenttab={props.currentTab} />
-            <WrapperGroceries currenttab={props.currentTab} onPress={()=>handleTabPress("Groceries")}>
+            <WrapperGroceries currenttab={props.currentTab} onPress={() => handleTabPress("Groceries")}>
                 <IconGroceries currenttab={props.currentTab} />
             </WrapperGroceries>
-            <WrapperProducts currenttab={props.currentTab} onPress={()=>handleTabPress("Products")}>
+            <WrapperProducts currenttab={props.currentTab} onPress={() => handleTabPress("Products")}>
-                <IconProducts currenttab={props.currentTab}/>
+                <IconProducts currenttab={props.currentTab} />
             </WrapperProducts>
         </Wrapper>
     )

src/components/GroceryList/groceries/GroceryButtons.js

@@ -8,7 +8,14 @@ import { WrapperButtons, WrapperAddItem, WrapperAddList, WrapperRemove, WrapperS
 import { useSelector, useDispatch } from 'react-redux'
 import { itemsRemoved, checkAll } from '../../../redux/slices/groceryList/itemsSlice'
 import { selectOpenListId } from '../../../redux/slices/groceryList/listsSlice'
-import { Alert } from 'react-native'
+import { Alert, LayoutAnimation, Platform, UIManager } from 'react-native'
+
+if (
+    Platform.OS === "android" &&
+    UIManager.setLayoutAnimationEnabledExperimental
+) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+}
 
 const SelectAllItemsButton = (props) => {
     const dispatch = useDispatch()
@@ -52,11 +59,20 @@ const RemoveItemsButton = (props) => {
 
 export const ContainerButtons = (props) => {
     const [visible, setVisible] = useState(false);
+    const toggleAnimation = () => {
+        LayoutAnimation.configureNext({
+            duration: 500,
+            create: { type: 'linear', property: 'opacity' },
+            update: { type: 'spring', springDamping: 0.8 },
+            delete: { type: 'linear', property: 'opacity' }
+        })
+        setVisible(!visible)
+    }
     return (
         <>
             <SelectAllItemsButton visible={visible} />
             <RemoveItemsButton visible={visible} />
-            <WrapperButtons toggle={visible} onPress={() => setVisible(!visible)}>
+            <WrapperButtons toggle={visible} onPress={toggleAnimation}>
                 <MenuIcon />
             </WrapperButtons >
         </>

src/components/GroceryList/groceries/GroceryList.js

@@ -24,7 +24,7 @@ const GroceryList = (props) => {
         <WrapperGroceryList>
             <TextTotalAmount>total:  € {totalPrice}</TextTotalAmount>
             <FlatList
-                ListHeaderComponent={<HeaderPadding />}
+                ListHeaderComponent={<View style={{height: 140}} />}
                 ListFooterComponent={<View style={{ height: 100 }} />}
                 initialNumToRender={15}
                 maxToRenderPerBatch={10}

src/components/GroceryList/groceries/List.js

@@ -9,25 +9,38 @@ import { Wrapper, WrapperList, WrapperListTitle, ListTitle, ListSubtitle, Button
 import { useSelector, useDispatch } from 'react-redux';
 import { selectAllSortedItems, itemsRemovedByList } from '../../../redux/slices/groceryList/itemsSlice'
 import { toggleOpen, listRemoved } from '../../../redux/slices/groceryList/listsSlice'
-import { Alert, FlatList, View } from 'react-native';
+import { Alert, Platform, UIManager, FlatList, LayoutAnimation } from 'react-native';
-import { TouchableOpacity } from 'react-native-gesture-handler';
+
+if (
+    Platform.OS === "android" &&
+    UIManager.setLayoutAnimationEnabledExperimental
+) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+}
 
 export default React.memo((props) => {
     const items = useSelector(selectAllSortedItems)
     const list = useSelector(state => state.lists.entities.find((list) => list._id === props.listId))
 
-    const [height, setHeight] = useState(100);
+    const [height, setHeight] = useState(0);
 
     useEffect(() => {
-        setHeight(1);
+        if (list.open === true) {
-    }, [list.open, items]);
+            setHeight(1)
+        }
+    }, [items.length, list.open]);
 
     const dispatch = useDispatch()
-
+    const filteredItems = items.filter(item => item.listId === props.listId)
 
     const [modalItemVisible, setModalItemVisible] = useState(false);
     const [modalListVisible, setModalListVisible] = useState(false);
 
+    const HandleAnimation = (event) => {
+        LayoutAnimation.configureNext(LayoutAnimation.create(300, 'easeInEaseOut', 'opacity'))
+        setHeight(event.nativeEvent.layout.height)
+    }
+
     const removeList = () => {
         Alert.alert(
             "Warning",
@@ -60,13 +73,13 @@ export default React.memo((props) => {
                 </WrapperRight>
             </WrapperListTitle>
             <ListSizeWrapper height={height} visible={list.open} >
-                < WrapperList listLength={items.length} onLayout={(event) => { setHeight(event.nativeEvent.layout.height) }}>
+                < WrapperList listLength={items.length} onLayout={(event) => { HandleAnimation(event) }}>
                     {list.open &&
                         <FlatList style={{ width: '100%' }}
-                            initialNumToRender={20}
+                            initialNumToRender={10}
                             maxToRenderPerBatch={10}
-                            // ListFooterComponent={items.length === 0 && <ListSubtitle style={{ fontSize: 22 }} >Add a grocery</ListSubtitle>}
+                            ListFooterComponent={filteredItems.length === 0 && <ListSubtitle style={{ fontSize: 22 }} >Add a grocery</ListSubtitle>}
-                            data={items.filter(item => item.listId === props.listId)}
+                            data={filteredItems}
                             renderItem={({ item }) => (
                                 <ListedItem item={item} setVisible={setModalItemVisible} />
                             )}

src/components/GroceryList/groceries/ListedItem.js

@@ -17,10 +17,9 @@ const ListedItem = React.memo((props) => {
             <DarkLayer>
                 <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>
+                    {item.details != "" && <TextDetails>{item.details}</TextDetails>}
                     <TextAmount>{item.amount.am}{item.amount.qt && " " + item.amount.qt}</TextAmount>
                     {item.person != "" && <TextPerson>{item.person}</TextPerson>}
-                    {/* {product.image != "" && <Image source={product.image} />} */}
                 </WrapperItem>
             </DarkLayer>
             <WrapperButton onPress={() => dispatch(checkToggle(item._id))} >

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

@@ -18,7 +18,7 @@ export const Wrapper = styled(View)`
     width: 100%;
 `
 export const ListSizeWrapper = styled(View)`
-    height: ${(props) => props.visible ? props.height + 'px' : css`0px`};
+    height: ${(props) => props.height }px;
     overflow: hidden;
 `
 export const WrapperList = styled(View)`

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

@@ -20,12 +20,12 @@ export const DarkLayer = styled(View)`
 export const WrapperItem = styled(TouchableOpacity)`
     box-shadow: ${({ theme }) => theme.colors.shadow};
     display: flex;
-    min-height: ${props => props.person ? css`60px` : css`30px`};
+    min-height: ${props => props.person != "" ? css`70px` : css`40px`};
     position: relative;
     width: 100%;
     
     flex-direction: column;
-    justify-content: center;
+    justify-content: flex-start;
     border-radius: 15px;
     
     background-color: ${props => props.checked ? props.theme.colors.itemSelected : props.color + '66'};
@@ -62,6 +62,7 @@ export const TextAmount = styled(Text)`
     overflow:hidden; 
     /* white-space:nowrap;  */
     right: 0px;
+    top: 0px;
     margin: 3px 3px 3px 3px;
     font-size: 16px;
     
@@ -87,15 +88,4 @@ export const TextPerson = styled(Text)`
     padding:2px 8px 0px 6px;
     background-color:${({ theme }) => theme.colors.dp00 + '88'};
     color: ${({ theme }) => theme.colors.textW1};
-`
-export const StyledImage = styled(Image)`
-    position: absolute;
-    opacity: 0.05;
-    height: 100%;
-    width: 200px;
-    border-top-left-radius: 30px;
-    border-top-right-radius: 15px;
-    border-bottom-left-radius: 15px;
-    border-bottom-right-radius: 30px;
-    right:0px;
 `

src/components/GroceryList/styles/tabMenu.js

@@ -18,7 +18,7 @@ export const Wrapper = styled(View)`
     flex-direction: row;
     justify-content: space-evenly;
     align-items: center;
-    background-color: ${({ theme }) => theme.colors.dp00 +'88'};
+    background-color: ${({ theme }) => theme.colors.dp00 + '88'};
     width: 250px;
     height: 60px;
 
@@ -36,6 +36,7 @@ export const WrapperSelected = styled(View)`
     opacity: 0.7;
     width:  125px;
     height: 50px;
+    bottom: 10px;
     border-radius:25px;
     ${(props) =>
         props.currenttab === 'Groceries'
@@ -43,7 +44,7 @@ export const WrapperSelected = styled(View)`
             right: 125px;
             background-color: #59D8E6;
           `
-                : css`
+            : css`
             right: 0px;
             background-color: ${({ theme }) => theme.colors.primary};
           `}
@@ -54,9 +55,17 @@ export const WrapperGroceries = styled(WrapperIcon)`
     height: 65px;
 `
 
-const Groceries = () => <MaterialCommunityIcons name="shopping" color={theme.colors.textW0} size={30} />
 
-export const IconGroceries = styled(Groceries)`
+export const IconGroceries = styled(MaterialCommunityIcons).attrs({
+    name: "shopping"
+})`
+    color: ${props => props.theme.colors.textW5};
+    font-size: 35px;
+    ${props => props.currenttab === 'Groceries' &&
+        css` 
+            color: ${props => props.theme.colors.textW0};
+            font-size: 40px;`
+    };
 `
 //products
 export const WrapperProducts = styled(WrapperIcon)`
@@ -65,8 +74,14 @@ export const WrapperProducts = styled(WrapperIcon)`
 
 `
 
-const Products = () => <MaterialCommunityIcons name="food-apple" color={theme.colors.textW0} size={30} />
+export const IconProducts = styled(MaterialCommunityIcons).attrs({
-
+    name: "fruit-grapes-outline"
-export const IconProducts = styled(Products)`
+})`
-    margin-top:-5px;
+    color: ${props => props.theme.colors.textW5};
+    font-size: 35px;
+    ${props => props.currenttab === 'Products' &&
+        css` 
+            color: ${props => props.theme.colors.textW0};
+            font-size: 40px;`
+    };
 `

src/components/modals/groceries/ModalAddItem.js

@@ -111,7 +111,7 @@ const ModalAddItem = (props) => {
                 <IconDetails />
                 <Input
                     value={details}
-                    onChangeText={(text) => setDetails(text.target.value)}
+                    onChangeText={(text) => setDetails(text)}
                     placeholder="Additional details" />
             </WrapperInput>
             <WrapperInput>
@@ -130,7 +130,7 @@ const ModalAddItem = (props) => {
                 <Input 
                     keyboardType={'number-pad'}
                     value={price}
-                    onChange={(text) => setPrice(text)}
+                    onChangeText={(text) => setPrice(text)}
                     placeholder="Price" />
             </WrapperInput>
             <WrapperButtons>

src/components/modals/groceries/ModalEditItem.js

@@ -25,7 +25,7 @@ const ModalEditItem = (props) => {
     const [person, setPerson] = useState(item.person);
     const [details, setDetails] = useState(item.details);
     const [tag, setTag] = useState(item.tag);
-    const [price, setPrice] = useState(item.price);
+    const [price, setPrice] = useState(item.price && item.price.toString() );
 
     const [focusedProduct, setFocusedProduct] = React.useState(false)
     const [focusedQt, setFocusedQt] = React.useState(false)

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

@@ -5,8 +5,8 @@ import LightenDarkenColor from '../../../../functions'
 
 export const WrapperProduct = styled(View)`
     display: flex;
-    align-items: center;
+    align-items: flex-start;
-
+    flex-direction: row;
     background-color: ${(props) => props.color + '22'};
 
     width: 100%;
@@ -15,7 +15,7 @@ export const WrapperProduct = styled(View)`
     margin-bottom: 5px;    
 `
 export const WrapperProductInfo = styled(View)`
-    flex:1;
+    width: 100%;
 `
 export const TextPrice = styled(Text)`
     background-color: #0004;

src/components/modals/styles/modal.js

@@ -11,7 +11,6 @@ export const StyledModal = styled(Modal)`
 `
 export const Wrapper = styled(View)`
     border-radius: 10px;
-    padding: 5px;
     background-color: ${props => props.theme.colors.dp01};
 `
 export const WrapperInput = styled(View)`