# React Native


Este componente reproduz vídeos do Kinescope com React Native no iOS e Android. Ele se baseia no [react-native-video](https://react-native-video.github.io/react-native-video). Repositório: [kinescope/react-native-kinescope-video](https://github.com/kinescope/react-native-kinescope-video).

## Instalação

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

Depois de instalar as dependências no iOS, execute:

```bash
npx pod-install
```

### Repositórios do Android

Adicione `jcenter()` a `allprojects.repositories` no arquivo `android/build.gradle`, caso ainda não esteja presente:

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

### Erro TS2786 do TypeScript

Se o TypeScript informar que `Video` não pode ser usado como componente JSX, adicione esta configuração a `compilerOptions` no arquivo `tsconfig.json`:

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

## Props

O componente aceita suas próprias props e as [props do react-native-video](https://react-native-video.github.io/react-native-video/component/props).

| Prop | Tipo | Descrição |
| :--- | :--- | :--- |
| `videoId` | `string` | ID do vídeo no [app.kinescope.io](https://app.kinescope.io/) (**obrigatória**) |
| `preload` | `boolean` | Pré-carrega o vídeo |
| `externalId` | `string` | ID externo para análise de dados |
| `quality` | tipo de qualidade | Qualidade de reprodução |
| `autoSeekChangeQuality` | `boolean` | O valor padrão é `true`; somente no iOS |
| `drmAuthToken` | `string` | Token DRM |
| `referer` | `string` | Cabeçalho Referer |
| `posterResizeMode` | `ImageResizeMode` | Modo de redimensionamento da imagem de capa |

## Eventos

O componente aceita seus próprios eventos e os [eventos do react-native-video](https://react-native-video.github.io/react-native-video/component/events).

| Evento | Dados |
| :--- | :--- |
| `onManifestLoadStart` | — |
| `onManifestLoad` | `manifest: ManifestEventLoadTypes` |
| `onManifestError` | `error: unknown` |

## Próximos passos

- [Plataformas compatíveis](https://docs-br.kinescope.com/player-docs/supported-platforms/)
- [React para web](https://docs-br.kinescope.com/player-docs/libraries/react/)
- [Visão geral das bibliotecas do player](https://docs-br.kinescope.com/player-docs/libraries/)