{"id":4301,"url":"https://github.com/budiadiono/react-native-calculator","last_synced_at":"2025-03-21T06:32:16.396Z","repository":{"id":41233250,"uuid":"137091346","full_name":"budiadiono/react-native-calculator","owner":"budiadiono","description":"React Native Calculator and Calculator Input Component","archived":false,"fork":false,"pushed_at":"2020-09-15T07:59:21.000Z","size":256,"stargazers_count":26,"open_issues_count":6,"forks_count":26,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-17T22:16:22.633Z","etag":null,"topics":["calculator","component","input","react","react-native","react-native-calculator"],"latest_commit_sha":null,"homepage":null,"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/budiadiono.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}},"created_at":"2018-06-12T15:24:35.000Z","updated_at":"2024-10-16T06:34:43.000Z","dependencies_parsed_at":"2022-07-28T21:18:52.194Z","dependency_job_id":null,"html_url":"https://github.com/budiadiono/react-native-calculator","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/budiadiono%2Freact-native-calculator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/budiadiono%2Freact-native-calculator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/budiadiono%2Freact-native-calculator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/budiadiono%2Freact-native-calculator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/budiadiono","download_url":"https://codeload.github.com/budiadiono/react-native-calculator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244751638,"owners_count":20504243,"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":["calculator","component","input","react","react-native","react-native-calculator"],"created_at":"2024-01-05T20:17:07.374Z","updated_at":"2025-03-21T06:32:15.783Z","avatar_url":"https://github.com/budiadiono.png","language":"TypeScript","funding_links":[],"categories":["Components"],"sub_categories":["UI"],"readme":"# React Native Calculator\n\n[![npm version](https://badge.fury.io/js/react-native-calculator.svg)](https://badge.fury.io/js/react-native-calculator)\n[![build status](https://travis-ci.org/budiadiono/react-native-calculator.svg)](https://travis-ci.org/budiadiono/react-native-calculator)\n\nSimple react native calculator and calculator input component.\n\n## Installation\n\nUsing npm:\n\n```\nnpm i -S react-native-calculator\n```\n\nor yarn:\n\n```\nyarn add react-native-calculator\n```\n\n## Demo\n\n\u003ca href=\"https://snack.expo.io/@budiadiono/react-native-calculator-example\" target=\"_blank\"\u003e\n\u003cimg src=\"https://api.qrserver.com/v1/create-qr-code/?size=150x150\u0026data=exp://expo.io/@budiadiono/react-native-calculator-example\"\u003e\n\u003c/a\u003e\n\n## Calculator Component\n\n\u003cimg alt=\"react-native-gifted-chat\" src=\"https://thumbs.gfycat.com/EnchantingVainFallowdeer-size_restricted.gif\" width=\"261\" height=\"464\" /\u003e \u003cimg alt=\"react-native-gifted-chat\" src=\"https://thumbs.gfycat.com/BeautifulTimelyAmoeba-size_restricted.gif\" width=\"261\" height=\"464\" /\u003e\n\n### Usage\n\n```javascript\nimport React from 'react'\nimport { View } from 'react-native'\nimport { Calculator } from 'react-native-calculator'\n\nexport default class App extends React.Component {\n render() {\n return (\n \u003cView style={{ flex: 1 }}\u003e\n \u003cCalculator style={{ flex: 1 }} /\u003e\n \u003c/View\u003e\n )\n }\n}\n```\n\n### Props\n\nAll props in [common props](#common-props) and...\n\n| Prop Name | Data Type | Default Value | Description |\n| --------------- | ------------------------------------------- | ------------- | ----------------------------------- |\n| hasAcceptButton | boolean | false | Show accept button after calculate. |\n| style | ViewStyle | | Container style. |\n| onCalc | `(value : number , text : string ) =\u003e void` | | Calculate button click event. |\n| onAccept | `(value : number , text : string ) =\u003e void` | | Accept button click event. |\n| hideDisplay | boolean | false | Hide display text field. |\n\n## Calculator Input Component\n\n\u003cimg alt=\"react-native-gifted-chat\" src=\"https://thumbs.gfycat.com/DismalSpotlessAcaciarat-size_restricted.gif\" width=\"261\" height=\"464\" /\u003e\n\n### Usage\n\n```javascript\nimport React from 'react'\nimport { View } from 'react-native'\nimport { CalculatorInput } from 'react-native-calculator'\n\nexport default class App extends React.Component {\n render() {\n return (\n \u003cView\u003e\n \u003cCalculatorInput\n fieldTextStyle={{ fontSize: 24 }}\n fieldContainerStyle={{ height: 36 }}\n /\u003e\n \u003c/View\u003e\n )\n }\n}\n```\n\n### Props\n\nAll props in [common props](#common-props) and...\n\n| Prop Name | Data Type | Default Value | Description |\n| ------------------- | ------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------------------- |\n| modalAnimationType | 'none' | 'slide' | 'fade' | slide | Modal animation type. |\n| modalBackdropStyle | ViewStyle | | Style of modal backdrop. |\n| fieldContainerStyle | ViewStyle | | Text field container style. |\n| fieldTextStyle | TextStyle | | Text style. |\n| onChange | `(value : number , text : string ) =\u003e void` | | Value change event. |\n| prefix | string | | Prefix. |\n| suffix | string | | Suffix. |\n| onBeforeChange | `(value : number , text : string ) =\u003e boolean` | | Called before changes applied. Return true if changes are accepted. |\n| onBeforeChangeAsync | `(value : number , text : string ) =\u003e Promise\u003cboolean\u003e` | | Called asynchronously before changes applied. Resolve with true if changes are accepted. |\n\n## Common Props\n\n| Prop Name | Data Type | Default Value | Description |\n| ---------------------------- | -------------------------------------------------- | ------------- | ------------------------------------------------------- |\n| decimalSeparator | string | . | Decimal separator sign. |\n| thousandSeparator | string | , | Thousand separator sign. |\n| numericButtonBackgroundColor | string | #ffffff | Numeric button background color. |\n| numericButtonColor | string | #aaaaaa | Numeric text button color. |\n| actionButtonBackgroundColor | string | #e7e5e3 | Action button background color. |\n| actionButtonColor | string | #000000 | Action text button color. |\n| calcButtonBackgroundColor | string | #ff8d00 | Calculate button background color. |\n| calcButtonColor | string | #ffffff | Calculator text button color. |\n| acceptButtonBackgroundColor | string | #14CC60 | Accept button background color. |\n| acceptButtonColor | string | #ffffff | Accept text button color. |\n| displayBackgroundColor | string | #ffffff | Digit display background color. |\n| displayColor | string | #000000 | Digit display text color. |\n| borderColor | string | #52525B | Border color. |\n| fontSize | number | 18 | Button text font size. |\n| value | number | 0 | Initial value. |\n| width | number | (auto) | Calculator component width. |\n| height | number | (auto) | Calculator component height. |\n| displayHeight | number | (auto) | Digit display container height. |\n| keyboardHeight | number | (auto) | Keyboard container height. |\n| onTextChange | (text: string) =\u003e void | | Text change event. |\n| displayTextAlign | `\"auto\" / \"left\" / \"right\" / \"center\" / \"justify\"` | `\"left\"` | Digit align display. |\n| noDecimal | boolean | false | Hide decimal separator button to disable decimal value. |\n| roundTo | number | 2 | How many decimal places to round the value |\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbudiadiono%2Freact-native-calculator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbudiadiono%2Freact-native-calculator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbudiadiono%2Freact-native-calculator/lists"}