React Native Elements is an amazing react native library used by hundreds of peoples around the react development arena. React Native Elements comes with multiple custom components which can be used to create your own modified components in react native. In today’s tutorial we would use React Native Elements library with react-native-vector-icons library to Create Beautiful Social Icons Button in react native both android and iOS mobile app. We would make circular social sharing buttons and also normal buttons which social icons. So in this tutorial we would React Native Create Beautiful Social Icons Button using React Native Elements Android iOS Example Tutorial.
Contents in this project React Native Create Beautiful Social Icons Button using React Native Elements Android iOS Example Tutorial:
1. Before starting writing code we have to install 2 libraries in our current react native project first is React Native Elements and second is react-native-vector-icons. So open your react native project root folder in Command Prompt or Terminal like i did in below screenshot and execute below command to install the React Native Elements library.
|
1
|
npm install react–native–elements
|
Screenshot:
Screenshot after done installation:
2 Now we have to install react-native-vector-icons library because all the icons is coming form react-native-vector-icons library and we must install the vector icons library in order to use all the social sharing icons. So again open your react native root project folder in command prompt and execute below command.
|
1
|
npm i —save react–native–vector–icons
|
Screenshot:
Screenshot after done installation:
3. Now the installation part has done. Next step is to link the vector icons library to our react native project. Because by default this library dose not link to project root structure we have to link it manually. So again open your react native project root folder in command prompt like i did in below screenshot and execute below command.
|
1
|
react–native link react–native–vector–icons
|
Screenshot:
4. Now all the things has been setup its time to start the coding for app. So open your project’s main App.js file and import StyleSheet, View, Text and ScrollView component.
|
1
2
3
|
import React, {Component} from ‘react’;
import { StyleSheet, View, Text, ScrollView } from ‘react-native’;
|
5. Import SocialIcon component from react-native-elements library in your react native project.
|
1
|
import { SocialIcon } from ‘react-native-elements’;
|
6. Create our main export default App extends component.
|
1
2
3
4
|
export default class App extends Component {
}
|
7. We are creating ScrollView component in render’s return block because we would put multiple icons in here and they won’t be visible on screen if they were not in ScrollView.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
export default class App extends Component {
render() {
return (
<ScrollView>
<View style={styles.MainContainer}>
</View>
</ScrollView>
);
}
};
|
8. Creating 1 Text component and multiple SocialIcon components.
- type : is the Icon name. You will find all the Icons list here.
- onPress : Used to set onPress on Click event on Icon clicked.
|
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
<Text style={{ fontSize: 20, marginBottom: 20, textAlign: ‘center’ }}>
Beautiful Social Icons and Social Buttons from React Native Elements
</Text>
<View style={{ flex: 1, flexDirection: ‘row’ }}>
<View style={{ flexDirection: ‘column’ }}>
<SocialIcon
type=“facebook”
onPress={() => {
alert(‘facebook’);
}}
/>
<Text style={{ textAlign: ‘center’ }}>Facebook</Text>
</View>
<View style={{ flexDirection: ‘column’ }}>
<SocialIcon
type=“github”
onPress={() => {
alert(‘github’);
}}
/>
<Text style={{ textAlign: ‘center’ }}>GitHub</Text>
</View>
<View style={{ flexDirection: ‘column’ }}>
<SocialIcon
type=“gitlab”
onPress={() => {
alert(‘gitlab’);
}}
/>
<Text style={{ textAlign: ‘center’ }}>Gitlab</Text>
</View>
<View style={{ flexDirection: ‘column’ }}>
<SocialIcon
type=“github-alt”
onPress={() => {
alert(‘github’);
}}
/>
<Text style={{ textAlign: ‘center’ }}>GitHub–alt</Text>
</View>
</View>
<View style={{ flex: 1, flexDirection: ‘row’ }}>
<View style={{ flexDirection: ‘column’ }}>
<SocialIcon
type=“instagram”
onPress={() => {
alert(‘instagram’);
}}
/>
<Text style={{ textAlign: ‘center’ }}>Instagram</Text>
</View>
<View style={{ flexDirection: ‘column’ }}>
<SocialIcon
type=“linkedin”
onPress={() => {
alert(‘linkedin’);
}}
/>
<Text style={{ textAlign: ‘center’ }}>Linkedin</Text>
</View>
<View style={{ flexDirection: ‘column’ }}>
<SocialIcon
type=“pinterest”
onPress={() => {
alert(‘pinterest’);
}}
/>
<Text style={{ textAlign: ‘center’ }}>Pinterest</Text>
</View>
<View style={{ flexDirection: ‘column’ }}>
<SocialIcon
type=“reddit-alien”
onPress={() => {
alert(‘reddit’);
}}
/>
<Text style={{ textAlign: ‘center’ }}>Reddit–Alien</Text>
</View>
<View style={{ flexDirection: ‘column’ }}>
<SocialIcon
type=“youtube”
onPress={() => {
alert(‘youtube’);
}}
/>
<Text style={{ textAlign: ‘center’ }}>Youtube</Text>
</View>
</View>
<View style={{ flex: 1, flexDirection: ‘row’ }}>
<View style={{ flexDirection: ‘column’ }}>
<SocialIcon
type=“twitter”
onPress={() => {
alert(‘twitter’);
}}
/>
<Text style={{ textAlign: ‘center’ }}>Twitter</Text>
</View>
<View style={{ flexDirection: ‘column’ }}>
<SocialIcon
type=“vimeo”
onPress={() => {
alert(‘vimeo’);
}}
/>
<Text style={{ textAlign: ‘center’ }}>Vimeo</Text>
</View>
<View style={{ flexDirection: ‘column’ }}>
<SocialIcon
type=“wordpress”
onPress={() => {
alert(‘wordpress’);
}}
/>
<Text>wordpress</Text>
</View>
</View>
<View style={{ flex: 1, flexDirection: ‘row’ }}>
<View style={{ flexDirection: ‘column’, justifyContent: ‘center’, alignItems: ‘center’ }}>
<SocialIcon
type=“stack-overflow”
onPress={() => {
alert(‘stack-overflow’);
}}
/>
<Text style={{ textAlign: ‘center’ }}> StackOverflow </Text>
</View>
<View style={{ flexDirection: ‘column’, justifyContent: ‘center’, alignItems: ‘center’ }}>
<SocialIcon
type=“google-plus-official”
onPress={() => {
alert(‘google-plus-official’);
}}
/>
<Text style={{ textAlign: ‘center’ }}> Google Plus </Text>
</View>
</View>
|
Screenshots of Round Social icons:
9. Creating again multiple type of Social Buttons.
- title : Used to set the title text of button.
- button : To make the social button.
- type : To set the Icon Name.
- onPress : Used to set the onPress on Click event on social 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
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
|
<View style={{ width: ‘100%’}}>
<SocialIcon
title=“Sign In Codepen”
button
type=“codepen”
onPress={() => {
alert(‘Codepen’);
}}
/>
</View>
<View style={{ width: ‘100%’ }}>
<SocialIcon
title=“Sign In Envelope”
button
type=“envelope”
onPress={() => {
alert(‘Envelope’);
}}
/>
</View>
<View style={{ width: ‘100%’}}>
<SocialIcon
button
title=“Sign In Facebook”
type=“facebook”
onPress={() => {
alert(‘facebook’);
}}
/>
</View>
<View style={{ width: ‘100%’ }}>
<SocialIcon
title=“Sign In Github Alt”
alt
button
type=“github-alt”
onPress={() => {
alert(‘github-alt’);
}}
/>
</View>
<View style={{ width: ‘100%’ }}>
<SocialIcon
title=“Sign In GitHub”
button
type=“github”
onPress={() => {
alert(‘github’);
}}
/>
</View>
<View style={{ width: ‘100%’}}>
<SocialIcon
title=“Sign In Gitlab”
button
type=“gitlab”
onPress={() => {
alert(‘gitlab’);
}}
/>
</View>
<View style={{ width: ‘100%’}}>
<SocialIcon
title=“Sign In Instagram”
button
type=“instagram”
onPress={() => {
alert(‘instagram’);
}}
/>
</View>
<View style={{ width: ‘100%’ }}>
<SocialIcon
title=“Sign In Linkedin”
button
type=“linkedin”
onPress={() => {
alert(‘linkedin’);
}}
/>
</View>
<View style={{ width: ‘100%’ }}>
<SocialIcon
title=“Sign In Medium”
button
type=“medium”
onPress={() => {
alert(‘medium’);
}}
/>
</View>
<View style={{ width: ‘100%’ }}>
<SocialIcon
title=“Sign In Pinterest”
button
type=“pinterest”
onPress={() => {
alert(‘pinterest’);
}}
/>
</View>
<View style={{ width: ‘100%’}}>
<SocialIcon
title=“Sign In Quora”
button
type=“quora”
onPress={() => {
alert(‘quora’);
}}
/>
</View>
<View style={{ width: ‘100%’}}>
<SocialIcon
title=“Sign In Reddit-Alien”
button
type=“reddit-alien”
onPress={() => {
alert(‘reddit’);
}}
/>
</View>
<View style={{ width: ‘100%’ }}>
<SocialIcon
title=“Sign In Youtube”
button
type=“youtube”
onPress={() => {
alert(‘youtube’);
}}
/>
</View>
<View style={{ width: ‘100%’, }}>
<SocialIcon
title=“Sign In Tumblr”
button
type=“tumblr”
onPress={() => {
alert(‘tumblr’);
}}
/>
</View>
<View style={{ width: ‘100%’}}>
<SocialIcon
title=“Sign In Twitter”
button
type=“twitter”
onPress={() => {
alert(‘twitter’);
}}
/>
</View>
<View style={{ width: ‘100%’}}>
<SocialIcon
title=“Sign In Google Plus”
button
type=“google-plus-official”
onPress={() => {
alert(‘google’);
}}
/>
</View>
<View style={{ width: ‘100%’}}>
<SocialIcon
title=“Sign In Vimeo”
button
type=“vimeo”
onPress={() => {
alert(‘vimeo’);
}}
/>
</View>
<View style={{ width: ‘100%’ }}>
<SocialIcon
title=“Sign In WordPress”
button
type=“wordpress”
onPress={() => {
alert(‘wordpress’);
}}
/>
</View>
|
Screenshots:
10. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
const styles = StyleSheet.create({
MainContainer: {
justifyContent: ‘center’,
alignItems : ‘center’,
padding: 12,
},
row: {
flex: 1,
flexDirection: ‘column’,
justifyContent: ‘space-between’,
flexWrap: ‘wrap’,
alignItems: ‘stretch’
}
});
|
11. 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
|
import React, {Component} from ‘react’;
import { StyleSheet, View, Text, ScrollView } from ‘react-native’;
import { SocialIcon } from ‘react-native-elements’;
export default class App extends Component {
render() {
return (
<ScrollView>
<View style={styles.MainContainer}>
<Text style={{ fontSize: 20, marginBottom: 20, textAlign: ‘center’ }}>
Beautiful Social Icons and Social Buttons from React Native Elements
</Text>
<View style={{ flex: 1, flexDirection: ‘row’ }}>
<View style={{ flexDirection: ‘column’ }}>
<SocialIcon
type=“facebook”
onPress={() => {
alert(‘facebook’);
}}
/>
<Text style={{ textAlign: ‘center’ }}>Facebook</Text>
</View>
<View style={{ flexDirection: ‘column’ }}>
<SocialIcon
type=“github”
onPress={() => {
alert(‘github’);
}}
/>
<Text style={{ textAlign: ‘center’ }}>GitHub</Text>
</View>
<View style={{ flexDirection: ‘column’ }}>
<SocialIcon
type=“gitlab”
onPress={() => {
alert(‘gitlab’);
}}
/>
<Text style={{ textAlign: ‘center’ }}>Gitlab</Text>
</View>
<View style={{ flexDirection: ‘column’ }}>
<SocialIcon
type=“github-alt”
onPress={() => {
alert(‘github’);
}}
/>
<Text style={{ textAlign: ‘center’ }}>GitHub–alt</Text>
</View>
</View>
<View style={{ flex: 1, flexDirection: ‘row’ }}>
<View style={{ flexDirection: ‘column’ }}>
<SocialIcon
type=“instagram”
onPress={() => {
alert(‘instagram’);
}}
/>
<Text style={{ textAlign: ‘center’ }}>Instagram</Text>
</View>
<View style={{ flexDirection: ‘column’ }}>
<SocialIcon
type=“linkedin”
onPress={() => {
alert(‘linkedin’);
}}
/>
<Text style={{ textAlign: ‘center’ }}>Linkedin</Text>
</View>
<View style={{ flexDirection: ‘column’ }}>
<SocialIcon
type=“pinterest”
onPress={() => {
alert(‘pinterest’);
}}
/>
<Text style={{ textAlign: ‘center’ }}>Pinterest</Text>
</View>
<View style={{ flexDirection: ‘column’ }}>
<SocialIcon
type=“reddit-alien”
onPress={() => {
alert(‘reddit’);
}}
/>
<Text style={{ textAlign: ‘center’ }}>Reddit–Alien</Text>
</View>
<View style={{ flexDirection: ‘column’ }}>
<SocialIcon
type=“youtube”
onPress={() => {
alert(‘youtube’);
}}
/>
<Text style={{ textAlign: ‘center’ }}>Youtube</Text>
</View>
</View>
<View style={{ flex: 1, flexDirection: ‘row’ }}>
<View style={{ flexDirection: ‘column’ }}>
<SocialIcon
type=“twitter”
onPress={() => {
alert(‘twitter’);
}}
/>
<Text style={{ textAlign: ‘center’ }}>Twitter</Text>
</View>
<View style={{ flexDirection: ‘column’ }}>
<SocialIcon
type=“vimeo”
onPress={() => {
alert(‘vimeo’);
}}
/>
<Text style={{ textAlign: ‘center’ }}>Vimeo</Text>
</View>
<View style={{ flexDirection: ‘column’ }}>
<SocialIcon
type=“wordpress”
onPress={() => {
alert(‘wordpress’);
}}
/>
<Text>wordpress</Text>
</View>
</View>
<View style={{ flex: 1, flexDirection: ‘row’ }}>
<View style={{ flexDirection: ‘column’, justifyContent: ‘center’, alignItems: ‘center’ }}>
<SocialIcon
type=“stack-overflow”
onPress={() => {
alert(‘stack-overflow’);
}}
/>
<Text style={{ textAlign: ‘center’ }}> StackOverflow </Text>
</View>
<View style={{ flexDirection: ‘column’, justifyContent: ‘center’, alignItems: ‘center’ }}>
<SocialIcon
type=“google-plus-official”
onPress={() => {
alert(‘google-plus-official’);
}}
/>
<Text style={{ textAlign: ‘center’ }}> Google Plus </Text>
</View>
</View>
<View style={{ width: ‘100%’}}>
<SocialIcon
title=“Sign In Codepen”
button
type=“codepen”
onPress={() => {
alert(‘Codepen’);
}}
/>
</View>
<View style={{ width: ‘100%’ }}>
<SocialIcon
title=“Sign In Envelope”
button
type=“envelope”
onPress={() => {
alert(‘Envelope’);
}}
/>
</View>
<View style={{ width: ‘100%’}}>
<SocialIcon
button
title=“Sign In Facebook”
type=“facebook”
onPress={() => {
alert(‘facebook’);
}}
/>
</View>
<View style={{ width: ‘100%’ }}>
<SocialIcon
title=“Sign In Github Alt”
alt
button
type=“github-alt”
onPress={() => {
alert(‘github-alt’);
}}
/>
</View>
<View style={{ width: ‘100%’ }}>
<SocialIcon
title=“Sign In GitHub”
button
type=“github”
onPress={() => {
alert(‘github’);
}}
/>
</View>
<View style={{ width: ‘100%’}}>
<SocialIcon
title=“Sign In Gitlab”
button
type=“gitlab”
onPress={() => {
alert(‘gitlab’);
}}
/>
</View>
<View style={{ width: ‘100%’}}>
<SocialIcon
title=“Sign In Instagram”
button
type=“instagram”
onPress={() => {
alert(‘instagram’);
}}
/>
</View>
<View style={{ width: ‘100%’ }}>
<SocialIcon
title=“Sign In Linkedin”
button
type=“linkedin”
onPress={() => {
alert(‘linkedin’);
}}
/>
</View>
<View style={{ width: ‘100%’ }}>
<SocialIcon
title=“Sign In Medium”
button
type=“medium”
onPress={() => {
alert(‘medium’);
}}
/>
</View>
<View style={{ width: ‘100%’ }}>
<SocialIcon
title=“Sign In Pinterest”
button
type=“pinterest”
onPress={() => {
alert(‘pinterest’);
}}
/>
</View>
<View style={{ width: ‘100%’}}>
<SocialIcon
title=“Sign In Quora”
button
type=“quora”
onPress={() => {
alert(‘quora’);
}}
/>
</View>
<View style={{ width: ‘100%’}}>
<SocialIcon
title=“Sign In Reddit-Alien”
button
type=“reddit-alien”
onPress={() => {
alert(‘reddit’);
}}
/>
</View>
<View style={{ width: ‘100%’ }}>
<SocialIcon
title=“Sign In Youtube”
button
type=“youtube”
onPress={() => {
alert(‘youtube’);
}}
/>
</View>
<View style={{ width: ‘100%’, }}>
<SocialIcon
title=“Sign In Tumblr”
button
type=“tumblr”
onPress={() => {
alert(‘tumblr’);
}}
/>
</View>
<View style={{ width: ‘100%’}}>
<SocialIcon
title=“Sign In Twitter”
button
type=“twitter”
onPress={() => {
alert(‘twitter’);
}}
/>
</View>
<View style={{ width: ‘100%’}}>
<SocialIcon
title=“Sign In Google Plus”
button
type=“google-plus-official”
onPress={() => {
alert(‘google’);
}}
/>
</View>
<View style={{ width: ‘100%’}}>
<SocialIcon
title=“Sign In Vimeo”
button
type=“vimeo”
onPress={() => {
alert(‘vimeo’);
}}
/>
</View>
<View style={{ width: ‘100%’ }}>
<SocialIcon
title=“Sign In WordPress”
button
type=“wordpress”
onPress={() => {
alert(‘wordpress’);
}}
/>
</View>
</View>
</ScrollView>
);
}
};
const styles = StyleSheet.create({
MainContainer: {
justifyContent: ‘center’,
alignItems : ‘center’,
padding: 12,
},
row: {
flex: 1,
flexDirection: ‘column’,
justifyContent: ‘space-between’,
flexWrap: ‘wrap’,
alignItems: ‘stretch’
}
});
|
Screenshots:
Also Read :
React Native Calculate Square Cube and Square Root Cube Root
React Native Create Custom Rectangle Square Shape View Dynamically
React Native User Registration using PHP MySQL Database PART-1 – Creating PHP API
React Native Create Custom JSON ListView with Multiple Items Tutorial
Create Simple Splash Screen in React Native Android iOS App Tutorial
