Skip to content

Add DrawMarker component - #792

Draft
DaveyEke wants to merge 5 commits into
zoontek:masterfrom
DaveyEke:feat/hide-on-draw
Draft

Add DrawMarker component#792
DaveyEke wants to merge 5 commits into
zoontek:masterfrom
DaveyEke:feat/hide-on-draw

Conversation

@DaveyEke

@DaveyEke DaveyEke commented Aug 5, 2026

Copy link
Copy Markdown

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 an onLayout from 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 a marker that you render inside your animated splash screen, and it waits for that marker to be drawn instead.

The marker takes three props. fade matches the existing hide({ fade }) option, since the component makes the hide call now and JS no longer can. autoHide defaults to true, and you set it to false when you want the draw signal without the hide. onDrawn is called once the marker has been drawn, which is what useHideAnimation uses internally.

On the native side both platforms do the same thing. iOS hooks drawRect: and Android hooks onDraw, then both wait one hop before hiding, so the splashscreen is not removed while the hierarchy is still being drawn. Existing hide() and useHideAnimation() behaviour is unchanged, and both paths end up in the same internal hide.

This needs codegenConfig.type to go from "modules" to "all", since the library has no fabric components today. DrawMarker is new architecture only. There is a web fallback which uses an effect.

Test Plan

What's required for testing (prerequisites)?

Build the example app:

cd example && yarn install
yarn ios
yarn android

What are the steps to test it (after prerequisites)?

  1. Launch the app and watch the splash screen. It should hand off to the app without a flash, using the animated splash screen in example/src/AnimatedBootSplash.tsx, which now waits on the marker.
  2. Swap AnimatedBootSplash for the commented <BootSplash.DrawMarker fade /> in example/src/App.tsx to test the plain path.
  3. Remove fade and relaunch. The splash screen should disappear instantly instead of fading.

Compatibility

OS Implemented
iOS
Android

Checklist

  • I have tested this on a device and a simulator (tested on device, not simulator)
  • I added the documentation in README.md
  • I added a sample use of the API in the example project (example/App.tsx)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Drive splashscreen closure based on deterministic and accurate events

1 participant