Tengo una lista plana de elementos que representa un menú de deslizamiento lateral. En el menú lateral, tengo un botón que permite al usuario eliminar un elemento de la lista plana. Estoy tratando de hacer que el elemento se anime hacia arriba cuando se elimine. Para hacer esto he hecho:

 // Holds all the items animated values const rowTranslateAnimatedValues = {}; // Delete item by index const removeItemById = (inventoryItemIndex) => { Animated.timing(rowTranslateAnimatedValues[inventoryItemIndex], { toValue: 0, duration: 200, }).start(() => { // filter down item and set data to state }); }; // Flatlist of items <FlatList data={inventoryData} renderItem={({ item, index }) => ( <Swipeable key={index + 5} ref={ (ref) => (rowTranslateAnimatedValues[index] = new Animated.Value(1))) // create a Animated value ref for every item } onSwipeableRightOpen={() => closeRow(index)} > <Animated.View style={{ height: rowTranslateAnimatedValues[index].interpolate({ // causes error inputRange: [0, 1], outputRange: [0, 78], }), }} > <Layout level={theme === 'dark' ? '3' : '1'}> <InventoryItem item={item} /> </Layout> </Animated.View> </Swipeable> )} keyExtractor={(item, index) => index.toString()} />

En Flatlist, estoy creando una referencia Animated.Value para cada elemento. El problema es que, cuando intento acceder a rowTranslateAnimatedValues[index] en Animated.View , aparece el error: Cannot read properties of undefined (reading 'interpolate') . Esto me confunde porque en la carga de la página, rowTranslateAnimatedValues se completa con valores animados.

¿Como puedo resolver esto? He estado atascado por un tiempo. Cualquier ayuda sería apreciada.