{"id":29097065,"url":"https://github.com/react-native-bridges/react-native-vimeo-bridge","last_synced_at":"2026-04-30T03:34:34.874Z","repository":{"id":300584942,"uuid":"1006513250","full_name":"react-native-bridges/react-native-vimeo-bridge","owner":"react-native-bridges","description":"🎥 Easy-to-use Vimeo player for React Native with cross-platform support","archived":false,"fork":false,"pushed_at":"2025-11-09T09:27:26.000Z","size":26462,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-27T05:34:43.481Z","etag":null,"topics":["android","expo","expo-vimeo","ios","player","react-native","react-native-vimeo","react-native-vimeo-iframe","react-native-vimeo-player","vimeo","vimeo-player","web"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-vimeo-bridge","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-native-bridges.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-22T12:47:47.000Z","updated_at":"2026-01-29T22:05:11.000Z","dependencies_parsed_at":"2025-06-22T15:35:12.490Z","dependency_job_id":"eab84f1b-504c-46c0-b356-8332a05a7540","html_url":"https://github.com/react-native-bridges/react-native-vimeo-bridge","commit_stats":null,"previous_names":["react-native-bridges/react-native-vimeo-bridge"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/react-native-bridges/react-native-vimeo-bridge","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-bridges%2Freact-native-vimeo-bridge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-bridges%2Freact-native-vimeo-bridge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-bridges%2Freact-native-vimeo-bridge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-bridges%2Freact-native-vimeo-bridge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-native-bridges","download_url":"https://codeload.github.com/react-native-bridges/react-native-vimeo-bridge/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-bridges%2Freact-native-vimeo-bridge/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32453941,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T22:27:22.272Z","status":"online","status_checked_at":"2026-04-30T02:00:05.929Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","expo","expo-vimeo","ios","player","react-native","react-native-vimeo","react-native-vimeo-iframe","react-native-vimeo-player","vimeo","vimeo-player","web"],"created_at":"2025-06-28T13:01:42.266Z","updated_at":"2026-04-30T03:34:29.861Z","avatar_url":"https://github.com/react-native-bridges.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Vimeo Bridge\n\n\u003e English | [한국어](./README-ko_kr.md)\n\n## Overview\n\nHave you ever struggled with complex setup and manual WebView integration just to use Vimeo player in React Native?\n\nWith the lack of actively maintained Vimeo player libraries for React Native, `react-native-vimeo-bridge` provides a seamless way to integrate the [Vimeo Player JS API](https://developer.vimeo.com/player/sdk) into your React Native applications.\n\n### Key Features\n\n- ✅ **Full TypeScript Support** - Enhanced type safety and developer experience\n- ✅ **Cross-Platform** - Works on iOS, Android, and Web\n- ✅ **New Architecture Compatible** - Full support for React Native's latest architecture\n- ✅ **Rich API Support** - Access to all core Vimeo Player JS API features\n- ✅ **React-Native Design** - Intuitive, easy-to-use Hook-based API\n- ✅ **Expo Compatible** - Ready to use in Expo projects\n\n## Quick Start\n\n### Examples \u0026 Demo\n- [📁 Example Project](/example/) - Real implementation code and various use cases\n- [🌐 Web Demo](https://react-native-vimeo-bridge-example.pages.dev/) - Try it in your browser\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./assets/example.gif\" width=\"600\" /\u003e\n\u003c/p\u003e\n\n### Installation\n\n```bash\n# npm\nnpm install react-native-vimeo-bridge\n\n# pnpm\npnpm add react-native-vimeo-bridge\n\n# yarn\nyarn add react-native-vimeo-bridge\n\n# bun\nbun add react-native-vimeo-bridge\n```\n\n## Usage\n\n### Basic Usage\n\n```tsx\nimport { useVimeoPlayer, VimeoPlayer } from 'react-native-vimeo-bridge';\n\nfunction App() {\n  const player = useVimeoPlayer('https://player.vimeo.com/video/76979871?h=8272103f6e');\n\n  return (\n    \u003cVimeoPlayer player={player} /\u003e\n  );\n}\n```\n\n### Event Handling\n\nListen to Vimeo Player state changes in real-time. Use the `useVimeoEvent` Hook to subscribe to [events](https://github.com/vimeo/player.js/#events) in two ways.\n\n```tsx\nimport { useVimeoEvent, useVimeoPlayer, VimeoPlayer } from 'react-native-vimeo-bridge';\n\nfunction App() {\n  const [isPlaying, setIsPlaying] = useState(false);\n\n  const player = useVimeoPlayer('https://player.vimeo.com/video/76979871?h=8272103f6e');\n  \n  // Method 1: Receive as state (timeupdate event supports interval configuration)\n  const timeupdateState = useVimeoEvent(player, 'timeupdate', 250); // 250ms interval (default)\n\n  // Method 2: Handle with callback\n  useVimeoEvent(player, 'playing', (data) =\u003e {\n    console.log('Playback started:', data);\n    setIsPlaying(true);\n  });\n\n  useVimeoEvent(player, 'pause', () =\u003e {\n    setIsPlaying(false);\n  });\n\n  console.log('Current time:', timeupdateState?.seconds);\n\n  return (\n    \u003cVimeoPlayer player={player} /\u003e\n  );\n}\n```\n\n### Player Control\n\nControl various player functions programmatically through Vimeo Player [methods](https://github.com/vimeo/player.js/#methods) such as play, pause, seek, volume control, and more.\n\n```tsx\nimport { useVimeoEvent, useVimeoPlayer, VimeoPlayer } from 'react-native-vimeo-bridge';\n\nfunction App() {\n  const player = useVimeoPlayer('https://player.vimeo.com/video/76979871?h=8272103f6e');\n\n  const [isPlaying, setIsPlaying] = useState(false);\n\n  const timeupdate = useVimeoEvent(player, 'timeupdate', 250);\n  const currentTime = safeNumber(timeupdate?.seconds);\n\n  const handlePlayPause = useCallback(async () =\u003e {\n    if (isPlaying) {\n      await player.pause();\n    } else {\n      await player.play();\n    }\n  }, [isPlaying, player]);\n\n  const seekTo = useCallback(async (seconds: number) =\u003e {\n    await player.setCurrentTime(seconds);\n  }, [player]);\n\n  return (\n    \u003cView\u003e\n      \u003cVimeoPlayer player={player} /\u003e\n\n      \u003cView style={styles.controls}\u003e\n        \u003cTouchableOpacity onPress={() =\u003e seekTo(currentTime - 10)}\u003e\n          \u003cText\u003e⏪ -10초\u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n\n        \u003cTouchableOpacity onPress={handlePlayPause}\u003e\n          \u003cText\u003e{isPlaying ? '⏸️ 일시정지' : '▶️ 재생'}\u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n\n        \u003cTouchableOpacity onPress={() =\u003e seekTo(currentTime + 10)}\u003e\n          \u003cText\u003e⏭️ +10초\u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n      \u003c/View\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\n### Embed Options\n\nCustomize initial settings through Vimeo Player [embed options](https://developer.vimeo.com/player/sdk/embed).\n\n```tsx\nimport { useVimeoPlayer, VimeoPlayer } from 'react-native-vimeo-bridge';\n\nfunction App() {\n  const player = useVimeoPlayer('https://player.vimeo.com/video/76979871?h=8272103f6e', {\n    autoplay: true,\n    controls: true,\n    loop: true,\n    quality: '1080p',\n    playsinline: true,\n  });\n\n  return (\n    \u003cVimeoPlayer player={player} /\u003e\n  );\n}\n```\n\n### Style Customization\n\nCustomize the player's iframe or webview styling.\n\n```tsx\nimport { VimeoPlayer } from 'react-native-vimeo-bridge';\n\nfunction App() {\n  return (\n    \u003cVimeoPlayer\n      player={player}\n      height={400}\n      width=\"100%\"\n      style={{\n        borderRadius: 12,\n        overflow: 'hidden',\n        backgroundColor: '#000',\n      }}\n      // Web platform iframe styles\n      iframeStyle={{\n        aspectRatio: 16 / 9,\n        border: 'none',\n      }}\n      // Mobile platform WebView styles\n      webViewStyle={{\n        backgroundColor: 'transparent',\n      }}\n      // Mobile platform WebView additional props\n      webViewProps={{\n        allowsFullscreenVideo: true,\n        mediaPlaybackRequiresUserAction: false,\n      }}\n    /\u003e\n  );\n}\n```\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-native-bridges%2Freact-native-vimeo-bridge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-native-bridges%2Freact-native-vimeo-bridge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-native-bridges%2Freact-native-vimeo-bridge/lists"}