How to make Bottom Tabs Navigator tab bar not to hide content from View

I have a nested Navigator built with a Bottom Tabs Navigator, which also contains a Stack Navigator set as initial route.
The problem is that the main Screen has a View with a FlatList inside, among other components.

When scrolling, the last item (or the content located at most bottom of this view) is always hidden behind the navigator's tabbar, as can be seen in the following screenshot

Is there any way to adjust this, without hiding the tabbar? I'm thinking of creating a constant TABBAR_HEIGHT and assigning this to the main View's style like style={{marginBottom:TABBAR_HEIGHT}} but I think this is a dirty way to solve this, right?

PS: I've tried using the following alternatives (without luck)

1. useSafeAreaInsets() hook
2. Using import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; then using SafeAreaProvider wrapping the TabNavigator and using SafeAreaView as main View in MainScreen

Thanks for any tip you can give me

If you're using react-navigation and have built a custom bottom tab, make sure the bottom tab is NOT absolutely positioned (position: "absolute"). Absolutely positioning the bottom tab will free up the space behind it in the container and will let components to render in that space.