Image for transparent header

To be used as top most section on page

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

const DEFAULT_ASPECT_RATIO = 2;

const AppBlock: NativeAppBlock = function ({data}) {
  
  const pageInsets = usePageInsets();
  const page = useScope(s=>s.page);
  const tab = useScope(s=>s.tab);
  const {tab: activeTabId} = useParams();
  const animatedPageScrollPosition = useScope(s=>s.animatedPageScrollPosition);

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

  const stateKey = [`page:${page?.id}`, tab && `tab:${tab.id}`, "isHeaderTransparent"].filter(Boolean).join('/');
  const [isHeaderTransparent, setIsHeaderTransparent] = useSharedState(stateKey, false);

  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]);

  useEffect(() => {
    if(tab && activeTabId !== tab?.id) return;
    const listenerId = animatedPageScrollPosition.addListener(({ value }) => {
      setIsHeaderTransparent(value<=0);
    });

    return () => {
      animatedPageScrollPosition.removeListener(listenerId);
    };
  }, [animatedPageScrollPosition, activeTabId, tab]);

  // when unmounted, clear transparent header
  useEffect(()=>{
    setIsHeaderTransparent(true)
    return ()=>setIsHeaderTransparent(false)
  }, [])

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

export default AppBlock;