My Screen-Component is rendered with the right heigt, stopping at the top of the tabbar. One of the Child elements (Flatlist) gets rendered with a larger height, and gets behind the tabbar.
I am trying to use a Flatlist with pagingEnabled to show the Elements one by one.
However when I scroll on the list, it doesn't 'page' one Element, but about 1.7. I found out that although I am using <SafeAreaView>, the list is behind the Tabbar, which is not optional because the pagingEnabled uses the lists height to determine an elements height.
Screen in question:
<View className="relative bg-[#232323] h-full overflow-none">
<SafeAreaView>
<View className="relative bg-red-500 h-full">
<View className=" bg-[#232323] rounded-b-xl">
</View>
<FlatList
pagingEnabled
data={data}
renderItem={renderDay}
initialScrollIndex={data.currWeek}
getItemLayout={getItemLayout}
initialNumToRender={1}
windowSize={3}
/>
</View>
</SafeAreaView>
</View>
_layout.tsx:
<SafeAreaProvider initialMetrics={initialWindowMetrics}>
<Tabs screenOptions={{headerShown: false}}>
<Tabs.Screen
name='index'
options={{
title: 'Timetable',
tabBarIcon: ({color}) => <FontAwesome size={28} name="table" color={color}/>,
}}
/>
<Tabs.Screen
name='courses'
options={{
title: 'Courses',
tabBarIcon: ({color}) => <FontAwesome size={28} name="table" color={color}/>,
}}
/>
</Tabs>
</SafeAreaProvider>
When I read the SafeAreaInsets the bottom-padding is only 34 Pixels... Anybody with a clue?
I had this Problem with the safeAreaView by rn, that's why I migrated to expo router, it said that it was implemented at default...