UNPKG

3.7 kBTypeScriptView Raw
1import * as React from 'react';
2import {
3 TextStyle,
4 ViewStyle,
5 TextProps,
6 TouchableHighlightProps,
7 TouchableNativeFeedbackProps,
8 TabBarIOSItemProps,
9 ToolbarAndroidProps as ReactNativeToolbarAndroidProps,
10 ColorValue
11} from 'react-native';
12
13export interface IconProps extends TextProps {
14 /**
15 * Size of the icon, can also be passed as fontSize in the style object.
16 *
17 * @default 12
18 */
19 size?: number | undefined;
20
21 /**
22 * Name of the icon to show
23 *
24 * See Icon Explorer app
25 * {@link https://github.com/oblador/react-native-vector-icons/tree/master/Examples/IconExplorer}
26 */
27 name: string;
28
29 /**
30 * Color of the icon
31 *
32 */
33 color?: ColorValue | number | undefined;
34}
35
36export interface IconButtonProps extends IconProps, TouchableHighlightProps, TouchableNativeFeedbackProps {
37 /**
38 * Text and icon color
39 * Use iconStyle or nest a Text component if you need different colors.
40 *
41 * @default 'white'
42 */
43 color?: ColorValue | number | undefined;
44
45 /**
46 * Border radius of the button
47 * Set to 0 to disable.
48 *
49 * @default 5
50 */
51 borderRadius?: number | undefined;
52
53 /**
54 * Styles applied to the icon only
55 * Good for setting margins or a different color.
56 *
57 * @default {marginRight: 10}
58 */
59 iconStyle?: TextStyle | undefined;
60
61 /**
62 * Style prop inherited from TextProps and TouchableWithoutFeedbackProperties
63 * Only exist here so we can have ViewStyle or TextStyle
64 *
65 */
66 style?: ViewStyle | TextStyle | undefined;
67
68 /**
69 * Background color of the button
70 *
71 * @default '#007AFF'
72 */
73 backgroundColor?: ColorValue | number | undefined;
74}
75
76export type ImageSource = any;
77
78export interface ToolbarAndroidProps extends ReactNativeToolbarAndroidProps {
79 /**
80 * Name of the navigation logo icon
81 * (similar to ToolbarAndroid logo)
82 *
83 */
84 logoName: string;
85
86 /**
87 * Name of the navigation icon
88 * (similar to ToolbarAndroid navIcon)
89 *
90 */
91 navIconName: string;
92
93 /**
94 * Name of the overflow icon
95 * (similar to ToolbarAndroid overflowIcon)
96 *
97 */
98 overflowIconName: string;
99
100 /**
101 * Size of the icons
102 *
103 * @default 24
104 */
105 iconSize: number;
106
107 /**
108 * Color of the icons
109 *
110 * @default 'black'
111 */
112 iconColor: ColorValue | number;
113}
114
115export interface TabBarItemIOSProps extends TabBarIOSItemProps {
116 /**
117 * Name of the default icon (similar to TabBarIOS.Item icon)
118 *
119 */
120 iconName: string;
121
122 /**
123 * Name of the selected icon (similar to TabBarIOS.Item selectedIcon)
124 *
125 * Defaults to iconName
126 *
127 */
128 selectedIconName?: string | undefined;
129
130 /**
131 * Size of the icon
132 *
133 * @default 30
134 */
135 iconSize?: number | undefined;
136
137 /**
138 * Color of the icon
139 *
140 */
141 iconColor?: ColorValue | number | undefined;
142
143 /**
144 * Color of the selected icon.
145 *
146 * Defaults to iconColor
147 *
148 */
149 selectedIconColor?: string | undefined;
150}
151
152export class Icon extends React.Component<IconProps, any> {
153 static getImageSource(
154 name: string,
155 size?: number,
156 color?: ColorValue | number,
157 ): Promise<ImageSource>;
158 static getImageSourceSync(
159 name: string,
160 size?: number,
161 color?: ColorValue | number,
162 ): ImageSource;
163 static getRawGlyphMap(): { [name: string]: number };
164 static loadFont(
165 file?: string
166 ): Promise<void>;
167 static hasIcon(
168 name: string,
169 ): boolean;
170}
171
172export namespace Icon {
173 class ToolbarAndroid extends React.Component<ToolbarAndroidProps, any> {}
174 class TabBarItem extends React.Component<TabBarItemIOSProps, any> {}
175 class TabBarItemIOS extends React.Component<TabBarItemIOSProps, any> {}
176 class Button extends React.Component<IconButtonProps, any> {}
177}