CODEWITHSUNDEEP
javascriptreact-native
Hoa.Tran
Hoa.Tran

Reputation: 935

Interpolate is not a function react native

I follow video at the link https://www.youtube.com/watch?v=YE7c6ch2msY and try do it. But when I add animated interpolate it show error " interpolate is not a function" Here is my code


    import * as React from 'react';
    import { StatusBar, Animated, Text, Image, View, StyleSheet, Dimensions, FlatList } from 'react-native';
    import { TouchableOpacity } from 'react-native-gesture-handler';
    const { width, height } = Dimensions.get('screen');

    const Indicator = ({ scrollX }) => {
      return (
        <View style={{ position: 'absolute', bottom: 100, flexDirection: 'row' }}>
          {DATA.map((_, i) => {
            const inputRange =[(i-1) * width, i* width, (i+1)* width];
            const scale = scrollX.interpolate({
              inputRange,
              outputRange:[0.8,1.4,0.8],
              extrapolate:'clamp',
            })
            return <View key={`indicatot-${i}`}
              style={{
                height: 10,
                width: 10,
                borderRadius: 5,
                backgroundColor: '#333',
                margin: 10
              }} />
          })}
        </View>
      )
    }

    export default function App() {
      const scrollX = React.useRef(new Animated.Value(0)).current;
      return (
        <View style={styles.container}>
          <StatusBar hidden />
          <Animated.FlatList
          ...
            renderItem={({ item }) => {
              return (
                ...
              )
            }}>

          </Animated.FlatList>
          <Indicator scrollX={{ scrollX }} />
        </View>
      );
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      },
    });

I can see type of scrollX is any, is not Animted.Value How I can fix it?

Upvotes: 0

Views: 4372

Answers (1)

diedu
diedu

Reputation: 20785

It's just a little typo, you're putting double brackets when passing down the scrollX

<Indicator scrollX={{ scrollX }} />

This means you're passing an object with a property scrollX, just remove one set of brackets scrollX={ scrollX }

Upvotes: 1

Related Questions