undefined is not an object(singleValue.StopTracking) on Swipe animation - reactjs

Question

I have a Delete on Swipe function that returns TypeError: undefined is not an object(evaluating 'singleValue.StopTracking')
Im using expo to run the project
After I swipe, expo returns the error, I click dismiss and the product disappears from my cart
I don't know what any more information to give
const rowTranslateAnimatedValues = {};
Array(20)
.fill('')
.forEach((_, i) => {
rowTranslateAnimatedValues[${i}] = new Animated.Value(1);
});
const [cart, setCart] = useState([]);
const [products, setProducts] = useState([]);
const [valueInput, setValueInput] = useState(1);
const [listData, setListData] = useState(
Array(4)
.fill('')
.map((_, i) => ({ key: `${i}`, text: `item #${i}` }))
);
const onSwipeValueChange = swipeData => {
const { key, value } = swipeData;
if (
value < -Dimensions.get('window').width &&
!this.animationIsRunning
) {
this.animationIsRunning = true;
Animated.timing(rowTranslateAnimatedValues[key], {
toValue: 0,
duration: 500,
})
.start(() => {
const newData = [...listData];
const prevIndex = listData.findIndex(item => item.key === key);
newData.splice(prevIndex, 1);
setListData(newData);
this.animationIsRunning = false;
});
}
};
const renderItem = data => (
<Animated.View
>
<TouchableHighlight
onPress={() => console.log('You touched me')}
style={styles.rowFront}
underlayColor={'#AAA'}
>
<View>
<Text>I am {data.item.text} in a SwipeListView</Text>
</View>
</TouchableHighlight>
</Animated.View>
);
const renderHiddenItem = () => (
<View style={styles.rowBack}>
<View style={[styles.backRightBtn, styles.backRightBtnRight]}>
<Text style={styles.backTextWhite}>Delete</Text>
</View>
</View>
);
return (
<Block flex center style={styles.cart}>
<View style={styles.container}>
<SwipeListView
disableRightSwipe
data={cart}
renderItem={renderProduct}
showsVerticalScrollIndicator={false}
keyExtractor={(item, index) => `${index}-${item.title}`}
ListEmptyComponent={renderEmpty()}
ListHeaderComponent={renderHeader()}
ListFooterComponent={renderFooter()}
renderHiddenItem={renderHiddenItem}
rightOpenValue={-Dimensions.get('window').width}
onSwipeValueChange={onSwipeValueChange}
/>
</View>
</Block>
);
}

Answer 1

For anyone who faces this problem,
you can just think this.animationIsRunning of a variable that manages the start and the end of animation.
So you can just use const animationIsRunning = useRef(false) to manage the animation state.
You can use animationIsRunning.current instead of this.animationIsRunning.
Also, this.animationIsRunning = true or false can be changed into animationIsRunning.current = true or false
See code at
https://github.com/jemise111/react-native-swipe-list-view/pull/521/commits/2946e3a123f26ef5292a3884e0aec58436386e18