• Stars
    star
    251
  • Rank 156,538 (Top 4 %)
  • Language
    Java
  • License
    MIT License
  • Created almost 4 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🎰 Library showing animation of number changes in react-native

react-native-animated-numbers

PRs Welcome Platform License

npm version

Library showing animation of number changes in react-native

If you want web version in react.js download react-animated-numbers

install

This package is using react-native-reanimated. So following libs should be installed first

yarn add react-native-reanimated react-native-gesture-handler && cd ios && pod install

next

yarn add react-native-animated-numbers

props

type default description
animateToNumber number none Number to be animated
fontStyle TextStyle? none Style of number text
animationDuration number? 1400(ms) The speed at which the animation works
includeComma boolean? false Whether the number contains commas
easing Easing? Easing.elastic(1.2) React Native Easing API in Animated

example

import React from 'react';
import {SafeAreaView, Button} from 'react-native';
import AnimatedNumbers from 'react-native-animated-numbers';

const App = () => {
  const [animateToNumber, setAnimateToNumber] = React.useState(7979);

  const increase = () => {
    setAnimateToNumber(animateToNumber + 1999);
  };

  return (
    <SafeAreaView
      style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <AnimatedNumbers
        includeComma
        animateToNumber={animateToNumber}
        fontStyle={{fontSize: 50, fontWeight: 'bold'}}
      />
      <Button title="increase" onPress={increase} />
    </SafeAreaView>
  );
};
export default App;

screenshot

More Repositories

1

react-native-responsive-fontSize

πŸ”  Responsive fontSize based on screen-size of the device in React-Native
JavaScript
575
star
2

react-animated-numbers

πŸ‘Ύ Library showing animation of number changes in react.js
JavaScript
168
star
3

react-native-awesome-alert

πŸ”” Customizable modal components with βœ”οΈcheck options in React Native
JavaScript
51
star
4

react-native-frame-loading

⛹️‍♀️⛹️‍♂️ Like animation LoadingIndicator with frame by frame view in React-Native
JavaScript
12
star
5

react-native-hide-modal

πŸ™ˆ Modal components that can be hidden
JavaScript
9
star
6

react-kakao-link

πŸ”— λ¦¬μ•‘νŠΈ μ›Ήμ—μ„œ μ‚¬μš©ν•  수 μžˆλŠ” 카카였 λ§ν¬μž…λ‹ˆλ‹€.
TypeScript
8
star
7

react-native-iphone-se-helper

πŸ“‚ utils for developing Iphone SE size
JavaScript
8
star
8

deprocheck-rn

πŸ“‹ λ””ν”„λ§Œ 좜첡 μ•± RN 버전
TypeScript
5
star
9

youngstargram-node-server

처음으둜 λ§Œλ“€μ–΄λ³΄λŠ” λ…Έλ“œμ„œλ²„ μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜ (μΈμŠ€νƒ€κ·Έλž¨ 클둠)
JavaScript
5
star
10

fc-react-native

πŸ– 패슀트캠퍼슀 React-Native Camp μ—μ„œ μž‘μ„±ν•œ μ½”λ“œλ₯Ό κ³΅μœ ν•©λ‹ˆλ‹€
JavaScript
4
star
11

learning-htmlcss

πŸ“ studying html & css by practice and code reviews
HTML
4
star
12

fastcampus-react-2019

패슀트캠퍼슀 REACTμΊ ν”„ μˆ˜κ°•λ‚΄μš© 정리 (2019εΉ΄)
JavaScript
3
star
13

rntm-starter-kit

RN & TS & MobX starter kit
Objective-C
2
star
14

newblog

gatsby blog
JavaScript
2
star
15

react-native-bootsplash-example

react-native-bootsplash-example
Java
2
star
16

ClassManager_private

πŸ”Œ Web Project with JAVA, JSP, MYSQL, Spring Frame
Java
1
star
17

algorithm

assembly for algorithm study that consist of so COOL 😎 iOS developers πŸ’»πŸ“±πŸ“²πŸ–±
Swift
1
star
18

react-testing-practice

πŸƒβ€β™‚οΈ simple project for react & react-native test code
TypeScript
1
star
19

animated-numbers

HTML
1
star
20

code-splitting

code-spliiting example
JavaScript
1
star
21

Ios_Django_project

πŸš€ First Ios-Django project
Objective-C
1
star
22

ios_swift_study

IOS(Swift) study at Inflearn
Swift
1
star
23

frontend-til

TIL
HTML
1
star
24

ios_hanyoungsoo

Studying Objective-c and Ios at FastCampus
Objective-C
1
star
25

react-18-examples

λ¦¬μ•‘νŠΈ 18 κΈ°λŠ₯을 μ˜ˆμ œμ½”λ“œλ‘œ μ•Œμ•„λ΄…λ‹ˆλ‹€.
JavaScript
1
star
26

admob-project

돈 λˆμ„ λ²Œμ–΄λ²„μž
1
star
27

FC-REACT-8th-assignment

패슀트캠퍼슀 λ¦¬μ•‘νŠΈ μΊ ν”„ 8κΈ° 과제 λͺ¨μŒ
JavaScript
1
star
28

bucket_list

λ²„ν‚·λ¦¬μŠ€νŠΈ μ—λŸ¬ μˆ˜μ •
Objective-C
1
star
29

datastructure_python

DataStructure study with Python
Python
1
star