I have custom drawer header component in expo. Here is my code

interface CustomDrawerHeaderProps {
  title: string;
  rightAction?: React.ReactNode;
  backRoute?: string;
}

function CustomDrawerHeader({
  title,
  rightAction,
  backRoute,
}: CustomDrawerHeaderProps): JSX.Element {
  const navigation = useNavigation();
  const router = useRouter();

  return (
    <SafeAreaView edges={['top', 'left', 'right']}>
      <Image
        source={require('../../../assets/header-bg.png')}
        className='absolute top-0 w-full'
      />
    </SafeAreaView>
  );
}


export { CustomDrawerHeader, SearchAction };

But the result is my header image overlapping whole contents. How can i this image not overlapping rest content in my screeb. Here is my result

I’ve been confused. What am i doing wrong ?

I did every possible ways but the results are same.