react-native-animated-number-tnbt v1.0.4

Getting Started

Note: I am a newbie in React Native. Here is my frist package which I publish to npm. If it make you waste your time, please dont blame me. I hope to disscuss about any the problem with you. Thank you !!!

This package is for Android

Test

You can clone this repo to test package.

https://github.com/tiennguyen12g/react-native-animated-number-tnbt.git

npx react-native start

In the App.tsx, I have some data for test, you can use it if need.

Installation using npm

npm i react-native-animated-number-tnbt

How to use "react-native-animated-number-tnbt"

Import to your component

import {AnimatedNumber} from "react-native-animated-number-tnbt"

if typescript gives the error, you can try to create file name react-native-animated-number-tnbt.d.ts

// file react-native-animated-number-tnbt.d.ts
declare module "react-native-animated-number-tnbt"

Demo

https://github.com/tiennguyen12g/my-media-storage/assets/40747229/71d2b183-eb12-412a-a289-b41cd4332b7e

Available props

   interface Props {
     numberForAnimated: number;
     decimalAmount: number;
     includeComma?: boolean;
     gap?: number;
     colorValue?:string;
     fontSizeValue?:number;
     hookName:"withTiming" | "withSpring",
     withTimingProps?: {
       durationValue?: number;
       easingValue:string
     };
     withSpringProps?: {
       mass?: number;
       damping?: number;
       stiffness?: number;
       restDisplacementThreshold?: number;
       overshootClamping?: boolean;
       restSpeedThreshold?: number;
     };
   }

Table list props

If you want to customize your animation, you should provide parameters to either "withTimingProps" or "withSpringProps", not both. By default, "withSpring" is used.

"withTimingProps"

"withSpringProps"

Reference: Reanimated withSpring Documentation

Example

import React from 'react';
import {
SafeAreaView,
StyleSheet,
View,
Button
} from 'react-native';
import {AnimatedNumber} from "react-native-animated-number-tnbt"


function App(): JSX.Element {

const [floatNumber, setFloatNumber] = React.useState(18500.5); 
const decimalAmount = 2
const increaseFloat = () => {
const fractionNumber = decimalAmount;
const result = (floatNumber + 565.4).toFixed(fractionNumber);
setFloatNumber(+result);
}
return (
 <SafeAreaView style={styles.container}>
   <AnimatedNumber              
     numberForAnimated = {floatNumber}
     includeComma = {true} // use for number greater or equal 1000.It looks like 1000 => 1,000.
     decimalAmount={decimalAmount}
     gap={2}
     hookName='withSpring'
     colorValue='orange'
     fontSizeValue={50}
   />
   <Button title="increaseFloat" onPress={increaseFloat} />
 </SafeAreaView>
);
}

const styles = StyleSheet.create({
container:{
 justifyContent:"center",
 flex:1
}

});

export default App;

I hope this library will help you save your time.

Congratulations! :tada:

You've successfully run and modified this package. :partying_face: