undefined не является объектом (оценка 'output.length')

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

      const step = 1 / (cards.length - 1);

const OutfitIdeas = ({ navigation }) =\> {

    const [currentIndex, setCurrentIndex] = useState(0);
    const aIndex = useTransition(currentIndex);

    return(
        <View style={{flex: 1, backgroundColor: 'white'}}>
            <Header
                leftIcon={icons.menu}
                leftOnPress={() => navigation.openDrawer()}
                title="Outfit Ideas"
                rightIcon={icons.bag}
                rightOnPress={() => alert("Hello")}
            \>

            <View style={{flex: 1}}>
                {{cards.map(({index}) => index >= currentIndex && (
                        <Card
                            key={index}
                            position = {index.interpolate({
                                inputRange: [aIndex, cards.length - 1],
                                outputRange: [0, 1],
                            })}
                            onSwipe={() => setCurrentIndex((prev) => prev + 1)}
                        \>
                    ))
                }}
                
            </View>
        <View>
    )
}
export default OutfitIdeas;
      import React from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';
import { PanGestureHandler } from 'react-native-gesture-handler';
import Animated, { add, Extrapolate, interpolate } from 'react-native-reanimated';
import { mixColor, mix, usePanGestureHandler } from 'react-native-redash/lib/module/v1';
import { useSpring } from '../screens/AuthScreens/useSpring';

const {width: wWidth} = Dimensions.get("window");
const width = wWidth * 0.75;
const height = width * (425 / 294)
const borderRadius = 24;

const Card = ({position, onSnap, source, step}) => {

    const {gestureHandler, translation, velocity, state} = usePanGestureHandler();
    const backgroundColor = mixColor(position, "#C9E9E7", "#74BCB8")
    const translateYOffset = mix(position, 0, -50)
    const scale = mix(position, 1, 0.9)
    const imageScale = interpolate(step, {
        inputRange: [0, step],
        outputRange: [1, 0.8],
        extraploate: Extrapolate.CLAMP
    });
    // const imageScale = mix(position, 1, 0.5);

    const translateX = useSpring({
        value: translation.x,
        velocity: velocity.x,
        state,
        snapPoints: [-wWidth, 0, wWidth],
        onSnap: ([x]) => x !== 0 && onSnap(),
    });
    const translateY = add(
        translateYOffset,
        useSpring({
            value: translation.y,
            velocity: velocity.y,
            state,
            snapPoints: [0]
        })
    );

    return(
        <View style={[{justifyContent: 'center', alignItems: 'center'}, StyleSheet.absoluteFill]}>
            <PanGestureHandler {...gestureHandler}>
                <Animated.View
                    style={{
                        backgroundColor: backgroundColor,
                        width,
                        height,
                        borderRadius,
                        transform: [{translateY}, {translateX}, {scale}],
                        overflow: 'hidden'
                    }}
                >
                    <Animated.Image
                        {...{source}}
                        style={{
                            ...StyleSheet.absoluteFillObject,
                            width: undefined,
                            height: undefined,
                            transform: [{scale: imageScale}]
                        }}
                    />
                </Animated.View>
            </PanGestureHandler>
        </View>
    )
}

export default Card;

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

0 ответов