So I am following a video tutorial by Catalin Miron on Creating a timer with react native(Link to video here). But the problem is 9:57 minutes into the video and my app is giving me this error:
Invariant Violation: inputRange must be monotonically non-decreasing NaN,NaN,NaNhere is my App.tsx( Yea this is a typescript react native project )
import * as React from "react";import { Vibration, StatusBar, Easing, TextInput, Dimensions, Animated, TouchableOpacity, FlatList, Text, View, StyleSheet,} from "react-native";const { width, height } = Dimensions.get("window");const colors = { black: "#323F4E", red: "#F76A6A", text: "#ffffff",};const timers = [...Array(13).keys()].map((i) => (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 (<View style={styles.container}><StatusBar hidden /><Animated.View style={[ StyleSheet.absoluteFillObject, { justifyContent: "flex-end", alignItems: "center", paddingBottom: 100, }, ]}><TouchableOpacity onPress={() => {}}><View style={styles.roundButton} /></TouchableOpacity></Animated.View><View style={{ position: "absolute", top: height / 3, left: 0, right: 0, flex: 1, }}> -----------------------------------------Problem Start <Animated.FlatList data={timers} keyExtractor={(item) => item.toString()} horizontal bounces={false} onScroll={Animated.event( [{ nativeEvent: { contentOffset: { x: scrollX } } }], { useNativeDriver: true } )} showsHorizontalScrollIndicator={false} snapToInterval={ITEM_SIZE} decelerationRate="fast" style={{ flexGrow: 0 }} contentContainerStyle={{ paddingHorizontal: ITEM_SPACING, }} // eslint-disable-next-line @typescript-eslint/ban-types renderItem={(itemData: object, index: number) => { 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 (<View style={{ width: ITEM_SIZE, justifyContent: "center", alignItems: "center", }}><Animated.Text style={[styles.text, { opacity }]}> {itemData.item}</Animated.Text></View> ); }} /> -----------------------------------------Problem End</View></View> );}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: "monospace", color: colors.text, fontWeight: "900", },});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