[v4] Many bottom sheets = performance issues

Bug

We (Steakwallet) make liberal use of bottom sheets throughout our application, specifically the bottom sheet modal this excellent library provides. We have 12 as of right now, with more planned.

Environment info

Library	Version
@gorhom/bottom-sheet	^4
react-native	^0.64.1
react-native-reanimated	^2.1.0
react-native-gesture-handler	^1.10.3

Steps To Reproduce

Here’s a shortened version of what our app looks like:

import { BottomSheetModal } from '@gorhom/bottom-sheet';
import { RefObject, useCallback, useRef, useState } from 'react';
import { createContainer } from 'unstated-next';


export enum MODAL_KEYS {
  receive = 'receive',
  ...
}

function UiContainer() {
  const receiveRef = useRef<BottomSheetModal>(null);
  ...

  const refs: { [key in MODAL_KEYS]: RefObject<BottomSheetModal> } = {
    [MODAL_KEYS.receive]: receiveRef,
    ...
  };

  const [props, setProps] = useState<{
    [MODAL_KEYS.receive]: any;
    ...
  }>({
    [MODAL_KEYS.receive]: null,
    ...
  });

  const open = useCallback((key: string, newProps: any) => {
    setProps((p: any) => ({ ...p, [key]: newProps }));
    refs[key as MODAL_KEYS].current?.present();
  }, []);

  const close = useCallback((key: string) => {
    setProps((p: any) => ({ ...p, [key]: null }));
    refs[key as MODAL_KEYS].current?.dismiss();
  }, []);

  const openReceiveModal = useCallback((token: any) => {
    open(MODAL_KEYS.receive, token);
  }, []);
  const closeReceiveModal = useCallback(() => {
    close(MODAL_KEYS.receive);
  }, []);

  ...

  return {
    refs,

    openReceiveModal,
    closeReceiveModal,

    ...

    receiveProps: props.receive,

  };
}

export const Ui = createContainer(UiContainer);
export const useUi = Ui.useContainer;

Using React Context, it means we can do:

const {openReceiveModal} = useUi()

from anywhere in our application and show the “receive” modal, which is super handy.

We’re starting to notice noticeable delays in our application, with modals sometimes taking multiple seconds to pop up. So our issue is not a specific bug per se, but more a question;

• do you see anything inherently wrong with this approach?
• how would you structure an application with many bottom sheet modals?
• should we expect great performance with this approach?

[hirbod]

@gorhom I think this has to be re-opened, right? What I am seeing is that it looks like ModalBottomSheet is memory leaking. Every open and close (even though it should unmount) increases my memory consumption by 4-10MB

[AlexBHarley]

@gorhom I was trying to get the bottom sheet to open at all, that’s why it’s a bit messy. I’ve updated to only use refs[1] and I can’t get it to open. Do the modals work on snack.expo.dev?