Support for animating numbers with decimals

[marcfrankel]

Great work on this library so far! Sadly, for our intended use case, we'd need it to support numbers with decimals. Is this something that would be possible or on your intended roadmap?

[waleedAlmubarak]

+1

[vishnummenon]

@marcfrankel @waleedAlmubarak Were you able to find a solution to animate numbers with decimals?

Thanks!

[SatyamReactNative]

+1

[drichar]

Just split the number into whole and decimal parts and use two instances of AnimatedNumbers with a . between them.

I'm using this:

const getPriceParts = (price: number) => {
  const [whole, decimal = '000000'] = price.toFixed(6).split('.')
  return {
    whole: parseInt(whole),
    decimal: parseInt(decimal.padEnd(6, '0')),
  }
}

const currentPriceParts = getPriceParts(currentPrice)

<View style={styles.priceContainer}>
  <Text style={styles.priceDollarSign}>$</Text>
  <AnimatedNumbers
    includeComma
    animateToNumber={currentPriceParts.whole}
    fontStyle={styles.price}
    animationDuration={300}
  />
  <Text style={styles.priceDecimal}>.</Text>
  <AnimatedNumbers
    animateToNumber={currentPriceParts.decimal}
    fontStyle={styles.priceDecimal}
    animationDuration={300}
  />
</View>

const styles = StyleSheet.create({
  priceContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 2,
  },
  priceDollarSign: {
    fontSize: 36,
    fontWeight: '600',
    color: '#000',
  },
  price: {
    fontSize: 36,
    fontWeight: '600',
    color: '#000',
  },
  priceDecimal: {
    fontSize: 36,
    fontWeight: '600',
    color: '#000',
  },
})