Search code examples
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.