Groceries done

App.js

@@ -1,5 +1,6 @@
 import React from 'react';
 // import 'bootstrap/dist/css/bootstrap.min.css';
+import { useFonts } from 'expo-font';
 
 import App from './src/App';
 
@@ -21,6 +22,14 @@ fetchAll()
 
 
 export default function Index() {
+	let [fontsLoaded] = useFonts({
+		'sansation_light': require('./assets/fonts/sansation_light.ttf'),
+		'sansation_regular': require('./assets/fonts/sansation_regular.ttf'),
+	});
+	if (!fontsLoaded) {
+		return <View/>;
+	}
+	else {
 		return (
 			<View style={styles.container}>
 				<Provider store={store}>
@@ -32,6 +41,7 @@ export default function Index() {
 				</Provider>
 			</View>
 		);
+	}
 }
 
 const styles = StyleSheet.create({

src/components/GroceryList/groceries/GroceryList.js

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

src/components/GroceryList/groceries/List.js

@@ -24,21 +24,33 @@ export default React.memo((props) => {
 
     const [height, setHeight] = useState(0);
 
-    useEffect(() => {
-        if (list.open === true) {
-            setHeight(1)
-        }
-    }, [items.length, list.open]);
-
     const dispatch = useDispatch()
     const filteredItems = items.filter(item => item.listId === props.listId)
 
+    // if list gets opened
+    useEffect(() => {
+        if (list.open === true) {
+            setHeight(0.5)
+        }
+        if (list.open === true && filteredItems.length === 0) {
+            setHeight(0.5)
+        }
+    }, [list.open]);
+    // if item is added or removed
+    useEffect(() => {
+        if (list.open === true) {
+            setHeight(height + 1)
+        }
+    }, [items.length]);
+
+
     const [modalItemVisible, setModalItemVisible] = useState(false);
     const [modalListVisible, setModalListVisible] = useState(false);
 
     const HandleAnimation = (event) => {
-        LayoutAnimation.configureNext(LayoutAnimation.create(300, 'easeInEaseOut', 'opacity'))
+        LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity'))
         setHeight(event.nativeEvent.layout.height)
+        // console.log("height changed: ", event.nativeEvent.layout.height)
     }
 
     const removeList = () => {
@@ -76,9 +88,9 @@ export default React.memo((props) => {
                 < WrapperList listLength={items.length} onLayout={(event) => { HandleAnimation(event) }}>
                     {list.open &&
                         <FlatList style={{ width: '100%' }}
-                            initialNumToRender={10}
+                            initialNumToRender={5}
-                            maxToRenderPerBatch={10}
+                            maxToRenderPerBatch={5}
-                            ListFooterComponent={filteredItems.length === 0 && <ListSubtitle style={{ fontSize: 22 }} >Add a grocery</ListSubtitle>}
+                            ListFooterComponent={filteredItems.length === 0 && <ListSubtitle style={{ fontSize: 22, width: '100%', height: 30, alignSelf: 'center' }} >Add a grocery</ListSubtitle>}
                             data={filteredItems}
                             renderItem={({ item }) => (
                                 <ListedItem item={item} setVisible={setModalItemVisible} />

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

@@ -52,7 +52,9 @@ export const WrapperRight = styled(View)`
 `
 export const ListTitle = styled(Text)`
     /* overflow-wrap: break-word; */
+    color: ${({ theme }) => theme.colors.textW3};
     font-size: 20px;
+    font-weight: bold;
 `
 export const ListSubtitle = styled(Text)`
     /* overflow-wrap: break-word; */

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

@@ -35,6 +35,7 @@ export const WrapperButton = styled(TouchableOpacity)`
     width:  40px;
 `
 export const TextProductName = styled(Text)`
+    /* font-family: sansation_regular; */
     /* word-wrap: break-word; */
     /* word-break: break-all; */
     margin: 2px 0px 0px 8px;

src/components/GroceryList/products/ProductButtons.js

@@ -6,8 +6,14 @@ import { WrapperButtons, WrapperAddProduct, WrapperUpload, UploadInput, WrapperD
 //redux
 import { useDispatch, useSelector } from 'react-redux'
 import { productsRemoved, productsUploaded } from '../../../redux/slices/groceryList/productsSlice'
-import { Alert } from 'react-native'
+import { Alert, LayoutAnimation, Platform, UIManager } from 'react-native'
 
+if (
+    Platform.OS === "android" &&
+    UIManager.setLayoutAnimationEnabledExperimental
+) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+}
 
 const UploadProductsButton = (props) => {
     const dispatch = useDispatch()
@@ -82,12 +88,21 @@ const RemoveProductsButton = (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 (
         <>
             {/* <UploadProductsButton visible={visible} />
             <DownloadProductsButton visible={visible} /> */}
             <RemoveProductsButton visible={visible} />
-            <WrapperButtons toggle={visible} onPress={() => setVisible(!visible)}>
+            <WrapperButtons toggle={visible} onPress={toggleAnimation}>
                 <MenuIcon />
             </WrapperButtons >
         </>
@@ -99,7 +114,7 @@ export const AddProductButton = (props) => {
     const closeModal = () => setVisible(false)
     return (
         <>
-            <WrapperAddProduct toggle={visible} onPress={() => setVisible(true)}>
+            <WrapperAddProduct toggle={visible} onPress={()=>setVisible(!visible)}>
                 <PlusIcon />
             </WrapperAddProduct>
             <ModalAddProduct visible={visible} closeModal={closeModal} />

src/components/modals/styles/modal.js

@@ -43,7 +43,7 @@ export const VerticalSeperator = styled(View)`
 export const InputSmall = styled(TextInput)`
     border-bottom-color: ${props => props.theme.colors.primary + 'aa'};
     border-bottom-width: 1px;
-    font-size: ${({ theme }) => theme.fontSizes.fontS}px;
+    font-size: ${({ theme }) => theme.fontSizes.fontM}px;
     
 
     width: 50%;
@@ -53,7 +53,7 @@ export const InputSmall = styled(TextInput)`
 export const Input = styled(TextInput)`
     border-bottom-color: ${props => props.theme.colors.primary + 'aa'};
     border-bottom-width: 1px;
-    font-size: ${({ theme }) => theme.fontSizes.fontS}px;
+    font-size: ${({ theme }) => theme.fontSizes.fontM}px;
     color: ${props => props.theme.colors.textW2};
     
 
@@ -83,17 +83,23 @@ export const ModalDescription = styled(Text)`
     padding: 2px;
 `
 
-const Wrong = () => <MaterialCommunityIcons name="asterisk" color={theme.colors.error + 'aa'} size={theme.fontSizes.fontS} />
 
-export const IconWrong = styled(Wrong)`
+export const IconWrong = styled(MaterialCommunityIcons).attrs({
-    margin-left: -10px;
+    name:"asterisk"
+})`
+    color: ${props => props.theme.colors.error + 'aa'};
+    font-size: 12px;
+
+    margin-left: -12px;
     margin-top: -10px;
 `
 
-const Check = () => <MaterialCommunityIcons name="check" color={theme.colors.primary} size={theme.fontSizes.fontM}/>
+export const IconCheck = styled(MaterialCommunityIcons).attrs({
-
+    name:"check"
-export const IconCheck = styled(Check)`
+})`
-    margin-left: -15px;
+    color: ${props => props.theme.colors.primary};
+    font-size: 24px;
+    margin-left: -24px;
     margin-top: -3px;
 `
 

src/styles/theme.js

@@ -92,7 +92,7 @@ const theme = {
         },
     fontSizes: {
         fontS: 16,
-        fontM: 24,
+        fontM: 20,
         fontL: 32,
         fontXL: 64,
     },