1 | import React from 'react';
|
2 | import { Text } from 'react-native';
|
3 | import * as Font from 'expo-font';
|
4 | import createIconSet from './vendor/react-native-vector-icons/lib/create-icon-set';
|
5 | import createIconButtonComponent from './vendor/react-native-vector-icons/lib/icon-button';
|
6 |
|
7 | export { DEFAULT_ICON_COLOR, DEFAULT_ICON_SIZE } from './vendor/react-native-vector-icons/lib/create-icon-set';
|
8 |
|
9 | export default function(glyphMap, fontName, expoAssetId, fontStyle?: any) {
|
10 | const font = { [fontName]: expoAssetId };
|
11 | const RNVIconComponent = createIconSet(glyphMap, fontName, null, fontStyle);
|
12 |
|
13 | return class Icon extends React.Component {
|
14 | static propTypes = RNVIconComponent.propTypes;
|
15 | static defaultProps = RNVIconComponent.defaultProps;
|
16 | static Button = createIconButtonComponent(Icon);
|
17 | static glyphMap = glyphMap;
|
18 | static getRawGlyphMap = () => glyphMap;
|
19 | static getFontFamily = () => fontName;
|
20 | static loadFont = () => Font.loadAsync(font);
|
21 | static font = font;
|
22 |
|
23 | _mounted = false;
|
24 | _icon?: any;
|
25 |
|
26 | state = {
|
27 | fontIsLoaded: Font.isLoaded(fontName),
|
28 | };
|
29 |
|
30 | async componentWillMount() {
|
31 | this._mounted = true;
|
32 | if (!this.state.fontIsLoaded) {
|
33 | await Font.loadAsync(font);
|
34 | this._mounted && this.setState({ fontIsLoaded: true });
|
35 | }
|
36 | }
|
37 |
|
38 | componentWillUnmount() {
|
39 | this._mounted = false;
|
40 | }
|
41 |
|
42 | setNativeProps(props) {
|
43 | if (this._icon) {
|
44 | this._icon.setNativeProps(props);
|
45 | }
|
46 | }
|
47 |
|
48 | render() {
|
49 | if (!this.state.fontIsLoaded) {
|
50 | return <Text />;
|
51 | }
|
52 |
|
53 | return (
|
54 | <RNVIconComponent
|
55 | ref={view => {
|
56 | this._icon = view;
|
57 | }}
|
58 | {...this.props}
|
59 | />
|
60 | );
|
61 | }
|
62 | };
|
63 | }
|