Dynamic sizing and navigator

[mjroeleveld]

Dynamic sizing does not seem to work well with having a stack navigator inside a bottom sheet. Is there some way I can trigger a recalculation on e.g. a navigate event? I tried addEventListener in combination with snapToIndex or expand but it only snaps to a known snappoint.

[ivstiv]

I think I am running into this as well. Switching between different screens of a stack navigator, causes the dynamicSizing to expand the height correctly but does not shrink back down if I navigate to a smaller "screen". Has anyone found an escape hatch to cause the bottom sheet to recalculate?

[mahsha]

I believe I might be encountering a similar challenge with implementing a bottom sheet that dynamically adjusts its size when navigating. Have you come across a solution or a reliable approach for this?

[ivstiv]

I dropped the react-native stack navigator and hand rolled my own, which resolved all of my issues. Each one of my "ScreenComponents" has its top most component being either a BottomSheetView or a BottomSheetScrollView, when switching between them everything resizes as expected. I built this with zustand but I am sure you can easily convert it to a Context based or any other state management based solution. Here is the gist of it:

export const BottomSheetNavigator = (props: Props) => {
  const screen = useNavigatorStore(s => s.screen);

  const initialRouteName = useMemo(() => {
    // return one of the screens conditionally if needed
  }, [someDependency]);

  const isLoading = initialRouteName === undefined;

  if (isLoading) {
    return <Loading />;
  }

  const ScreenToRender = screens[screen ?? initialRouteName];
  return <ScreenToRender {...props} />;
};

const screens = {
  Screen1: memo(Screen1Component),
  Screen2: memo(Screen2Component),
  etc...
};

export type Screen = keyof typeof screens;
type NavigatorStore = {
  screen: Screen | null;
  navigate: (screen: Screen) => void;
  reset: () => void;
};
export const useNavigatorStore = create<NavigatorStore>(set => ({
  screen: null,
  navigate: screen => set({ screen }),
  reset: () => set({ screen: null }),
}));

[mahsha]

Thanks for your reply!