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
|
import React from 'react';
import {
Image,
StyleSheet,
Text,
TouchableOpacity,
TouchableOpacityProps,
} from 'react-native';
import {LinkerType} from 'src/types';
import {SOCIAL_FONT_COLORS} from '../../constants/constants';
import {handlePressForAuthBrowser} from '../../services';
import SocialIcon from '../common/SocialIcon';
interface SocialMediaLinkerProps extends TouchableOpacityProps {
social: LinkerType;
}
const SocialMediaLinker: React.FC<SocialMediaLinkerProps> = ({
social: {label},
}) => {
const [state, setState] = React.useState({
socialLinked: false,
});
const handlePress = async () => {
setState({
...state,
socialLinked: await handlePressForAuthBrowser(label),
});
};
switch (label) {
case 'Instagram':
var font_color = SOCIAL_FONT_COLORS.INSTAGRAM;
break;
case 'Facebook':
var font_color = SOCIAL_FONT_COLORS.FACEBOOK;
break;
case 'Twitter':
var font_color = SOCIAL_FONT_COLORS.TWITTER;
break;
case 'Twitch':
var font_color = SOCIAL_FONT_COLORS.TWITCH;
break;
case 'Pinterest':
var font_color = SOCIAL_FONT_COLORS.PINTEREST;
break;
case 'Whatsapp':
var font_color = SOCIAL_FONT_COLORS.WHATSAPP;
break;
case 'Linkedin':
var font_color = SOCIAL_FONT_COLORS.LINKEDIN;
break;
case 'Snapchat':
var font_color = SOCIAL_FONT_COLORS.SNAPCHAT;
break;
case 'Youtube':
var font_color = SOCIAL_FONT_COLORS.YOUTUBE;
break;
default:
var font_color = '#fff';
}
return (
<TouchableOpacity
activeOpacity={0.7}
onPress={handlePress}
style={styles.container}>
<SocialIcon social={label} style={styles.icon} />
<Text style={[styles.label, {color: font_color}]}>{label}</Text>
{state.socialLinked && (
<Image
source={require('../../assets/images/link-tick.png')}
style={styles.tick}
/>
)}
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
container: {
width: '28%',
height: '100%',
backgroundColor: '#4c409a',
borderRadius: 8,
marginHorizontal: '2%',
marginVertical: '2%',
alignItems: 'center',
},
icon: {
top: '15%',
},
label: {
fontWeight: '500',
top: '25%',
},
tick: {
top: '30%',
},
});
export default SocialMediaLinker;
|
