SafeAreaView is not working inside modal screen

Question

I have a modal screen (presentation: 'modal') and inside it I have a scrollable FlatList. The problem is that I cannot achieve spacing at the bottom together with transparent bottom safe area. I use SafeAreaView from react-native-safe-area-context.

I have tried many solutions and non actually worked. So far I have tried:

1. Wrapping screen content with SafeAreaView;
2. Wrapping FlatList with SafeAreaView;
3. Adding style={ { paddingBottom: 50 } } to FlatList;
4. Adding contentContainerStyle={ { paddingBottom: 50 } } to FlatList;
5. Adding ListFooterComponent={ <SafeAreaView edges={ ['bottom'] } forceInset={ { bottom: 'always' } } /> } to FlatList;
6. Also tried using ScrollView instead of FlatList.

Screenshots:

I either have a scrollbar to the bottom of the screen, but listing has correct spacing:

OR

have a margin at the bottom and then the scrollbar looks good (it scrolls to the red line):

If I compare it to native iOS applications, they behave exactly how I want- scrollbar is scrolling to the safe area and bottom are is transparent when I scroll:

Screen component:

return (
        <SafeAreaView forceInset={ { top: 'never', bottom: 'always' } }>
            <View style={ styles.container }>
                <FlatList
                    style={ { marginBottom: 0 } }
                    // showsVerticalScrollIndicator={ false }
                    // contentInsetAdjustmentBehavior="automatic"
                    numColumns={ 4 }
                    // ListFooterComponent={ <SafeAreaView edges={ ['bottom'] } mode="margin" forceInset={ { bottom: 'always' } } /> }
                    // contentInset={ { bottom: 1 } }
                    // contentContainerStyle={ [{paddingBottom: 30 }] }
                    data={ [] }
                    renderItem={ ({ item }) => {
                        return renderCategory(item);
                    } }
                />

            </View>
        </SafeAreaView>
    );

Navigator component:

return (
        <Stack.Navigator initialRouteName="DashboardStack">
            <Stack.Group screenOptions={ {
                headerLargeTitle: false,
                headerShown: true,
                headerShadowVisible: false,
                presentation: 'modal'
            } }>
                <Stack.Screen
                    name="CategoryModal"
                    component={ CategoryModal }
                    options={ {
                        title: 'Categories',
                        contentStyle: {
                            backgroundColor: '#ffffff'
                        }
                    } }
                />
            </Stack.Group>
        </Stack.Navigator>
    );