feat: ExpenseItem on Home Screen

app/index.tsx

@@ -1,5 +1,9 @@
 import { StyleSheet, View, Text } from 'react-native';
-import {useThemeColor} from "../hooks/hooks";
+import { useThemeColor } from "../hooks/hooks";
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { ExpenseItem } from '../components';
+import { FlatList } from 'react-native-gesture-handler';
+import { ExpenseItemProps } from '../components/home/expenseItem/expenseItem';
 
 export default function Page() {
 
@@ -15,11 +19,33 @@ export default function Page() {
             fontWeight: "bold"
         }
     });
+   
+    const data = [
+        {id:"1",category: "Category 1", color: "blue", date:"01.01.2023 18:00", title:"Super fancy sepnding with long name that will not display", value: "€ 30,00"},
+        {id:"2",category: "Category 2", color: "red", date:"01.01.2023 18:00", title:"Super fancy sepnding", value: "€ 30,00"},
+        {id:"3",category: "Category 3", color: "green", date:"01.01.2023 18:00", title:"Super fancy sepnding", value: "€ 30,00"},
+        {id:"4",category: "Category 4", color: "orange", date:"01.01.2023 18:00", title:"Super fancy sepnding", value: "€ 30,00"},
+        {id:"5",category: "Category 1", color: "blue", date:"01.01.2023 18:00", title:"Super fancy sepnding", value: "€ 30,00"},
+        {id:"6",category: "Category 2", color: "red", date:"01.01.2023 18:00", title:"Super fancy sepnding with long name that will not display", value: "€ 30,00"},
+        {id:"7",category: "Category 3", color: "green", date:"01.01.2023 18:00", title:"Super fancy sepnding", value: "€ 30,00"},
+        {id:"8",category: "Category 4", color: "orange", date:"01.01.2023 18:00", title:"Super fancy sepnding", value: "€ 30,00"},
+        {id:"9",category: "Category 1", color: "blue", date:"01.01.2023 18:00", title:"Super fancy sepnding", value: "€ 30,00"},
+        {id:"10" ,category: "Category 2", color: "red", date:"01.01.2023 18:00", title:"Super fancy sepnding", value: "€ 30,00"},
+        {id:"11" ,category: "Category 3", color: "green", date:"01.01.2023 18:00", title:"Super fancy sepnding", value: "€ 30,00"},
+        {id:"12" ,category: "Category 4", color: "orange", date:"01.01.2023 18:00", title:"Super fancy sepnding", value: "€ 30,00"},
+    ]
 
 
     return (
-        <View style={styles.container}>
+        <SafeAreaView>
-            <Text style={styles.text}>Home</Text>
+            <FlatList
-        </View>
+            data={data}
-        );
+            renderItem = {({item}) => <ExpenseItem category={item.category} color={item.color} date={item.date} title={item.title} value={item.value}/>}
+            keyExtractor={item => item.id}
+            ItemSeparatorComponent={()=><View style={{marginVertical: 5}}></View>}
+            >
+
+            </FlatList>
+        </SafeAreaView>
+    );
 }

components/common/customCard/CustomCard.tsx

@@ -0,0 +1,23 @@
+import { View, Text, StyleSheet } from 'react-native'
+import React from 'react'
+import { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'
+import { useThemeColor } from '../../../hooks/hooks'
+import { SHADOWS } from '../../../constants/theme'
+
+export default function CustomCard(props : ViewProps) {
+  return (
+    <View style={[styles.container, SHADOWS.light, props.style]}>
+      {props.children}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container:{
+    flexDirection: "row",
+    alignItems: "stretch",
+    alignContent: "space-between",
+    borderRadius: 20,
+    marginHorizontal: 10
+  }
+})

components/home/expenseItem/expenseItem.tsx

@@ -0,0 +1,61 @@
+import { View, Text, StyleSheet, ColorValue } from 'react-native'
+import React from 'react'
+import { useThemeColor } from '../../../hooks/hooks';
+import  CustomCard from "../../common/customCard/CustomCard";
+import { SIZES } from '../../../constants/theme';
+
+export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: string, value : string}
+export default function ExpenseItem(itemProps : ExpenseItemProps) {
+  const textColor = useThemeColor("primaryText");
+  const backgroundColor = useThemeColor("backgroundColor")
+  return (
+      <CustomCard>
+        <View style={[styles.colorTip, {backgroundColor: itemProps.color}]}></View>
+        <View style={[styles.textSection, {backgroundColor: backgroundColor}]}>
+          <Text style={{
+            fontSize: SIZES.normal,
+            color: textColor
+          }} numberOfLines={1}>{itemProps.category}</Text>
+          <Text style={{
+            fontSize: SIZES.large,
+            color: textColor
+          }} numberOfLines={1}>{itemProps.title}</Text>
+          <Text style={{
+            fontSize: SIZES.small,
+            color: textColor
+          }} numberOfLines={1}>{itemProps.date}</Text>
+        </View>
+        <View style={[styles.valueSection, {backgroundColor: backgroundColor}]}>
+          <Text style={{
+            fontSize: SIZES.xxLarge,
+            color: textColor
+          }} numberOfLines={1}>{itemProps.value}</Text>
+        </View>
+       
+      </CustomCard>
+     
+  )
+}
+
+const styles = StyleSheet.create({
+  colorTip: {
+    width: 20,
+    borderTopLeftRadius: 20,
+    borderBottomLeftRadius: 20,
+  },
+  
+  textSection: {
+    flexDirection: "column",
+    alignContent: "space-between",
+    alignItems:"flex-start",
+    paddingLeft: 10,
+    flex:1,
+    alignSelf: "stretch",
+    paddingVertical: 5
+  },
+  valueSection: {
+    justifyContent:"center",
+    borderTopRightRadius: 20,
+    borderBottomRightRadius: 20,
+  }
+})

components/index.jsx

@@ -0,0 +1,7 @@
+//home
+import ExpenseItem from "./home/expenseItem/expenseItem"
+
+export {
+  ExpenseItem
+}
+

constants/theme.ts

@@ -0,0 +1,18 @@
+const SIZES = {
+  small: 12,
+  normal: 17,
+  large: 20,
+  xxLarge: 30
+}
+
+const SHADOWS = {
+  light: {
+    shadowColor: "#ADB7C3",
+    shadowRadius: 20,
+    elevation: 10,
+    shadowOpacity: 0.6,
+    shadowOffset: { width: 1, height: 1 }
+  }
+}
+
+export {SIZES, SHADOWS}