diff --git a/types/react-native-vector-icons/Entypo.d.ts b/types/react-native-vector-icons/Entypo.d.ts new file mode 100644 index 0000000000..b4e8bbc633 --- /dev/null +++ b/types/react-native-vector-icons/Entypo.d.ts @@ -0,0 +1,2 @@ +import { Icon } from './Icon'; +export default Icon; diff --git a/types/react-native-vector-icons/EvilIcons.d.ts b/types/react-native-vector-icons/EvilIcons.d.ts new file mode 100644 index 0000000000..b4e8bbc633 --- /dev/null +++ b/types/react-native-vector-icons/EvilIcons.d.ts @@ -0,0 +1,2 @@ +import { Icon } from './Icon'; +export default Icon; diff --git a/types/react-native-vector-icons/FontAwesome.d.ts b/types/react-native-vector-icons/FontAwesome.d.ts new file mode 100644 index 0000000000..b4e8bbc633 --- /dev/null +++ b/types/react-native-vector-icons/FontAwesome.d.ts @@ -0,0 +1,2 @@ +import { Icon } from './Icon'; +export default Icon; diff --git a/types/react-native-vector-icons/Foundation.d.ts b/types/react-native-vector-icons/Foundation.d.ts new file mode 100644 index 0000000000..b4e8bbc633 --- /dev/null +++ b/types/react-native-vector-icons/Foundation.d.ts @@ -0,0 +1,2 @@ +import { Icon } from './Icon'; +export default Icon; diff --git a/types/react-native-vector-icons/Icon.d.ts b/types/react-native-vector-icons/Icon.d.ts new file mode 100644 index 0000000000..3ae4916eea --- /dev/null +++ b/types/react-native-vector-icons/Icon.d.ts @@ -0,0 +1,197 @@ +import * as React from 'react'; +import { + TextStyle, + ViewStyle, + TextProperties, + TouchableHighlightProperties, + TouchableNativeFeedbackProperties, + TabBarIOSProperties, + ToolbarAndroidProperties +} from 'react-native'; + +export interface IconProps extends TextProperties { + /** + * Size of the icon, can also be passed as fontSize in the style object. + * + * @default 12 + * @type {string} + * @memberof IconProps + */ + size?: number; + + /** + * Name of the icon to show + * + * See Icon Explorer app + * {@link https://github.com/oblador/react-native-vector-icons/tree/master/Examples/IconExplorer} + * @type {string} + * @memberof IconProps + */ + name: string; + + /** + * Color of the icon + * + * @type {string} + * @memberof IconProps + */ + color?: string; +} + +export interface IconButtonProps extends IconProps, TouchableHighlightProperties, TouchableNativeFeedbackProperties { + /** + * Text and icon color + * Use iconStyle or nest a Text component if you need different colors. + * + * @default 'white' + * @type {string} + * @memberof IconButtonProps + */ + color?: string; + + /** + * Border radius of the button + * Set to 0 to disable. + * + * @default 5 + * @type {number} + * @memberof IconButtonProps + */ + borderRadius?: number; + + /** + * Styles applied to the icon only + * Good for setting margins or a different color. + * + * @default {marginRight: 10} + * @type {ViewStyle} + * @memberof IconButtonProps + */ + iconStyle?: ViewStyle; + + /** + * Style prop inherited from TextProperties and TouchableWithoutFeedbackProperties + * Only exist here so we can have ViewStyle or TextStyle + * + * @type {(ViewStyle | TextStyle)} + * @memberof IconButtonProps + */ + style?: ViewStyle | TextStyle; + + /** + * Background color of the button + * + * @default '#007AFF' + * @type {string} + * @memberof IconButtonProps + */ + backgroundColor?: string; +} + +export type ImageSource = any; + +export interface TabBarIOSProps extends TabBarIOSProperties { + /** + * Name of the default icon (similar to TabBarIOS.Item icon) + * + * @type {string} + * @memberof TabBarIOSProps + */ + iconName: string; + + /** + * Name of the selected icon (similar to TabBarIOS.Item selectedIcon). + * + * @default iconName + * @type {string} + * @memberof TabBarIOSProps + */ + selectedIconName: string; + + /** + * Size of the icon. + * + * @default 30 + * @type {number} + * @memberof TabBarIOSProps + */ + iconSize: number; + + /** + * Color of the icon + * + * @type {string} + * @memberof TabBarIOSProps + */ + iconColor: string; + + /** + * Color of the selected icon. + * + * @default iconColor + * @type {string} + * @memberof TabBarIOSProps + */ + selectedIconColor: string; +} + +export interface ToolbarAndroidProps extends ToolbarAndroidProperties { + /** + * Name of the navigation logo icon + * (similar to ToolbarAndroid logo) + * + * @type {string} + * @memberof ToolbarAndroidProps + */ + logoName: string; + + /** + * Name of the navigation icon + * (similar to ToolbarAndroid navIcon) + * + * @type {string} + * @memberof ToolbarAndroidProps + */ + navIconName: string; + + /** + * Name of the overflow icon + * (similar to ToolbarAndroid overflowIcon) + * + * @type {string} + * @memberof ToolbarAndroidProps + */ + overflowIconName: string; + + /** + * Size of the icons + * + * @default 24 + * @type {number} + * @memberof ToolbarAndroidProps + */ + iconSize: number; + + /** + * Color of the icons + * + * @default 'black' + * @type {string} + * @memberof ToolbarAndroidProps + */ + iconColor: string; +} + +export class Icon extends React.Component { + static getImageSource( + name: string, + color: string, + size?: number + ): Promise; +} + +export namespace Icon { + class ToolbarAndroid extends React.Component {} + class TabBarIOS extends React.Component {} + class Button extends React.Component {} +} diff --git a/types/react-native-vector-icons/Ionicons.d.ts b/types/react-native-vector-icons/Ionicons.d.ts new file mode 100644 index 0000000000..b4e8bbc633 --- /dev/null +++ b/types/react-native-vector-icons/Ionicons.d.ts @@ -0,0 +1,2 @@ +import { Icon } from './Icon'; +export default Icon; diff --git a/types/react-native-vector-icons/MaterialCommunityIcons.d.ts b/types/react-native-vector-icons/MaterialCommunityIcons.d.ts new file mode 100644 index 0000000000..b4e8bbc633 --- /dev/null +++ b/types/react-native-vector-icons/MaterialCommunityIcons.d.ts @@ -0,0 +1,2 @@ +import { Icon } from './Icon'; +export default Icon; diff --git a/types/react-native-vector-icons/MaterialIcons.d.ts b/types/react-native-vector-icons/MaterialIcons.d.ts new file mode 100644 index 0000000000..b4e8bbc633 --- /dev/null +++ b/types/react-native-vector-icons/MaterialIcons.d.ts @@ -0,0 +1,2 @@ +import { Icon } from './Icon'; +export default Icon; diff --git a/types/react-native-vector-icons/Octicons.d.ts b/types/react-native-vector-icons/Octicons.d.ts new file mode 100644 index 0000000000..b4e8bbc633 --- /dev/null +++ b/types/react-native-vector-icons/Octicons.d.ts @@ -0,0 +1,2 @@ +import { Icon } from './Icon'; +export default Icon; diff --git a/types/react-native-vector-icons/SimpleLineIcons.d.ts b/types/react-native-vector-icons/SimpleLineIcons.d.ts new file mode 100644 index 0000000000..b4e8bbc633 --- /dev/null +++ b/types/react-native-vector-icons/SimpleLineIcons.d.ts @@ -0,0 +1,2 @@ +import { Icon } from './Icon'; +export default Icon; diff --git a/types/react-native-vector-icons/Zocial.d.ts b/types/react-native-vector-icons/Zocial.d.ts new file mode 100644 index 0000000000..b4e8bbc633 --- /dev/null +++ b/types/react-native-vector-icons/Zocial.d.ts @@ -0,0 +1,2 @@ +import { Icon } from './Icon'; +export default Icon; diff --git a/types/react-native-vector-icons/index.d.ts b/types/react-native-vector-icons/index.d.ts new file mode 100644 index 0000000000..d46847b1ae --- /dev/null +++ b/types/react-native-vector-icons/index.d.ts @@ -0,0 +1,61 @@ +// Type definitions for react-native-vector-icons 4.2 +// Project: https://github.com/oblador/react-native-vector-icons +// Definitions by: Kyle Roach +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.3 + +import * as React from 'react'; +import { Icon } from './Icon'; +import { TextProperties } from 'react-native'; + +/** + * Returns your own custom font based on the glyphMap where the key is the icon name + * and the value is either a UTF-8 character or it's character code. fontFamily is the name + * of the font NOT the filename. Open the font in Font Book.app or similar to learn the name. + * Optionally pass the third fontFile argument for android support, it should be a path + * to the font file in you asset folder. + * + * @param glyphMap + * @param fontFamily + * @param fontFile + */ +export function createIconSet( + glyphMap: {}, + fontFamily: string, + fontFile?: string +): Icon; + +/** + * Convenience method to create a custom font based on a fontello config file. + * Don't forget to import the font as described above and drop the config.json + * somewhere convenient in your project. + * + * Example usage + * import { createIconSetFromFontello } from 'react-native-vector-icons'; + * import fontelloConfig from './config.json'; + * const Icon = createIconSetFromFontello(fontelloConfig); + * + * @see http://fontello.com + * @export + * @param {{}} config + * @returns {Icon} + */ +export function createIconSetFromFontello(config: {}): Icon; + +/** + * Convenience method to create a custom font from IcoMoon + * Make sure you're using the Download option in IcoMoon, and use the .json file that's + * included in the .zip you've downloaded. You'll also need to import the .ttf font + * file into your project + * + * Example usage + * import { createIconSetFromIcoMoon } from 'react-native-vector-icons'; + * import icoMoonConfig from './config.json'; + * const Icon = createIconSetFromIcoMoon(icoMoonConfig); + * + * @see https://icomoon.io/app + * @export + * @param {{}} config + * @returns {Icon} + */ +export function createIconSetFromIcoMoon(config: {}): Icon; diff --git a/types/react-native-vector-icons/react-native-vector-icons-tests.tsx b/types/react-native-vector-icons/react-native-vector-icons-tests.tsx new file mode 100644 index 0000000000..270c8fbdc4 --- /dev/null +++ b/types/react-native-vector-icons/react-native-vector-icons-tests.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +import { View, Text } from 'react-native'; +import MaterialIcon from 'react-native-vector-icons/MaterialIcons'; +import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; + +class Example extends React.Component<{}, {}> { + handleButton() { + console.log('You pressed me'); + } + + render() { + return ( + + {/* Normal Icon */} + + + {/* Icon button */} + this.handleButton()} + > + + Login with Facebook + + + + ); + } +} diff --git a/types/react-native-vector-icons/tsconfig.json b/types/react-native-vector-icons/tsconfig.json new file mode 100644 index 0000000000..746ae7e0ff --- /dev/null +++ b/types/react-native-vector-icons/tsconfig.json @@ -0,0 +1,35 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "dom", + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true, + "jsx": "react" + }, + "files": [ + "index.d.ts", + "Icon.d.ts", + "Entypo.d.ts", + "EvilIcons.d.ts", + "FontAwesome.d.ts", + "Foundation.d.ts", + "Ionicons.d.ts", + "MaterialCommunityIcons.d.ts", + "MaterialIcons.d.ts", + "Octicons.d.ts", + "SimpleLineIcons.d.ts", + "Zocial.d.ts", + "react-native-vector-icons-tests.tsx" + ] +} diff --git a/types/react-native-vector-icons/tslint.json b/types/react-native-vector-icons/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-native-vector-icons/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }