rawalcher/interaktive-systeme
Archived
1
0
Fork 0
Code Issues 5 Pull requests 2 Projects Releases 14 Packages Wiki Activity Actions

feat: ExpenseItem on Home Screen

Browse source
This commit is contained in:
Jakob Stornig 2023-12-04 01:59:34 +01:00
parent 0f9783c292
commit da58edc1da
5 changed files with 140 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

36
app/index.tsx
View file

@ -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}>
<Text style={styles.text}>Home</Text>
</View>
);
<SafeAreaView>
<FlatList
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>
);
}