/src/components/icon.js

 1import React from 'react'
 2import { TouchableWithoutFeedback, View } from 'react-native'
 3import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
 4import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 5
 6export class BasicIcon extends React.Component {
 7    render() {
 8        const { name, comName, size, color, backgroundColor, style } = this.props
 9
10        let icon
11        if (comName) {
12            icon = <MaterialCommunityIcon name={comName} size={size} color={color} style={style} />
13        } else {
14            icon = <MaterialIcon name={name} size={size} color={color} style={style} />
15        }
16
17        return (icon)
18    }
19}
20
21export default class SIcon extends React.Component {
22    render() {
23        let { onPress, name, comName, size, color, backgroundColor, style } = this.props
24
25        let icon
26        if (comName) {
27            icon = <MaterialCommunityIcon name={comName} size={size} color={color} style={style} />
28        } else {
29            icon = <MaterialIcon name={name} size={size} color={color} style={style} />
30        }
31
32        let content = icon
33        if (backgroundColor) {
34            const backgroundSize = size + 20
35            content =
36                <View style={{
37                    backgroundColor: backgroundColor,
38                    borderRadius: backgroundSize,
39                    alignItems: 'center',
40                    justifyContent: 'center',
41                    width: backgroundSize,
42                    height: backgroundSize}}>
43                    {icon}
44                </View>
45        }
46
47        return (
48            <TouchableWithoutFeedback onPress={onPress}>
49                {content}
50            </TouchableWithoutFeedback>
51        )
52    }
53}