React Native Vimeo Player

Embedded Vimeo player and chat for react native applications using React Native Webview.

Installation

1. Install the @mindtechapps/rn-vimeo-player and react-native-webview within in your project:

$ yarn add @mindtechapps/rn-vimeo-player react-native-webview

(or)

$ npm install --save @mindtechapps/rn-vimeo-player react-native-webview

2. Linking:

From React Native >= 0.60 autolinking is work.

If using React Native <= 0.59 you will need link manually:

react-native link rn-vimeo-player react-native-webview

3. On iOS install Cocoapods in the ios/ folder:

$ pod install

4. See docs for react-native-webview setup: https://github.com/react-native-webview/react-native-webview/blob/master/docs/Getting-Started.md

Usage

Player

import { VimeoPlayer } from '@mindtechapps/rn-vimeo-player';

const App: React.FC = () => {
    return <VimeoPlayer videoId="123456789" />;
};

Props

| Name | Type | Required | Description | | --------------- | ---------- | -------- | ------------------------------------------------------------ | | videoUrl | string | yes | The video url. | | loaderColor | string | no | Use custom loader color instead of the default. | | customLoader | component | no | Use custom loader instead of the default. | | backgroundColor | string | no | The component's background color. | | onReady | function | no | A function what will be called when the player is ready. | | onError | function | no | A function what will be called when the player has an error. | | style | view style | no | The player's custom style. |

Chat

The chat uses different urls for videos and events.

import {  VimeoChat } from '@mindtechapps/rn-vimeo-player';

const App: React.FC = () => {
    return <VimeoChat chatUrl="https://vimeo.com/event/123456/chat/123456789" />;
};

Props

| Name | Type | Required | Description | | ------------ | ---------- | -------- | ---------------------------------------------------------- | | chatUrl | string | yes | The chat url. | | loaderColor | string | no | Use custom loader color instead of the default. | | customLoader | component | no | Use custom loader instead of the default. | | onReady | function | no | A function what will be called when the chat is ready. | | onError | function | no | A function what will be called when the chat has an error. | | style | view style | no | The chats's custom style. |

Note: To avoid the chat's webview refresh not recommended to implement in a modal.