search

RobertFOConnor / react-native-number-ticker

A simple easy-to-use ticker component for animating ticker numbers.
29 stars 15 forks source link

Key prop missing in NumberTicker #1

Closed ThomasHenrissat closed 5 years ago

ThomasHenrissat commented 5 years ago

Hello, thanks for the great module!

There is a small issue in NumberTicker.js, you are missing a key prop in the TextTicker component of mapToDigits.

This results in the following warning from react-native: Warning: Each child in a list should have a unique "key" prop.

Could you release a fix for this please?

Thank you very much!

RobertFOConnor commented 5 years ago

@ThomasHenrissat Congratulations on creating the first reported issue! I'll make some amendments and release a fix ASAP. Thanks for using the module. 👍

RobertFOConnor commented 5 years ago

@ThomasHenrissat The fix is live in 0.1.2 so I'm gonna close this. :)

altany commented 4 years ago

Hi @RobertFOConnor. This is still an issue in the latest version when there are two same digits in the number prop. I recommend you amend the index of the .map() to the data as a key, to ensure it will always be unique.

return (number + '').split('').map((data, index) => {
    <TextTicker
        key={`${data}${index}`}
        ...
    />
})

See screenshot when value is 199 image