How to format a number to currency when using React Native?

Sometimes, we want to format a number to currency when using React Native.

In this article, we’ll look at how to format a number to currency when using React Native.

How to format a number to currency when using React Native?

To format a number to currency when using React Native, we can use the react-number-format package.

To install it, we run npm i react-number-format.

Then we use it by writing:

import * as React from 'react';
import { View, Text } from 'react-native';
import NumberFormat from 'react-number-format';

export default function App() {
  return (
    <View>
      <NumberFormat
        value={7585945}
        displayType="text"
        thousandSeparator
        prefix="$"
        renderText={(value) => <Text>{value}</Text>}
      />
    </View>
  );
}

to add the NumberFormat component.

value is set to the number to format.

displayType sets how the formatted number should be rendered.

thousandSeparator adds thousand separators to the return number.

prefix sets the prefix to add to the number.

renderText is set a function that renders the value in the Text component.

Conclusion

To format a number to currency when using React Native, we can use the react-number-format package.

To install it, we run npm i react-number-format.