CODEWITHSUNDEEP
react-nativedecimal
Evans
Evans

Reputation: 313

commas in Decimals using <Text>

I have a value which is in a Holder which is supposed to show currency and it shows the currency directly from the REST API, fine and good , but rather than show the value like this

123,456,789.00

It shows like this 123456789.00 I have been trying to format it to no avail. Is there a way to do this in React Native? The holder is looking like this

{this.state.balance}

Searched the internet and could not come up with something good at this point.

Upvotes: 0

Views: 176

Answers (2)

Ketan Ramteke
Ketan Ramteke

Reputation: 10651

Use toLocaleString() to add those commas.

Sample Example:

let num = 123456789.00

console.log(num.toLocaleString())

enter image description here

Full Working Example: Expo Snack

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

let num = 123456789.1;
export default function App() {
  const toCommaConvertion = (num) => {
    num += 0.001;
    let str = [...num.toLocaleString()];
    str.pop();
    return str.join('');
  };
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>{toCommaConvertion(num)}</Text>
    </View>
  );
}

Upvotes: 2

AsZik
AsZik

Reputation: 641

You should convert the number to comma seperated formate

class BalanceExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      balance: 123456789,
    };
  }
   numberWithCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  render() {
    return (
    <Text>{this.numberWithCommas(this.state.balance)}</Text>
    );
  }
}

export default BalanceExample;

Upvotes: 0

Related Questions