react-nativevideoreact-native-video

How to get dimensions of a video in React native?


I am using react-native-video component to play a video.

Problem:
I would like to know the dimensions of the video so I can adapt some other items.

When I store the ref with

<Video
    ref={ref => setVideoRef(ref)}
    resizeMode={'contain'}
/>

I can access videoRef.props.scaleX and videoRef.props.scaleY, but they are always undefined, even if the video is fully loaded. How can I access the video shape/ dimensions?


Solution

  • You can pass a callback to the onLoad prop, which will receive the naturalSize of the video. Example:

      <Video
        onLoad={({ naturalSize }) => {
          console.log(naturalSize.width, naturalSize.height);
        })}
        ...
    

    The callback has a lot more info if you need it - see more in the docs.