78 lines
No EOL
3.9 KiB
TypeScript
78 lines
No EOL
3.9 KiB
TypeScript
import { StyleSheet, View, Text, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
|
|
import { useThemeColor } from "../../../hooks/hooks";
|
|
import { SafeAreaView } from 'react-native-safe-area-context'
|
|
import { ExpenseItem, Plus, Welcome, SearchBar } from '../../../components';
|
|
import { FlatList, TextInput} from 'react-native-gesture-handler';
|
|
import { useRef, useState, useEffect } from 'react';
|
|
import React from 'react';
|
|
import { useRouter } from "expo-router"
|
|
|
|
export default function Page() {
|
|
const router = useRouter()
|
|
|
|
const [plusShow, setPlusShow] = useState(true);
|
|
const prevOffset = useRef(0);
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
text: {
|
|
color: useThemeColor("color"),
|
|
fontSize: 70,
|
|
fontWeight: "bold"
|
|
}
|
|
});
|
|
|
|
const profile = require("../../../assets/images/profile.jpg")
|
|
|
|
const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>)=>{
|
|
const currentOffset = event.nativeEvent.contentOffset.y >= 0 ? event.nativeEvent.contentOffset.y : 0
|
|
const isScrollingUp : boolean = currentOffset <= prevOffset.current;
|
|
const isTop : boolean = currentOffset === 0
|
|
prevOffset.current = currentOffset
|
|
setPlusShow(isScrollingUp || isTop)
|
|
}
|
|
|
|
const data = [
|
|
{id:"1",category: "Category 1", color: "blue", date:"01.01.2023 18:00", title:"1 Super fancy spending with long name that will not display", value: "€ 30,00"},
|
|
{id:"2",category: "Category 2", color: "red", date:"01.01.2023 18:00", title:"2 Super fancy spending", value: "€ 30,00"},
|
|
{id:"3",category: "Category 3", color: "green", date:"01.01.2023 18:00", title:"3 Super fancy spending", value: "€ 30,00"},
|
|
{id:"4",category: "Category 4", color: "orange", date:"01.01.2023 18:00", title:"4 Super fancy spending", value: "€ 30,00"},
|
|
{id:"5",category: "Category 1", color: "blue", date:"01.01.2023 18:00", title:"5 Super fancy spending", value: "€ 30,00"},
|
|
{id:"6",category: "Category 2", color: "red", date:"01.01.2023 18:00", title:"6 Super fancy spending with long name that will not display", value: "€ 30,00"},
|
|
{id:"7",category: "Category 3", color: "green", date:"01.01.2023 18:00", title:"7 Super fancy spending", value: "€ 30,00"},
|
|
{id:"8",category: "Category 4", color: "orange", date:"01.01.2023 18:00", title:"8 Super fancy spending", value: "€ 30,00"},
|
|
{id:"9",category: "Category 1", color: "blue", date:"01.01.2023 18:00", title:"9 Super fancy spending", value: "€ 30,00"},
|
|
{id:"10" ,category: "Category 2", color: "red", date:"01.01.2023 18:00", title:"10 Super fancy spending", value: "€ 30,00"},
|
|
{id:"11" ,category: "Category 3", color: "green", date:"01.01.2023 18:00", title:"11 Super fancy spending", value: "€ 30,00"},
|
|
{id:"12" ,category: "Category 4", color: "orange", date:"01.01.2023 18:00", title:"12 Super fancy spending", value: "€ 30,00"},
|
|
]
|
|
|
|
|
|
return (
|
|
<View style={{flex: 1}}>
|
|
{plusShow && <Plus onPress={()=>{
|
|
router.push("/(tabs)/home/addItem")
|
|
}}/>}
|
|
|
|
<FlatList
|
|
data={data}
|
|
ListHeaderComponent={
|
|
<>
|
|
<Welcome name="My Dude" image={profile} onPress={()=>console.log("hello")}></Welcome>
|
|
<SearchBar placeholder='Type to Search...'></SearchBar>
|
|
</>
|
|
}
|
|
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>}
|
|
onScroll={handleScroll}
|
|
scrollEventThrottle={20}
|
|
>
|
|
</FlatList>
|
|
</View>
|
|
|
|
);
|
|
} |