How to use Social Icons in React Native?

Hi Guys,

I will show you how to use social icons in react native. if you have question about how to create social icons in react native then I will give a simple example with a solution. This tutorial will give you a simple example of how to implement social icons in react native. This post will give you a simple example of how to add social icons in react native. you will do the following things for react native social icons example.

Let's start following example:

In the first step run the following command to create a project.

expo init ExampleApp

In this step, you can install react-native-elements:

npm install react-native-elements

In this step, You will open the App.js file and put the code.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { SocialIcon } from 'react-native-elements';

const App = () => {
    return (
        <View style={styles.container}>
            <View style={styles.iconContainer}>
                <View>
                    <SocialIcon type="facebook" />
                    <Text style={styles.iconTitle}>facebook</Text>
                </View>
                <View>
                    <SocialIcon type="github-alt" />
                    <Text style={styles.iconTitle}>
                        github-alt
                    </Text>
                </View>
                <View>
                    <SocialIcon type="github" />
                    <Text style={styles.iconTitle}>github</Text>
                </View>
                <View>
                    <SocialIcon type="gitlab" />
                    <Text style={styles.iconTitle}>gitlab</Text>
                </View>
                <View>
                    <SocialIcon type="linkedin" />
                    <Text style={styles.iconTitle}>linkedin</Text>
                </View>
            </View>
            <View style={styles.iconContainer}>
                <View>
                    <SocialIcon type="instagram" />
                    <Text style={styles.iconTitle}>
                        instagram
                    </Text>
                </View>
                <View>
                    <SocialIcon type="youtube" />
                    <Text style={styles.iconTitle}>youtube</Text>
                </View>
                <View>
                    <SocialIcon type="twitter" />
                    <Text style={styles.iconTitle}>twitter</Text>
                </View>
                <View>
                    <SocialIcon type="pinterest" />
                    <Text style={styles.iconTitle}>
                        pinterest
                    </Text>
                </View>
                <View>
                    <SocialIcon type="medium" />
                    <Text style={styles.iconTitle}>medium</Text>
                </View>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        padding: 16,
    },
    iconTitle: {
        textAlign: 'center',
    },
    iconContainer: {
        flexDirection: 'row',
    },
});

export default App;

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

It will help you...