Skip to main content
Logo Appt Light

Captions on React Native

Captions should be provided to enable users to understand what is being said in videos. Captions are a text based alternative for media, such as videos. The spoken dialogue and sound effects are displayed on screen as the video plays. Captions mostly benefit people who are deaf, hard of hearing, or deafblind. But captions are also useful to anyone who is temporarily unable to perceive sound, for example inside a library.

In React Native, you can use the React-Native-Video package to add captions in .vtt.ttml and .srt formats. It is advised to use .vtt as it is supported on both Android and iOS.

import { TextTrackType, Video } from 'react-native-video';

<Video
    textTracks={[
        {
            title: "English CC",
            language: "en",
            type: TextTrackType.VTT,
            uri: "https://appt.org/subtitles/en.vtt"
        },
        {
            title: "Spanish Subtitles",
            language: "es",
            type: TextTrackType.SRT,
            uri: require('https://appt.org/subtitles/es.srt')
        }
    ]}
/>

Feedback?

Let us know!