CODEWITHSUNDEEP
react-nativeanimation
CharlieWhite
CharlieWhite

Reputation: 143

interpolate is not a function

Interpolate function from Animated return is not a function

I am following this, but I am currently doing it as function component (chapter : "Designing the Tinder Cards Movement"): https://www.instamobile.io/react-native-controls/react-native-swipe-cards-tinder/

I don't understand why interpolate return "is not a function". I spent a lot of time on it and I didn't find something.

There is the card component I have written :

import React, { useState, useEffect } from 'react'
import { Text, View, Animated, Image, StyleSheet, PanResponder } from 'react-native'

function Card(props){
    const { screen_height, screen_width, image, Data, currentIndex, Index } = props;

    const [pan, setPan] = useState(new Animated.ValueXY());

    const [panResponder, setPanResponder] = useState(PanResponder.create({
        onStartShouldSetPanResponder: (evt, gestureState) => true,
        onPanResponderMove: (evt, gestureState) => {
            setPan({ x: gestureState.dx, y: gestureState.dy });
        },
        onPanResponderRelease: (evt, gestureState) => {
        }
    }));

    let value = Math.round(pan.x);

    if(value !== NaN || value !== undefined){
        console.log(value.interpolate({ inputRange: [0, 1], outputRange: [150, 0]}));
    }

    if (Index < currentIndex) { return null }
    else if(Index == currentIndex){
        return(
        <Animated.View style={[{ transform:[{ translateX: pan.x }, { translateY: pan.y }] },{ height:screen_height - 120, width:screen_width, padding:10, position:'absolute' }]} {...panResponder.panHandlers}>
            <Image style={[{
                flex:1,
                height:null,
                width:null,
                resizeMode:"cover",
                borderRadius:20,
                }]} source={image.uri}/>
        </Animated.View>)
    } else {
        return(
        <Animated.View style={[{ height:screen_height - 120, width:screen_width, padding:10, position:'absolute' }]}>
            <Image style={[{
                flex:1,
                height:null,
                width:null,
                resizeMode:"cover",
                borderRadius:20,
                }]} source={image.uri}/>
        </Animated.View>)
    }
}

export default Card;

enter image description here

Upvotes: 0

Views: 374

Answers (1)

gwl002
gwl002

Reputation: 750

setPan is wrongly used.pan is now a object not an Animated.Value anymore.You should call setValue or using Animated.event on the animated value Instead.

onPanResponderMove: Animated.event([
      null,
      {
        dx: pan.x, // x,y are Animated.Value
        dy: pan.y,
      },
    ]),

Upvotes: 1

Related Questions