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.
|
1 2 3 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
render() { return ( <View style={styles.MainContainer}> </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(\) .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
render() { return ( <View style={styles.MainContainer}> <Text style={styles.textStyle}> {'\u00A9'}ReactNativeCode.com </Text> </View> ); } |
4. Creating Style for View and Text component.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
import React, { Component } from 'react'; import { Platform, StyleSheet, View, Text } from 'react-native'; export default class App extends Component{ render() { return ( <View style={styles.MainContainer}> <Text style={styles.textStyle}> {'\u00A9'}ReactNativeCode.com </Text> </View> ); } } const styles = StyleSheet.create({ MainContainer :{ flex:1, paddingTop: (Platform.OS) === 'ios' ? 20 : 0, alignItems: 'center', justifyContent: 'center', }, textStyle:{ color: '#000', fontSize: 20 } }); |
Screenshot in Android device:
React Native JSON FlatList with Images and Text iOS Android Tutorial
kindly provide the php code(FlowersList.php)
sorry i found that
OK Jithin 🙂 .
which is the best (economic) web hosting service , is there any better provider than godaddy
Yes Jithin there are so much better hosting then Godaddy, we will use Digital ocean cloud hosting for our website. If you are interested then i will give you free $10 coupon code for digital ocean.
Thanks alot (c)