Image slider for transparent header

Header bar

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

const getAspectRatio = memoize((url: string): number | undefined => {
  try {
    const r = parseFloat(new URL(url).searchParams.get('r') || '');
    return isNaN(r) ? undefined : r;
  } catch {
    return undefined;
  }
});

const AppBlock: NativeAppBlock = function (props) {
  const pageInsets = usePageInsets();
  const animatedPageScrollPosition = useScope(s=>s.animatedPageScrollPosition);

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

  const data = props?.data || {};
  const images = data.images;

  const avgAspectRatio = useMemo(() => {
    const ratios = (images || []).map(item => getAspectRatio(item.image)).filter((r): r is number => r !== undefined);
    return ratios.length ? ratios.reduce((s, r) => s + r, 0) / ratios.length : 2;
  }, [images]);

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

export default AppBlock;