Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixes backdrop flash when content height is increasing #562

Open
wants to merge 1 commit into
base: v2
Choose a base branch
from

Conversation

somebody32
Copy link

@somebody32 somebody32 commented Aug 5, 2021

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

@gorhom gorhom added the v2 Written in Reanimated v1 label Aug 5, 2021
@github-actions
Copy link

github-actions bot commented Sep 7, 2021

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
Copy link
Author

@gorhom commenting as soon as this is still mergeable

@gorhom
Copy link
Owner

gorhom commented Sep 8, 2021

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

@gorhom gorhom self-assigned this Sep 8, 2021
@jcgertig
Copy link
Contributor

@gorhom ping

1 similar comment
@Jungwoo-An
Copy link

@gorhom ping

@fluorescent23
Copy link

fluorescent23 commented Jul 26, 2023

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
Copy link

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

@joshsmith
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
v2 Written in Reanimated v1
Projects
None yet
Development

Successfully merging this pull request may close these issues.

dynamic snap points cause flickering of backdrop
7 participants