[Android] makeImageFromView does not respect scroll on Android

[PeKne]

Description

I am trying to create a screen overlay that is displayed when the user puts the app in the background. The overlay should be a blurred screenshot of the current app screen layout. While everything works fine on iOS, I am encountering a problem on Android. The issue arises when the screen contains a ScrollView and I use makeImageFromView to capture a screenshot. On Android, it always captures the top of the ScrollView, even if it is scrolled.

Expected Behavior

makeImageFromView function should capture the currently visible part of the ScrollView on Android, similar to how it works on iOS.

Current Behavior

On Android, the captured screenshot always shows the top of the ScrollView, even if it is scrolled.

Version

0.1.236

Steps to reproduce

1. Create an app with a ScrollView that contains a long content.
2. Scroll down.
3. Take screenshot with makeImageFromView.
4. Check that the captured screenshot does not represent currently visible part of the screen.

Code example:

import { ScrollView, StyleSheet, View, Button } from 'react-native';
import { Canvas, makeImageFromView, SkImage, Image } from '@shopify/react-native-skia';


export default function App() {
  // Create a ref for the view you'd like to take a snapshot of
  const ref = useRef<View>(null);
  // Create a state variable to store the snapshot
  const [image, setImage] = useState<SkImage | null>(null);
  // Create a function to take the snapshot
  const onPress = async () => {
      // Take the snapshot of the view
      const snapshot = await makeImageFromView(ref);
      setImage(snapshot);
  };


  return (
    <>
      <ScrollView style={{ flex: 1 }} ref={ref}>
          <View>
              <View
                  style={{
                      backgroundColor: 'cyan',
                      flex: 1,
                      minHeight: 200,
                      borderWidth: 5,
                  }}
              />
              <View
                  style={{
                      backgroundColor: 'red',
                      flex: 1,
                      minHeight: 500,
                      borderWidth: 5,
                  }}
              />
              <View
                  style={{
                      backgroundColor: 'green',
                      flex: 1,
                      minHeight: 1000,
                      borderWidth: 5,
                  }}
              />
          </View>
      </ScrollView>
      <Button title="Take screenshot" onPress={onPress} />
      {image && (
          <Canvas style={StyleSheet.absoluteFill}>
              <Image
                  image={image}
                  x={0}
                  y={0}
                  width={image.width() / 2 / pd}
                  height={image.height() / 2 / pd}
              />
          </Canvas>
      )}
  </>
  );
}

Demo

https://github.com/Shopify/react-native-skia/assets/26143964/ac9603ce-ce0d-4861-80ec-688bf3cedce8