title: Interpolate is not a function react native
body: <p>I follow video at the link <a href="https://www.youtube.com/watch?v=YE7c6ch2msY" rel="nofollow noreferrer">https://www.youtube.com/watch?v=YE7c6ch2msY</a> and try do it.
  But when I add animated interpolate it show error &quot; interpolate is not a function&quot;
  Here is my code</p>
  <pre><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 }) =&gt; {
        return (
          &lt;View style={{ position: 'absolute', bottom: 100, flexDirection: 'row' }}&gt;
            {DATA.map((_, i) =&gt; {
              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 &lt;View key={`indicatot-${i}`}
                style={{
                  height: 10,
                  width: 10,
                  borderRadius: 5,
                  backgroundColor: '#333',
                  margin: 10
                }} /&gt;
            })}
          &lt;/View&gt;
        )
      }
  
      export default function App() {
        const scrollX = React.useRef(new Animated.Value(0)).current;
        return (
          &lt;View style={styles.container}&gt;
            &lt;StatusBar hidden /&gt;
            &lt;Animated.FlatList
            ...
              renderItem={({ item }) =&gt; {
                return (
                  ...
                )
              }}&gt;
  
            &lt;/Animated.FlatList&gt;
            &lt;Indicator scrollX={{ scrollX }} /&gt;
          &lt;/View&gt;
        );
      }
  
      const styles = StyleSheet.create({
        container: {
          flex: 1,
          backgroundColor: '#fff',
          alignItems: 'center',
          justifyContent: 'center',
        },
      });
  </code></pre>
  <p>I can see type of <code>scrollX</code> is <code>any</code>, is not <code>Animted.Value</code>
  How I can fix it?</p>