The current TimeToFullDisplay component is strictly single-instance per screen:

1. <TimeToFullDisplay record={boolean} /> renders a native RNSentryOnDrawReporter with fullDisplay={true}
2. The native side records a single timestamp stored under ttfd-${rootSpanId}
3. timeToDisplayIntegration.processEvent() calls NATIVE.popTimeToDisplayFor('ttfd-${rootSpanId}')
4. That single timestamp becomes the TTFD measurement

If you place multiple <TimeToFullDisplay /> components in the tree, only the last native draw report wins.

The idea

The proposed ready={boolean} API is essentially: register N checkpoints, TTFD resolves when all of them are ready. This would require:

1. A registry — track all mounted TimeToFullDisplay instances for the current screen/span
2. A coordination layer — only fire the TTFD signal when every instance reports ready={true}
3. Lifecycle handling — components mount/unmount dynamically, late-mounting components need to be counted.

Out component architecture is already close. Here is what we would need:

• A React context (or module-level registry keyed by active span) that collects all TimeToFullDisplay instances
• Each instance registers on mount, unregisters on unmount
• The ready prop triggers a check: "are all registered instances ready?" → if yes, trigger the native draw report

The timeout logic in startTimeToFullDisplaySpan (30s deadline) already handles the "what if something never resolves" case.

Possible complcations

The tricky parts would be:

• Late-mounting components — a component that mounts after others are already ready should reset the "all ready" state
• Conditional rendering — components that mount only after data loads (common pattern) need to register before they're ready
• Screen transitions — cleanup when navigating away, especially with React Navigation's keep-alive behavior