[v4] Can't make useBottomSheetDynamicSnapPoints() work properly

[topheroes]

Hello,

It looks like useBottomSheetDynamicSnapPoints doesn't change animatedSnapPoints when layout changes. I expected the snap points to change on layout changes.

Library	Version
@gorhom/bottom-sheet	4.4.5
react-native	0.68.1
react-native-reanimated	2.4.0
react-native-gesture-handler	2.1.0

import React, {useCallback, useMemo, useRef} from 'react';
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
import BottomSheet, {
  BottomSheetView,
  useBottomSheetDynamicSnapPoints,
} from '@gorhom/bottom-sheet';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  interpolate,
  Extrapolate,
} from 'react-native-reanimated';

const AnimatedView = Animated.createAnimatedComponent(View);

const Expandable = () => {
  const isOpened = useSharedValue(true);

  const handleExpand = useCallback(() => {
    isOpened.value = !isOpened.value;
  }, [isOpened]);

  const blockHeightStyle = useAnimatedStyle(() => {
    const height = interpolate(
      +isOpened.value,
      [0, 1],
      [30, 60],
      Extrapolate.CLAMP,
    );

    return {
      height,
    };
  }, [isOpened.value]);

  const rand = () => Math.floor(Math.random() * 255) + 1;

  const styles = StyleSheet.create({
    container: {
      backgroundColor: `rgba(${rand()},${rand()},${rand()},1)`,
      width: '100%',

      justifyContent: 'center',
      alignItems: 'center',
    },
    button: {
      backgroundColor: 'gray',
      width: 100,
      height: 30,
      borderRadius: 15,
      borderWidth: 3,
      borderColor: 'black',
      justifyContent: 'center',
      alignItems: 'center',
    },
    txt: {
      color: 'white',
    },
  });

  return (
    <AnimatedView style={[styles.container, blockHeightStyle]}>
      <TouchableOpacity onPress={handleExpand} style={styles.button}>
        <Text style={styles.txt}>{'toggle'}</Text>
      </TouchableOpacity>
    </AnimatedView>
  );
};

const BottomSheetComponent = () => {
  // ref
  const bottomSheetRef = useRef(null);

  const initialSnapPoints = useMemo(() => ['25%', 'CONTENT_HEIGHT'], []);
  const {
    animatedHandleHeight,
    animatedSnapPoints,
    animatedContentHeight,
    handleContentLayout,
  } = useBottomSheetDynamicSnapPoints(initialSnapPoints);

  // renders
  return (
    <BottomSheet
      ref={bottomSheetRef}
      snapPoints={animatedSnapPoints}
      contentHeight={animatedContentHeight.value}
      animateOnMount={true}
      handleHeight={animatedHandleHeight}>
      <BottomSheetView style={styles.container} onLayout={handleContentLayout}>
        <Expandable />
        <Expandable />
        <Expandable />
      </BottomSheetView>
    </BottomSheet>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: 'grey',
  },
  contentContainer: {
    flex: 1,
    alignItems: 'center',
  },
  text: {
    color: 'red',
  },
});

export default BottomSheetComponent;

Please advise

[github-actions]

@topheroes: hello! 👋

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

[github-actions]

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.

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.