У меня проблема с анимированным горизонтальным плоским списком реакции ⇐ Android

[Anonymous]

Я пытаюсь создать карусель карточек, используя Flatlist + Reanimated, и хочу показать край следующего слайда внутри экрана, но следующий слайд появляется только при начале прокрутки.
вот гифка, описывающая мою проблему
вот мой основной компонент

Код: Выделить всё

import { ImageSliderType } from '@/data/sliderData'
import React from 'react'
import { View } from 'react-native'
import SliderItem from './SliderItem'
import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated'

type Props = {
itemList: ImageSliderType[]
}

const Slider = ({ itemList }: Props) => {
const scrollX = useSharedValue(0);
const onScrollHandler = useAnimatedScrollHandler({
onScroll: (e) => {
scrollX.value = e.contentOffset.x;
}
})

return (

 } />

)
}

export default Slider

и компонент «Мои элементы»

Код: Выделить всё

import { Text, Image, StyleSheet, Dimensions } from 'react-native'
import React from 'react'
import { ImageSliderType } from '@/data/sliderData'
import Animated, { Extrapolation, interpolate, SharedValue, useAnimatedStyle } from 'react-native-reanimated'

type Props = {
item: ImageSliderType,
index: number,
scrollX: SharedValue
}

const { width } = Dimensions.get("screen")
const SliderItem = ({ item, index, scrollX }: Props) => {

const rnAnimatedStyle = useAnimatedStyle(() => {
return {
transform: [
{
translateX: interpolate(
scrollX.value,
[(index - 1) * width, index * width, (index + 1) * width],
[-width * .25, 0, width * .25],
Extrapolation.CLAMP
),
},
]
}
}
)
return (


{item.title}

)
}

export default SliderItem

const styles = StyleSheet.create(
{
itemCnt: {
justifyContent: 'center',
alignItems: 'center',
gap: 20,
width: width,

}
}
)

и данные

Код: Выделить всё

import { ImageSourcePropType } from "react-native";
export type ImageSliderType = {
title: string;
image: ImageSourcePropType;
description: string;
}
export const ImageSlider =
[
{
title: 'Nullam enim ligula',
image: require('@/assets/images/sliderImages/4.jpg'),
description: 'Duis vitae libero risus. Sed vitae ligula at eros ultr',
},
{
title: 'Nullam enim ligula',
image: require('@/assets/images/sliderImages/4.jpg'),
description: 'Duis vitae libero risus. Sed vitae ligula at eros ultr',
},
{
title: 'Nullam enim ligula',
image: require('@/assets/images/sliderImages/4.jpg'),
description: 'Duis vitae libero risus. Sed vitae ligula at eros ultr',
},
{
title: 'Nullam enim ligula',
image: require('@/assets/images/sliderImages/4.jpg'),
description: 'Duis vitae libero risus. Sed vitae ligula at eros ultr',
},
{
title: 'Nullam enim ligula',
image: require('@/assets/images/sliderImages/4.jpg'),
description: 'Duis vitae libero risus. Sed vitae ligula at eros ultr',
},
]

по сути, я пытался показать первый слайд в центре экрана и показать лишь небольшую часть следующего рядом с ним

Подробнее здесь: https://stackoverflow.com/questions/790 ... l-flatlist