Couple of feature requests

[hirbod]

Hi @lodev09,

Amazing work on this library. I am currently migrating away from Gorhom's Bottom Sheet, and it seems to work just fine for all of our cases.

We've run into a couple of things I want to pinpoint and ask for feature requests.

• There is no option to add borderWidth and borderColor. We'd like to have a slightly different borderColor (only left, right, top; bottom doesn't need a border). Adding it to contentContainerStyle requires matching borders for the children, overflow, etc. What do you think?
• The background dim is too light. We'd like to make it much darker. Is there an option we could add, ideally even control the alpha and color?

Coming to my last request. We're using the Sheets slightly differently than most people. We open and navigate to a transparentModal which contains the sheet inside the screen.

      <Stack.Screen
        name="info-screen"
        options={{
          animation: 'none',
          presentation: 'transparentModal',
          contentStyle: {
            backgroundColor: 'transparent',
          },
        }}
      />

This allows us to navigate to our modals easily via URL (it also works great on the web, where we use a different web modal). With Gorhom's Bottom Sheet, I could enable animateOnMount to automatically open the sheet after we navigated to the screen. There is no such way to control this within your library. I had to come up with a little hack to make it work reliably with "auto" mode.

This is how I made it work:

const BottomSheetImpl = forwardRef((props: Props, ref: ForwardRefType<TrueSheet>) => {
  const { onClose, children } = props
  const defaultOnClose = useOnClose()
  const scrollRef = React.useRef<ScrollView>(null)
  const internalRef = useRef<TrueSheet>(null)
  const [viewHasLayout, setViewHasLayout] = useState(false)

  useImperativeHandle(
    ref,
    // @ts-expect-error TrueSheet does not have "close" and doesn't like the inital null value, but it works
    () => ({
      ...internalRef.current,
      close: () => {
        internalRef.current?.dismiss()
      },
    }),
    []
  )

  const childrenHasLayout = useCallback(() => {
    if (!viewHasLayout) {
      internalRef.current?.present()
      setViewHasLayout(true)
    }
  }, [viewHasLayout])

  return (
    <TrueSheet
      ref={internalRef}
      onDismiss={onClose ?? defaultOnClose}
      sizes={['auto']}
      grabber={false}
      dimmed={true}
      dimmedIndex={0}
      backgroundColor={'black'}
      cornerRadius={24}
      scrollRef={scrollRef}>
      <ScrollView
        onLayout={childrenHasLayout}
        ref={scrollRef}
        alwaysBounceVertical={false}
        nestedScrollEnabled>
        {children}
      </ScrollView>
    </TrueSheet>
  )
})

So basically, I wait until I receive an onLayout event by the children ScrollView and based on that, I present the sheet.

So my question is: could you think of a way to support auto-opening on mount as a prop, which might work slightly faster? Right now, it feels a bit laggy (about 300ms from click to open). I want to achieve a bit more snappiness.

Happy to sponsor the feature requests, if feasible. (For both android and iOS)

[lodev09]

Hey, thanks for the feedback!

For 1 and 2, they make sense and I'll take a look at adding more options to the styling in the next release :)

For show on mount, it is exactly what the other guy wanted. #28. I've created a draft PR (#30) to support those, just need some testing.

I appreciate all the support. Thank you!

[hirbod]

This is amazing, thanks for your efforts and immediate response!

[hirbod]

@lodev09 I forgot one question: is it possible to change the animation duration, or even pass an easing function?

[lodev09]

Hmm interesting. I'll take a look at normalizing animations on both platform when I get a chance.

I'm not that familiar with animation so no promises.