{"id":13678204,"url":"https://github.com/inKindCards/react-native-money","last_synced_at":"2025-04-29T12:34:00.562Z","repository":{"id":38850805,"uuid":"448041487","full_name":"inKindCards/react-native-money","owner":"inKindCards","description":"A fully native TextInput component that allows currency input with a right to left text alignment","archived":false,"fork":false,"pushed_at":"2023-07-05T13:15:40.000Z","size":987,"stargazers_count":59,"open_issues_count":17,"forks_count":10,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-24T17:45:50.379Z","etag":null,"topics":["currency","react","react-native","react-native-currency-inpuy","react-native-money","text-input"],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/inKindCards.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2022-01-14T16:53:44.000Z","updated_at":"2024-10-24T17:21:15.000Z","dependencies_parsed_at":"2024-10-08T12:50:26.189Z","dependency_job_id":null,"html_url":"https://github.com/inKindCards/react-native-money","commit_stats":{"total_commits":25,"total_committers":3,"mean_commits":8.333333333333334,"dds":0.07999999999999996,"last_synced_commit":"9ba89295a01a4b962b0c9a11404d6b84cf56850f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inKindCards%2Freact-native-money","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inKindCards%2Freact-native-money/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inKindCards%2Freact-native-money/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inKindCards%2Freact-native-money/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/inKindCards","download_url":"https://codeload.github.com/inKindCards/react-native-money/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224173638,"owners_count":17268145,"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":["currency","react","react-native","react-native-currency-inpuy","react-native-money","text-input"],"created_at":"2024-08-02T13:00:51.071Z","updated_at":"2024-11-11T20:31:10.161Z","avatar_url":"https://github.com/inKindCards.png","language":"Swift","funding_links":[],"categories":["Swift"],"sub_categories":[],"readme":"\u003cdiv id=\"top\"\u003e\u003c/div\u003e\n\n\n\u003c!-- PROJECT SHIELDS --\u003e\n\u003c!--\n*** I'm using markdown \"reference style\" links for readability.\n*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).\n*** See the bottom of this document for the declaration of the reference variables\n*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.\n*** https://www.markdownguide.org/basic-syntax/#reference-style-links\n--\u003e\n[![Contributors][contributors-shield]][contributors-url]\n[![Forks][forks-shield]][forks-url]\n[![Stargazers][stars-shield]][stars-url]\n[![Issues][issues-shield]][issues-url]\n[![MIT License][license-shield]][license-url]\n\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/inKindCards/react-native-money\"\u003e\n    \u003cimg src=\"logo.png\" alt=\"Logo\" width=\"160px\"\u003e\n  \u003c/a\u003e\n\n  \u003ch3 align=\"center\"\u003eReact Native Money\u003c/h3\u003e\n  \u003cp align=\"center\"\u003e\n    A fully native TextInput component that allows multilingual currency input \u003cbr /\u003ewith a right to left text alignment.\n    \u003cbr /\u003e\u003cbr /\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@inkindcards/react-native-money\"\u003eView Library\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/inKindCards/react-native-money/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/inKindCards/react-native-money/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n## What is this?\n\nReact Native Money is a simple component library that exposes a fully native TextInput component that uses currency formatting libraries provided with Android and iOS, \nso as well as being performant it is also lightweight on your binary sizes. The component has an identitical prop signature and API to the default [TextInput](https://reactnative.dev/docs/textinput) provided\nwith React Native, The only difference is that the `value` prop accepts a `Number` type and `onChangeText` returns a number value and formatted string.\n\n\u003cbr /\u003e\n\n```\nnpm install @inkindcards/react-native-money\n```\n\n### iOS Installation:\nMake sure to add the following to your `Podfile` before running `npx pod-install`:\n\n```\npod 'React-RCTText', :path =\u003e '../node_modules/react-native/Libraries/Text', :modular_headers =\u003e true\n```\n\n## Manual Installation\n#### iOS\n\n1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`\n2. Go to `node_modules` ➜ `react-native-money` and add `RNMoneyInput.xcodeproj`\n3. In XCode, in the project navigator, select your project. Add `libRNMoneyInput.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`\n4. Run your project (`Cmd+R`)\n\n#### Android\n\n1. Open up `android/app/src/main/java/[...]/MainActivity.java`\n  - Add `import com.inkind.RNMoneyInput.RNMoneyInputPackage;` to the imports at the top of the file\n  - Add `new RNMoneyInputPackage()` to the list returned by the `getPackages()` method\n2. Append the following lines to `android/settings.gradle`:\n  \t```\n  \tinclude ':inkindcards_react-native-money'\n  \tproject(':inkindcards_react-native-money').projectDir = new File(rootProject.projectDir, \t'../node_modules/@inkindcards/react-native-money/android')\n  \t```\n3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:\n  \t```\n    compile project(':react-native-money')\n  \t```\n\u003c/details\u003e\n\n## Usage\nYou use the MoneyInput component like a normal [TextInput](https://reactnative.dev/docs/textinput) from the React Native library with the exception that you pass a number to the `value` prop.\nYou can also pass a locale idenitifer which is composed of the language along with the country, this in turn will change the how the currency is formatted, All possible locales can be read about here: [Currency Locale Reference](https://docs.oracle.com/cd/E23824_01/html/E26033/glset.html).\n\n```\nimport {useState} from 'react'\nimport MoneyInput from '@inkindcards/react-native-money'\n\nconst App = () =\u003e {\n  const [bill, setBill] = useState\u003cnumber\u003e()\n\n  return (\n    \u003cMoneyInput \n      value={bill} \n      locale='en_US'\n      placeholder='$0.00'\n      onChangeText={(value: number, label: string) =\u003e {\n        setBill(value)\n      }}\n    /\u003e\n  )\n\n}\n\n```\n\n## Testing\n\nMake sure to [mock](https://jestjs.io/docs/en/manual-mocks#mocking-node-modules) the following to `jest.setup.js`:\n```javascript\njest.mock('react-native-money', () =\u003e ({\n    default: jest.fn(),\n}))\n```\n\n## Inspiration\nWe'd like to express thanks to the developers of [react-native-text-input-mask](https://github.com/react-native-text-input-mask/react-native-text-input-mask) as this project started as a fork of that repo\nas their approach in monkeypatching the TextInput delegate was exactly what we needed.\n\n## Versioning\n\nThis project uses semantic versioning: MAJOR.MINOR.PATCH.\nThis means that releases within the same MAJOR version are always backwards compatible. For more info see [semver.org](http://semver.org/).\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\u003c!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --\u003e\n[contributors-shield]: https://img.shields.io/github/contributors/inKindCards/react-native-money.svg?style=for-the-badge\n[contributors-url]: https://github.com/inKindCards/react-native-money/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/inKindCards/react-native-money.svg?style=for-the-badge\n[forks-url]: https://github.com/inKindCards/react-native-money/network/members\n[stars-shield]: https://img.shields.io/github/stars/inKindCards/react-native-money.svg?style=for-the-badge\n[stars-url]: https://github.com/inKindCards/react-native-money/stargazers\n[issues-shield]: https://img.shields.io/github/issues/inKindCards/react-native-money.svg?style=for-the-badge\n[issues-url]: https://github.com/inKindCards/react-native-money/issues\n[license-shield]: https://img.shields.io/github/license/inKindCards/react-native-money.svg?style=for-the-badge\n[license-url]: https://github.com/inKindCards/react-native-money/blob/master/LICENSE","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FinKindCards%2Freact-native-money","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FinKindCards%2Freact-native-money","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FinKindCards%2Freact-native-money/lists"}