[v4] Dynamic bottom sheet height is random on iOS

[MatteoBuffo]

Hello. This is my code:

TestForBsm.tsx

const TestForBsm = ({}) => {

    /****************************************/
    /* Bottom sheet setup                   */

    // ref
    const bsmTestRef = useRef<BottomSheetModal>(null);
    // callbacks
    const handlePresentBsm = useCallback((bsmRef) => {
        bsmRef.current?.present();
    }, []);

    /****************************************/

    return (
        <>
            <Appbar.Header elevated>
                <Appbar.Content title={"Bsm test"}/>
            </Appbar.Header>

            <BottomSheetModalProvider>
                <ScreenWrapper>

                    <BsmTest
                        bsmRef={bsmTestRef}
                    />

                    <Button
                        onPress={() => handlePresentBsm(bsmTestRef)}
                    >
                        Click here to open BSM
                    </Button>

                </ScreenWrapper>

            </BottomSheetModalProvider>
        </>
    )
}

BsmTest.tsx

import React, {useCallback, useMemo} from 'react';
import {View,} from 'react-native';
import {IconButton, List, Text} from 'react-native-paper';
import {
    BottomSheetBackdrop,
    BottomSheetFlatList,
    BottomSheetModal,
    BottomSheetScrollView,
    BottomSheetView,
} from '@gorhom/bottom-sheet';
import {styles} from "../../styles";

const BsmTest = ({
                     bsmRef
                 }) => {


    // variables
    // const snapPoints = useMemo(() => ['50%', '80%'], []);
    const snapPoints = useMemo(() => ['50%'], []);
    // const snapPoints = useMemo(() => [], []);

    // callbacks
    const handleBsmDismiss = useCallback(() => {
        bsmRef.current?.dismiss();
    }, []);

    // renders
    const renderBackdrop = useCallback(
        props => (
            <BottomSheetBackdrop
                {...props}
                opacity={0.5}
                disappearsOnIndex={-1}
                appearsOnIndex={0}
                pressBehavior={"close"}
            />
        ),
        []
    );
    // renders
    const renderItem = ({item}) => {
        return (
            <List.Item {...item}/>
        )
    }


    return (
        <BottomSheetModal
            ref={bsmRef}
            index={0}
            // snapPoints={snapPoints}
            backdropComponent={renderBackdrop}
            enableDynamicSizing
        >
                <BottomSheetFlatList
                    data={[
                        {
                            title: "title1",
                            description: "description1",
                        },
                        {
                            title: "title2",
                            description: "description2",
                        },
                        {
                            title: "title3",
                            description: "description3",
                        },
                    ]}
                    renderItem={renderItem}
                />
        </BottomSheetModal>
    );
};

export default BsmTest;

I'm trying out the enableDynamicSizing prop and it's working fine in the code above.

Android

bsm_android_1.mp4

iOS

bsm_ios_1.MOV

Now, I would like to add a title section in my BottomSheetModal. So I add this codeblock before the BottomSheetFlatList:

<BottomSheetView style={{
        marginVertical: 6,
        marginHorizontal: 8,
        flexDirection: "row",
        alignItems: "center"
    }}>
        <View style={{flex: 1}}>
            <Text style={{
                fontSize: 20,
                fontWeight: "bold"
            }}>
                My title
            </Text>
        </View>
        <IconButton
            icon={"close"}
            size={30}
            onPress={() => handleBsmDismiss()}
        />
    </BottomSheetView>

What happens with this new codeblock is shown in the videos below.

Android: the Flatlist is not shown in its entirety.

bsm_android_2.mp4

iOS: the BSM height is random.

bsm_ios_2.MOV

To fix this I wrap the BottomSheetView and the BottomSheetFlatList in a BottomSheetScrollView.

Android: both the BSSheetView and the BSFlatList are shown correctly.

bsm_android_3.mp4

iOS: the previous issue still persists.

Any ideas on how to fix this?

Environment info

Library	Version
@gorhom/bottom-sheet	^4.5.1
react-native	0.71.8
react-native-reanimated	~2.14.4
react-native-gesture-handler	~2.9.0

Steps To Reproduce

1. Follow the code above.

Describe what you expected to happen:

1. I expect the iOS to behave the same way Android does.

Reproducible sample code

import React, {useCallback, useMemo} from 'react';
import {View,} from 'react-native';
import {IconButton, List, Text} from 'react-native-paper';
import {
    BottomSheetBackdrop,
    BottomSheetFlatList,
    BottomSheetModal,
    BottomSheetScrollView,
    BottomSheetView,
} from '@gorhom/bottom-sheet';
import {styles} from "../../styles";

const BsmTest = ({
                     bsmRef
                 }) => {


    // variables
    // const snapPoints = useMemo(() => ['50%', '80%'], []);
    const snapPoints = useMemo(() => ['50%'], []);
    // const snapPoints = useMemo(() => [], []);

    // callbacks
    const handleBsmDismiss = useCallback(() => {
        bsmRef.current?.dismiss();
    }, []);

    // renders
    const renderBackdrop = useCallback(
        props => (
            <BottomSheetBackdrop
                {...props}
                opacity={0.5}
                disappearsOnIndex={-1}
                appearsOnIndex={0}
                pressBehavior={"close"}
            />
        ),
        []
    );
    // renders
    const renderItem = ({item}) => {
        return (
            <List.Item {...item}/>
        )
    }


    return (
        <BottomSheetModal
            ref={bsmRef}
            index={0}
            // snapPoints={snapPoints}
            backdropComponent={renderBackdrop}
            enableDynamicSizing
        >

            <BottomSheetScrollView>

                <BottomSheetView style={{
                    marginVertical: 6,
                    marginHorizontal: 8,
                    flexDirection: "row",
                    alignItems: "center"
                }}>
                    <View style={{flex: 1}}>
                        <Text style={{
                            fontSize: 20,
                            fontWeight: "bold"
                        }}>
                            My title
                        </Text>
                    </View>
                    <IconButton
                        icon={"close"}
                        size={30}
                        onPress={() => handleBsmDismiss()}
                    />
                </BottomSheetView>

                <BottomSheetFlatList
                    data={[
                        {
                            title: "title1",
                            description: "description1",
                        },
                        {
                            title: "title2",
                            description: "description2",
                        },
                        {
                            title: "title3",
                            description: "description3",
                        },
                    ]}
                    renderItem={renderItem}
                />

            </BottomSheetScrollView>


        </BottomSheetModal>
    );
};

export default BsmTest;

[plgrazon]

@MatteoBuffo any updates on this?

[MatteoBuffo]

@plgrazon not yet, I'm still waiting for an answer.

[lsdimagine]

you can't have BottomSheetFlatList/BottomSheetView inside BottomSheetScrollView. They could both update animatedContentHeight https://github.com/gorhom/react-native-bottom-sheet/blob/master/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx#L88. Changing it to FlatList/View should work

[MatteoBuffo]

@lsdimagine it works! Thanks!