Add DrawMarker component - #792
Draft
DaveyEke wants to merge 5 commits into
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #791
This adds
DrawMarker, an invisible component that knows when it has been drawn, and hides the splashscreen from the native side once that happens, rather than when layout is computed or when an effect happens to run.It works by adding a fabric view called
RNBootSplashDrawMarker. The view is practically invisible, and its only job is to notice its own first draw. When that happens it hides the splashscreen natively, so nothing about the dismissal goes through JS.It also fixes the same problem inside
useHideAnimation. That hook currently waits on anonLayoutfrom the JS splash screen before hiding the native one, which can hide the native splashscreen before the JS one has painted. The hook now returns amarkerthat you render inside your animated splash screen, and it waits for that marker to be drawn instead.The marker takes three props.
fadematches the existinghide({ fade })option, since the component makes the hide call now and JS no longer can.autoHidedefaults totrue, and you set it tofalsewhen you want the draw signal without the hide.onDrawnis called once the marker has been drawn, which is whatuseHideAnimationuses internally.On the native side both platforms do the same thing. iOS hooks
drawRect:and Android hooksonDraw, then both wait one hop before hiding, so the splashscreen is not removed while the hierarchy is still being drawn. Existinghide()anduseHideAnimation()behaviour is unchanged, and both paths end up in the same internal hide.This needs
codegenConfig.typeto go from"modules"to"all", since the library has no fabric components today.DrawMarkeris new architecture only. There is a web fallback which uses an effect.Test Plan
What's required for testing (prerequisites)?
Build the example app:
What are the steps to test it (after prerequisites)?
example/src/AnimatedBootSplash.tsx, which now waits on the marker.AnimatedBootSplashfor the commented<BootSplash.DrawMarker fade />inexample/src/App.tsxto test the plain path.fadeand relaunch. The splash screen should disappear instantly instead of fading.Compatibility
Checklist
README.mdexample/App.tsx)