-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.tsx
More file actions
62 lines (57 loc) · 1.47 KB
/
index.tsx
File metadata and controls
62 lines (57 loc) · 1.47 KB
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
import React, { memo } from 'react'
import { Platform, StyleProp, ViewStyle, View, StyleSheet, TouchableOpacity } from 'react-native'
import Emoji from 'react-native-emoji'
import { useTheme } from '@react-navigation/native'
import { black, white, primary, secondary } from '../../constants'
const circle = {
width: 35,
height: 35,
borderRadius: 35 / 2
}
const styles = StyleSheet.create({
container: {
alignSelf: 'center'
},
blue: {
...circle,
height: 36,
width: 36
},
pink: {
...circle,
top: 1,
height: 36.4
},
iconBg: {
...circle,
justifyContent: 'center',
alignItems: 'center'
},
emoji: {
left: Platform.OS === 'ios' ? 3 : 0,
fontSize: Platform.OS === 'ios' ? 20 : 16
}
})
interface ButtonIconCircleT {
uri?: string
name: string
onPress?: () => void
viewStyle?: StyleProp<ViewStyle>
}
const ButtonIconCircle = memo<ButtonIconCircleT>(({ name, onPress, viewStyle }) => {
const { container, pink, blue, iconBg, emoji } = styles
const { dark } = useTheme()
const backgroundColor = dark ? black : white
return (
<TouchableOpacity onPress={onPress} style={[container, viewStyle]}>
<View style={[blue, { backgroundColor: primary }]}>
<View style={[pink, { backgroundColor: secondary }]}>
<View style={[iconBg, { backgroundColor }]}>
<Emoji name={name} style={emoji} />
</View>
</View>
</View>
</TouchableOpacity>
)
})
export { ButtonIconCircle }