SafeAreaView doesn't include tab-bar? Expo, Expo Router

19 Views Asked by At

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...

0

There are 0 best solutions below