How to start a bare React Native Typescript + Video project

[esegebart]

Okay I am just trying to set up just a simple Video project to test on and tinker on stuff. I am getting a few different errors and could very well be something I am doing, but I have been googling and I can't quite figure it out.

TypeError: Cannot read property 'resizeMode' of undefined, js engine: hermes

This one I looked in the "types.ts" and I didn't notice resizeMode in there. I tried to add it and then ran yarn, but I still get the error. How I tried to add it:

  /**
   * Set the resize mode to value.
   * 
   * @default "contain"
   */
  resizeMode?: string;

I then get several repeating errors :

ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 10): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient.
A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

Invariant Violation: Failed to call into JavaScript module method RCTEventEmitter.receiveTouches(). Module has not been registered as callable. Registered callable JavaScript modules (n = 10): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient.
A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

This is probably something I didn't set up correctly. I did the react-native-video instructions. Here is my App.js with my video object.

import React, { useRef, useState } from 'react';

import {
  View,
  Dimensions, 
  StyleSheet,
  Text
} from 'react-native';

import VideoPlayer from 'react-native-media-console';
import { onProgressData, onSeekData } from 'react-native-video';

const HEIGHT = Dimensions.get('window').height;
const WIDTH = Dimensions.get('window').width;

const App = (props) => {

  const videoRef = useRef();
  const [paused, setPaused] = useState(false);
  const [currentTime, setCurrentTime] = useState(0.0);
  const [isVideoReady, setIsVideoReady] = useState(false);

  const onLoad = () => setIsVideoReady(true);
  const onProgress = (data: OnProgressData) => setCurrentTime(data.currentTime);
  const onSeek = (data: OnSeekData) => setCurrentTime(data.seekTime);
  const onEnd = () => setPaused(true);
  
  return (
    <View style={{ flex: 1, height: HEIGHT, width: WIDTH }}>
      <VideoPlayer
        videoRef={videoRef}
        source={{uri: 'https://vjs.zencdn.net/v/oceans.mp4'}}
        navigator={props.navigator}
        onLoad={onLoad}
        onProgress={onProgress}
        onSeek={onSeek}
        onEnd={onEnd}
        showDuration
        showHours
        resizeMode={"contain"}
        controlTimeoutDelay={5000}
        isFullScreen
        style={{
          top: 0,
          left: 0,
          bottom: 0,
          right: 0,
          position: "absolute",
          width: "100%",
        }}
      />;
    </View>
  );

};

const styles = StyleSheet.create({
  
});

export default App;

Thank you!

[LunatiqueCoder]

hey @esegebart

I just tried the code you provided. It works for me, except I found one error:

That semicolon should be removed.

Can you provide more info? For example, how did you start a new project? Does it also have TypeScript?

[LunatiqueCoder]

@esegebart I just tried with a bare React Native typescript template and it seems to be working? You can follow these steps:

1. Make sure you have the environment setup for React Native Cli (not Expo!): https://reactnative.dev/docs/environment-setup

2. Run npx react-native init TSTemplateInit --template react-native-template-typescript
3. Run cd TSTemplateInit && yarn add react-native-video react-native-media-console
4. Run yarn add --dev @types/react-native-video
5. Run cd ios && pod install && cd ..
6. Run yarn start
7. Run yarn ios

Use the following code snippet:

import React, {useRef, useState} from 'react';

import {View, Dimensions, StyleSheet} from 'react-native';

import VideoPlayer from 'react-native-media-console';
import Video, {OnProgressData, OnSeekData} from 'react-native-video';

const HEIGHT = Dimensions.get('window').height;
const WIDTH = Dimensions.get('window').width;

const App = () => {
  const videoRef = useRef<Video>(null);
  const [paused, setPaused] = useState(false);
  const [currentTime, setCurrentTime] = useState(0.0);
  const [isVideoReady, setIsVideoReady] = useState(false);

  const onLoad = () => setIsVideoReady(true);
  const onProgress = (data: OnProgressData) => setCurrentTime(data.currentTime);
  const onSeek = (data: OnSeekData) => setCurrentTime(data.seekTime);
  const onEnd = () => setPaused(true);

  return (
    <View style={{flex: 1, height: HEIGHT, width: WIDTH}}>
      <VideoPlayer
        videoRef={videoRef}
        source={{uri: 'https://vjs.zencdn.net/v/oceans.mp4'}}
        // navigator={props.navigator}
        onLoad={onLoad}
        onProgress={onProgress}
        onSeek={onSeek}
        onEnd={onEnd}
        showDuration
        showHours
        resizeMode={'contain'}
        controlTimeoutDelay={5000}
        isFullscreen
        paused={paused}
        style={{
          top: 0,
          left: 0,
          bottom: 0,
          right: 0,
          position: 'absolute',
          width: '100%',
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({});

export default App;

If you run into trouble, let me know. Good luck!

[esegebart]

Ah, you know what - I didn't use a typescript template and also didn't add the typescript package to the sample project I did. I will redo and remake with the typescript template! Thank you.

[esegebart]

@criszz77 I also wanted to mention gave you a shout out in a Show and Tell discussion on the react-native-tvos repo!!!

[LunatiqueCoder]

@esegebart Thank you very much!

By the way, step (2) is only for a bare React Native project, meaning there is no tvOS support. Instead, for tvOS support, you can run: npx react-native init TSTemplateInit --template react-native-template-typescript-tv instead of step (2).

[esegebart]

Oh amazing! Okay :) That is super helpful to know! Thank you!

[LunatiqueCoder]

@esegebart It's also possible that you ran yarn start in another project? 🤔