├── .eslintrc.js ├── .gitignore ├── .npmignore ├── README.md ├── android ├── build.gradle └── src │ └── main │ ├── AndroidManifest.xml │ └── java │ └── expo │ └── modules │ └── animatednumber │ ├── ReactNativeAnimatedNumberModule.kt │ └── ReactNativeAnimatedNumberView.kt ├── example ├── .gitignore ├── App.tsx ├── android │ ├── .gitignore │ ├── app │ │ ├── build.gradle │ │ ├── debug.keystore │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── debug │ │ │ └── AndroidManifest.xml │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── expo │ │ │ │ └── modules │ │ │ │ └── animatednumber │ │ │ │ └── example │ │ │ │ ├── MainActivity.kt │ │ │ │ └── MainApplication.kt │ │ │ └── res │ │ │ ├── drawable-hdpi │ │ │ └── splashscreen_logo.png │ │ │ ├── drawable-mdpi │ │ │ └── splashscreen_logo.png │ │ │ ├── drawable-xhdpi │ │ │ └── splashscreen_logo.png │ │ │ ├── drawable-xxhdpi │ │ │ └── splashscreen_logo.png │ │ │ ├── drawable-xxxhdpi │ │ │ └── splashscreen_logo.png │ │ │ ├── drawable │ │ │ ├── ic_launcher_background.xml │ │ │ └── rn_edit_text_material.xml │ │ │ ├── mipmap-anydpi-v26 │ │ │ ├── ic_launcher.xml │ │ │ └── ic_launcher_round.xml │ │ │ ├── mipmap-hdpi │ │ │ ├── ic_launcher.webp │ │ │ ├── ic_launcher_foreground.webp │ │ │ └── ic_launcher_round.webp │ │ │ ├── mipmap-mdpi │ │ │ ├── ic_launcher.webp │ │ │ ├── ic_launcher_foreground.webp │ │ │ └── ic_launcher_round.webp │ │ │ ├── mipmap-xhdpi │ │ │ ├── ic_launcher.webp │ │ │ ├── ic_launcher_foreground.webp │ │ │ └── ic_launcher_round.webp │ │ │ ├── mipmap-xxhdpi │ │ │ ├── ic_launcher.webp │ │ │ ├── ic_launcher_foreground.webp │ │ │ └── ic_launcher_round.webp │ │ │ ├── mipmap-xxxhdpi │ │ │ ├── ic_launcher.webp │ │ │ ├── ic_launcher_foreground.webp │ │ │ └── ic_launcher_round.webp │ │ │ ├── values-night │ │ │ └── colors.xml │ │ │ └── values │ │ │ ├── colors.xml │ │ │ ├── strings.xml │ │ │ └── styles.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── app.json ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash-icon.png ├── babel.config.js ├── index.ts ├── ios │ ├── .gitignore │ ├── .xcode.env │ ├── Podfile │ ├── Podfile.lock │ ├── Podfile.properties.json │ ├── reactnativeanimatednumberexample.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── reactnativeanimatednumberexample.xcscheme │ ├── reactnativeanimatednumberexample.xcworkspace │ │ └── contents.xcworkspacedata │ └── reactnativeanimatednumberexample │ │ ├── AppDelegate.h │ │ ├── AppDelegate.mm │ │ ├── Images.xcassets │ │ ├── AppIcon.appiconset │ │ │ ├── App-Icon-1024x1024@1x.png │ │ │ └── Contents.json │ │ ├── Contents.json │ │ ├── SplashScreenBackground.colorset │ │ │ └── Contents.json │ │ └── SplashScreenLogo.imageset │ │ │ ├── Contents.json │ │ │ ├── image.png │ │ │ ├── image@2x.png │ │ │ └── image@3x.png │ │ ├── Info.plist │ │ ├── PrivacyInfo.xcprivacy │ │ ├── SplashScreen.storyboard │ │ ├── Supporting │ │ └── Expo.plist │ │ ├── main.m │ │ ├── noop-file.swift │ │ ├── reactnativeanimatednumberexample-Bridging-Header.h │ │ └── reactnativeanimatednumberexample.entitlements ├── metro.config.js ├── package-lock.json ├── package.json ├── tsconfig.json └── webpack.config.js ├── expo-module.config.json ├── ios ├── AnimatedNumberContentView.swift ├── AnimatedNumberViewModel.swift ├── Color.swift ├── ReactNativeAnimatedNumber.podspec ├── ReactNativeAnimatedNumberModule.swift └── ReactNativeAnimatedNumberView.swift ├── package-lock.json ├── package.json ├── src ├── ReactNativeAnimatedNumber.types.ts ├── ReactNativeAnimatedNumberModule.ts ├── ReactNativeAnimatedNumberView.tsx └── index.ts └── tsconfig.json /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['universe/native', 'universe/web'], 4 | ignorePatterns: ['build'], 5 | }; 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # VSCode 6 | .vscode/ 7 | jsconfig.json 8 | 9 | # Xcode 10 | # 11 | build/ 12 | *.pbxuser 13 | !default.pbxuser 14 | *.mode1v3 15 | !default.mode1v3 16 | *.mode2v3 17 | !default.mode2v3 18 | *.perspectivev3 19 | !default.perspectivev3 20 | xcuserdata 21 | *.xccheckout 22 | *.moved-aside 23 | DerivedData 24 | *.hmap 25 | *.ipa 26 | *.xcuserstate 27 | project.xcworkspace 28 | 29 | # Android/IJ 30 | # 31 | .classpath 32 | .cxx 33 | .gradle 34 | .idea 35 | .project 36 | .settings 37 | local.properties 38 | android.iml 39 | android/app/libs 40 | android/keystores/debug.keystore 41 | 42 | # Cocoapods 43 | # 44 | example/ios/Pods 45 | 46 | # Ruby 47 | example/vendor/ 48 | 49 | # node.js 50 | # 51 | node_modules/ 52 | npm-debug.log 53 | yarn-debug.log 54 | yarn-error.log 55 | 56 | # Expo 57 | .expo/* 58 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Exclude all top-level hidden directories by convention 2 | /.*/ 3 | 4 | # Exclude tarballs generated by `npm pack` 5 | /*.tgz 6 | 7 | __mocks__ 8 | __tests__ 9 | 10 | /babel.config.js 11 | /android/src/androidTest/ 12 | /android/src/test/ 13 | /android/build/ 14 | /example/ 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # @quanna/react-native-animated-number 2 | 3 | A React Native component for displaying animated numbers, written in SwiftUI for seamless and super-smooth animations when changing numeric values. 4 | 5 | ## Animations 6 | 7 | The animations are handled natively using **SwiftUI**, ensuring smooth transitions when changing numbers. Animations are built into the number transitions, requiring no additional setup. 8 | 9 | --- 10 | 11 | ## Features 12 | 13 | - **Super smooth animations** for changing numbers. 14 | - Support for integers and decimal numbers. 15 | - Display units such as `%`, `kg`, or any custom label. 16 | - Fully customizable styles for numbers and units. 17 | - Easy integration with React Native projects. 18 | 19 | --- 20 | 21 | ## Installation 22 | 23 | You can install the package using either **Bun** or **Yarn**: 24 | 25 | ### Using Bun 26 | ```bash 27 | bun add @quanna/react-native-animated-number 28 | ``` 29 | 30 | ### Using Yarn 31 | ```bash 32 | yarn add @quanna/react-native-animated-number 33 | ``` 34 | 35 | --- 36 | 37 | ## Usage 38 | 39 | Here's an example of how to use `@quanna/react-native-animated-number` in your React Native project: 40 | 41 | ### Example 42 | ```tsx 43 | import React, { useState } from 'react'; 44 | import { View, Button, StyleSheet } from 'react-native'; 45 | import ReactNativeAnimatedNumberView from '@quanna/react-native-animated-number'; 46 | 47 | export default function App() { 48 | const [number, setNumber] = useState(42.5); 49 | const [displayDecimal, setDisplayDecimal] = useState(false); 50 | 51 | return ( 52 | 53 | 61 | 62 |