# React Native


A component for playing Kinescope videos in React Native on iOS and Android. It is based on [react-native-video](https://react-native-video.github.io/react-native-video). Repository: [kinescope/react-native-kinescope-video](https://github.com/kinescope/react-native-kinescope-video).

## Installation

```bash
npm install @kinescope/react-native-kinescope-video react-native-video@6.4.2 @react-native-async-storage/async-storage --save
```

After installing the dependencies on iOS, run:

```bash
npx pod-install
```

### Android repositories

Add `jcenter()` to `allprojects.repositories` in `android/build.gradle` if it is not already present:

```gradle
allprojects {
  repositories {
    jcenter()
  }
}
```

### TypeScript error TS2786

If TypeScript reports that `Video` cannot be used as a JSX component, add the following to `compilerOptions` in `tsconfig.json`:

```json
{
  "compilerOptions": {
    "paths": {
      "react": ["./node_modules/@types/react"]
    }
  }
}
```

## Props

The component accepts its own props and the [react-native-video props](https://react-native-video.github.io/react-native-video/component/props).

| Prop | Type | Description |
| :--- | :--- | :--- |
| `videoId` | `string` | Video ID from [app.kinescope.io](https://app.kinescope.io/) (**required**) |
| `preload` | `boolean` | Preload the video |
| `externalId` | `string` | External ID for analytics |
| `quality` | quality type | Playback quality |
| `autoSeekChangeQuality` | `boolean` | Defaults to `true`; iOS only |
| `drmAuthToken` | `string` | DRM token |
| `referer` | `string` | Referer header |
| `posterResizeMode` | `ImageResizeMode` | Poster resize mode |

## Events

The component supports its own events and the [react-native-video events](https://react-native-video.github.io/react-native-video/component/events).

| Event | Data |
| :--- | :--- |
| `onManifestLoadStart` | — |
| `onManifestLoad` | `manifest: ManifestEventLoadTypes` |
| `onManifestError` | `error: unknown` |

## Next steps

- [Supported platforms](https://docs.kinescope.com/player-docs/supported-platforms/)
- [React for web](https://docs.kinescope.com/player-docs/libraries/react/)
- [Player libraries overview](https://docs.kinescope.com/player-docs/libraries/)