react native animated rolling numbers

Números rolantes animados do React Native

react-native-animated-rolling-numbers é um componente React Native que anima números e notações compactas (K, M, B, T) com estilos e animações personalizáveis. Ele foi projetado para criar transições suaves e atraentes entre valores numéricos.

leia-me.mp4

O exemplo mostrado no vídeo está disponível aqui.

Características

• Suporta transições animadas para valores numéricos e símbolos (por exemplo, vírgulas, pontos).
• ? Estilos de dígitos personalizáveis ​​e configurações de animação.
• ? Lida com formatação de números compactos (por exemplo, 1K, 1M, etc.).
• ? Facilmente personalizável através de adereços.
• ? Suporta funções de redução de movimento e atenuação para animações.
• ? Projetado para números regulares e números formatados com sinais (positivo/negativo) e vírgulas.

Instalação

npm install react-native-animated-rolling-numbers
# or
yarn add react-native-animated-rolling-numbers

Certifique-se de ter react-native-reanimated instalado em seu projeto. Siga o guia de instalação oficial aqui: instalação react-native-reanimated.

Uso

Exemplo Básico

 import React , { useState } from "react" ;
import { View , StyleSheet , Button } from "react-native" ;
import { AnimatedRollingNumber } from "react-native-animated-rolling-numbers" ;
import { Easing } from "react-native-reanimated" ;

const App = ( ) => {
  const [ value , setValue ] = useState ( 1200 ) ;
  return (
    < View style = { styles . container } >
      < AnimatedRollingNumber
        value = { value }
        showPlusSign
        showMinusSign
        useGrouping
        enableCompactNotation
        compactToFixed = { 2 }
        textStyle = { styles . digits }
        spinningAnimationConfig = { { duration : 500 , easing : Easing . bounce } }
      / >
      < Button
        onPress = { ( ) => setValue ( value + Math . floor ( Math . random ( ) * 1000 ) ) }
        title = "Increase"
      / >
      < Button
        onPress = { ( ) => setValue ( value - Math . floor ( Math . random ( ) * 1000 ) ) }
        title = "Decrease"
      / >
    < / View >
  ) ;
} ;

const styles = StyleSheet . create ( {
  container : {
    flex : 1 ,
    justifyContent : "center" ,
    alignItems : "center" ,
  } ,
  digits : {
    fontSize : 32 ,
    fontWeight : "bold" ,
    paddingHorizontal : 2 ,
    color : "#4A90E2" ,
  } ,
} ) ;

export default App ;

O exemplo mostrado no vídeo está disponível aqui.

Adereços

value: number

O valor numérico a ser exibido e animado.

showSign?: boolean

Se deve mostrar o sinal do número (por exemplo, "+" ou "-"). O padrão é false .

showMinusSign?: boolean

Se deve mostrar o sinal de menos para números negativos. O padrão é true .

showPlusSign?: boolean

Se deve mostrar o sinal de mais para números positivos. O padrão é false .

toFixed?: number

Número de casas decimais a serem mostradas em notação normal. o padrão é undefined .

useGrouping?: boolean

Se deve incluir vírgulas/pontos na formatação do número (por exemplo, 1000987 -> 1.000.987). O padrão é false .

formattedText?: string

Texto formatado personalizado a ser exibido em vez do valor numérico.

locale?: Intl.LocalesArgument

A localidade a ser usada para formatação de números. O padrão é "en-US" .

enableCompactNotation?: boolean

Ative a notação compacta para números grandes (por exemplo, 1K, 1M, 1B, 1T). O padrão é false .

compactToFixed?: number

Número de casas decimais a serem mostradas em notação compacta. O padrão é undefined .

fixedOnlyForCompact?: boolean

Se verdadeiro, aplica apenas precisão decimal para notação compacta (K/M/B/T). O padrão é true .

Exemplo:

• Se fixedOnlyForCompact for true e compactToFixed for 2 , o número 1500 será exibido como 1.50K , mas o número 999 será exibido como 999 (sem casas decimais).
• Se fixedOnlyForCompact for false e compactToFixed for 2 , o número 1500 será exibido como 1.50K e o número 999 será exibido como 999.00 .

containerStyle?: StyleProp

Estilo para o contêiner que envolve os dígitos animados.

digitContainerStyle?: StyleProp

Estilo para o contêiner que envolve cada dígito animado.

textProps?: React.ComponentProps

Acessórios para o componente de texto principal.

numberTextProps?: React.ComponentProps

Acessórios para os componentes de texto numérico.

commaTextProps?: React.ComponentProps

Acessórios para o componente de texto de vírgula.

dotTextProps?: React.ComponentProps

Acessórios para o componente de texto de ponto decimal.

compactNotationTextProps?: React.ComponentProps

Suportes para os componentes de texto de notação compacta (K, M, B, T).

signTextProps?: React.ComponentProps

Adereços para o componente de texto do sinal (se usado).

textStyle?: StyleProp

Estilo para o componente de texto principal.

numberStyle?: StyleProp

Estilo para os componentes de texto numérico.

commaStyle?: StyleProp

Estilo para o componente de texto de vírgula.

dotStyle?: StyleProp

Estilo para o componente de texto de ponto decimal.

compactNotationStyle?: StyleProp

Estilo para os componentes de texto de notação compacta.

signStyle?: StyleProp

Estilo para o componente de texto do sinal.

spinningAnimationConfig?: object

Configuração para animação de dígitos. Suporta:

• duration: number : Duração da animação em milissegundos.
• reduceMotion: boolean : se deve reduzir o movimento para acessibilidade.
• easing: EasingFunction : Função de atenuação personalizada para a animação.

animationCallback?: AnimationCallback

Função de retorno de chamada que é invocada quando a animação é concluída.

animateToNewValue?: (newValue: number, variant?: DigitVariant) => number

Função personalizada para animar a mudança de valor. O padrão é uma animação de salto.

Se você achar este projeto útil e gostaria de apoiar seu desenvolvimento contínuo, considere me comprar um café! Seu apoio ajuda a manter a criatividade crescendo e me permite continuar melhorando e mantendo este projeto. Obrigado! ☕?