https://github.com/react-native-bridges/react-native-vimeo-bridge

🎥 Easy-to-use Vimeo player for React Native with cross-platform support
https://github.com/react-native-bridges/react-native-vimeo-bridge

android expo expo-vimeo ios player react-native react-native-vimeo react-native-vimeo-iframe react-native-vimeo-player vimeo vimeo-player web

Last synced: about 2 months ago
JSON representation

🎥 Easy-to-use Vimeo player for React Native with cross-platform support

• Host: GitHub
• URL: https://github.com/react-native-bridges/react-native-vimeo-bridge
• Owner: react-native-bridges
• License: mit
• Created: 2025-06-22T12:47:47.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2025-11-09T09:27:26.000Z (7 months ago)
• Last Synced: 2026-02-27T05:34:43.481Z (4 months ago)
• Topics: android, expo, expo-vimeo, ios, player, react-native, react-native-vimeo, react-native-vimeo-iframe, react-native-vimeo-player, vimeo, vimeo-player, web
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-native-vimeo-bridge
• Size: 25.2 MB
• Stars: 9
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# React Native Vimeo Bridge

> English | [한국어](./README-ko_kr.md)

## Overview

Have you ever struggled with complex setup and manual WebView integration just to use Vimeo player in React Native?

With 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.

### Key Features

- ✅ **Full TypeScript Support** - Enhanced type safety and developer experience

- ✅ **Cross-Platform** - Works on iOS, Android, and Web

- ✅ **New Architecture Compatible** - Full support for React Native's latest architecture

- ✅ **Rich API Support** - Access to all core Vimeo Player JS API features

- ✅ **React-Native Design** - Intuitive, easy-to-use Hook-based API

- ✅ **Expo Compatible** - Ready to use in Expo projects

## Quick Start

### Examples & Demo

- [📁 Example Project](/example/) - Real implementation code and various use cases

- [🌐 Web Demo](https://react-native-vimeo-bridge-example.pages.dev/) - Try it in your browser



  



### Installation

```bash

# npm

npm install react-native-vimeo-bridge

# pnpm

pnpm add react-native-vimeo-bridge

# yarn

yarn add react-native-vimeo-bridge

# bun

bun add react-native-vimeo-bridge

```

## Usage

### Basic Usage

```tsx

import { useVimeoPlayer, VimeoPlayer } from 'react-native-vimeo-bridge';

function App() {

  const player = useVimeoPlayer('https://player.vimeo.com/video/76979871?h=8272103f6e');

  return (

    

  );

}

```

### Event Handling

Listen 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.

```tsx

import { useVimeoEvent, useVimeoPlayer, VimeoPlayer } from 'react-native-vimeo-bridge';

function App() {

  const [isPlaying, setIsPlaying] = useState(false);

  const player = useVimeoPlayer('https://player.vimeo.com/video/76979871?h=8272103f6e');

  

  // Method 1: Receive as state (timeupdate event supports interval configuration)

  const timeupdateState = useVimeoEvent(player, 'timeupdate', 250); // 250ms interval (default)

  // Method 2: Handle with callback

  useVimeoEvent(player, 'playing', (data) => {

    console.log('Playback started:', data);

    setIsPlaying(true);

  });

  useVimeoEvent(player, 'pause', () => {

    setIsPlaying(false);

  });

  console.log('Current time:', timeupdateState?.seconds);

  return (

    

  );

}

```

### Player Control

Control various player functions programmatically through Vimeo Player [methods](https://github.com/vimeo/player.js/#methods) such as play, pause, seek, volume control, and more.

```tsx

import { useVimeoEvent, useVimeoPlayer, VimeoPlayer } from 'react-native-vimeo-bridge';

function App() {

  const player = useVimeoPlayer('https://player.vimeo.com/video/76979871?h=8272103f6e');

  const [isPlaying, setIsPlaying] = useState(false);

  const timeupdate = useVimeoEvent(player, 'timeupdate', 250);

  const currentTime = safeNumber(timeupdate?.seconds);

  const handlePlayPause = useCallback(async () => {

    if (isPlaying) {

      await player.pause();

    } else {

      await player.play();

    }

  }, [isPlaying, player]);

  const seekTo = useCallback(async (seconds: number) => {

    await player.setCurrentTime(seconds);

  }, [player]);

  return (

    

      

      

         seekTo(currentTime - 10)}>

          ⏪ -10초

        

        

          {isPlaying ? '⏸️ 일시정지' : '▶️ 재생'}

        

         seekTo(currentTime + 10)}>

          ⏭️ +10초

        

      

    

  );

}

```

### Embed Options

Customize initial settings through Vimeo Player [embed options](https://developer.vimeo.com/player/sdk/embed).

```tsx

import { useVimeoPlayer, VimeoPlayer } from 'react-native-vimeo-bridge';

function App() {

  const player = useVimeoPlayer('https://player.vimeo.com/video/76979871?h=8272103f6e', {

    autoplay: true,

    controls: true,

    loop: true,

    quality: '1080p',

    playsinline: true,

  });

  return (

    

  );

}

```

### Style Customization

Customize the player's iframe or webview styling.

```tsx

import { VimeoPlayer } from 'react-native-vimeo-bridge';

function App() {

  return (

    

  );

}

```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

[MIT](./LICENSE)