React-native - Capture screenshot of the entire webpage

Question

The code below captures only the visible part of the webview and I want to modify it to capture the entire/scrollable content of the webpage, I have also attached an Image to guide you as to how I want to capture the screenshot.

Example: This screenshot shows an example of what I'm trying to achieve

This is my code:

import React, { useState, useRef } from 'react';
import { StyleSheet, View, TextInput, Button, Image } from 'react-native';
import { WebView } from 'react-native-webview';
import ViewShot from 'react-native-view-shot';
import { captureRef } from 'react-native-view-shot';

const MyWebComponent = () => {
  const [url, setUrl] = useState('');
  const [showWebView, setShowWebView] = useState(false);
  const [imageUri, setImageUri] = useState(null);
  const webviewRef = useRef(null);
  const viewRef = useRef(null);

  const urlFunc = async (text) => {
    await setUrl(text);
    await setShowWebView(false);
  };

  const handleSearch = async () => {
    await setShowWebView(true);
    await setImageUri(null)
  };


  const handleCapture = async () => {
    try {
      const uri = await captureRef(viewRef, {
        format: 'png',
        quality: 1,
      });
      console.log('Image saved to', uri);
      setImageUri(uri);
      setShowWebView(false);
    } catch (error) {
      console.error('Error capturing WebView', error);
    }
  };

  return (
    <>
      <View style={{ marginTop: 50 }}>
        <TextInput
          placeholder="Enter website URL"
          value={url}
          onChangeText={(text) => urlFunc(text)}
        />
        <Button title="Search" onPress={handleSearch} />
      </View>
      {showWebView && (
        <ViewShot ref={viewRef} style={{ flex: 1 }}>
          <WebView source={{ uri: `https://${url}` }} style={{ flex: 1 }} />
        </ViewShot>
      )}
      {imageUri && (
        <View style={{ flex: 1 }}>
          <Image source={{ uri: imageUri }} style={{ flex: 1, resizeMode: 'contain' }} />
        </View>
      )}
      {!imageUri && <Button title="Capture" onPress={handleCapture} />}
    </>
  );
};

export default MyWebComponent;