Animated DraxList

[mohamedsl22]

Hi, How can I make create an animated DraxList ?

[lafiosca]

Hi @mohamedsl22, I think I need more detail about what you mean. The current DraxList uses animations for item shifts and when rendering the snapback for released items.

[mohamedsl22]

<Animated.FlatList
            data={[{id:'left-space'},...dragItemMiddleList,{id:'right-space'}]}
            renderItem={DragUIComponent}
            keyExtractor={(_, index) => index.toString()}
            scrollEnabled
            horizontal
            showsHorizontalScrollIndicator={false}
            contentContainerStyle={{alignItems:'center'}}
            decelerationRate={0}
            snapToInterval={ITEM_SIZE}
            onScroll={Animated.event(
              [{nativeEvent:{contentOffset:{x:scrollX}}}],
              {useNativeDriver:true}
            )}
            bounces={false}
            scrollEventThrottle={16}
/>

so as you see @lafiosca I'am using here in onScroll an Animated.event but it doesn't response to it in DraxList and also it's an Animated.Flatlist, so in another words how do I convert this Animated.flatlist to draxlist ? thank you :)

[lafiosca]

@mohamedsl22 I moved the issue over to this repo where the library code is because this sounds like an enhancement request. I was unaware that Animated even provided a version of FlatList. We might be able to simply replace the underlying FlatList with an Animated.FlatList to support this use case, but that also might mess around with the TypeScript typings a bit. At any rate, this functionality is not currently supported by the library. I will leave the issue open as a feature request.

[lafiosca]

An alternative or supplemental approach for us to implement this feature could also be for DraxList to take an optional prop of a component to use instead of FlatList.

[williammetcalf]

In the meantime, a workaround can be done using useSharedValue for animations from react-native-reanimated since you can update it on the UI thread like

const scrollOffset = useSharedValue(0);
<DraxList
    ...
    scrollEventThrottle={10}
    onScroll={(e) => scrollOffset.value = e.nativeEvent.contentOffset.y}
/>