animated.event does not seem to update Animated.Value

Question

So at the moment I try to understand the Animated Api. For that, I tried to highlight the current item in a Flatlist. The problem is, that animated.event does not update my animated.value ref.

    import React, { useRef, useEffect } from 'react';
import { View, Animated, Text, TouchableOpacity, FlatList, Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window');

const ITEM_WIDTH = width * 0.7;
const ITEM_HEIGHT = 300;

const data = [
    {
        key: 1,
        color: 'blue'
    },
    {
        key: 2,
        color: 'green'
    },
    {
        key: 3,
        color: 'black'
    },
    {
        key: 4,
        color: 'magenta'
    },
    {
        key: 5,
        color: 'red'
    },
    {
        key: 6,
        color: 'beige'
    },
    {
        key: 7,
        color: 'yellow'
    },
    {
        key: 8,
        color: 'orange'
    }
];

export function FirstAnimation() {
    const scrollX = useRef(new Animated.Value(0)).current;
    return (
        <View style={{ flex: 1 }}>
            <Animated.FlatList
                showsHorizontalScrollIndicator={false}
                data={[ { key: 'left' }, ...data, { key: 'right' } ]}
                keyExtractor={(item, index) => index}
                horizontal
                contentContainerStyle={{ alignItems: 'center' }}
                snapToInterval={ITEM_WIDTH}
                bounces={false}
                onScroll={(event) => {
                    Animated.event([ { nativeEvent: { contentOffset: { x: scrollX } } } ], {
                        useNativeDriver: true
                    });
                    console.log(
                        ITEM_WIDTH + '  and ' + event.nativeEvent.contentOffset.x + '  and ' + JSON.stringify(scrollX)
                    );
                }}
                style={{ fley: 1 }}
                scrollEventThrottle={16}
                decelerationRate={0}
                renderItem={({ item, index }) => {
                    const inputRange = [ (index - 2) * ITEM_WIDTH, (index - 1) * ITEM_WIDTH, index * ITEM_WIDTH ];
                    const translateOpacity = scrollX.interpolate({ inputRange, outputRange: [ 0.5, 0.9, 0.5 ] });

                    if (!item.color) {
                        return <View style={{ height: 200, width: (width - ITEM_WIDTH) / 2 }} />;
                    }

                    return (
                        <Animated.View
                            style={{
                                width: ITEM_WIDTH
                            }}
                        >
                            <Animated.View
                                style={{
                                    opacity: translateOpacity,
                                    width: ITEM_WIDTH,
                                    height: ITEM_HEIGHT,
                                    borderRadius: 20,
                                    backgroundColor: item.color,
                                    position: 'absolute'
                                }}
                            >
                                <Text>{index}</Text>
                            </Animated.View>
                        </Animated.View>
                    );
                }}
            />
            <Text>{JSON.stringify(scrollX)}</Text>
        </View>
    );
}

the relevent code is here the animated.event in the onScroll prop. When I console.log the event.nativeEvent.contentOffset.x value, I can see, that something is hapening.

Answer 1

Well it seams, that somehow Animated.event doen't or can't update the scrollX value. My workaround is to replace the Animated.event function with a 'simple'

scrollX.setValue(event.nativeEvent.contentOffset.x)

this might be the case, because I run Animated.event in an extra function:

onScroll={(event) => {
                Animated.event([ { nativeEvent: { contentOffset: { x: scrollX } } } ], {
                    useNativeDriver: true
                });
                [...]
            }}

My asumption is, that onScroll deliveres more arguments, that Animated.event needs, than just the event argument I pass through.

Teach me!