React Native Add Show Dollar Rupees Euro Pound Currency Symbols in iOS Android

Currency is the base of every country and based on its global price country growth is decided using currency. Every big country has its own currency format like United states of America has Dollar($), India has Rupees ₹, European countries has Euro(€), Japan has Japanese Yen and United Kingdom has Pound sterling(£). So in this tutorial we would going to Add Show Dollar Rupees Euro Pound Currency Symbols and Japanese Yen in iOS Android react native applications using HTML Uni codes.

Contents in this project Add Show Dollar Rupees Euro Pound Currency Symbols in iOS Android React Native App:

Note: We are using the HTML Uni Codes in this tutorial and can add any symbols according to your country, Simply goto Google and search for your country currency Uni Code.

1. Import StyleSheet, Platform, View and Text component in your project.

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, Platform, View, Text } from ‘react-native’;

import React, { Component } from ‘react’;

import { StyleSheet, Platform, View, Text } from ‘react-native’;

2. Create a Root View in render’s return block and inside it we would make 5 Text components and each of them includes a Unique Unicode of a currency.

<br />
return (</p>
<p>        <View style={styles.MainContainer}></p>
<p>            <Text style={styles.text}> Doller = {‘u0024’} </Text></p>
<p>            <Text style={styles.text}> Rupees = {‘u20B9’} </Text></p>
<p>            <Text style={styles.text}> Euro =  {‘u20AC’} </Text></p>
<p>            <Text style={styles.text}> Japanese yen = {‘u00A5’} </Text></p>
<p>            <Text style={styles.text}> Pound sterling = {‘u00A3’} </Text></p>
<p>        </View></p>
<p>    );<br />
  }

return (

<Text style={styles.text}> Doller = {‘u0024’} </Text>

<Text style={styles.text}> Rupees = {‘u20B9’} </Text>

<Text style={styles.text}> Japanese yen = {‘u00A5’} </Text>

<Text style={styles.text}> Pound sterling = {‘u00A3’} </Text>

</View>

);

}

3. Create Style.

<br />
const styles = StyleSheet.create({</p>
<p> MainContainer :{</p>
<p>  flex:1,<br />
  paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,<br />
  alignItems: ‘center’,<br />
  justifyContent: ‘center’,</p>
<p>  },</p>
<p>  text:{</p>
<p>    color: ‘#000’,<br />
    fontSize: 22<br />
  }</p>
<p>});

const styles = StyleSheet.create({

MainContainer :{

flex:1,

paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,

alignItems: ‘center’,

justifyContent: ‘center’,

text:{

color: ‘#000’,

fontSize: 22

}

});

4. Complete source code for App.js File :

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, Platform, View, Text } from ‘react-native’;</p>
<p>export default class App extends Component{</p>
<p>  render() {</p>
<p>    return (</p>
<p>        <View style={styles.MainContainer}></p>
<p>            <Text style={styles.text}> Doller = {‘u0024’} </Text></p>
<p>            <Text style={styles.text}> Rupees = {‘u20B9’} </Text></p>
<p>            <Text style={styles.text}> Euro =  {‘u20AC’} </Text></p>
<p>            <Text style={styles.text}> Japanese yen = {‘u00A5’} </Text></p>
<p>            <Text style={styles.text}> Pound sterling = {‘u00A3’} </Text></p>
<p>        </View></p>
<p>    );<br />
  }<br />
}</p>
<p>const styles = StyleSheet.create({</p>
<p> MainContainer :{</p>
<p>  flex:1,<br />
  paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,<br />
  alignItems: ‘center’,<br />
  justifyContent: ‘center’,</p>
<p>  },</p>
<p>  text:{</p>
<p>    color: ‘#000’,<br />
    fontSize: 22<br />
  }</p>
<p>});