Image for transparent header

To be used as top most section on page

import React, { useMemo } from "react";
import {
  ImageBackground,
  Image,
  Box,
  usePageInsets,
  Actionable,
  TransparentHeader,
} from "@evlop/native-components";
import { Animated } from 'react-native';
import { useScope } from '@evlop/commons';
import { BlurView } from '@react-native-community/blur';

const DEFAULT_ASPECT_RATIO = 2;

function AppBlock ({data}) {
  const pageInsets = usePageInsets();
  const animatedPageScrollPosition = useScope(s=>s.animatedPageScrollPosition);

  const translateY = animatedPageScrollPosition?.interpolate({
    inputRange: [-1, 0],
    outputRange: [-1, 0],
    extrapolateLeft: 'extend',
    extrapolateRight: 'clamp',
  })

  const {image, action} = data;

  const aspectRatio = useMemo(()=>{
    if(image){
      const imageUrl = new URL(image)
      const imageAspectRatio = imageUrl.searchParams.get("r")
      if(imageAspectRatio) return imageAspectRatio;
    }
    return DEFAULT_ASPECT_RATIO;
  }, [image]);

  return (
    <Animated.View style={{transform: [{translateY: translateY}]}}>
      <TransparentHeader active />
      <Box width="100%" position="relative" >
        <Image resizeMode="cover" aspectRatio={aspectRatio} />
        {/* Swiper fills the entire header area */}
        <Box overflow="hidden" position="absolute" top={-pageInsets.top} left={0} right={0} bottom={0}>
          <ImageBackground src={data.image}>
              <BlurView blurType="dark">
                <Box bg="transparent" height={pageInsets.top}/>
              </BlurView>
              <Box style={{aspectRatio}}>
                <Actionable action={action}>
                  <Image
                    src={data.image}
                    resizeMode="cover"
                    aspectRatio={aspectRatio}
                  />
                </Actionable>
              </Box>
            </ImageBackground>
        </Box>
      </Box>
    </Animated.View>
  );
};

export default AppBlock;