[V4] Dynamic Snap points not working with React Navigation

Bug

Environment info

Library	Version
@gorhom/bottom-sheet	4.0.0-alpha.30
react-native	expo sdk-42.0.0
react-native-reanimated	2.2.0
react-native-gesture-handler	1.10.2
react-native-gesture-handler	1.10.2
@react-navigation/drawer	6.1.0
@react-navigation/native	6.0.2
@react-navigation/native-stack	6.1.0
@react-navigation/stack	6.0.3

Steps To Reproduce

Example Snack: https://snack.expo.dev/@thebiltheory/bottom-sheet-v4-with-react-navigation

1. Implement dynamic snap points example
2. Implement a navigator

Describe what you expected to happen:

1. For the bottom sheet to dynamically take an appropriate height based on the content in each screen.
2. For the bottom sheet to have a minimum height while a “loader” is being shown

Reproducible sample code

Example Snack: https://snack.expo.dev/@thebiltheory/bottom-sheet-v4-with-react-navigation

  const {
    animatedHandleHeight,
    animatedSnapPoints,
    animatedContentHeight,
    handleContentLayout,
  } = useBottomSheetDynamicSnapPoints(["CONTENT_HEIGHT"]);


<NativeViewGestureHandler disallowInterruption={true}>
      <View flex={1}>
        <BottomSheetModal
          name="Select"
          ref={newBookingModal.ref}
          onDismiss={resetCarForm}
          snapPoints={animatedSnapPoints}
          handleHeight={animatedHandleHeight}
          contentHeight={animatedContentHeight}
          enablePanDownToClose={true}
          keyboardBehavior="interactive"
          android_keyboardInputMode="adjustPan"
        >
          <BottomSheetScrollView
            onLayout={handleContentLayout}
            style={{
              flex: 1,
              backgroundColor: "red",
            }}
          >
            <NewBookingNavigator />
          </BottomSheetScrollView>
        </BottomSheetModal>
      </View>
    </NativeViewGestureHandler>

NewBookingNavigator.ts

 <NavigationContainer independent={true}>
      <Stack.Navigator
        screenOptions={screenOptions}
        initialRouteName="ScreenOne"
      >
        <Stack.Screen
          name="ScreenOne"
          options={{ title: "Screen One", headerShown: false }}
          component={ScreenOne}
        />
        <Stack.Screen
          name="ScreenTwo"
          options={{ title: "Screen Two", headerShown: false }}
          component={ScreenTwo}
        />
        ...
      </Stack.Navigator>
    </NavigationContainer>

_Originally posted by @thebiltheory in https://github.com/gorhom/react-native-bottom-sheet/discussions/427#discussioncomment-1158471_

[gorhom]

try this

import React, { useCallback, useMemo, useRef } from "react";
import { StyleSheet, Text, View, Button } from "react-native";
import BottomSheet, {
  BottomSheetDraggableView,
  useBottomSheetDynamicSnapPoints,
} from "@gorhom/bottom-sheet";
import {
  NavigationContainer,
  useFocusEffect,
  useNavigation,
} from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { useAnimatedStyle } from "react-native-reanimated";

const Stack = createStackNavigator();

const ScreenA = ({ animatedContentHeight }) => {
  const { navigate } = useNavigation();
  const isFocus = useRef(false);
  const contentHeight = useRef(0);

  const handleContentLayout = useCallback(
    ({
      nativeEvent: {
        layout: { height },
      },
    }) => {
      if (isFocus.current) {
        contentHeight.current = height;
        animatedContentHeight.value = height;
      }
    },
    [animatedContentHeight]
  );

  useFocusEffect(() => {
    isFocus.current = true;
    animatedContentHeight.value = contentHeight.current;
    return () => {
      isFocus.current = false;
    };
  });
  return (
    <View onLayout={handleContentLayout}>
      <View style={[{ height: 400 }, styles.dummyScreen]}>
        <Text>Screen A</Text>
        <Button
          title="navigate to Screen B"
          onPress={() => navigate("ScreenB")}
        />
      </View>
    </View>
  );
};

const ScreenB = ({ animatedContentHeight }) => {
  const isFocus = useRef(false);
  const contentHeight = useRef(0);

  const handleContentLayout = useCallback(
    ({
      nativeEvent: {
        layout: { height },
      },
    }) => {
      if (isFocus.current) {
        contentHeight.current = height;
        animatedContentHeight.value = height;
      }
    },
    [animatedContentHeight]
  );

  useFocusEffect(() => {
    isFocus.current = true;
    animatedContentHeight.value = contentHeight.current;
    return () => {
      isFocus.current = false;
    };
  });
  return (
    <View onLayout={handleContentLayout}>
      <View style={[{ height: 200 }, styles.dummyScreen]}>
        <Text>Screen B</Text>
      </View>
    </View>
  );
};

const App = () => {
  const initialSnapPoints = useMemo(() => [100, "CONTENT_HEIGHT"], []);
  const {
    animatedContentHeight,
    animatedHandleHeight,
    animatedSnapPoints,
    handleContentLayout,
  } = useBottomSheetDynamicSnapPoints(initialSnapPoints);

  const sheetContentAnimatedStyle = useAnimatedStyle(
    () => ({
      minHeight:
        animatedContentHeight.value === 0 ? 200 : animatedContentHeight.value,
    }),
    [animatedContentHeight]
  );
  return (
    <View style={styles.container}>
      <BottomSheet
        handleHeight={animatedHandleHeight}
        contentHeight={animatedContentHeight}
        snapPoints={animatedSnapPoints}
      >
        <BottomSheetDraggableView style={sheetContentAnimatedStyle}>
          <NavigationContainer>
            <Stack.Navigator
              screenOptions={{
                headerShown: false,
                cardStyle: { backgroundColor: "white" },
              }}
            >
              <Stack.Screen name="ScreenA">
                {() => (
                  <ScreenA animatedContentHeight={animatedContentHeight} />
                )}
              </Stack.Screen>
              <Stack.Screen name="ScreenB">
                {() => (
                  <ScreenB animatedContentHeight={animatedContentHeight} />
                )}
              </Stack.Screen>
            </Stack.Navigator>
          </NavigationContainer>
        </BottomSheetDraggableView>
      </BottomSheet>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#333",
  },
  sheetContent: {
    minHeight: 1,
  },
  dummyScreen: {
    alignItems: "center",
    justifyContent: "center",
  },
});

export default App;

[github-actions[bot]]

@thebiltheory: hello! 👋

This issue is being automatically closed because it does not follow the issue template.