How to Create Social Icons in React Native ?

import React from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

const SocialIcon = ({ name, onPress }) => {
    return (
        <TouchableOpacity onPress={onPress} 
                          style={styles.iconContainer}>
            <Icon name={name} 
                  size={30} 
                  color="#ffffff" />
        </TouchableOpacity>
    );
};

const SocialIconsScreen = () => {
    const socialIcons = [
        { name: 'facebook', onPress: () => alert('Facebook icon pressed') },
        { name: 'twitter', onPress: () => alert('Twitter icon pressed') },
        { name: 'youtube', onPress: () => alert('YouTube icon pressed') },
        { name: 'instagram', onPress: () => alert('Instagram icon pressed') },
        { name: 'linkedin', onPress: () => alert('LinkedIn icon pressed') },
        { name: 'github', onPress: () => alert('GitHub icon pressed') },
        { name: 'pinterest', onPress: () => alert('Pinterest icon pressed') },
        // Add more social icons here
    ];

    return (
        <View style={styles.container}>
            <View style={styles.socialIconsContainer}>
                {socialIcons.map((icon, index) => (
                    <SocialIcon key={index} 
                                name={icon.name} 
                                onPress={icon.onPress} />
                ))}
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f5f5f5',
    },
    socialIconsContainer: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: 40,
        backgroundColor: '#3b5998',
        padding: 20,
        borderRadius: 10,
        shadowColor: 'black',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.50,
        shadowRadius: 3.85,
        elevation: 18,
    },
    iconContainer: {
        marginHorizontal: 15,
        padding: 20,
    },
});

export default SocialIconsScreen;