{"id":15019730,"url":"https://github.com/bouarourmohammed/react-native-animated-rolling-numbers","last_synced_at":"2025-05-16T02:08:57.311Z","repository":{"id":255609931,"uuid":"853218215","full_name":"BouarourMohammed/react-native-animated-rolling-numbers","owner":"BouarourMohammed","description":"🚀 The Animated Rolling Numbers 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 excitement.","archived":false,"fork":false,"pushed_at":"2025-04-28T19:40:42.000Z","size":124,"stargazers_count":205,"open_issues_count":3,"forks_count":11,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-16T02:08:53.418Z","etag":null,"topics":["animated-number","animated-rollilng-numbers","react-native"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BouarourMohammed.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-09-06T08:11:28.000Z","updated_at":"2025-05-13T08:48:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"ec436b4a-cd92-4750-ba0c-89351c720b59","html_url":"https://github.com/BouarourMohammed/react-native-animated-rolling-numbers","commit_stats":{"total_commits":14,"total_committers":3,"mean_commits":4.666666666666667,"dds":0.2142857142857143,"last_synced_commit":"c357b0d6d418a15081b90cda8247924c31b34416"},"previous_names":["bouarourmohammed/react-native-animated-rolling-numbers"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BouarourMohammed%2Freact-native-animated-rolling-numbers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BouarourMohammed%2Freact-native-animated-rolling-numbers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BouarourMohammed%2Freact-native-animated-rolling-numbers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BouarourMohammed%2Freact-native-animated-rolling-numbers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BouarourMohammed","download_url":"https://codeload.github.com/BouarourMohammed/react-native-animated-rolling-numbers/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254453655,"owners_count":22073617,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animated-number","animated-rollilng-numbers","react-native"],"created_at":"2024-09-24T19:53:57.103Z","updated_at":"2025-05-16T02:08:56.952Z","avatar_url":"https://github.com/BouarourMohammed.png","language":"TypeScript","funding_links":["https://buymeacoffee.com/bouarourmohammed"],"categories":[],"sub_categories":[],"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[![React Native Animated rolling numbers Example](https://github.com/user-attachments/assets/48b10447-5978-4a51-9715-229631a939d5)](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\u003e [!IMPORTANT]\n\u003e 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 = () =\u003e {\n  const [value, setValue] = useState(1200);\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cAnimatedRollingNumber\n        value={value}\n        showPlusSign\n        showMinusSign\n        useGrouping\n        enableCompactNotation\n        compactToFixed={2}\n        textStyle={styles.digits}\n        spinningAnimationConfig={{ duration: 500, easing: Easing.bounce }}\n      /\u003e\n      \u003cButton\n        onPress={() =\u003e setValue(value + Math.floor(Math.random() * 1000))}\n        title=\"Increase\"\n      /\u003e\n      \u003cButton\n        onPress={() =\u003e setValue(value - Math.floor(Math.random() * 1000))}\n        title=\"Decrease\"\n      /\u003e\n    \u003c/View\u003e\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 -\u003e 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\u003cViewStyle\u003e`\n\nStyle for the container wrapping the animated digits.\n\n### `digitContainerStyle?: StyleProp\u003cViewStyle\u003e`\n\nStyle for the container wrapping each animated digit.\n\n### `textProps?: React.ComponentProps\u003ctypeof Text\u003e`\n\nProps for the main text component.\n\n### `numberTextProps?: React.ComponentProps\u003ctypeof Text\u003e`\n\nProps for the numeric text components.\n\n### `commaTextProps?: React.ComponentProps\u003ctypeof Text\u003e`\n\nProps for the comma text component.\n\n### `dotTextProps?: React.ComponentProps\u003ctypeof Text\u003e`\n\nProps for the decimal point text component.\n\n### `compactNotationTextProps?: React.ComponentProps\u003ctypeof Text\u003e`\n\nProps for the compact notation text components (K, M, B, T).\n\n### `signTextProps?: React.ComponentProps\u003ctypeof Text\u003e`\n\nProps for the sign text component (if used).\n\n### `textStyle?: StyleProp\u003cTextStyle\u003e`\n\nStyle for the main text component.\n\n### `numberStyle?: StyleProp\u003cTextStyle\u003e`\n\nStyle for the numeric text components.\n\n### `commaStyle?: StyleProp\u003cTextStyle\u003e`\n\nStyle for the comma text component.\n\n### `dotStyle?: StyleProp\u003cTextStyle\u003e`\n\nStyle for the decimal point text component.\n\n### `compactNotationStyle?: StyleProp\u003cTextStyle\u003e`\n\nStyle for the compact notation text components.\n\n### `signStyle?: StyleProp\u003cTextStyle\u003e`\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) =\u003e 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\u003ca href=\"https://buymeacoffee.com/bouarourmohammed\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" style=\"height: 60px !important;width: 217px !important;\" \u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbouarourmohammed%2Freact-native-animated-rolling-numbers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbouarourmohammed%2Freact-native-animated-rolling-numbers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbouarourmohammed%2Freact-native-animated-rolling-numbers/lists"}