docs: add expo snack embed example #61
Conversation
|
WalkthroughA new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DocsPage
participant ExpoSnackEmbed
participant ExpoSnackScript
participant window.ExpoSnack
User->>DocsPage: Loads documentation page
DocsPage->>ExpoSnackEmbed: Renders <ExpoSnackEmbed> with props
ExpoSnackEmbed->>ExpoSnackScript: Checks if embed.js is loaded
alt Script not loaded
ExpoSnackEmbed->>ExpoSnackScript: Dynamically loads embed.js
end
ExpoSnackScript-->>ExpoSnackEmbed: Script ready
ExpoSnackEmbed->>window.ExpoSnack: Calls initialize() (if available)
window.ExpoSnack-->>ExpoSnackEmbed: Embeds Snack iframe
ExpoSnackEmbed-->>User: Displays interactive Snack preview
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Suggested labels
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Deploying react-native-gesture-image-viewer with
|
| Latest commit: |
9a13b20
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://5522397c.react-native-gesture-image-viewer.pages.dev |
| Branch Preview URL: | https://docs-add-expo-snack-embed.react-native-gesture-image-viewer.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (6)
lefthook.yml (1)
9-9: Remove trailing space to satisfy YAML lint
yamllintflags the single trailing space after"docs/".
Failing to fix this will break CI hooks that enforce clean formatting.- exclude: "docs/" + exclude: "docs/"docs/docs/en/guide/getting-started/quick-start.mdx (2)
2-2: Relative import is fragile
../../../../components/ExpoSnackEmbedwill break if the doc hierarchy moves. Consider using an alias (@components) configured viatsconfig/Rspress to decouple MDX files from folder depth.
6-9: Inline style: usejustifyContentonly on flex containersYou already set
display: 'flex'; good.alignItemsworks, but it’s redundant to also setwidth: '100%'when the image itself is constrained. Minor, but trimming unused props keeps markup lean.docs/expo-snack.d.ts (1)
3-8: Tighten typings forExpoSnack.embedThe real embed signature accepts an options object or element ID (per Expo docs). Typing it as
(element: HTMLElement) => voidis safe but loses IntelliSense for options. Consider:- embed?: (element: HTMLElement) => void; + embed?: ( + element: HTMLElement | string, + options?: { autoplay?: boolean; platform?: 'ios' | 'android' | 'web' } + ) => void;This captures common parameters without being overly strict.
docs/docs/ko/guide/getting-started/quick-start.mdx (1)
5-7: Consider extracting inline styles for better maintainability.The centering logic is correct, but inline styles in MDX can become hard to maintain.
Consider creating a reusable CSS class or styled component:
-<div style={{ width: '100%', alignItems: 'center', display: 'flex', justifyContent: 'center' }}> +<div className="demo-image-container"> <img src="https://raw.githubusercontent.com/saseungmin/react-native-gesture-image-viewer/main/assets/example.gif" width="600" alt="Demo of react-native-gesture-image-viewer gestures" /> </div>docs/components/ExpoSnackEmbed.tsx (1)
34-36: Simplify optional chaining usage.The nested optional chaining is redundant since you've already checked
window.ExpoSnackexists.- if (window.ExpoSnack?.initialize) { - window.ExpoSnack?.initialize?.(); - } + window.ExpoSnack.initialize();
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
docs/components/ExpoSnackEmbed.tsx(1 hunks)docs/docs/en/guide/getting-started/quick-start.mdx(1 hunks)docs/docs/ko/guide/getting-started/quick-start.mdx(1 hunks)docs/expo-snack.d.ts(1 hunks)docs/tsconfig.json(1 hunks)lefthook.yml(1 hunks)tsconfig.build.json(1 hunks)
🧰 Additional context used
🪛 YAMLlint (1.37.1)
lefthook.yml
[error] 9-9: trailing spaces
(trailing-spaces)
🪛 GitHub Check: lint
docs/components/ExpoSnackEmbed.tsx
[failure] 35-35:
Cannot find name 'window'.
[failure] 34-34:
Cannot find name 'window'.
[failure] 28-28:
Property 'querySelector' does not exist on type 'HTMLDivElement'. Try changing the 'lib' compiler option to include 'dom'.
[failure] 27-27:
Cannot find name 'window'.
[failure] 19-19:
Cannot find name 'document'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.
[failure] 16-16:
Cannot find name 'document'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.
[failure] 15-15:
Cannot find name 'document'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.
🪛 GitHub Actions: CI
docs/components/ExpoSnackEmbed.tsx
[error] 15-15: TypeScript error TS2584: Cannot find name 'document'. Consider changing the 'lib' compiler option to include 'dom'.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (5)
tsconfig.build.json (1)
3-3: Docs exclusion looks correctAdding
"docs"to theexcludelist cleanly separates production builds from documentation code. No concerns here.docs/docs/ko/guide/getting-started/quick-start.mdx (2)
1-1: LGTM! Import path is correct.The import statement correctly references the ExpoSnackEmbed component with the proper relative path.
13-13: LGTM! ExpoSnackEmbed usage is appropriate.The component usage with snackId and height props looks correct and matches the Expo Go link reference above.
docs/components/ExpoSnackEmbed.tsx (2)
3-8: LGTM! Well-defined TypeScript interface.The Props interface is well-structured with appropriate types and optional properties.
44-60: LGTM! Well-structured JSX with proper data attributes.The component return is well-implemented with appropriate data attributes for Expo Snack configuration and good styling.
Summary by CodeRabbit
New Features
Documentation
Chores