React-native-reanimated-bottom-sheet: Sometimes BottomSheet doesn't showing

[Metallistener]

Sometimes BottomSheet doesn't showing, I think it happens because of conflict with react-native-maps. When I build release APK and install it on Android, when you open application first time then bottom sheet doesn't show but if you close and reopen application then bottom sheet appears. Had anyone this problem?

[NickCWilkins]

I haven't attempted to repro in release, but I've been seeing this every now and again while developing my app. It's slightly unsettling...

[Metallistener]

I haven't attempted to repro in release, but I've been seeing this every now and again while developing my app. It's slightly unsettling...

Yep, you're right it happens with me in debug mode too(

[zmnv]

Have the same in iOS. (Component is navigation screen)

Every new launch app bottom sheet doesn't show.

bottomSheetRef {current: null}

It appears only Refresh on debug mode. But in production you have not refresh.

[zmnv]

"react": "16.12.0",
"react-native": "0.61.5",
"react-native-reanimated": "1.4.0",
"react-native-gesture-handler": "1.5.1",
"reanimated-bottom-sheet": "1.0.0-alpha.18",

no expo

[zmnv]

There is problem with snapPoints prop! From documentation:

E.g. [300, 200, 0]. Points for snapping of bottom sheet coomponent. 
They define distance from bottom of the screen. 
Might be number or percent (as string e.g. '20%') for points 
or percents of screen height from bottom.

doesn't work in iOS first launch with snapPoints=['50%', '100%', 0],
but it works with only numbers like snapPoints=[300, 500, 0].

Looks like something doesn't know what is 'device height' when you open app first time on iOS.

[zmnv]

Problem not actually in snapPoints prop. It's about Dimensions.get('window')

Look at this:
https://github.com/osdnk/react-native-reanimated-bottom-sheet/blob/master/src/index.tsx#L125

I just add

console.log('HEIGHT!!', screenHeight);

after line 125 to see value in screenHeight.

First launch app in iOS:

So, I go to module file index.tsx in node_modules and made some changes to test.

Don't showing first time with:

const { height: screenHeight } = Dimensions.get('window')

Show first time with:

const platformDimension: "screen" | "window" = Platform.select({ ios: 'screen', android: 'window'});
const { height: screenHeight } = Dimensions.get(platformDimension);

or

const platformDimension = Platform.OS === 'ios' ? 'screen' : 'window';
const { height: screenHeight } = Dimensions.get(platformDimension);

First launch app in iOS after:

---

When it happens

When Dimensions.get('window').height returns 0 on iOS................

// index.js in my app
console.log('DIMENSIONS', Dimensions.get('window'), Dimensions.get('screen'));

// logs
window = {fontScale: 1, height: 0, width: 0, scale: 2} 
screen = {fontScale: 1, height: 896, width: 414, scale: 2}

[zmnv]

Last News!

When Dimensions.get('window').height returns 0 – it's problem in AppDelegate.m with RNSplashScreen.

https://github.com/crazycodeboy/react-native-splash-screen#third-stepplugin-configuration

my code was:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [RNSplashScreen show]; // here

    // ...other code
    return YES;
}

worked:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code

    [RNSplashScreen show];  // here
    // or
    //[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView];
    return YES;
}

after that I have normal window.height value, not 0.

console.log('DIMENSIONS', Dimensions.get('window'), Dimensions.get('screen'));

// logs
window = {fontScale: 1, height: 896, width: 414, scale: 2}
screen = {fontScale: 1, height: 896, width: 414, scale: 2}

---

Please, add yellowbox warning something like:

const { height: screenHeight } = Dimensions.get('window');
if (!screenHeight && __DEV__) console.warn('[reanimated-bottom-sheet] Cannot detect window height ') .

[piotrekjeremicz]

I have the same problem on Android.

The Bottom Sheet is on top of the react-native-maps that fill whole the screen. Most of the time it works but sometimes the bottom sheet is not showing up.

Is there any fix for that?

[slaci]

I had the same problem on android, but as I see there is a fix for that in the master branch. Its not too easy to use master because of the build steps, but it indeed fixes the problem (at least for me).

[EstefanHu]

Probably not a full fix, however I seem to have solved this problem by adding a guard to the bottom sheet rendering.

Its seems to be a problem when combining the react-native-bottom-sheet, react-native-safe-area-context and react-native-maps modules where the safe area insets aren't correctly measured before rendering the bottom sheet. Thus, by doing something like

return bottomInset && <BottomSheet ref={initialBS}...

I was able to correctly determine the inset and render after such was measured.

For those who are curious how I did this, I used expo-device to determine model and added 34 to bezelless and 30 to bezeled devices initial snappoint. I assigned that to the bottomInset variable and had the component rerender when completed.

If anyone has a better solution to this work around please let me know.