React native video is not displaying total video time

Question

this my code:

export default function VideoPlayer() {
  const videoPlayerRef = useRef(null);
  const [status, setStatus] = useState({});
  const [totalDuration, setTotalDuration] = useState(null);

  return (
    <View style={styles.container}>
      <Video
        ref={videoPlayerRef}
        source={'https://samplelib.com/lib/preview/mp4/sample-5s.mp4'}
        onLoad={status => setTotalDuration(() => status)}
      />
      <Text style={styles.timestamp}>{totalDuration.durationMillis}</Text>
    </View>
  );
}

I expect to get total video duration from Video parameter onLoad. However I get an error code:

<Text style={styles.timestamp}>{totalDuration.durationMillis}</Text>

Outputs: Cannot read properties of null (reading 'durationMillis'). Any ideas what's wrong there?

Answer 1

The totalDuration state is initialized with a null value, you should handle the possibly undefined case of the object.

<Text style={styles.timestamp}>{totalDuration?.durationMillis}</Text>