All the social networking Login like Google + Login, Facebook Login, Twitter Login and WordPress Login and Sharing content on them feature is on edge. They also provide the their own unique buttons code to share, post and Sign Up. But sometimes developers needs more control on their application design and then the custom Button component design with Image icon come. So in this tutorial we would going to design 2 custom Google+ Login and Facebook Login buttons with Image Icon Inside Button using TouchableOpacity component android iOS example tutorial. So let’s get started .
Contents in this project Add Show Image Icon Inside Button in React Native Android iOS App:
1. Create a folder inside your react native project named as Images.
2. Now download both icons from below. These icons is designed by myself and freely available for both professional and personal use. You can use them anywhere without my permission.
3. Copy both icons inside the Images folder like i did in below screenshot.
4. Open your project’s App.js file and import StyleSheet, View, Text, Image and TouchableOpacity component.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text, Image, TouchableOpacity} from ‘react-native’;
|
5. Create a Parent View in render’s return block. This would be our Main container view.
|
1
2
3
4
5
6
7
8
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
6. Create TouchableOpacity inside Root View. This would be our first Facebook Login button. The TouchableOpacity is used to WRAP the Image Icon + Horizontal Separator line + Text . You can also set onPress method on TouchableOpacity to perform any task on button click event.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
render() {
return (
<View style={styles.MainContainer}>
<TouchableOpacity style={styles.FacebookStyle} activeOpacity={0.5}>
<Image
source={require(‘./Images/Facebook_Login_Button.png’)}
style={styles.ImageIconStyle}
/>
<View style={styles.SeparatorLine} />
<Text style={styles.TextStyle}> Login Using Facebook </Text>
</TouchableOpacity>
</View>
);
}
|
Screenshot of Facebook Login button :
7. Now create another TouchableOpacity component for Google+ Login button.
|
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
|
render() {
return (
<View style={styles.MainContainer}>
<TouchableOpacity style={styles.FacebookStyle} activeOpacity={0.5}>
<Image
source={require(‘./Images/Facebook_Login_Button.png’)}
style={styles.ImageIconStyle}
/>
<View style={styles.SeparatorLine} />
<Text style={styles.TextStyle}> Login Using Facebook </Text>
</TouchableOpacity>
<TouchableOpacity style={styles.GooglePlusStyle} activeOpacity={0.5}>
<Image
source={require(‘./Images/Google_Plus.png’)}
style={styles.ImageIconStyle}
/>
<View style={styles.SeparatorLine} />
<Text style={styles.TextStyle}> Login Using Google Plus </Text>
</TouchableOpacity>
</View>
);
}
|
Screenshot of Google+ Login button :
8. Now finally Create Custom CSS Style classes for all of them.
|
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
margin: 10
},
GooglePlusStyle: {
flexDirection: ‘row’,
alignItems: ‘center’,
backgroundColor: ‘#dc4e41’,
borderWidth: .5,
borderColor: ‘#fff’,
height: 40,
borderRadius: 5 ,
margin: 5,
},
FacebookStyle: {
flexDirection: ‘row’,
alignItems: ‘center’,
backgroundColor: ‘#485a96’,
borderWidth: .5,
borderColor: ‘#fff’,
height: 40,
borderRadius: 5 ,
margin: 5,
},
ImageIconStyle: {
padding: 10,
margin: 5,
height: 25,
width: 25,
resizeMode : ‘stretch’,
},
TextStyle :{
color: “#fff”,
marginBottom : 4,
marginRight :20,
},
SeparatorLine :{
backgroundColor : ‘#fff’,
width: 1,
height: 40
}
});
|
9. 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text, Image, TouchableOpacity} from ‘react-native’;
export default class App extends Component<{}> {
render() {
return (
<View style={styles.MainContainer}>
<TouchableOpacity style={styles.FacebookStyle} activeOpacity={0.5}>
<Image
source={require(‘./Images/Facebook_Login_Button.png’)}
style={styles.ImageIconStyle}
/>
<View style={styles.SeparatorLine} />
<Text style={styles.TextStyle}> Login Using Facebook </Text>
</TouchableOpacity>
<TouchableOpacity style={styles.GooglePlusStyle} activeOpacity={0.5}>
<Image
source={require(‘./Images/Google_Plus.png’)}
style={styles.ImageIconStyle}
/>
<View style={styles.SeparatorLine} />
<Text style={styles.TextStyle}> Login Using Google Plus </Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
margin: 10
},
GooglePlusStyle: {
flexDirection: ‘row’,
alignItems: ‘center’,
backgroundColor: ‘#dc4e41’,
borderWidth: .5,
borderColor: ‘#fff’,
height: 40,
borderRadius: 5 ,
margin: 5,
},
FacebookStyle: {
flexDirection: ‘row’,
alignItems: ‘center’,
backgroundColor: ‘#485a96’,
borderWidth: .5,
borderColor: ‘#fff’,
height: 40,
borderRadius: 5 ,
margin: 5,
},
ImageIconStyle: {
padding: 10,
margin: 5,
height: 25,
width: 25,
resizeMode : ‘stretch’,
},
TextStyle :{
color: “#fff”,
marginBottom : 4,
marginRight :20,
},
SeparatorLine :{
backgroundColor : ‘#fff’,
width: 1,
height: 40
}
});
|
Screenshot in Android application :
Screenshot in iOS application :
Also Read :
How to Get Only Numeric Value From TextInput in React Native
React Native Apply Filter on JSON ListView Data Using PHP MySQL
React Native Set View Width Height in Fixed Dimensions Android iOS
Call External Local JS File Activity in Current App.js File in React Native
React Native Integrate YouTube Video in Android iOS App Example
