Fix Snack player initialization race condition

[yash04577]

Snack players were sometimes not initializing on first load or when added dynamically (e.g. in tabs or via MDX). This was due to ExpoSnack.initialize() being called before the deferred embed.js script finished loading.

---

Reproduction Steps (Before Fix)

1. Go to any doc with a Snack player, e.g. FlatList
2. Hard refresh the page (Ctrl+Shift+R)
3. Or navigate directly via URL: https://reactnative.dev/docs/flatlist
4. Snack player iframe is blank or stuck on loading
5. Only after switching tabs (TS to JS or JS to TS) does the player initialize

---

Old Behavior (Buggy)

*(Hard refresh → blank Snack → needs tab switch)*

New Behavior (Fixed)

*(Hard refresh → Snack loads instantly)*

---

Root Cause

• ExpoSnack.initialize() was called too early — before the deferred embed.js script loaded

---

Fix

• Wait for embed.js to load before calling initialize()
• Use script.addEventListener('load', ...) — no polling, no timeout
• Single MutationObserver on document.body catches all new .snack-player elements

[meta-cla]

Hi @yash04577!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

[netlify]

✅ Deploy Preview for react-native ready!

Name	Link
🔨 Latest commit	922eae8
🔍 Latest deploy log	https://app.netlify.com/projects/react-native/deploys/691384dbf3bedc00083767d3
😎 Deploy Preview	https://deploy-preview-4870--react-native.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[meta-cla]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[yash04577]

Made the requested changes:

• Switched to querySelectorAll('.snack-player') instead of separate node checks
• Limited the MutationObserver scope to .container instead of document.body

@Simek updated as per your feedback. Thanks for the review! 🙌

[Simek]

Thanks for the quick updates @yash04577! 👍

Hmm, it looks like after the recent change the problem is back on the PR preview deployment. Earlier it was working as described in the main PR comment. Can you look at it?

[yash04577]

Hi @Simek , I’ve pushed an update that fixes the issue. Please take a look when you have a moment.

[Simek]

Thanks for the fix! Retested website with latest changes, LGTM! 🚀

[pooriamo]

I just pulled the latest main but I'm getting an error from this part:

observer.observe(document.querySelector('.container'), {

Apparently document.querySelector('.container') is null 🤔 @yash04577

[Simek]

Hey @pooriamo, nice catch, thanks for pointing this out! 🙏 Will merge the fix soon.