BottomSafeAreaPadding

[idylmz]

I am using scrollview in my action sheet. I am loading user's camera roll and as they press a button they are loading more photos at the end of their screen. When this roll becomes covering the whole screen, the safe area paddings are not applied it seems. I think I am doing everything according to the documentation.

In this demonstration, I have loaded several lines to my screen. As you can see scrollview works, but there is an overflow on the screen which scrollview cannot seems to handle.

The overflow area is actually larger than it seems. I have tested that I have 2 more lines under it. So the lost area is really huge.

actionsheet_scroll.webm

My package.json

"dependencies": {
    "@invertase/react-native-apple-authentication": "^2.3.0",
    "@react-native-async-storage/async-storage": "^1.23.1",
    "@react-native-camera-roll/camera-roll": "^7.7.0",
    "@react-native-firebase/analytics": "^19.2.2",
    "@react-native-firebase/app": "^19.2.2",
    "@react-native-firebase/auth": "^19.2.2",
    "@react-native-firebase/crashlytics": "^19.2.2",
    "@react-native-firebase/messaging": "^19.2.2",
    "@react-native-firebase/perf": "^19.2.2",
    "@react-native-google-signin/google-signin": "^11.0.1",
    "@react-navigation/bottom-tabs": "^6.5.20",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "@reduxjs/toolkit": "^2.2.3",
    "axios": "^1.6.8",
    "formik": "^2.4.6",
    "react": "18.2.0",
    "react-native": "0.74.1",
    "react-native-actions-sheet": "^0.9.3",
    "react-native-config": "^1.5.1",
    "react-native-dropdown-select-list": "^2.0.5",
    "react-native-fast-image": "^8.6.3",
    "react-native-gesture-handler": "^2.16.2",
    "react-native-get-location": "^4.0.1",
    "react-native-get-random-values": "^1.11.0",
    "react-native-google-mobile-ads": "^13.2.1",
    "react-native-image-crop-picker": "^0.41.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-keychain": "^8.2.0",
    "react-native-permissions": "^4.1.5",
    "react-native-safe-area-context": "4.10.1",
    "react-native-screens": "^3.31.1",
    "react-native-select-dropdown": "^4.0.1",
    "react-native-splash-screen": "^3.3.0",
    "react-native-svg": "^15.2.0",
    "react-native-swipe-list-view": "^3.2.9",
    "react-native-swiper": "^1.6.0",
    "react-native-toast-message": "^2.2.0",
    "react-native-vector-icons": "^10.1.0",
    "react-native-view-shot": "^3.8.0",
    "react-native-webview": "^13.10.0",
    "react-redux": "^9.1.2",
    "uuid": "^9.0.1",
    "yup": "^1.4.0"
  },

My implementation of ActionSheet

<ActionSheet
      gestureEnabled={true}
      routes={routes}
      safeAreaInsets={useSafeAreaInsets()}
      enableRouterBackNavigation={true}
      initialRoute="add"
    />

My implementation of the scrollview in the page

<ScrollView contentContainerStyle={styles.imageContainer}>
        {images.map((image, index) => (
          <TouchableOpacity key={index} onPress={() => selectPhoto(index)}>
            <FastImage
              style={[
                styles.imagePlaceholder,
                image.selected && styles.selectedImage,
              ]}
              resizeMode="contain"
              source={{ uri: image.uri }}
            />
          </TouchableOpacity>
        ))}
      </ScrollView>

ScrollView is imported from this library. I have tried React Native scrollview, safearea scrollview etc.. but nothing changes.

import { useSheetRouter, ScrollView } from 'react-native-actions-sheet';

[idylmz]

There is an action sheet which I display just a bunch of text (privacy policy etc..) in a scrollview. In that page I still have the same problem and fixed it by giving a marginBottom: 40px to the scrollview of actions-sheet library. But in this case, that is not working. Not even for 150 px.

[idylmz]

It turns out, the reason is, I have some other components outside of scrollview is the reason why I couldn't get the height right.

When I put everything outside of scrollview in StickyHeaderComponent, then the problem solved. I don't know if it's really a bug. I don't see any documentation dictates me not to put anything outside of scrollview scope.