How to use useAnimatedStyle inside a FlatList renderItem?

Question

im trying to create a carousel effect upon scrolling using renimatedV2 and im realizing that because of the useAnimatedStyle hook dependency I cannot apply the animated style over to the view. Reason is it is a hook and I cannot place it inside the renderItem. The reason I need to place it inside the renderItem is because the interpolation depends on the index of the item. Is there a work around for this? surely the very amazing people at software mansion thought about this while creating renimatedV2 but I just cant find the solution.


 const animatedScale = useSharedValue(1)
    const animatedScaleStyle = useAnimatedStyle(() => {
        return {
            transform: [
                {
                    scale: animatedScale.value,
                },
            ],
        }
    })

    const renderItem = useCallback(({ item, index }) => {
        const inputRange = [-1, 0, 210 * index, 210 * (index + 0.5)]

        const scale = interpolate(animatedScale.value, inputRange, [1, 1, 1, 0])

        return (
            <Animated.View
                style={{
                    height: 200,
                    marginBottom: 10,
                    transform: [
                        {
                            scale: scale,
                        },
                    ],
                }}
            >
                <ThumbnailBig
                    ref={thumbnailRef}
                    images={item}
                    key={item.id}
                    oneEllipsisPressed={oneEllipsisPressed.bind(this, item.id)}
                />
            </Animated.View>
        )
    }, [])


    const onScroll = useAnimatedScrollHandler((event, context) => {
        const { y } = event.contentOffset\
        animatedScale.value = y
    })




return (
                   <AnimatedFlatList
                    ref={bigListRef}
                    data={image}
                    renderItem={render}
                    keyExtractor={keyExtractor}
                    onScrollEndDrag={handleScroll}
                    initialNumToRender={5}
                    maxToRenderPerBatch={5}
                    initialScrollIndex={scrollIndex}
                    onScrollToIndexFailed={scrollFailed}
                    windowSize={4}
                    contentContainerStyle={{
                        paddingBottom: 40,
                    }}
                    alwaysBounceVertical={false}
                    bounces={false}
                    onScroll={onScroll}
                    scrollEventThrottle={16}
                    extraData={refreshFlatlist}
                    style={styles.flatList}
                />
)

score 0 · Answer 1 · edited May 17 '22 at 09:27

I got the same problem and I finally managed to solve it by changing how renderItem is passed.

You need to change from

renderItem={renderitem}

to this

renderItem={({item,index}) => <Item item={item} index={index} />}

and from

const renderItem = useCallback(({ item, index }) => {

to this

const Item = useCallback(({ item, index }) => {

The reason you can't use useAnimatedStyle in renderItem is because it is not a Functional Component.

So instead of passing renderItem directly to the FlatList, you need to convert it into a Functional Component so that you can use hooks. I hope this helps :)

How to use useAnimatedStyle inside a FlatList renderItem?

1 Answers1