fixes backdrop flash when content height is increasing

[somebody32]

Motivation

This PR fixes #436.

The culprit of the issue was a sudden drop in animatedIndex because of the height change, so the approach is to detect if the animatedIndex achieved max value already (ie backdrop appeared fully) and then interpolate only if animatedIndex values start to decrease.

Another important topic is how to render the backdrop itself. The doc suggests something like that:

const renderBackdrop = useCallback(
    (props: BottomSheetBackdropProps) => (
      <BottomSheetBackdrop {...props} />
    ),
    []
  );

which, surprisingly, causes flicker sometimes because react unmounts and mounts the backdrop on height changes. The fix is to add key prop:

const renderBackdrop = useCallback(
    (props: BottomSheetBackdropProps) => (
      <BottomSheetBackdrop key="backdrop" {...props} />
    ),
    []
  );

Video

bottom_sheet_fix.mp4

[github-actions]

This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[somebody32]

@gorhom commenting as soon as this is still mergeable

[gorhom]

i will look into this pr this weekend, thanks for submitting it @somebody32

[jcgertig]

@gorhom ping

[Jungwoo-An]

@gorhom ping

[fluorescent23]

I still have this problem in the latest version (v4).

If I have multiple bottom sheets inside a screen and a TextInput not inside any of the bottom sheets blurs, the animated index changes for a split second and the backdrop flashes.

Any ideas? @somebody32

[badalsaibo]

@somebody32 anyway to integrate this fix till it gets merged?

[joshsmith]

This PR is way out of date and should probably be closed.

[danger9224]

I'm still facing this issue on 5.1.6 so I don't think this is stale 🙈 @gorhom any chance this might get resolved soon?