I'm using the @gorhom/bottom-sheet BottomSheetModal and trying to fit in a (BottomSheet)FlatList. The content overflows at the bottom and the FlatList is not scrollable.

I have tried the recommendations in other questions to use flex: 1 in all components within the hierarchy but it didn't change the behaviour. I've also tried to use pure react-native Stylesheet instead of nativewind, but this didn't help either.

The BottomSheetModal is within a reusable component like this:

export const BottomSheetModalWrapper = forwardRef(
  ({ children, snapPoints = [] }, ref) => {
    const renderBackdrop = useCallback(
      (props: BottomSheetBackdropProps) => (
        
      ),
      []
    );

    const insets = useSafeAreaInsets();

    return (
      
        
          {children}
        
      
    );
  }
);

The actual Modal with the BottomSheetFaltList looks like this:

      Select Currency
       index}
        renderItem={renderItem}
        ListHeaderComponent={
          
        }
        contentContainerClassName="flex-1 gap-2"
        initialNumToRender={20}
        maxToRenderPerBatch={20}
      />
    

The result looks like this (but should actually not overflow at the bottom):