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'
) },
];
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;