fix: Welcome does not scroll

This commit is contained in:
Jakob Stornig 2023-12-06 11:33:52 +01:00
parent 9c319eeeda
commit 27d0d45129

View file

@ -1,4 +1,4 @@
import { StyleSheet, View, Text, NativeSyntheticEvent, NativeScrollEvent} from 'react-native'; import { StyleSheet, View, Text, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
import { useThemeColor } from "../hooks/hooks"; import { useThemeColor } from "../hooks/hooks";
import { SafeAreaView } from 'react-native-safe-area-context' import { SafeAreaView } from 'react-native-safe-area-context'
import { ExpenseItem, Plus, Welcome } from '../components'; import { ExpenseItem, Plus, Welcome } from '../components';
@ -34,34 +34,36 @@ export default function Page() {
} }
const data = [ 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:"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:"Super fancy sepnding", 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:"Super fancy sepnding", 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:"Super fancy sepnding", 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:"Super fancy sepnding", 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:"Super fancy sepnding with long name that will not display", 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:"Super fancy sepnding", 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:"Super fancy sepnding", 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:"Super fancy sepnding", 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:"Super fancy sepnding", 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:"Super fancy sepnding", 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:"Super fancy sepnding", 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 ( return (
<SafeAreaView style={{flex: 1}}> <SafeAreaView>
{plusShow && <Plus/>} {plusShow && <Plus/>}
<Welcome name="My User" image={profile} onPress={()=>console.log("hello")}></Welcome> {/* <Welcome name="My User" image={profile} onPress={()=>console.log("hello")}></Welcome> */}
<FlatList <FlatList
data={data} data={data}
ListHeaderComponent={<Welcome name="My User" image={profile} onPress={()=>console.log("hello")}></Welcome>
}
renderItem = {({item}) => <ExpenseItem category={item.category} color={item.color} date={item.date} title={item.title} value={item.value}/>} renderItem = {({item}) => <ExpenseItem category={item.category} color={item.color} date={item.date} title={item.title} value={item.value}/>}
keyExtractor={item => item.id} keyExtractor={item => item.id}
ItemSeparatorComponent={()=><View style={{marginVertical: 5}}></View>} ItemSeparatorComponent={()=><View style={{marginVertical: 5}}></View>}
onScroll={handleScroll} onScroll={handleScroll}
scrollEventThrottle={20} scrollEventThrottle={20}
style={{paddingBottom: 5}}
> >
</FlatList> </FlatList>