Selected List is not in center

[enso123456]

If the list has a 20 items. At first the items are being center but if it will go beyond at 10 > list the item focused is not anymore centered it is pushed to the left.

[enso123456]

[kay-es]

For my successors with the same problem:
The animations are calculated based on CARD_WIDTH only without respect to the horizontal margin of each card (which is 20 in this example)

const CARD_WIDTH = width * 0.8;
const CARD_MARGIN = 20
const CARD_WIDTH_WITH_MARGIN = CARD_WIDTH + CARD_MARGIN
...
const inputRange = [
            (index - 1) * (CARD_WIDTH_WITH_MARGIN),
            index * (CARD_WIDTH_WITH_MARGIN),
            (index + 1) * (CARD_WIDTH_WITH_MARGIN),
        ];

...
mapAnimation.addListener(({ value }) => {
            let index = Math.floor(value / (CARD_WIDTH_WITH_MARGIN) + 0.3);
...

const styles = StyleSheet.create({
...
card: {
...
        marginHorizontal: CARD_MARGIN / 2,
...
}
...
})