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!

[MateoParodi]

Any updates?

[f5io]

i'd be really keen for this to be handled seamlessly, i've got most of the way there with dynamic snap points that are updated by child onLayout calls, but it feels incredibly janky and not very intuitive