How to Add Currency Symbols in React Native

Sometimes, you may need to show currency symbols inside your React Native app. For example, if you are creating an app like a currency converter then you certainly need currency symbols.

Showing currency symbols in React Native is almost the same as in HTML. Just get the HTML Unicode of the currency and you can display it in the app.

For example, the HTML Unicode of US Dollar currency is 0024. Then use the Unicode as given below inside the JSX.

<Text>{'\u0024'}</Text>

That’s it. If you want to know the HTML Unicode of more currencies then you can refer this link.

In the following example, I am showing the Indian Rupee symbol as text.

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>{'\u20B9'}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 30,
  },
});

export default App;

The following will be the output.

That’s how you add currency symbols easily in react native.