Change snapPoints dynamically via state

[silvestreh]

Hi there! First off, tanks for the hard work you put into this library, it's been really helpful. Also, sorry for not using the issue template, this is more of a question rather than a bug report.

So… I've been trying to wrap BottomSheet so it behaves like a modal, that part was easy enough (literally, just wrap it in a <Modal />). I use the snapTo method to animate the sheet's entry, so far so good, except I don't know what the modal content's height is so I'd like to set the snapPoints based on the modal's content.

The problem, it seems, is that the BottomSheet doesn't seem to care about the updated snapPoints 🤷‍♂️

This is a short version of the code:

const MyCoolModal = () => {
  const ref = useRef();
  const insets = useSafeArea();
  const [snapPoints, setSnapPoints] = useState([insets.top, '50%', screenHeight]);

  const handleLayout = ({ nativeEvent }) => {
    setSnapPoints([insets.top, nativeEvent.layout.height, screenHeight]);
  };

  useEffect(() => {
    ref.current.snapTo(1);
  }, [snapPoints]);

  return (
    <Modal transparent>
      <ScrollBottomSheet
        componentType="ScrollView"
        initialSnapIndex={2} // so it's off screen at the beggining
        ref={ref}
        renderHandle={() => (
          <Header>
            <Handle />
          </Header>
        )}
        snapPoints={snapPoints}>
        <Content onLayout={handleLayout}>{children}</Content>
      </ScrollBottomSheet>
    </Modal>
  );
};

[rgommezz]

Hi @silvestreh, thanks for your kind words!

Unfortunately that's a current limitation of the library and there is no way to update the snap points via state, something I held off for a further iteration.

At the moment, the only possible workaround is to force a remount by providing a different key prop to the component, see this issue for some code hints.

I know it's not ideal, but maybe with a bit of extra code you could achieve your goal?