Skip to content

Commit 248eb50

Browse files
kirillzyuskokirillzyusko
authored
docs: reusable Snack component (#1361)
## 📜 Description Fixed non-displayable `Snack` in Guides section. ## 💡 Motivation and Context Created re-usable `Snack` component to avoid boilerplate code. ## 📢 Changelog <!-- High level overview of important changes --> <!-- For example: fixed status bar manipulation; added new types declarations; --> <!-- If your changes don't affect one of platform/language below - then remove this platform/language --> ### Docs - added re-usable `Snack` component; ## 🤔 How Has This Been Tested? Tested manually via preview. ## 📸 Screenshots (if appropriate): <img width="978" height="567" alt="image" src="https://github.com/user-attachments/assets/261f3f8c-572b-44bb-abcb-09882d1be166" /> ## 📝 Checklist - [x] CI successfully passed - [x] I added new mocks and corresponding unit-tests if library API was changed
1 parent ca5a99c commit 248eb50

4 files changed

Lines changed: 64 additions & 55 deletions

File tree

‎docs/blog/2025-12-01-release-1-20/index.mdx‎

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ Curious about what’s new? Let’s dive in!
1212

1313
<!-- truncate -->
1414

15-
import Head from "@docusaurus/Head";
15+
import ExpoSnack from "@site/src/components/ExpoSnack";
1616

1717
## Expo Snack support
1818

@@ -22,24 +22,7 @@ With version `1.20.0`, that limitation is finally gone. The library now works se
2222

2323
Below is an embedded Snack that includes the code I used for my [AppJS Conf](https://appjs.co) demo this year:
2424

25-
<div
26-
data-snack-id="@kirylziusko/chat-keyboard-avoiding-view"
27-
data-snack-platform="ios"
28-
data-snack-preview="true"
29-
data-snack-theme="light"
30-
style={{
31-
overflow: "hidden",
32-
background: "#fbfcfd",
33-
border: "1px solid var(--color-border)",
34-
borderRadius: 4,
35-
height: 505,
36-
width: "100%",
37-
}}
38-
></div>
39-
40-
<Head>
41-
<script src="https://snack.expo.dev/embed.js" async />
42-
</Head>
25+
<ExpoSnack id="@kirylziusko/chat-keyboard-avoiding-view" />
4326

4427
<br />
4528

‎docs/docs/api/components/keyboard-chat-scroll-view.mdx‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -231,24 +231,9 @@ const memoList = useCallback(
231231

232232
## Example
233233

234-
<div
235-
data-snack-id="@kirylziusko/c0b7f0"
236-
data-snack-platform="ios"
237-
data-snack-preview="true"
238-
data-snack-theme="light"
239-
style={{
240-
overflow: "hidden",
241-
background: "#fbfcfd",
242-
border: "1px solid var(--color-border)",
243-
borderRadius: 4,
244-
height: 505,
245-
width: "100%",
246-
}}
247-
></div>
248-
249-
<Head>
250-
<script src="https://snack.expo.dev/embed.js" async />
251-
</Head>
234+
import ExpoSnack from "@site/src/components/ExpoSnack";
235+
236+
<ExpoSnack id="@kirylziusko/c0b7f0" />
252237

253238
## Design principles
254239

‎docs/docs/guides/building-chat-app.mdx‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -489,24 +489,9 @@ function ChatScreen() {
489489

490490
Or play with the code in live mode directly in the browser:
491491

492-
<div
493-
data-snack-id="@kirylziusko/c0b7f0"
494-
data-snack-platform="ios"
495-
data-snack-preview="true"
496-
data-snack-theme="light"
497-
style={{
498-
overflow: "hidden",
499-
background: "#fbfcfd",
500-
border: "1px solid var(--color-border)",
501-
borderRadius: 4,
502-
height: 505,
503-
width: "100%",
504-
}}
505-
></div>
506-
507-
<Head>
508-
<script src="https://snack.expo.dev/embed.js" async />
509-
</Head>
492+
import ExpoSnack from "@site/src/components/ExpoSnack";
493+
494+
<ExpoSnack id="@kirylziusko/c0b7f0" />
510495

511496
## API reference
512497

‎docs/src/components/ExpoSnack/index.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React, { useEffect } from "react";
2+
3+
type ExpoSnackProps = {
4+
id: string;
5+
platform?: string;
6+
preview?: boolean;
7+
theme?: string;
8+
};
9+
10+
declare global {
11+
interface Window {
12+
ExpoSnack?: { initialize: () => void };
13+
}
14+
}
15+
16+
const EMBED_SCRIPT_SRC = "https://snack.expo.dev/embed.js";
17+
18+
export default function ExpoSnack({
19+
id,
20+
platform = "ios",
21+
preview = true,
22+
theme = "light",
23+
}: ExpoSnackProps) {
24+
useEffect(() => {
25+
const existing = document.querySelector(
26+
`script[src="${EMBED_SCRIPT_SRC}"]`,
27+
);
28+
29+
if (!existing) {
30+
const script = document.createElement("script");
31+
32+
script.src = EMBED_SCRIPT_SRC;
33+
script.async = true;
34+
document.head.appendChild(script);
35+
} else if (window.ExpoSnack) {
36+
window.ExpoSnack.initialize();
37+
}
38+
}, []);
39+
40+
return (
41+
<div
42+
data-snack-id={id}
43+
data-snack-platform={platform}
44+
data-snack-preview={String(preview)}
45+
data-snack-theme={theme}
46+
style={{
47+
overflow: "hidden",
48+
background: "#fbfcfd",
49+
border: "1px solid var(--color-border)",
50+
borderRadius: 4,
51+
height: 505,
52+
width: "100%",
53+
}}
54+
/>
55+
);
56+
}

0 commit comments

Comments
 (0)