04-Apr-2023
.
Admin
Hi Guys,
In this blog, I will explain you how to use social icon in react native. You can easily use social icon in react native. First i will create import namespace SocialIcon from react-native-elements, after I will using social icon using for social icon tagadd in react native example.
Here, I will give you full example for simply display social icon using react native as bellow.
Step 1 - Create project
In the first step Run the following command for create project.
expo init SocialIcon
Step 2 - Installation of Dependency
In the step, Run the following command for installation of dependency.
To use social icon you need to npm install react-native-elements --save.
To install this open the terminal and jump into your project
cd SocialIcon
Run the following command
npm install react-native-elements --save
In this step, You will open App.js file and put the code.
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.container}>
<Text style={{ fontSize: 20, marginBottom: 20, textAlign: 'center' }}>
Social Icons
</Text>
<View
style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
}}>
<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="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="twitter"
onPress={() => {
alert('twitter');
}}
/>
<Text style={{ textAlign: 'center' }}>twitter</Text>
</View>
</View>
</View>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 250,
justifyContent: 'center',
alignItems: 'center',
},
});
Step 4 - Run project
In the last step run your project using bellow command.
npm start
Output
It will help you...
#React Native