{"_id":"react-native-animated-rolling-numbers","_rev":"5-6ef4a3f37d4065871ce91fa0b7b3b80f","name":"react-native-animated-rolling-numbers","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.0":{"name":"react-native-animated-rolling-numbers","version":"1.0.0","keywords":["react-native","animated-numbers","rolling-numbers","animated-digits","animated-number","reanimated","numbers","react","react-native-rolling-numbers","react-native-animated-numbers","digits"],"author":{"name":"Bouarour Mohammed"},"license":"MIT","_id":"react-native-animated-rolling-numbers@1.0.0","maintainers":[{"name":"medboar","email":"Bouarourmohammed93@gmail.com"}],"homepage":"https://github.com/BouarourMohammed/react-native-animated-rolling-numbers.git#readme","bugs":{"url":"https://github.com/BouarourMohammed/react-native-animated-rolling-numbers/issues"},"dist":{"shasum":"5af1ed874861ad6196c99c55a95e212e6eaf9175","tarball":"https://registry.npmjs.org/react-native-animated-rolling-numbers/-/react-native-animated-rolling-numbers-1.0.0.tgz","fileCount":9,"integrity":"sha512-IoHpxXyExkZcqEWa2Akq4u0WjEg5iftxRdpyD7pVW79gQAaoKtd0/Bfg1lOwlJY+/rSuWwjSASicQwqUXUpqJw==","signatures":[{"sig":"MEUCIG5Zdb3RJNQYHz8LtRcuwiNwHBFsJl0sKftER4FkQMwzAiEAusi/FF8Uw8nzjZ/olMqNBjZ8RW9ry9vpGKmfOrpNPog=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":29661},"main":"src/index.ts","gitHead":"56832ba1876975e83d5dcae6311d41deafc3c5cd","scripts":{"build":"tsc"},"_npmUser":{"name":"medboar","email":"Bouarourmohammed93@gmail.com"},"repository":{"url":"git+https://github.com/BouarourMohammed/react-native-animated-rolling-numbers.git","type":"git"},"_npmVersion":"10.7.0","description":"š The Animated Digits component for React Native seamlessly blends a sophisticated number rotation effect with dynamic value updates, creating an engaging and interactive experience that enhances your user interfaces with a touch of elegance and exciteme","directories":{},"_nodeVersion":"22.2.0","dependencies":{"react-native-reanimated":"^3.15.1"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.5.4","@types/react":"^18.3.5","@types/react-native":"^0.73.0"},"peerDependencies":{"react":">=18.0.0","react-native":">=0.70.0","react-native-reanimated":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-animated-rolling-numbers_1.0.0_1725613032888_0.8753655006696837","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"react-native-animated-rolling-numbers","version":"1.0.1","keywords":["react-native","animated-numbers","rolling-numbers","animated-digits","animated-number","reanimated","numbers","react","react-native-rolling-numbers","react-native-animated-numbers","digits"],"author":{"name":"Bouarour Mohammed"},"license":"MIT","_id":"react-native-animated-rolling-numbers@1.0.1","maintainers":[{"name":"medboar","email":"Bouarourmohammed93@gmail.com"}],"homepage":"https://github.com/BouarourMohammed/react-native-animated-rolling-numbers.git#readme","bugs":{"url":"https://github.com/BouarourMohammed/react-native-animated-rolling-numbers/issues"},"dist":{"shasum":"ef72eedfc9cc539e06e938d8ed220917b2b26a01","tarball":"https://registry.npmjs.org/react-native-animated-rolling-numbers/-/react-native-animated-rolling-numbers-1.0.1.tgz","fileCount":9,"integrity":"sha512-koWWcKttGcfJ+luSoJV5U79Xldt2R+ghAmnk5vqx1YOvWMOrKg2Cq/2afurUx1OpdebSQt48vShmXxX4/XAkzg==","signatures":[{"sig":"MEUCICWhgqmJC4XhlbGbKcUQcYDBw1aKzT/3sZfYsaNQ1FgvAiEArPk1owekYmWAd7ZHCZPD3is6uDhW6bQwcpOEFkxRXRA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30987},"main":"src/index.ts","gitHead":"f8fa964ddd0a7988b93b7c5634210b866533d258","scripts":{"build":"tsc"},"_npmUser":{"name":"medboar","email":"Bouarourmohammed93@gmail.com"},"repository":{"url":"git+https://github.com/BouarourMohammed/react-native-animated-rolling-numbers.git","type":"git"},"_npmVersion":"10.7.0","description":"š The Animated Digits component for React Native seamlessly blends a sophisticated number rotation effect with dynamic value updates, creating an engaging and interactive experience that enhances your user interfaces with a touch of elegance and exciteme","directories":{},"_nodeVersion":"22.2.0","dependencies":{"react-native-reanimated":"^3.15.1"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.5.4","@types/react":"^18.3.5","@types/react-native":"^0.73.0"},"peerDependencies":{"react":">=18.0.0","react-native":">=0.70.0","react-native-reanimated":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-animated-rolling-numbers_1.0.1_1725719177779_0.04524051855339417","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"react-native-animated-rolling-numbers","version":"1.0.2","keywords":["react-native","animated-numbers","rolling-numbers","animated-digits","animated-number","reanimated","numbers","react","react-native-rolling-numbers","react-native-animated-numbers","digits"],"author":{"name":"Bouarour Mohammed"},"license":"MIT","_id":"react-native-animated-rolling-numbers@1.0.2","maintainers":[{"name":"medboar","email":"Bouarourmohammed93@gmail.com"}],"homepage":"https://github.com/BouarourMohammed/react-native-animated-rolling-numbers.git#readme","bugs":{"url":"https://github.com/BouarourMohammed/react-native-animated-rolling-numbers/issues"},"dist":{"shasum":"a6a427388fe132d5d556ea70bce8b12e9af71930","tarball":"https://registry.npmjs.org/react-native-animated-rolling-numbers/-/react-native-animated-rolling-numbers-1.0.2.tgz","fileCount":9,"integrity":"sha512-i1QOzt3xNZTQ8vQbT4HPtJnt9SrcrxsNM0CRI0NMNppKyOepDvl58B7pfvKO9P9LfhOp6+IatOL0c75fR/KZug==","signatures":[{"sig":"MEUCIQChIh6wdge0zbJBqdx1BuoBJxHrVCh5CUETCtD1pMOv0wIgIgKo22S+46HQGIpf8Dm30BK3o2IwhpQIC6FDjPj53cU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31568},"main":"src/index.ts","gitHead":"3ac68e93e6b46cd19f9fe1a6442aeee1e7f616ec","scripts":{"build":"tsc"},"_npmUser":{"name":"medboar","email":"Bouarourmohammed93@gmail.com"},"repository":{"url":"git+https://github.com/BouarourMohammed/react-native-animated-rolling-numbers.git","type":"git"},"_npmVersion":"10.7.0","description":"š The Animated Digits component for React Native seamlessly blends a sophisticated number rotation effect with dynamic value updates, creating an engaging and interactive experience that enhances your user interfaces with a touch of elegance and exciteme","directories":{},"_nodeVersion":"22.2.0","dependencies":{"react-native-reanimated":"^3.15.1"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.5.4","@types/react":"^18.3.5","@types/react-native":"^0.73.0"},"peerDependencies":{"react":">=18.0.0","react-native":">=0.70.0","react-native-reanimated":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-animated-rolling-numbers_1.0.2_1728844003538_0.27327684157291476","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"react-native-animated-rolling-numbers","version":"1.0.3","keywords":["react-native","animated-numbers","rolling-numbers","animated-digits","animated-number","reanimated","numbers","react","react-native-rolling-numbers","react-native-animated-numbers","digits"],"author":{"name":"Bouarour Mohammed"},"license":"MIT","_id":"react-native-animated-rolling-numbers@1.0.3","maintainers":[{"name":"medboar","email":"Bouarourmohammed93@gmail.com"}],"homepage":"https://github.com/BouarourMohammed/react-native-animated-rolling-numbers.git#readme","bugs":{"url":"https://github.com/BouarourMohammed/react-native-animated-rolling-numbers/issues"},"dist":{"shasum":"19315eb0f46dd669b591dbdf6712828f12e67089","tarball":"https://registry.npmjs.org/react-native-animated-rolling-numbers/-/react-native-animated-rolling-numbers-1.0.3.tgz","fileCount":24,"integrity":"sha512-4etn2LdkYCO/f3yFeMFkHzT5K5Db5tb5xtBFxHiDtHadhidJ+vj3P5aQMQao9kiylwnjfzsMLMGFd9heBYSs+g==","signatures":[{"sig":"MEQCIGjTE8ohG7jpB4vE6hn7iHq8AHF9Rlzbu+YwbSHZq4SgAiA2VFCFW4tE2M/MogSIiUH1U/+FDjWm/o4+8V/qvCLnXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68408},"main":"src/index.ts","gitHead":"c357b0d6d418a15081b90cda8247924c31b34416","scripts":{"build":"tsc"},"_npmUser":{"name":"medboar","email":"Bouarourmohammed93@gmail.com"},"repository":{"url":"git+https://github.com/BouarourMohammed/react-native-animated-rolling-numbers.git","type":"git"},"_npmVersion":"10.7.0","description":"š The Animated Digits component for React Native seamlessly blends a sophisticated number rotation effect with dynamic value updates, creating an engaging and interactive experience that enhances your user interfaces with a touch of elegance and exciteme","directories":{},"_nodeVersion":"22.2.0","dependencies":{"react-native-reanimated":"^3.15.1"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.5.4","@types/react":"^18.3.5","@types/react-native":"^0.73.0"},"peerDependencies":{"react":">=18.0.0","react-native":">=0.70.0","react-native-reanimated":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-animated-rolling-numbers_1.0.3_1732101532868_0.715619071402464","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"react-native-animated-rolling-numbers","version":"1.1.0","keywords":["react-native","animated-numbers","rolling-numbers","animated-digits","animated-number","reanimated","numbers","react","react-native-rolling-numbers","react-native-animated-numbers","digits"],"author":{"name":"Bouarour Mohammed"},"license":"MIT","_id":"react-native-animated-rolling-numbers@1.1.0","maintainers":[{"name":"medboar","email":"Bouarourmohammed93@gmail.com"}],"homepage":"https://github.com/BouarourMohammed/react-native-animated-rolling-numbers.git#readme","bugs":{"url":"https://github.com/BouarourMohammed/react-native-animated-rolling-numbers/issues"},"dist":{"shasum":"dc1a2a0f5ec8ba5626958be8b10908f5be85dce2","tarball":"https://registry.npmjs.org/react-native-animated-rolling-numbers/-/react-native-animated-rolling-numbers-1.1.0.tgz","fileCount":24,"integrity":"sha512-burkCBUw90HO6OuEjsNhCAkH7tkbAXm6MKuI3EMlP8KtqSX7yoWNXB99wtfVqCP8fHqbuorjjlHU+VidfzbjxA==","signatures":[{"sig":"MEUCIBBqIWfBRM7PCSv1OpKObYjzwSpyBuk0NpbG/q9HIPCdAiEAyJkp4m1pXJwFM0LoSQx4SxZsCC+UaJZQduu64r+w5J0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68252},"main":"src/index.ts","gitHead":"fc8411e0f586d77044f6fea9ec9b964d0ac64cf8","scripts":{"build":"tsc"},"_npmUser":{"name":"medboar","email":"Bouarourmohammed93@gmail.com"},"repository":{"url":"git+https://github.com/BouarourMohammed/react-native-animated-rolling-numbers.git","type":"git"},"_npmVersion":"10.9.0","description":"š The Animated Digits component for React Native seamlessly blends a sophisticated number rotation effect with dynamic value updates, creating an engaging and interactive experience that enhances your user interfaces with a touch of elegance and exciteme","directories":{},"_nodeVersion":"23.3.0","dependencies":{"react-native-reanimated":"^3.15.1"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.5.4","@types/react":"^18.3.5","@types/react-native":"^0.73.0"},"peerDependencies":{"react":">=18.0.0","react-native":">=0.70.0","react-native-reanimated":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-animated-rolling-numbers_1.1.0_1736700435427_0.8317544859851214","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"react-native-animated-rolling-numbers","version":"2.0.0","main":"src/index.ts","scripts":{"build":"tsc"},"repository":{"type":"git","url":"git+https://github.com/BouarourMohammed/react-native-animated-rolling-numbers.git"},"homepage":"https://github.com/BouarourMohammed/react-native-animated-rolling-numbers.git#readme","keywords":["react-native","animated-numbers","rolling-numbers","animated-digits","animated-number","reanimated","numbers","react","react-native-rolling-numbers","react-native-animated-numbers","digits"],"author":{"name":"Bouarour Mohammed"},"license":"MIT","description":"š The Animated Digits component for React Native seamlessly blends a sophisticated number rotation effect with dynamic value updates, creating an engaging and interactive experience that enhances your user interfaces with a touch of elegance and exciteme","devDependencies":{"@types/react":"^18.3.5","@types/react-native":"^0.73.0","typescript":"^5.5.4"},"peerDependencies":{"react":">=18.0.0","react-native":">=0.70.0","react-native-reanimated":">=2.0.0"},"_id":"react-native-animated-rolling-numbers@2.0.0","gitHead":"ee77a58ccc1e75463d2d5736e2a9f986cc2cd678","bugs":{"url":"https://github.com/BouarourMohammed/react-native-animated-rolling-numbers/issues"},"_nodeVersion":"23.3.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-mCimo2dQ6l9u6YbAdm1kB+VBgAl/5iTGIHhCvc3EHfhexY9dmsIR3gVMob/0y9yiznkdcWFpNLmGtmH3vK5giQ==","shasum":"b8aaa10afe1d9799e2a9335b86285aa6f6ec5338","tarball":"https://registry.npmjs.org/react-native-animated-rolling-numbers/-/react-native-animated-rolling-numbers-2.0.0.tgz","fileCount":24,"unpackedSize":68348,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAtFOTYq78rMDPqerNRZupp2LKQipW1Ebjj3bOPrAFnXAiBX9fNxQezNIE9X1U+65erjcMWml7kgETUZL5fG0mv9tQ=="}]},"_npmUser":{"name":"medboar","email":"Bouarourmohammed93@gmail.com"},"directories":{},"maintainers":[{"name":"medboar","email":"Bouarourmohammed93@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-animated-rolling-numbers_2.0.0_1740036923822_0.04902442781352678"},"_hasShrinkwrap":false}},"time":{"created":"2024-09-06T08:57:12.887Z","modified":"2025-02-20T07:35:24.244Z","1.0.0":"2024-09-06T08:57:13.048Z","1.0.1":"2024-09-07T14:26:18.001Z","1.0.2":"2024-10-13T18:26:43.734Z","1.0.3":"2024-11-20T11:18:53.056Z","1.1.0":"2025-01-12T16:47:15.616Z","2.0.0":"2025-02-20T07:35:24.025Z"},"bugs":{"url":"https://github.com/BouarourMohammed/react-native-animated-rolling-numbers/issues"},"author":{"name":"Bouarour Mohammed"},"license":"MIT","homepage":"https://github.com/BouarourMohammed/react-native-animated-rolling-numbers.git#readme","keywords":["react-native","animated-numbers","rolling-numbers","animated-digits","animated-number","reanimated","numbers","react","react-native-rolling-numbers","react-native-animated-numbers","digits"],"repository":{"type":"git","url":"git+https://github.com/BouarourMohammed/react-native-animated-rolling-numbers.git"},"description":"š The Animated Digits component for React Native seamlessly blends a sophisticated number rotation effect with dynamic value updates, creating an engaging and interactive experience that enhances your user interfaces with a touch of elegance and exciteme","maintainers":[{"name":"medboar","email":"Bouarourmohammed93@gmail.com"}],"readme":"# React Native Animated Rolling numbers\n\nāØ `react-native-animated-rolling-numbers` is a React Native component that animates numbers and compact notations (K, M, B, T) with customizable styles and animations. It's designed to create smooth, eye-catching transitions between numeric values.\n\n[](https://github.com/user-attachments/assets/48b10447-5978-4a51-9715-229631a939d5)\n\nThe example shown in the video is available [here](example/example.md).\n\n## Features\n\n- āØ Supports animated transitions for numeric values and symbols (e.g., commas, dots).\n- šØ Customizable digit styles and animation configurations.\n- š Handles compact number formatting (e.g., 1K, 1M, etc.).\n- š§ Easily customizable via props.\n- š Supports reduce-motion and easing functions for animations.\n- š¢ Designed for both regular numbers and formatted numbers with signs (positive/negative) and commas.\n\n## Installation\n\n```bash\nnpm install react-native-animated-rolling-numbers\n# or\nyarn add react-native-animated-rolling-numbers\n```\n\n> [!IMPORTANT]\n> This library relies on react-native-reanimated. You must install react-native-reanimated separately in your project. This is a peer dependency.\n\nMake sure you have `react-native-reanimated` installed in your project. Follow the official installation guide here: [react-native-reanimated installation](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#installation).\n\n## Usage\n\nBasic Example\n\n```javascript\nimport React, { useState } from \"react\";\nimport { View, StyleSheet, Button } from \"react-native\";\nimport { AnimatedRollingNumber } from \"react-native-animated-rolling-numbers\";\nimport { Easing } from \"react-native-reanimated\";\n\nconst App = () => {\n const [value, setValue] = useState(1200);\n return (\n \n \n setValue(value + Math.floor(Math.random() * 1000))}\n title=\"Increase\"\n />\n setValue(value - Math.floor(Math.random() * 1000))}\n title=\"Decrease\"\n />\n \n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n digits: {\n fontSize: 32,\n fontWeight: \"bold\",\n paddingHorizontal: 2,\n color: \"#4A90E2\",\n },\n});\n\nexport default App;\n```\n\nThe example shown in the video is available [here](example/example.md).\n\n## Props\n\n### `value: number`\n\nThe numeric value to be displayed and animated.\n\n### `showSign?: boolean`\n\nWhether to show the sign of the number (e.g., \"+\" or \"-\"). Defaults to `false`.\n\n### `showMinusSign?: boolean`\n\nWhether to show the minus sign for negative numbers. Defaults to `true`.\n\n### `showPlusSign?: boolean`\n\nWhether to show the plus sign for positive numbers. Defaults to `false`.\n\n### `toFixed?: number`\n\nNumber of decimal places to show in normal notation. defaults to `undefined`.\n\n### `useGrouping?: boolean`\n\nWhether to include commas/points in the number formatting (e.g.,1000987 -> 1,000,987). Defaults to `false`.\n\n### `formattedText?: string`\n\nCustom formatted text to display instead of the numeric value.\n\n### `locale?: Intl.LocalesArgument`\n\nThe locale to use for number formatting. Defaults to `\"en-US\"`.\n\n### `enableCompactNotation?: boolean`\n\nEnable compact notation for large numbers (e.g., 1K, 1M, 1B, 1T). Defaults to `false`.\n\n### `compactToFixed?: number`\n\nNumber of decimal places to show in compact notation. Defaults to `undefined`.\n\n### `fixedOnlyForCompact?: boolean`\n\nIf true, only applies decimal precision for compact notation (K/M/B/T). Defaults to `true`.\n\nExample:\n\n- If `fixedOnlyForCompact` is `true` and `compactToFixed` is `2`, the number `1500` will be displayed as `1.50K`, but the number `999` will be displayed as `999` (no decimal places).\n- If `fixedOnlyForCompact` is `false` and `compactToFixed` is `2`, the number `1500` will be displayed as `1.50K`, and the number `999` will be displayed as `999.00`.\n\n### `containerStyle?: StyleProp`\n\nStyle for the container wrapping the animated digits.\n\n### `digitContainerStyle?: StyleProp`\n\nStyle for the container wrapping each animated digit.\n\n### `textProps?: React.ComponentProps`\n\nProps for the main text component.\n\n### `numberTextProps?: React.ComponentProps`\n\nProps for the numeric text components.\n\n### `commaTextProps?: React.ComponentProps`\n\nProps for the comma text component.\n\n### `dotTextProps?: React.ComponentProps`\n\nProps for the decimal point text component.\n\n### `compactNotationTextProps?: React.ComponentProps`\n\nProps for the compact notation text components (K, M, B, T).\n\n### `signTextProps?: React.ComponentProps`\n\nProps for the sign text component (if used).\n\n### `textStyle?: StyleProp`\n\nStyle for the main text component.\n\n### `numberStyle?: StyleProp`\n\nStyle for the numeric text components.\n\n### `commaStyle?: StyleProp`\n\nStyle for the comma text component.\n\n### `dotStyle?: StyleProp`\n\nStyle for the decimal point text component.\n\n### `compactNotationStyle?: StyleProp`\n\nStyle for the compact notation text components.\n\n### `signStyle?: StyleProp`\n\nStyle for the sign text component.\n\n### `spinningAnimationConfig?: object`\n\nConfiguration for the digit animation. Supports:\n\n- `duration: number`: Duration of the animation in milliseconds.\n- `reduceMotion: boolean`: Whether to reduce motion for accessibility.\n- `easing: EasingFunction`: Custom easing function for the animation.\n\n### `animationCallback?: AnimationCallback`\n\nCallback function that is invoked when the animation completes.\n\n### `animateToNewValue?: (newValue: number, variant?: DigitVariant) => number`\n\nCustom function to animate the value change. Defaults to a bounce animation.\n\nIf you find this project useful and would like to support its ongoing development, consider buying me a coffee! Your support helps keep the creativity brewing and allows me to continue improving and maintaining this project. Thank you! āš\n\n![\"Buy](\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\")
\n","readmeFilename":"readme.md"}