[v4] Text is cropped for buttons inside bottomsheet on IOS only

[kav]

Bug

Buttons appearing inside a bottom sheet (on IOS) get cropped off. This behavior is random and does not occur every time, the best way to reproduce is to constantly refresh the app. This happens in the simulator and on my ios device.

Another example:

Environment info

Library Version @gorhom/bottom-sheet 4.6.0 react-native 0.74.2 react-native-reanimated 3.10.1 react-native-gesture-handler 2.16.1

Steps To Reproduce

1. Create a simple bottomsheet from https://gorhom.github.io/react-native-bottom-sheet/usage
2. Add a button
3. Add the following style to the content container:

  contentContainer: {
    flex: 1,
    alignItems: 'center',
  }

4. Continue refreshing the app until the text gets cropped off. E.g.

Expected behavior:

Text does not get cut off:

Reproducible sample code

1. Open https://snack.expo.dev/@jeannei91/bottom-sheet-cropped-button
2. Switch to the ios view
3. Reload the app until the button is cropped

Note this was also reported in 2021 ( https://github.com/gorhom/react-native-bottom-sheet/issues/645 ) but the issue was closed And again in 2022 https://github.com/gorhom/react-native-bottom-sheet/issues/1218 but again the issue was closed

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[kav]

Still a problem.

[ArseniiLyzenko]

+1 victim of this bug

[Darnell-Chen]

From my tests, it only appears to be the case in some scenarios. My solution was to just use another view instead of since it seems to be a problem within that specific View component.

import React, { useCallback, useMemo, useRef } from 'react';
import { View, Text, StyleSheet, Button, TextInput } from 'react-native';
import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet';
import { ScrollView } from 'react-native-gesture-handler';

const ManualForm = () => {
  // ref
  const bottomSheetRef = useRef<BottomSheet>(null);

  // callbacks
  const handleSheetChanges = useCallback((index: number) => {
    console.log('handleSheetChanges', index);
  }, []);

  return (
    <View style={styles.container}>
      <BottomSheet
        ref={bottomSheetRef}
        onChange={handleSheetChanges}
        snapPoints={['5%', '25%', '50%', '75%', '90%']}
      >
        <BottomSheetView style={styles.contentContainer}>
          <Button title="a Button"/>
        </BottomSheetView>

        <View>
          <Button title="In Regular View"/>
        </View>
        <ScrollView>
        <Button title="In ScrollView"/>
        </ScrollView>
      </BottomSheet>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: 'grey',
  },
  contentContainer: {
    flex: 1,
    alignItems: 'center',
  },
  textInput: {
    borderColor: 'lightgray',
    borderWidth: 2,
    padding: 5,
    fontSize: 20
  }
});

export default ManualForm;

In the example above, neither ScrollView nor View exhibit the same sort of issue. It might also be possible to not wrap the items with a View component.

*** This was tested on Expo Go

[Episodex]

I have the same problem still on 4.6.4. Changing BottomSheetView to View doesn't seem to do anything in my case. It's only on iOS and sometimes it crops just one button, sometimes more. It's kind of a show stopper unfortunately.

Edit: I noticed that v4 is not maintained anymore, so I installed 5.0.0-alpha.11 instead. The problem persisted, but when I changed enableDynamicSizing to true (and added back BottomSheetView) it now works perfectly.