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

[chiefchief]

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'}} />
  );
};