makeImageFromView doesn’t work properly on Android when the status bar is translucent

I need to take a screenshot of the whole screen. The screen includes a header from React Navigation. When I take a screenshot using makeImageFromView, it pushes the header down.

Deps:
"@react-navigation/elements": "^2.1.5",
"@react-navigation/native": "^7.0.6",
"@react-navigation/native-stack": "^7.1.7",
"@shopify/react-native-skia": "^1.5.10",
"react-native": "0.76.3",

Representation on the emulator	Screenshot

App.tsx

import React, {useRef} from 'react';

import {Navigation} from './navigation';
import {Pressable, StatusBar, Text, View} from 'react-native';
import {ImageFormat, makeImageFromView} from '@shopify/react-native-skia';

const base64Start = 'data:image/png;base64,';

export const App = () => {
  const viewRef = useRef<View>(null);

  const onPress = async () => {
    try {
      const res = await makeImageFromView(viewRef);
      console.log(res, 'RES');
      if (res) {
        const resBase = base64Start + res.encodeToBase64(ImageFormat.PNG, 100);

        console.log({resBase}, 'RES');
      }
    } catch (error) {
      console.log(error, 'ERROR');
    }
  };

  return (
    <View ref={viewRef} style={{flex: 1}} collapsable={false}>
      <StatusBar
        translucent
        backgroundColor={'transparent'}
        barStyle={'dark-content'}
      />
      <Navigation />
      <Pressable
        style={{
          position: 'absolute',
          top: 100,
          right: 16,
          backgroundColor: 'lightblue',
          paddingHorizontal: 16,
          paddingVertical: 8,
          borderRadius: 8,
        }}
        onPressIn={onPress}>
        <Text>Shot</Text>
      </Pressable>
    </View>
  );
};

navigation.ts

import {createStaticNavigation} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {FirstScreen} from './FirstScreen';

const RootStack = createNativeStackNavigator({
  screens: {
    FirstScreen: FirstScreen,
  },
});

export const Navigation = createStaticNavigation(RootStack);

FirstScreen.tsx

import React, {FC} from 'react';
import {View} from 'react-native';

export const FirstScreen: FC = () => {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}} />
  );
};

Start with the App.tsx reproduction and the makeImageFromView entry point, focusing on the translucent Android StatusBar and the React Navigation header. Reproduce the screenshot behavior, then verify that capturing the whole screen no longer pushes the header down while preserving the existing layout.