react native animated rolling numbers
v1.0.2
react-native-animated-rolling-numbers es un componente de React Native que anima números y notaciones compactas (K, M, B, T) con estilos y animaciones personalizables. Está diseñado para crear transiciones suaves y llamativas entre valores numéricos.
El ejemplo que se muestra en el vídeo está disponible aquí.
npm install react-native-animated-rolling-numbers
# or
yarn add react-native-animated-rolling-numbers Asegúrese de tener instalado react-native-reanimated en su proyecto. Siga la guía de instalación oficial aquí: instalación reactiva-nativa-reanimada.
Ejemplo 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 ;El ejemplo que se muestra en el vídeo está disponible aquí.
value: numberEl valor numérico que se mostrará y animará.
showSign?: boolean Ya sea para mostrar el signo del número (por ejemplo, "+" o "-"). El valor predeterminado es false .
showMinusSign?: boolean Si se debe mostrar el signo menos para números negativos. El valor predeterminado es true .
showPlusSign?: boolean Si se debe mostrar el signo más para números positivos. El valor predeterminado es false .
toFixed?: number Número de decimales que se mostrarán en notación normal. El valor predeterminado es undefined .
useGrouping?: boolean Si se deben incluir comas/puntos en el formato del número (por ejemplo, 1000987 -> 1.000.987). El valor predeterminado es false .
formattedText?: stringTexto con formato personalizado para mostrar en lugar del valor numérico.
locale?: Intl.LocalesArgument La configuración regional que se utilizará para el formato de números. El valor predeterminado es "en-US" .
enableCompactNotation?: boolean Habilite la notación compacta para números grandes (por ejemplo, 1K, 1M, 1B, 1T). El valor predeterminado es false .
compactToFixed?: number Número de decimales que se mostrarán en notación compacta. El valor predeterminado es undefined .
fixedOnlyForCompact?: boolean Si es verdadero, solo aplica precisión decimal para notación compacta (K/M/B/T). El valor predeterminado es true .
Ejemplo:
fixedOnlyForCompact es true y compactToFixed es 2 , el número 1500 se mostrará como 1.50K , pero el número 999 se mostrará como 999 (sin decimales).fixedOnlyForCompact es false y compactToFixed es 2 , el número 1500 se mostrará como 1.50K y el número 999 se mostrará como 999.00 .containerStyle?: StylePropEstilo para el contenedor que envuelve los dígitos animados.
digitContainerStyle?: StylePropEstilo para el contenedor que envuelve cada dígito animado.
textProps?: React.ComponentPropsAccesorios para el componente de texto principal.
numberTextProps?: React.ComponentPropsAccesorios para los componentes de texto numérico.
commaTextProps?: React.ComponentPropsAccesorios para el componente de texto de coma.
dotTextProps?: React.ComponentPropsAccesorios para el componente de texto del punto decimal.
compactNotationTextProps?: React.ComponentPropsAccesorios para los componentes del texto de notación compacta (K, M, B, T).
signTextProps?: React.ComponentPropsAccesorios para el componente de texto del letrero (si se usa).
textStyle?: StylePropEstilo para el componente de texto principal.
numberStyle?: StylePropEstilo para los componentes de texto numérico.
commaStyle?: StylePropEstilo para el componente de texto de coma.
dotStyle?: StylePropEstilo para el componente de texto del punto decimal.
compactNotationStyle?: StylePropEstilo para los componentes del texto de notación compacta.
signStyle?: StylePropEstilo para el componente de texto del letrero.
spinningAnimationConfig?: objectConfiguración para la animación de dígitos. Soporta:
duration: number : Duración de la animación en milisegundos.reduceMotion: boolean : si se debe reducir el movimiento para mayor accesibilidad.easing: EasingFunction : función de aceleración personalizada para la animación.animationCallback?: AnimationCallbackFunción de devolución de llamada que se invoca cuando se completa la animación.
animateToNewValue?: (newValue: number, variant?: DigitVariant) => numberFunción personalizada para animar el cambio de valor. El valor predeterminado es una animación de rebote.
Si encuentra útil este proyecto y le gustaría apoyar su desarrollo continuo, ¡considere invitarme a un café! Su apoyo ayuda a mantener la creatividad y me permite continuar mejorando y manteniendo este proyecto. ¡Gracias! ☕?
