Additional space added in modal

[tarekhassan410]

Action sheet shows additional space in bottom of it. It is random,one time it shows and the next time it doesn't.

[ammarahm-ed]

Hi, this happens on iOS or android? Also which version of the sheet are you using?

[tarekhassan410]

I am using Android, version 0.8.7. Also, on downgrading to 0.8.0 it works fine.

[TheAhmadSami]

Did you find a solution?!, I have the same problem with version 0.8.8 using android 11 Sometimes I get padding at the bottom of the modal when using safeArea!! @tarekhassan410 @ammarahm-ed

[guygolanIL]

happens to me aswell on android (action sheet v: ^0.8.7)

[guygolanIL]

just rolled back a few versions. this started to occure on 0.8.4 @ammarahm-ed but sadly i cant remain in those builds since those have issues with react-navigation so a workaround would be appreciated

[guygolanIL]

also, setting a custom height following seems to mitigate that <ActionSheet id={props.sheetId} containerStyle={{ height: '15%' }}

[ammarahm-ed]

Try v0.8.9

[tarekhassan410]

It is still happening, less often but still happening

[ammarahm-ed]

Have you tried v0.8.10? Also are you testing on emulator or real device?

[tarekhassan410]

I am testing on emulator. It is still happening. It is better now but still happening.

[guygolanIL]

testing 0.8.10 on an android device and could not reproduce this bug

[younes0]

I encounter this bug the getPaddingBottom() is responsible for this extra padding, it returns StatusBar.currentHeight. Why would you have bottom padding based on StatusBar.currentHeight ?

[ammarahm-ed]

@younes0 which version are you on?

[younes0]

@ammarahm-ed latest: 0.8.17 This behavior was found on Android, not on web. I didn't test on iOS

[ammarahm-ed]

Can you share what your sheet is like?what styles & props you have added etc, so i can reproduce it locally 🤔@younes0

[younes0]

@ammarahm-ed I use Expo btw I emoved all props and used a clean setup. But let me try with a blank expo template soon.

[younes0]

@ammarahm-ed This behavior happens since 0.8.4 Check this snack, run on Android, and simply change the version to 0.8.3 and 0.8.4: https://snack.expo.dev/@younes0/github.com-ammarahm-ed-react-native-actions-sheet:expo-example

Checked https://github.com/ammarahm-ed/react-native-actions-sheet/compare/v0.8.3...v0.8.4 But can't figure out.

[ammarahm-ed]

@younes0 have you tried with the latest version, it's the same?

[younes0]

@ammarahm-ed yes it's the same. also note that the backdrop has the same issue (the overlay starts after this extra bottom padding)

[ammarahm-ed]

@younes0 Try 0.8.20. I fixed the problem now I think

[younes0]

@ammarahm-ed I've just updated the snack with 0.8.20 and the problem is still there

[younes0]

btw Problem happens with my real device (oneplus 10t) + emulator (pixel 6)

[ammarahm-ed]

After the changes i made, i am not able to reproduce it in your snack example. Before it was adding bottom padding 24 and it was bigger than usual with the Text. 🤔

[younes0]

@ammarahm-ed I'm not sure to understand what you mean by reproducing the snack example: the snack has been updated so you can try it. There's no padding added or anything.

[ammarahm-ed]

@younes0 Try 0.8.21. The issue is related to this problem https://github.com/facebook/react-native/issues/23693#issuecomment-674644381 however I think I fixed it this time. After testing real device the issue was still there.

[younes0]

Almost @ammarahm-ed ! There's no extra space this time, but it seems that there is like a negative margin, you can see that the content is cropped: https://user-images.githubusercontent.com/886042/218531748-26f9b600-771e-46b2-8bbe-11fe26f42ba2.jpg

[younes0]

@ammarahm-ed just realized with this new version, if you add useBottomSafeAreaPadding , it does the same incorrect behavior of before

[ammarahm-ed]

Then keep that prop disabled if you don't need padding from bottom. Or manually add some padding when needed.

You can simply add some safe padding at bottom i think. I will see to it again but you need to somehow diff between devices with soft buttons and those that use gestures Using some library that gives you bottom nav bar height.

[ammarahm-ed]

Maybe try this and add padding to container style on bottom based on nav bar height. https://github.com/ConnectyCube/react-native-android-navbar-height

[baatten]

I just updated to X.21 and I see padding in the bottom?

[HKH01]

My workaround is below:

import { Platform, StatusBar, useWindowDimensions } from 'react-native'
import { initialWindowMetrics, useSafeAreaInsets } from 'react-native-safe-area-context'

function useSafeSheetBottom() {
  const windowHeight = useWindowDimensions().height

  let mb = useSafeAreaInsets().bottom
  if (Platform.OS === 'android') {
    const sh = StatusBar.currentHeight
    if (Math.floor(initialWindowMetrics.frame.height) === Math.floor(windowHeight)) {
      return -sh
    }
    return sh
  }
  return mb
}

and give a margin-bottom from useSafeSheetBottom() to ActionSheet's direct child element.

[kockok]

I also found extra bottom space in version 0.8.21 iOS physical device.

Adding useBottomSafeAreaPadding={false} won't help.

[mehdinourollah]

It looks like the useBottomSafeAreaPadding={false} doesn't work on iOS on version 0.8.21 ...

[moesalih]

has anyone figured out the cause of the randomness? why is the behavior inconsistent? i'm on iOS on v0.8.28

[baatten]

I'm on version 0.8.29 and also still have the issue.

[mixmaker]

Is this related to the issue I'm facing? As you can see the sheet doesn't draw under the navbar

[carlosedof]

Is this related to the issue I'm facing? As you can see the sheet doesn't draw under the navbar

I'm experiencing the same issue

[jonxssc]

Same problem here since i upgraded react native from 0.69.9 to 0.71.7 and expo from ~46.0.21 to ~48.0.15. Currently using this packages version ^0.8.29. On every Actionsheet on ios real device and simulator is a space in the size of the phones status bar on the bottom that i cant get rid of, which pushes on full size actionsheet the handler under the actionsheet.

The actionsheet containerstyle has the background color green and my content in the actionsheet has the background color red, this shows that the problem is still there on newest react native/expo and package versions.

[jonxssc]

Turns out, 0.8.3 is the last possible version without the spacing so i am using this. As you can see in this snack (newest package version) the https://snack.expo.dev/@jonassc/github.com-ammarahm-ed-react-native-actions-sheet:expo-example on an ios device it has the spacing on bottom:

On Android it looks like this:

The only Platform it works currectly is on Web:

[henrhie]

Downgraded to 0.8.3 and bug goes away

[jonxssc]

For anyone searching for a solution, removing the code i pointed at in https://github.com/ammarahm-ed/react-native-actions-sheet/pull/328 this request, should fix the weird spacing, tested it on version 0.8.29

[PopBot]

Thanks so much @jonxssc. Was pretty puzzled on this, but glad we found a fix.

[BasitAli]

@ammarahm-ed Was this resolved? I still see this on latest version 0.9.2.

[BasitAli]

My workaround is below:

import { Platform, StatusBar, useWindowDimensions } from 'react-native'
import { initialWindowMetrics, useSafeAreaInsets } from 'react-native-safe-area-context'

function useSafeSheetBottom() {
  const windowHeight = useWindowDimensions().height

  let mb = useSafeAreaInsets().bottom
  if (Platform.OS === 'android') {
    const sh = StatusBar.currentHeight
    if (Math.floor(initialWindowMetrics.frame.height) === Math.floor(windowHeight)) {
      return -sh
    }
    return sh
  }
  return mb
}

and give a margin-bottom from useSafeSheetBottom() to ActionSheet's direct child element.

This workaround works partially. I need a background color on the sheet which doesn't apply to the white area even if the margin is applied on the container style.