subtitle wont show

[DevineDecrypter]

Bug

Hey, I'm building an AndroidTV application using react native and I'm trying to add subtitle to my video (which is a .m3u8 file) from a url , but im not getting anything and nothing shows on screen .

*edit: I also tested it on react-native versions 0.61.2 0.61.5 0.64.0 and did not get any results.

Environment info

React native info output:

 System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz 
    Memory: 2.06 GB / 11.90 GB
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE       
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Version  4.1.0.0 AI-201.8743.12.41.7042882
    Visual Studio: 16.5.30011.22 (Visual Studio Community 2019)
  Languages:
    Java: 1.8.0_282 - /c/Program Files/OpenJDK/openjdk-8u282-b08/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: Not Found
    react-native-tvos:  0.63.4-0
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Library version: ^5.1.1

Steps To Reproduce

1. npm install -g @react-native-community/cli
2. react-native init TestApp --template=react-native-tvos
3. npm i react-native-video

Expected behaviour

subtitle being shown on top of the video , but nothing is shown.

Reproducible sample code

after doing all the steps , replace the content in your App.js with :

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

const App = () => {
  const VideoRef = useRef(null);

  const onBuffer = () => {
    console.log('buffering');
  };

  return (
    <>
      <Video
        source={{
          uri: 'https://www.w3schools.com/html/mov_bbb.mp4',
        }} // Can be a URL or a local file.
        ref={VideoRef} // Store reference
        onBuffer={onBuffer} // Callback when remote video is buffering
        onError={(e) => console.log(e)} // Callback when video cannot be loaded
        style={{width: '100%', height: '100%'}}
        resizeMode="contain"
        selectedTextTrack={{type: 'language', value: 'en'}}
        textTracks={[
          {
            title: 'test',
            language: 'en',
            type: TextTrackType.VTT,
            uri:
              'https://brenopolanski.github.io/html5-video-webvtt-example/MIB2-subtitles-pt-BR.vtt',
          },
        ]}
      />
    </>
  );
};

export default App;

[LamkasDev]

+1

[LamkasDev]

I solved this by adding a react-native.config.js file to root of my project with: module.exports = { dependencies: { 'react-native-video': { platforms: { android: { sourceDir: '../node_modules/react-native-video/android-exoplayer', }, }, }, }, };

[jesspinklet]

I solved this by adding a react-native.config.js file to root of my project with: module.exports = { dependencies: { 'react-native-video': { platforms: { android: { sourceDir: '../node_modules/react-native-video/android-exoplayer', }, }, }, }, };

may I ask how did you come up with this solution?

[LamkasDev]

I solved this by adding a react-native.config.js file to root of my project with: module.exports = { dependencies: { 'react-native-video': { platforms: { android: { sourceDir: '../node_modules/react-native-video/android-exoplayer', }, }, }, }, };

may I ask how did you come up with this solution?

I believe that Exo Player doesn't come packed with react-native-video on Android by default, so you need to add this config file to tell React Native to pack it with the module. As per this, textTracks are only supported with Exo Player.

[teamseamive]

When we try to add react-native.config.js using the above config, it doesn't show any error but the app doesn't run at all nor show any logs of what's wrong.

1. The app keeps crashing.
2. Nothing in CAT LOG or Metro errors.
3. We use HLS from Cloudflare with subtitles in it.

[DevineDecrypter]

I solved this by adding a react-native.config.js file to root of my project with: module.exports = { dependencies: { 'react-native-video': { platforms: { android: { sourceDir: '../node_modules/react-native-video/android-exoplayer', }, }, }, }, };

do you know a way to add AndroidTV as platforms ?

[tlenclos]

You can do this with an expo plugin now.

In your app.config.ts file :

export default withSettingsGradle(config, (config) => {
  if (config.modResults.language === 'groovy') {
    if (!config.modResults.contents.includes(`:react-native-video`)) {
      config.modResults.contents += `
include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')`;
    }
  }

  return config;
});

[sannjayy]

I solved this by adding a react-native.config.js file to root of my project with: module.exports = { dependencies: { 'react-native-video': { platforms: { android: { sourceDir: '../node_modules/react-native-video/android-exoplayer', }, }, }, }, };

But how can do the same for ios?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. If you are having a similar problem, please open a new issue and reference this one instead of commenting on a stale or closed issue.

[vanntrong]

I solved this by adding a react-native.config.js file to root of my project with: module.exports = { dependencies: { 'react-native-video': { platforms: { android: { sourceDir: '../node_modules/react-native-video/android-exoplayer', }, }, }, }, };

You help my day. Thanks!!!

[suchitmego]

use type: 'title' , type: 'index' is not working in my case . use that code <Video source={{uri:LINK}} // Can be a URL or a local file. ref={refVideo} onLoad={onLoad} // onSeek={onSeek} onProgress={onProgress} resizeMode={'cover'} paused={pause} selectedTextTrack={{ type: 'title', value: 'English', }} textTracks={[ { title: 'English', language: 'es', type: TextTrackType.VTT, uri: 'https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt', }, ]} />