Unable to Capture screen shot in react-native-video

Question

react-native Platform:

• iOS
• Android

Issue:

I am trying to capture screen. when video is pause. But whenever I trying to capture image from video. its throwing waring and unable to capture that;

Possible Unhandled Promise Rejection (id: 25): Error: The content size must not be zero or negative. Got: (0, 410)

Library version:

"react-native-video": "^5.1.0-alpha8",
"react-native-view-shot": "^3.1.2",

Code:

 const viewShotRef = useRef(null);
 const [uri, setUri] = useState('');

<ViewShot
      style={[styles.imageViewerStyleVideo, {height: 410}]}
      ref={viewShotRef}
      captureMode="continuous"
      options={{format: 'jpg', quality: 0.9}}>
         <Video
             ref={(p) => {
               videoRef = p;
         }}
         paused={isPaused}
         source={getImageSource(caseViewerVideo)}
         resizeMode={'contain'}
         selectedVideoTrack={'auto'}
         style={styles.fullScreenMode}
         controls={true}
         playInBackground={false}
         playWhenInactive={false}
      />
</ViewShot>

<Pressable
        style={{
          width: 40,
          height: 40,
          borderWidth: 1,
          borderRadius: 20,
          position: 'absolute',
          top: 260,
          right: 80,
          borderColor: Colors.pencil,
          backgroundColor: Colors.shadow,
        }}
        onPress={() => onCapture()}
 />

const onCapture = async () => {
    const uri = await viewShotRef.current.capture();
    setUri(uri);
    console.log(uri);
 };

Answer 1

According to github page:

"continuous" is EXPERIMENTAL, this will capture A LOT of images continuously. For very specific use-cases.

From your code I saw that you have a Pressable to make the screen shot. I would suggest you to completely remove captureMode props.

On faq I read:

Getting "The content size must not be zero or negative."

Make sure you don't snapshot instantly, you need to wait at least there is a first onLayout event, or after a timeout, otherwise the View might not be ready yet. (It should also be safe to just wait Image onLoad if you have one). If you still have the problem, make sure your view actually have a width and height > 0.

Alternatively, you can use the ViewShot component that will wait the first onLayout.

So maybe you should wait Video's onLoad event before make a screen shot (another reason that suggest you to remove captureMode props).

Alternatively, you could use captureRef(view, options) or captureScreen() instead of capture().