rn-format-currency v0.1.3

rn-format-currency

Format currency and account number in React Native

npm

https://www.npmjs.com/package/rn-format-currency?activeTab=readme

Installation

Via npm

npm install rn-format-currency

Via yarn

yarn install rn-format-currency

Usage

import * as React from 'react';
import {StyleSheet, View, Text, TextInput} from 'react-native';
import {
  formatCurrencyInput,
  formatCurrency,
  formatAccountNumber,
} from 'rn-format-currency';

export default function App() {
  const [value, setValue] = React.useState('');

  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <Text style={styles.label}>Balance</Text>
        <Text style={styles.value}>
          {formatCurrency({amount: '23000.3432', prefix: '$', code: 'USD'})}
        </Text>
      </View>

      <View style={styles.row}>
        <Text style={styles.label}>Account Number</Text>
        <Text style={styles.value}>
          {formatAccountNumber(3443435324535543)}
        </Text>
      </View>
      <TextInput
        value={value}
        onChangeText={_value =>
          setValue(
            formatCurrencyInput({value: _value, decimal: 5, maxLength: 22}),
          )
        } //Format currency in TextInput
        style={styles.input}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  input: {
    borderColor: 'gray',
    borderWidth: 1,
    borderRadius: 10,
    height: 50,
    marginHorizontal: 20,
    padding: 10,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 20,
  },
  label: {
    fontSize: 18,
    marginRight: 10,
  },
  value: {
    fontSize: 18,
  },
});

Props

formatCurrency props

const fcurrency = formatCurrency({amount: '23000.3432', prefix: '$', code: 'USD'})

formatAccountNumber props

const fAccountNumber = formatAccountNumber(3443435324535543)

formatCurrencyInput props

const fcurrency = formatCurrencyInput({value: _value, decimal: 5, maxLength: 22})

Contributing

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

License

MIT

Made with create-react-native-library