react native animated rolling numbers

Bereaksi nomor Bergulir Animasi Asli

react-native-animated-rolling-numbers adalah komponen React Native yang menganimasikan angka dan notasi ringkas (K, M, B, T) dengan gaya dan animasi yang dapat disesuaikan. Ini dirancang untuk menciptakan transisi yang mulus dan menarik antara nilai numerik.

readme.mp4

Contoh yang ditunjukkan dalam video tersedia di sini.

Fitur

• Mendukung transisi animasi untuk nilai dan simbol numerik (misalnya koma, titik).
• ? Gaya digit dan konfigurasi animasi yang dapat disesuaikan.
• ? Menangani pemformatan angka yang ringkas (misalnya, 1K, 1M, dll.).
• ? Mudah disesuaikan melalui alat peraga.
• ? Mendukung fungsi pengurangan gerakan dan pelonggaran untuk animasi.
• ? Dirancang untuk angka biasa dan angka berformat dengan tanda (positif/negatif) dan koma.

Instalasi

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

Pastikan Anda telah menginstal react-native-reanimated di proyek Anda. Ikuti panduan instalasi resmi di sini: instalasi react-native-reanimated.

Penggunaan

Contoh Dasar

 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 ;

Contoh yang ditunjukkan dalam video tersedia di sini.

Alat peraga

value: number

Nilai numerik yang akan ditampilkan dan dianimasikan.

showSign?: boolean

Apakah akan menampilkan tanda angka (misalnya, "+" atau "-"). Defaultnya adalah false .

showMinusSign?: boolean

Apakah akan menampilkan tanda minus untuk angka negatif. Defaultnya adalah true .

showPlusSign?: boolean

Apakah akan menampilkan tanda plus untuk bilangan positif. Defaultnya adalah false .

toFixed?: number

Jumlah tempat desimal untuk ditampilkan dalam notasi normal. defaultnya adalah undefined .

useGrouping?: boolean

Apakah akan menyertakan koma/titik dalam format angka (misal, 1000987 -> 1.000.987). Defaultnya adalah false .

formattedText?: string

Teks berformat khusus untuk ditampilkan, bukan nilai numerik.

locale?: Intl.LocalesArgument

Lokal yang digunakan untuk pemformatan angka. Defaultnya adalah "en-US" .

enableCompactNotation?: boolean

Aktifkan notasi ringkas untuk bilangan besar (misalnya 1K, 1M, 1B, 1T). Defaultnya adalah false .

compactToFixed?: number

Jumlah tempat desimal untuk ditampilkan dalam notasi ringkas. Defaultnya adalah undefined .

fixedOnlyForCompact?: boolean

Jika benar, hanya berlaku presisi desimal untuk notasi ringkas (K/M/B/T). Defaultnya adalah true .

Contoh:

• Jika fixedOnlyForCompact true dan compactToFixed bernilai 2 , angka 1500 akan ditampilkan sebagai 1.50K , namun angka 999 akan ditampilkan sebagai 999 (tanpa tempat desimal).
• Jika fixedOnlyForCompact false dan compactToFixed adalah 2 , angka 1500 akan ditampilkan sebagai 1.50K , dan angka 999 akan ditampilkan sebagai 999.00 .

containerStyle?: StyleProp<ViewStyle>

Gaya untuk wadah yang membungkus digit animasi.

digitContainerStyle?: StyleProp<ViewStyle>

Gaya untuk wadah yang membungkus setiap digit animasi.

textProps?: React.ComponentProps<typeof Text>

Alat peraga untuk komponen teks utama.

numberTextProps?: React.ComponentProps<typeof Text>

Alat peraga untuk komponen teks numerik.

commaTextProps?: React.ComponentProps<typeof Text>

Alat peraga untuk komponen teks koma.

dotTextProps?: React.ComponentProps<typeof Text>

Alat peraga untuk komponen teks titik desimal.

compactNotationTextProps?: React.ComponentProps<typeof Text>

Alat peraga komponen teks notasi ringkas (K,M,B,T).

signTextProps?: React.ComponentProps<typeof Text>

Props untuk komponen teks tanda (jika digunakan).

textStyle?: StyleProp<TextStyle>

Gaya untuk komponen teks utama.

numberStyle?: StyleProp<TextStyle>

Gaya untuk komponen teks numerik.

commaStyle?: StyleProp<TextStyle>

Gaya untuk komponen teks koma.

dotStyle?: StyleProp<TextStyle>

Gaya untuk komponen teks titik desimal.

compactNotationStyle?: StyleProp<TextStyle>

Gaya untuk komponen teks notasi ringkas.

signStyle?: StyleProp<TextStyle>

Gaya untuk komponen teks tanda.

spinningAnimationConfig?: object

Konfigurasi untuk animasi digit. Mendukung:

• duration: number : Durasi animasi dalam milidetik.
• reduceMotion: boolean : Apakah akan mengurangi gerakan untuk aksesibilitas.
• easing: EasingFunction : Fungsi easing khusus untuk animasi.

animationCallback?: AnimationCallback

Fungsi panggilan balik yang dipanggil saat animasi selesai.

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

Fungsi khusus untuk menganimasikan perubahan nilai. Defaultnya adalah animasi pantulan.

Jika Anda merasa proyek ini bermanfaat dan ingin mendukung pengembangan berkelanjutannya, pertimbangkan untuk membelikan saya kopi! Dukungan Anda membantu menjaga kreativitas tetap berkembang dan memungkinkan saya untuk terus meningkatkan dan mempertahankan proyek ini. Terima kasih! ☕?