React Native Show Copyright Symbol © Icon in Text in iOS Android

Copyright icon is very useful in the history of web development and as well as mobile application development. Copyright icon would give the authority to the developer or the main head of organization to that all the design, data present in application, coding is belong to him and the he or she reserved all the rights and an outside person cannot use that application before following his guideline. So in this tutorial we would going to add Show Copyright Symbol © Icon in Text component in iOS Android react native application using the Copyright Unicode of HTML.

Contents in this project Show Copyright Symbol © Icon in Text component in iOS Android React Native app:

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

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

import React, { Component } from ‘react’;

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

2. Create a Root View in render’s return block, This would be our main container block.

<br />
render() {</p>
<p>    return (</p>
<p>        <View style={styles.MainContainer}></p>
<p>        </View></p>
<p>    );<br />
  }

render() {

return (

</View>

);

}

3. Create a Text component inside the root view and using the Html Unicode of © icon we are displaying the icon. The Unicode of © icon is u00A9 we are using the Unicode with forward slash() .

<br />
render() {</p>
<p>    return (</p>
<p>        <View style={styles.MainContainer}></p>
<p>          <Text style={styles.textStyle}> {‘u00A9’}ReactNativeCode.com </Text></p>
<p>        </View></p>
<p>    );<br />
  }

render() {

return (

<Text style={styles.textStyle}> {‘u00A9’}ReactNativeCode.com </Text>

</View>

);

}

4. Creating Style for View and Text component.

<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>  textStyle:{</p>
<p>    color: ‘#000’,<br />
    fontSize: 20<br />
  }</p>
<p>});

const styles = StyleSheet.create({

MainContainer :{

flex:1,

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

alignItems: ‘center’,

justifyContent: ‘center’,

textStyle:{

color: ‘#000’,

fontSize: 20

}

});

5. Complete source code for App.js File :

<br />
import React, { Component } from ‘react’;</p>
<p>import { Platform, StyleSheet, 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.textStyle}> {‘u00A9’}ReactNativeCode.com </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>  textStyle:{</p>
<p>    color: ‘#000’,<br />
    fontSize: 20<br />
  }</p>
<p>});