I have created a image carousel in React Native using react-native-reanimated.

This is the screenshot of image carousel

This is the code of imageItem:

import React from 'react';
import { Dimensions, Image } from 'react-native';
import Animated, { Extrapolation, SharedValue, interpolate, useAnimatedStyle } from 'react-native-reanimated';

interface BadgeItemProps {
    item: {
        banner: string;
    };
    index: number;
    contentOffset: SharedValue<number>;
}

const { width: windowWidth } = Dimensions.get('window');
export const listItemWidth = windowWidth / 5;

export const BadgeItem: React.FC<BadgeItemProps> = ({ item, index, contentOffset }) => {

    const rStyle = useAnimatedStyle(() => {
        const inputRange = [
            (index - 2) * listItemWidth,
            (index - 1) * listItemWidth,
            index * listItemWidth,
            (index + 1) * listItemWidth,
            (index + 2) * listItemWidth,
        ];

        const opacityOutputRange = [0.7, 0.9, 1, 0.9, 0.7];
        const opacity = interpolate(
            contentOffset.value,
            inputRange,
            opacityOutputRange,
            Extrapolation.CLAMP
        );

        const scaleOutputRange = [0.7, 0.9, 1, 0.9, 0.7];
        const scale = interpolate(
            contentOffset.value,
            inputRange,
            scaleOutputRange,
            Extrapolation.CLAMP
        );

        return {
            opacity,
            transform: [
                { scale },
            ],
        };
    });

    return (
        <Animated.View
            style={[
                {
                    width: listItemWidth,
                    elevation:5,
                    aspectRatio: 1,
                    shadowOpacity: 0.2,
                    shadowOffset: { width: 0, height: 0 },
                    shadowRadius: 20,
                },
                rStyle,
            ]}
        >
            <Image
                source={{ uri: item.banner }}
                style={{ flex: 1, borderRadius: 200 }}
            />
        </Animated.View>
    );
};

I am not able to set equal margin between images because I am using scaling the image on scroll.

How to set equal margin when scaling the image.