You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

@dannyhw/react-native-currency-input

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@dannyhw/react-native-currency-input

fork of react-native-currency-input by Caio Medeiros <caio.quirino.medeiros@gmail.com>


Version published
Maintainers
1
Created

Readme

Source

React Native Currency Input

A simple currency input component for both iOS and Android.

The goal of react-native-currency-input is to offer a simple and effective way to handle number inputs with custom format, usually a currency input, but it can be used for any number input case.

Features

  • A simple and practical component for number inputs
  • It's just a <TextInput/> component, so you can use its props and it's easy to customize
  • Handle any number format with these powerful props: precision, delimiter, separator, prefix and suffix.
  • It handles negative values and you can choose the position of the sign with the signPosition.
  • Set minimun and maximum values with minValue and maxValue.
  • Use React Native ES6 and React Hooks

BONUS

Installation

npm install react-native-currency-input

or

yarn add react-native-currency-input

Basic Usage

import CurrencyInput from 'react-native-currency-input';

function MyComponent() {
  const [value, setValue] = React.useState(2310.458); // can also be null

  return <CurrencyInput value={value} onChangeValue={setValue} />;
}

Advanced Usage

import CurrencyInput from 'react-native-currency-input';

function MyComponent() {
  const [value, setValue] = React.useState(2310.458);

  return (
    <CurrencyInput
      value={value}
      onChangeValue={setValue}
      prefix="R$"
      delimiter="."
      separator=","
      precision={2}
      minValue={0}
      showPositiveSign
      onChangeText={(formattedValue) => {
        console.log(formattedValue); // R$ +2.310,46
      }}
    />
  );
}

Using custom TextInput

import CurrencyInput from 'react-native-currency-input';
import { Input } from 'native-base';

function MyComponent() {
  const [value, setValue] = React.useState(2310.458);

  return (
    <CurrencyInput
      value={value}
      onChangeValue={setValue}
      renderTextInput={textInputProps => <Input {...textInputProps} variant='filled' />}
      renderText
      prefix="R$"
      delimiter="."
      separator=","
      precision={2}
    />
  );
}

Props

PropTypeDefaultDescription
...TextInputPropsInherit all props of TextInput.
valuenumberThe value for controlled input. REQUIRED
onChangeValuefunctionCallback that is called when the input's value changes. REQUIRED
prefixstringCharacter to be prefixed on the value.
suffix*stringCharacter to be suffixed on the value.
delimiterstring,Character for thousands delimiter.
separatorstring.Decimal separator character.
precisionnumber2Decimal precision.
maxValuenumberMax value allowed. Might cause unexpected behavior if you pass a value higher than the one defined here.
minValuenumberMin value allowed. Might cause unexpected behavior if you pass a value lower than the one defined here.
signPositionstring"afterPrefix"Where the negative/positive sign (+/-) should be placed.
showPositiveSignbooleanfalseSet this to true to show the + character on positive values.
onChangeTextfunctionCallback that is called when the input's text changes. IMPORTANT: This does not control the input value, you must use onChangeValue.
renderTextInputfunctionUse a custom TextInput component.

* IMPORTANT: Be aware that using the suffix implies setting the selection property of the TextInput internally. You can override the selection, but that will cause behavior problems on the component

Tip: If you don't want negative values, just use minValue={0}.

Example

See EXAMPLE

git clone https://github.com/caioquirinomedeiros/react-native-currency-input.git
cd react-native-currency-input/example
yarn
yarn android / yarn ios

FakeCurrencyInput

This component hides the TextInput and use a Text on its place, so you'll lost the cursor, but will get rid of the flickering issue. To replace the cursor it's used a pipe character (|) that will be always at the end of the text. It also have a wrapper View with position "relative" on which the TextInput is stretched over.

  • Pros
    • No flickering issue as a controlled input component
    • The cursor is locked at the end, avoiding the user to mess up with the mask
  • Cons
    • Lost of selection functionality. The user will still be able to copy/paste, but with a bad experience
    • The cursor is locked at the end...

FakeCurrencyInput Usage

import { FakeCurrencyInput } from 'react-native-currency-input';

function MyComponent() {
  const [value, setValue] = React.useState(0); // can also be null

  return (
    <FakeCurrencyInput
      value={value}
      onChangeValue={setValue}
      prefix="$"
      delimiter=","
      separator="."
      precision={2}
      onChangeText={(formattedValue) => {
        // ...
      }}
    />
  );
}

FakeCurrencyInput Props

It includes the same props of the CurrencyInput with the additional of the following:

PropTypeDefaultDescription
...CurrencuInputPropsInherit all props of CurrencyInput.
containerStylestyle propStyle for the container View that wraps the Text.
caretColorstring#6495edColor of the caret.

formatNumber(value, options)

import { formatNumber } from 'react-native-currency-input';

const value = -2375923.3;

const formattedValue = formatNumber(value, {
  separator: ',',
  prefix: 'R$ ',
  precision: 2,
  delimiter: '.',
  signPosition: 'beforePrefix',
});

console.log(formattedValue); // -R$ 2.375.923,30

options (optional)

NameTypeDefaultDescription
prefixstringCharacter to be prefixed on the value.
suffixstringCharacter to be suffixed on the value.
delimiterstring,Character for thousands delimiter.
separatorstring.Decimal separator character.
precisionnumber2Decimal precision.
ignoreNegativebooleanfalseSet this to true to disable negative values.
signPositionstring"afterPrefix"Where the negative/positive sign (+/-) should be placed.
showPositiveSignbooleanfalseSet this to true to show the + character on positive values.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

react-native-currency-input is released under the MIT license. See LICENSE for details.

Any question or support will welcome.

Keywords

FAQs

Package last updated on 14 Apr 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc