title: Invariant Violation: inputRange must be monotonically non-decreasing NaN,NaN,NaN
body: <p>So I am following a video tutorial by Catalin Miron on Creating a timer with react native(<a href="https://www.youtube.com/watch?v=z9l5WXPKCpA" rel="nofollow noreferrer">Link to video here</a>). But the problem is 9:57 minutes into the video and my app is giving me this error: <br></p>
  <pre><code>Invariant Violation: inputRange must be monotonically non-decreasing NaN,NaN,NaN
  </code></pre>
  <p>here is my App.tsx( Yea this is a typescript react native project )</p>
  <pre><code>import * as React from &quot;react&quot;;
  import {
    Vibration,
    StatusBar,
    Easing,
    TextInput,
    Dimensions,
    Animated,
    TouchableOpacity,
    FlatList,
    Text,
    View,
    StyleSheet,
  } from &quot;react-native&quot;;
  
  const { width, height } = Dimensions.get(&quot;window&quot;);
  
  const colors = {
    black: &quot;#323F4E&quot;,
    red: &quot;#F76A6A&quot;,
    text: &quot;#ffffff&quot;,
  };
  
  const timers = [...Array(13).keys()].map((i) =&gt; (i === 0 ? 1 : i * 5));
  const ITEM_SIZE = width * 0.38;
  const ITEM_SPACING = (width - ITEM_SIZE) / 2;
  
  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.View
          style={[
            StyleSheet.absoluteFillObject,
            {
              justifyContent: &quot;flex-end&quot;,
              alignItems: &quot;center&quot;,
              paddingBottom: 100,
            },
          ]}
        &gt;
          &lt;TouchableOpacity onPress={() =&gt; {}}&gt;
            &lt;View style={styles.roundButton} /&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/Animated.View&gt;
        &lt;View
          style={{
            position: &quot;absolute&quot;,
            top: height / 3,
            left: 0,
            right: 0,
            flex: 1,
          }}
        &gt;
         -----------------------------------------Problem Start 
          &lt;Animated.FlatList
            data={timers}
            keyExtractor={(item) =&gt; item.toString()}
            horizontal
            bounces={false}
            onScroll={Animated.event(
              [{ nativeEvent: { contentOffset: { x: scrollX } } }],
              { useNativeDriver: true }
            )}
            showsHorizontalScrollIndicator={false}
            snapToInterval={ITEM_SIZE}
            decelerationRate=&quot;fast&quot;
            style={{ flexGrow: 0 }}
            contentContainerStyle={{
              paddingHorizontal: ITEM_SPACING,
            }}
            // eslint-disable-next-line @typescript-eslint/ban-types
            renderItem={(itemData: object, index: number) =&gt; {
              const inputRange = [
                (index - 1) * ITEM_SIZE,
                index * ITEM_SIZE,
                (index + 1) * ITEM_SIZE,
              ];
  
              const opacity = scrollX.interpolate({
                inputRange,
                outputRange: [0.4, 1, 0.4],
              });
  
              return (
                &lt;View
                  style={{
                    width: ITEM_SIZE,
                    justifyContent: &quot;center&quot;,
                    alignItems: &quot;center&quot;,
                  }}
                &gt;
                  &lt;Animated.Text style={[styles.text, { opacity }]}&gt;
                    {itemData.item}
                  &lt;/Animated.Text&gt;
                &lt;/View&gt;
              );
            }}
          /&gt;
         -----------------------------------------Problem End
        &lt;/View&gt;
      &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: colors.black,
    },
    roundButton: {
      width: 80,
      height: 80,
      borderRadius: 80,
      backgroundColor: colors.red,
    },
    text: {
      fontSize: ITEM_SIZE * 0.7,
      fontFamily: &quot;monospace&quot;,
      color: colors.text,
      fontWeight: &quot;900&quot;,
    },
  });
  </code></pre>
  <p>Other than typescript this app also uses Expo to work Please help me find a solution to this I looked through the google searches and github pages and there they are talking about carousel not Flatlist. Thank you in advance Also note the const values are working and are not undefined</p>