# React Native


Компонент для воспроизведения видео Kinescope в React Native (iOS и Android). Опирается на [react-native-video](https://react-native-video.github.io/react-native-video). Репозиторий: [kinescope/react-native-kinescope-video](https://github.com/kinescope/react-native-kinescope-video).

## Установка

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

На iOS после установки зависимостей:

```bash
npx pod-install
```

### Android: репозитории

В `android/build.gradle` в `allprojects.repositories` добавьте `jcenter()`, если его ещё нет:

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

### TypeScript: ошибка TS2786

Если TypeScript ругается, что `Video` нельзя использовать как JSX-компонент, в `tsconfig.json` → `compilerOptions` добавьте:

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

## Props

Помимо своих props компонент принимает [props react-native-video](https://react-native-video.github.io/react-native-video/component/props).

| Prop | Тип | Описание |
| :--- | :--- | :--- |
| `videoId` | `string` | ID видео из [app.kinescope.io](https://app.kinescope.io/) (**обязательный**) |
| `preload` | `boolean` | Предзагрузка видео |
| `externalId` | `string` | Внешний ID для аналитики |
| `quality` | quality type | Качество воспроизведения |
| `autoSeekChangeQuality` | `boolean` | По умолчанию `true`; только iOS |
| `drmAuthToken` | `string` | Токен для DRM |
| `referer` | `string` | Referer-заголовок |
| `posterResizeMode` | `ImageResizeMode` | Режим масштабирования постера |

## События

Помимо своих событий компонент поддерживает [события react-native-video](https://react-native-video.github.io/react-native-video/component/events).

| Событие | Данные |
| :--- | :--- |
| `onManifestLoadStart` | — |
| `onManifestLoad` | `manifest: ManifestEventLoadTypes` |
| `onManifestError` | `error: unknown` |

## Что дальше?

- [Поддерживаемые платформы](https://docs.kinescope.ru/dokumentaciya-pleera/podderzhivaemye-platformy/)
- [React (web)](https://docs.kinescope.ru/dokumentaciya-pleera/biblioteki/react/)
- [Обзор библиотек](https://docs.kinescope.ru/dokumentaciya-pleera/biblioteki/)