https://github.com/tejachundru/react-native-interactive-transcripts
Interactive Transcripts support in the react-native. Supports (WEBVTT), as of now (Work in progress)
https://github.com/tejachundru/react-native-interactive-transcripts
hacktoberfest react react-native react-native-transcripts subtitles transcripts video webvtt
Last synced: 4 months ago
JSON representation
Interactive Transcripts support in the react-native. Supports (WEBVTT), as of now (Work in progress)
- Host: GitHub
- URL: https://github.com/tejachundru/react-native-interactive-transcripts
- Owner: tejachundru
- License: mit
- Created: 2020-09-11T18:03:16.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-09-20T00:46:34.000Z (5 months ago)
- Last Synced: 2025-09-20T02:36:46.001Z (5 months ago)
- Topics: hacktoberfest, react, react-native, react-native-transcripts, subtitles, transcripts, video, webvtt
- Language: Java
- Homepage: https://tejachundru.github.io/react-native-interactive-transcripts/
- Size: 6.71 MB
- Stars: 5
- Watchers: 1
- Forks: 3
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[](https://badge.fury.io/js/react-native-interactive-transcripts)
# react-native-interactive-transcripts
Interactive Transcripts support in the react native.
Supports (WEBVTT) , as of now
(Work in progress)
## Installation
```sh
npm install react-native-interactive-transcripts
```
or
```sh
yarn add react-native-interactive-transcripts
```
## Input Props
| Prop | type | Description |
| :---------------------- | :--------------------: | :---------------------------------------: |
| currentDuration | number (required) | Pass in the current duration of the Video |
| url | String (required) | Url of the VTT file |
| textStyle | styleObject (optional) | Style for the Text in transcript |
| textContainerStyle | styleObject (optional) | Style for the Text Container |
| contentContainerStyle | styleObject (optional) | Style for the Content(list) |
| activeTranscriptColor | string (optional) | active Transcript color |
| inactiveTranscriptColor | string (optional) | inactive Transcript color |
## Callback
| callBack | return | Description |
| :----------------------- | :----: | :----------------------------------------------------------------------------------: |
| seekToTranscriptDuration | number | Using this is callback value, seek your player to the particular transcript duration |
## Usage
You can use the Transcripts with any player,example below is using - [react-native-video](https://github.com/react-native-community/react-native-video)
```js
import InteractiveTranscripts from "react-native-interactive-transcripts";
// ...
{
player = ref; // player ref
}}
style={{ width: '100%', height: '30%', backgroundColor: 'skyblue' }}
source={{
uri:
'https://html5multimedia.com/code/media/elephants-dream-medium.mp4',
}} // Can be a URL or a local file.
onProgress={progressCallback}
/>
{
player.seek(time); // seek to the clicked transcrpit start duration .
}}
/>
>
```
## Demo
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT