From 1baed78e7f7a138cc613e3f6258f3334e7edf773 Mon Sep 17 00:00:00 2001 From: Kyle Date: Thu, 12 Oct 2017 12:17:18 -0400 Subject: [PATCH] feat(tooling): Move typescript declarations locally --- default_installation.md | 6 - docs/Installation/default_installation.md | 6 - package.json | 1 + src/index.d.ts | 2248 +++++++++++++++++++++ 4 files changed, 2249 insertions(+), 12 deletions(-) create mode 100644 src/index.d.ts diff --git a/default_installation.md b/default_installation.md index bf22a30453..3bda6dfd05 100644 --- a/default_installation.md +++ b/default_installation.md @@ -21,9 +21,3 @@ yarn add react-native-elements ``` npm i react-native-elements --save ``` - -### Additional Step for Typescript - -``` -yarn add --dev @types/react-native-elements -``` diff --git a/docs/Installation/default_installation.md b/docs/Installation/default_installation.md index bf22a30453..3bda6dfd05 100644 --- a/docs/Installation/default_installation.md +++ b/docs/Installation/default_installation.md @@ -21,9 +21,3 @@ yarn add react-native-elements ``` npm i react-native-elements --save ``` - -### Additional Step for Typescript - -``` -yarn add --dev @types/react-native-elements -``` diff --git a/package.json b/package.json index 16e7ef9585..1796673128 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.17.0", "description": "React Native Elements & UI Toolkit", "main": "src/index.js", + "types": "src/index.d.ts", "repository": { "type": "git", "url": "git+ssh://git@github.com/dabit3/React-Native-Elements.git" diff --git a/src/index.d.ts b/src/index.d.ts new file mode 100644 index 0000000000..d8d6c9d68b --- /dev/null +++ b/src/index.d.ts @@ -0,0 +1,2248 @@ +// Type definitions for react-native-elements 0.16 +// Project: https://github.com/react-native-training/react-native-elements#readme +// Definitions by: Kyle Roach +// Ifiok Jr. +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.3 + +import * as React from 'react'; +import { + ViewStyle, + TextStyle, + Image, + ImageStyle, + ImageURISource, + TouchableWithoutFeedbackProps, + TouchableHighlightProperties, + TouchableOpacityProperties, + ViewProperties, + TextInputProperties, + TextInput, + StatusBarProperties, + KeyboardType, + KeyboardTypeIOS, + StyleProp, + GestureResponderEvent, + Animated, + TransformsStyle +} from 'react-native'; +import TabNavigator from 'react-native-tab-navigator'; + +/** + * Supports auto complete for most used types as well as any other string type. + */ +export type IconType = + | 'material' + | 'material-community' + | 'simple-line-icon' + | 'zocial' + | 'font-awesome' + | 'octicon' + | 'ionicon' + | 'foundation' + | 'evilicon' + | 'entypo' + | string; + +export interface IconObject { + name?: string; + color?: string; + size?: number; + type?: IconType; + style?: StyleProp; +} + +export interface AvatarIcon extends IconObject { + iconStyle?: StyleProp; +} + +export interface TextProps { + /** + * font size 40 + */ + h1?: boolean; + + /** + * font size 34 + */ + h2?: boolean; + + /** + * font size 28 + */ + h3?: boolean; + + /** + * font size 22 + */ + h4?: boolean; + + /** + * font family name + */ + fontFamily?: string; + + /** + * Additional styling for Text + */ + style?: StyleProp; +} + +/** + * HTML Style Headings + * + * @see https://react-native-training.github.io/react-native-elements/API/HTML_style_headings/ + */ +export class Text extends React.Component {} + +export interface AvatarProps { + /** + * Component for enclosing element (eg: TouchableHighlight, View, etc) + * + * @default TouchableOpacity + */ + component?: React.ComponentClass; + + /** + * Width for the Avatar + * + * @default 34 + */ + width?: number; + + /** + * Height for the Avatar + * + * @default 34 + */ + height?: number; + + /** + * Callback function when pressing component + */ + onPress?(): void; + + /** + * Callback function when long pressing component + */ + onLongPress?(): void; + + /** + * Styling for outer container + */ + containerStyle?: StyleProp; + + /** + * Image source + */ + source?: ImageURISource; + + /** + * Style for avatar image + */ + avatarStyle?: ImageStyle; + + /** + * Determines the shape of avatar + * + * @default false + */ + rounded?: boolean; + + /** + * Renders title in the avatar + */ + title?: string; + + /** + * Style for the title + */ + titleStyle?: StyleProp; + + /** + * Style for the view outside image or icon + */ + overlayContainerStyle?: StyleProp; + + /** + * Opacity when pressed + * + * @default 0.2 + */ + activeOpacity?: number; + + /** + * Icon for the avatar + */ + icon?: AvatarIcon; + + /** + * extra styling for icon component + */ + iconStyle?: StyleProp; + + /** + * Small sized icon + */ + small?: boolean; + + /** + * Medium sized icon + */ + medium?: boolean; + + /** + * Large sized icon + */ + large?: boolean; + + /** + * Extra-large sized icon + */ + xlarge?: boolean; +} + +/** + * Avatar Component + * + * @see https://react-native-training.github.io/react-native-elements/API/avatar/ + */ +export class Avatar extends React.Component {} + +export interface ButtonIcon extends IconObject { + buttonStyle?: StyleProp; +} + +export interface ButtonProps extends TouchableWithoutFeedbackProps { + /** + * Specify other component such as TouchableOpacity or other + * + * @default TouchableHighlight (iOS), TouchableNativeFeedback (android) + */ + component?: React.ComponentClass; + + /** + * Additional styling for button component + * + * @default null + */ + buttonStyle?: StyleProp; + + /** + * Button title + */ + title: string; + + /** + * Makes button large + * + * @default false + */ + large?: boolean; + + /** + * Specify different font family + * + * @default System font (iOS), Sans Serif (android) + */ + fontFamily?: string; + + /** + * Specify font weight for title + * + * @default null + */ + fontWeight?: string; + + /** + * Moves icon to right of title + * + * @default false + */ + iconRight?: boolean; + + /** + * onPress method + */ + onPress(): void; + + /** + * onLongPress method + */ + onLongPress?(): void; + + /** + * Icon configuration + */ + icon?: ButtonIcon; + + /** + * Specify other icon component instead of default. The component will have all values from the icon prop + * + * @default MaterialIcon + * @see https://github.com/oblador/react-native-vector-icons#icon-component + */ + iconComponent?: JSX.Element; + + /** + * Background color of button + * + * @default #397af8 + */ + backgroundColor?: string; + + /** + * Adds border radius to button + * (Note: if you set this, don't forget to also set borderRadius to containerViewStyle prop, otherwise unexpected behaviour might occur) + * + * @default 0 + */ + borderRadius?: number; + + /** + * Font color + * + * @default #fff + */ + color?: string; + + /** + * Text styling + * + * @default null + */ + textStyle?: StyleProp; + + /** + * Font size + * + * @default 18 + */ + fontSize?: number; + + /** + * Underlay color for button press + * + * @default transparent + */ + underlayColor?: string; + + /** + * Flag to add raised button styling + * + * @default false + */ + raised?: boolean; + + /** + * Indicates button is disabled + * + * @default false + */ + disabled?: boolean; + + /** + * Disabled button styling + * + * @default null + */ + disabledStyle?: StyleProp; + + /** + * Styling for Component container + * + * @default null + */ + containerViewStyle?: StyleProp; +} + +/** + * Button component + * + * @see https://react-native-training.github.io/react-native-elements/API/buttons/ + */ +export class Button extends React.Component {} + +export interface BadgeProps { + /** + * Text value to be displayed by badge + * + * @default null + */ + value?: string | number; + + /** + * Style for the outer badge component + */ + containerStyle?: StyleProp; + + /** + * Style for the outer-most badge component + */ + wrapperStyle?: StyleProp; + + /** + * Style for the text in the badge + */ + textStyle?: StyleProp; + + /** + * Override the default badge contents, mutually exclusive with 'value' property + */ + children?: JSX.Element; + + /** + * Custom component to replace the badge outer component + * + * @default View (if onPress then TouchableOpacity) + */ + component?: React.ComponentClass; + + /** + * Function called when pressed on the badge + */ + onPress?(): void; +} + +/** + * Badge component + * + * @see https://react-native-training.github.io/react-native-elements/API/badge/ + */ +export class Badge extends React.Component {} + +export interface CardProps { + /** + * Flex direction (row or column) + * + * @default 'column' + */ + flexDirection?: 'column' | 'row'; + + /** + * Outer container style + */ + containerStyle?: StyleProp; + + /** + * Inner container style + */ + wrapperStyle?: StyleProp; + + /** + * Card title + */ + title?: string; + + /** + * Additional title styling (if title provided) + */ + titleStyle?: StyleProp; + + /** + * Title rendered over the image + * (only works if image prop is present) + */ + featuredTitle?: string; + + /** + * Styling for featured title + */ + featuredTitleStyle?: StyleProp; + + /** + * Subtitle rendered over the image + * (only works if image prop is present) + */ + featuredSubtitle?: string; + + /** + * Styling for featured subtitle + */ + featuredSubtitleStyle?: StyleProp; + + /** + * Additional divider styling + * (if title provided) + */ + dividerStyle?: StyleProp; + + /** + * Specify different font family + * + * @default System font bold (iOS), Sans Serif Bold (android) + */ + fontFamily?: string; + + /** + * Specify image styling if image is provided + */ + imageStyle?: ImageStyle; + + /** + * Specify styling for view surrounding image + */ + imageWrapperStyle?: StyleProp; + + /** + * Add an image as the heading with the image prop + */ + image?: ImageURISource; +} + +/** + * Card component + * + * @see https://react-native-training.github.io/react-native-elements/API/card/ + */ +export class Card extends React.Component {} + +/** + * Set the buttons within a Group. + */ +export interface ElementObject { + element: JSX.Element | React.ReactType; +} + +/** + * Set the border styles for a component. + */ +export interface InnerBorderStyleProperty { + color?: string; + width?: number; +} + +export interface ButtonGroupProps { + /** + * Current selected index of array of buttons + */ + selectedIndex: number; + + /** + * Method to update Button Group Index + */ + onPress(selectedIndex: number): void; + + /** + * Array of buttons for component, if returning a component, must be an object with { element: componentName } + */ + buttons: string[] | ElementObject[]; + + /** + * Choose other button component such as TouchableOpacity + * + * @default TouchableHighlight + */ + component?: React.ComponentClass; + + /** + * Specify styling for main button container + */ + containerStyle?: StyleProp; + + /** + * inherited styling specify styling for button + */ + buttonStyle?: StyleProp; + + /** + * Specify color for selected state of button + * + * @default 'white' + */ + selectedBackgroundColor?: string; + + /** + * Specify specific styling for text + */ + textStyle?: StyleProp; + + /** + * Specify specific styling for text in the selected state + */ + selectedTextStyle?: StyleProp; + + /** + * inherited styling object { width, color } update the styling of the interior border of the list of buttons + */ + innerBorderStyle?: InnerBorderStyleProperty; + + /** + * Specify underlayColor for TouchableHighlight + * + * @default 'white' + */ + underlayColor?: string; + + /** + * Disables the currently selected button if true + * + * @default false + */ + disableSelected?: boolean; + + /** + * Determines what the opacity of the wrapped view should be when touch is active. + */ + activeOpacity?: number; + + /** + * Border radius for the container + */ + containerBorderRadius?: number; + + /** + * Styling for the final border edge + */ + lastBorderStyle?: StyleProp; + + /** + * + * Called immediately after the underlay is hidden + */ + onHideUnderlay?(): void; + + /** + * Called immediately after the underlay is shown + */ + onShowUnderlay?(): void; + + /** + * Animate the touchable to a new opacity. + */ + setOpacityTo?(value: number): void; +} + +export class ButtonGroup extends React.Component {} + +export interface CheckBoxProps { + /** + * Icon family, can be one of the following + * (required only if specifying an icon that is not from font-awesome) + */ + iconType?: IconType; + + /** + * Specify React Native component for main button + */ + component?: React.ComponentClass; + + /** + * Flag for checking the icon + * + * @default false + */ + checked: boolean; + + /** + * Moves icon to right of text. + * + * @default false + */ + iconRight?: boolean; + + /** + * Aligns checkbox to right + * + * @default false + */ + right?: boolean; + + /** + * Aligns checkbox to center + * + * @default false + */ + center?: boolean; + + /** + * Title of checkbox + */ + title?: string | JSX.Element; + + /** + * Style of main container + */ + containerStyle?: StyleProp; + + /** + * style of text + */ + textStyle?: StyleProp; + + /** + * onLongPress function for checkbox + */ + onLongPress?(): void; + + /** + * onLongPress function for checkbox + */ + onLongIconPress?(): void; + + /** + * onPress function for container + */ + onPress?(): void; + + /** + * onPress function for checkbox + */ + onIconPress?(): void; + + /** + * Default checked icon (Font Awesome Icon) + * + * @default 'check-square-o' + */ + checkedIcon?: string; + + /** + * Default checked icon (Font Awesome Icon) + * + * @default 'square-o' + */ + uncheckedIcon?: string; + + /** + * Default checked color + * + * @default 'green' + */ + checkedColor?: string; + + /** + * Default unchecked color + * @default '#bfbfbf' + */ + uncheckedColor?: string; + + /** + * Specify a custom checked message + */ + checkedTitle?: string; + + /** + * Specify different font family + * @default 'System font bold (iOS)' + * @default 'Sans Serif Bold (android)' + */ + fontFamily?: string; +} +export class CheckBox extends React.Component {} + +export interface DividerProps { + /** + * Style the divider + * + * @default {height: 1, backgroundColor: #e1e8ee} + */ + style?: StyleProp; +} + +export class Divider extends React.Component {} + +export interface FormValidationMessageProps extends ViewProperties { + /** + * Style of the container + */ + containerStyle?: StyleProp; + + /** + * Style of the text within the label message + */ + labelStyle?: StyleProp; + + /** + * Font family for the message + */ + fontFamily?: string; +} +export class FormValidationMessage extends React.Component< + FormValidationMessageProps, + any +> {} + +export interface FormInputProps extends TextInputProperties { + /** + * TextInput container styling + */ + containerStyle?: StyleProp; + + /** + * TextInput styling + */ + inputStyle?: StyleProp; + + /** + * @deprecated + * Get ref of TextInput + */ + textInputRef?(ref: TextInput): void; + + /** + * @deprecated + * Get ref of TextInput container + */ + containerRef?(ref: any): void; + + /** + * Shake the TextInput if not a falsy value and different from the previous value + */ + shake?: any; +} + +export class FormInput extends React.Component { + /** + * Holds reference to the stored input. + */ + input: TextInput; + + /** + * Shake the TextInput + * + * eg `this.formInputRef.shake()` + */ + shake(): void; + + /** + * Call focus on the TextInput + */ + focus(): void; + + /** + * Call blur on the TextInput + */ + blur(): void; + + /** + * Call clear on the TextInput + */ + clearText(): void; +} + +export interface FormLabelProps extends ViewProperties { + /** + * Additional label container style + */ + containerStyle?: StyleProp; + + /** + * Additional label styling + */ + labelStyle?: StyleProp; + + /** + * Specify different font family + * + * @default System font bold (iOS), Sans Serif Bold (android) + */ + fontFamily?: string; +} + +export class FormLabel extends React.Component {} + +export interface GridProps extends ViewProperties { + /** + * Outer grid styling + */ + containerStyle?: StyleProp; + + /** + * Opacity on pressing + * + * @type {number} + * @memberof GridProps + */ + activeOpacity?: number; + + /** + * onPress method + */ + onPress?(): void; + + children: React.ReactNode; +} + +/** + * @deprecated + * Warning: Grid has been deprecated and will be removed in a future version of React Native Elements + * + * @see https://react-native-training.github.io/react-native-elements/API/grid + */ +export class Grid extends React.Component {} + +export interface SubGridProps extends ViewProperties { + /** + * Size for column or row + */ + size?: number; + + /** + * Opacity on pressing + * + * @default 1 + */ + activeOpacity?: number; + + /** + * Styling for the outer column or row + */ + containerStyle?: StyleProp; + + /** + * onPress method + */ + onPress?(): void; +} + +/** + * @deprecated + * Warning: Row has been deprecated and will be removed in a future version of React Native Elements + * @see https://react-native-training.github.io/react-native-elements/API/grid/#row + */ +export class Row extends React.Component {} + +/** + * @deprecated + * Warning: Col has been deprecated and will be removed in a future version of React Native Elements + * + * @see https://react-native-training.github.io/react-native-elements/API/grid/#column + * + */ +export class Col extends React.Component {} + +export interface HeaderIcon extends IconObject { + icon?: string; +} + +/** + * Defines the types that can be used in a header sub component + */ +export type HeaderSubComponent = JSX.Element | TextProps | HeaderIcon; + +export interface HeaderProps extends ViewProperties { + /** + * Accepts all props for StatusBar + */ + statusBarProps?: StatusBarProperties; + + /** + * Configuration object for default component (icon: string, ...props for React Native Elements Icon) or a valid React Element define your left component here + */ + leftComponent?: HeaderSubComponent; + + /** + * Configuration object for default component (text: string, ...props for React Native Text component) valid React Element define your center component here + */ + centerComponent?: HeaderSubComponent; + + /** + * Configuration object for default component (icon: string, ...props for React Native Elements Icon component) or a valid React Element define your right component here + */ + rightComponent?: HeaderSubComponent; + + /** + * Sets backgroundColor of the parent component + */ + backgroundColor?: string; + + /** + * Styling for outer container + */ + outerContainerStyles?: StyleProp; + + /** + * Styling for inner container + */ + innerContainerStyles?: StyleProp; +} + +/** + * Header component + * @see https://react-native-training.github.io/react-native-elements/API/header/ + */ +export class Header extends React.Component {} + +export interface IconProps { + /** + * Name of icon + */ + name: string; + + /** + * Type (defaults to material, options are material-community, zocial, font-awesome, octicon, ionicon, foundation, evilicon, simple-line-icon, or entypo) + * @default 'material' + */ + type?: IconType; + + /** + * Size of icon + * @default 26 + */ + size?: number; + + /** + * Color of icon + * + * @default 'black' + */ + color?: string; + + /** + * Additional styling to icon + */ + iconStyle?: StyleProp; + + /** + * View if no onPress method is defined, TouchableHighlight if onPress method is defined React Native component update React Native Component + */ + component?: React.ComponentClass; + + /** + * onPress method for button + */ + onPress?(): void; + + /** + * onLongPress method for button + */ + onLongPress?(): void; + + /** + * UnderlayColor for press event + */ + underlayColor?: string; + + /** + * Reverses color scheme + * + * @default false + */ + reverse?: boolean; + + /** + * Adds box shadow to button + * + * @default false + */ + raised?: boolean; + + /** + * Add styling to container holding icon + */ + containerStyle?: StyleProp; + + /** + * Specify reverse icon color + * + * @default 'white' + */ + reverseColor?: string; +} + +/** + * Icon component + * @see https://react-native-training.github.io/react-native-elements/API/icons/ + */ +export class Icon extends React.Component {} + +export interface ListProps extends ViewProperties { + /** + * Style the list container + * @default '{marginTop: 20, borderTopWidth: 1, borderBottomWidth: 1, borderBottomColor: #cbd2d9}' + */ + containerStyle?: StyleProp; +} + +/** + * List component + * @see https://react-native-training.github.io/react-native-elements/API/lists/ + */ +export class List extends React.Component {} + +export interface ListItemProps { + /** + * Left avatar. This is the React Native Image source prop. Avatar can be used in parallel to leftIcon if needed. + */ + avatar?: string | ImageURISource; + + /** + * Avatar styling. This is the React Native Image style prop + */ + avatarStyle?: ImageStyle; + + /** + * Avatar outer container styling + */ + avatarContainerStyle?: StyleProp; + + /** + * Avatar overlay container styling + */ + avatarOverlayContainerStyle?: StyleProp; + + /** + * Set chevron color + * + * @default '#bdc6cf' + */ + chevronColor?: string; + + /** + * View or TouchableHighlight if onPress method is added as prop + * Replace element with custom element + */ + component?: React.ComponentClass; + + /** + * Additional main container styling + */ + containerStyle?: StyleProp; + + /** + * Additional wrapper styling + */ + wrapperStyle?: StyleProp; + + /** + * Define underlay color for TouchableHighlight + * + * @default 'white' + */ + underlayColor?: string; + + /** + * Specify different font family + * + * @default 'HelevticaNeue' (iOS) + * @default 'Sans Serif' (android) + */ + fontFamily?: string; + + /** + * Set if you do not want a chevron + * + * @default false + */ + hideChevron?: boolean; + + /** + * onPress method for link + */ + onPress?(): void; + + /** + * onLongPress method for link + */ + onLongPress?(): void; + + /** + * Make left avatar round + * + * @default false + */ + roundAvatar?: boolean; + + /** + * Main title for list item, can be text or custom view + */ + title?: string; + + /** + * Number of lines for title + * + * @default 1 + */ + titleNumberOfLines?: number; + + /** + * Additional title styling + */ + titleStyle?: StyleProp; + + /** + * Provide styling for title container + */ + titleContainerStyle?: StyleProp; + + /** + * Subtitle text or custom view + */ + subtitle?: string | JSX.Element; + + /** + * Number of lines for Subtitle + * + * @default 1 + */ + subtitleNumberOfLines?: number; + + /** + * Provide styling for subtitle container + */ + subtitleContainerStyle?: StyleProp; + + /** + * Additional subtitle styling + */ + subtitleStyle?: StyleProp; + + /** + * Provide a rightTitle to have a title show up on the right side of the button + */ + rightTitle?: string; + + /** + * Number of lines for Right Title + * + * @default 1 + */ + rightTitleNumberOfLines?: number; + + /** + * Style the outer container of the rightTitle text + * + * @default "{flex: 1, alignItems: 'flex-end', justifyContent: 'center'}"" + */ + rightTitleContainerStyle?: StyleProp; + + /** + * Style the text of the rightTitle text + * + * @default "{marginRight: 5, color: '#bdc6cf'}" + */ + rightTitleStyle?: StyleProp; + + /** + * Add a label with your own styling by providing a label={} prop to ListItem + */ + label?: JSX.Element; + + /** + * Icon configuration for left icon, either a name from the icon library (like material) or a React Native element like Image. + * leftIcon can be used in parallel to avatar if needed. + * {name, color, style, type} + * (type defaults to material icons) OR React Native element + */ + leftIcon?: IconObject | JSX.Element; + + /** + * Attaches an onPress on left Icon + */ + leftIconOnPress?(): void; + + /** + * Attaches an onLongPress on left Icon + */ + leftIconOnLongPress?(): void; + + /** + * Underlay color for left Icon + * + * @default 'white' + */ + leftIconUnderlayColor?: string; + + /** + * {name: 'chevron-right'} object {name, color, style, type} (type defaults to material icons) OR + * React Native element icon configuration for right icon, either a name from the icon library (like material) or a React Native element like Image. + * Shows up unless hideChevron is set + */ + rightIcon?: IconObject | JSX.Element; + + /** + * Attaches an onPress on right Icon + */ + onPressRightIcon?(): void; + + /** + * Add a switch to the right side of your component + * + * @default false + */ + switchButton?: boolean; + + /** + * Add a callback function when the switch is toggled + */ + onSwitch?(value: boolean): void; + + /** + * If true the user won't be able to toggle the switch. Default value is false. + * @default false + */ + switchDisabled?: boolean; + + /** + * Background color when the switch is turned on. + */ + switchOnTintColor?: string; + + /** + * Color of the foreground switch grip. + */ + switchThumbTintColor?: string; + + /** + * Border color on iOS and background color on Android when the switch is turned off. + */ + switchTintColor?: string; + + /** + * The value of the switch. If true the switch will be turned on. Default value is false. + * + * @default false + */ + switched?: boolean; + + /** + * Whether to have the right title area be an input text component. + * + * @default false + */ + textInput?: boolean; + + /** + * Can tell TextInput to automatically capitalize certain characters. + */ + textInputAutoCapitalize?: boolean; + + /** + * Can tell TextInput to automatically capitalize certain characters. + */ + textInputAutoCorrect?: boolean; + + /** + * If true, focuses the input on componentDidMount. The default value is false. + */ + textInputAutoFocus?: boolean; + + /** + * If false, text is not editable. The default value is true. + */ + textInputEditable?: boolean; + + /** + * Can be one of the following: + * 'default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search' + */ + textInputKeyboardType?: KeyboardType | KeyboardTypeIOS; + + /** + * Limits the maximum number of characters that can be entered. + */ + textInputMaxLength?: number; + + /** + * If true, the text input can be multiple lines. The default value is false. + */ + textInputMultiline?: boolean; + + /** + * Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. + */ + textInputOnChangeText?(text: string): void; + + /** + * Callback that is called when the text input is focused. + */ + textInputOnFocus?(): void; + + /** + * Manually set value of the input + */ + textInputValue?: string; + + /** + * If true, obscures the text entered so that sensitive text like passwords stay secure. + */ + textInputSecure?: boolean; + + /** + * Style for the input text + */ + textInputStyle?: StyleProp; + + /** + * Style for the container surrounding the input text + */ + textInputContainerStyle?: StyleProp; + + /** + * Placeholder for the text input + */ + textInputPlaceholder?: string; + + /** + * Callback that is called when the text input is blurred. + */ + textInputOnBlur?(): void; + + /** + * If true, all text will automatically be selected on focus. + */ + textInputSelectTextOnFocus?: boolean; + + /** + * Determines how the return key should look. For more info see the React Native docs + */ + textInputReturnKeyType?: string; + + /** + * Add a badge to the ListItem by using this prop + * + */ + badge?: BadgeProps | ElementObject; +} + +/** + * ListItem component + * @see https://react-native-training.github.io/react-native-elements/API/lists/ + */ +export class ListItem extends React.Component {} + +export interface ButtonInformation { + title: string; + icon: string; + buttonStyle?: StyleProp; +} + +export interface PricingCardProps { + /** + * Title + */ + title?: string; + + /** + * Price + */ + price: string; + + /** + * Color scheme for button & title + */ + color: string; + + /** + * Pricing information + */ + info?: string[]; + + /** + * {title, icon, buttonStyle} + * Button information + */ + button: ButtonInformation; + + /** + * Function to be run when button is pressed + */ + onButtonPress?(): void; + + /** + * Outer component styling + */ + containerStyle?: StyleProp; + + /** + * Inner wrapper component styling + */ + wrapperStyle?: StyleProp; + + /** + * Specify title font family + * + * System font (font weight 800) (iOS) + * Sans Serif Black (android) + */ + titleFont?: string; + + /** + * Specify pricing font family + * + * System font (font weight 700) (iOS) + * Sans Serif Bold (android) + */ + pricingFont?: string; + + /** + * Specify pricing information font family + * + * System font bold (iOS) + * Sans Serif Bold (android) + */ + infoFont?: string; + + /** + * Specify button font family + * + * System font (iOS) + * Sans Serif (android) + */ + buttonFont?: string; +} + +/** + * PricingCard component + * @see https://react-native-training.github.io/react-native-elements/API/pricing/ + */ +export class PricingCard extends React.Component {} + +export interface RatingProps { + /** + * Callback method when the user finishes rating. Gives you the final rating value as a whole number + */ + onFinishRating(rating: number): void; + + /** + * Choose one of the built-in types: star, rocket, bell, heart or use type custom to render a custom image + */ + type?: 'star' | 'rocket' | 'bell' | 'heart' | 'custom'; + + /** + * Pass in a custom image source; use this along with type='custom' prop above + */ + ratingImage?: ImageURISource | string | number; + + /** + * Pass in a custom fill-color for the rating icon; use this along with type='custom' prop above + * + * @default '#f1c40f' + */ + ratingColor?: string; + + /** + * Pass in a custom background-fill-color for the rating icon; use this along with type='custom' prop above + * + * @default 'white' + */ + ratingBackgroundColor?: string; + + /** + * Number of rating images to display + * + * @default 5 + */ + ratingCount?: number; + + /** + * The size of each rating image + * + * @default 50 + */ + imageSize?: number; + + /** + * Displays the Built-in Rating UI to show the rating value in real-time + */ + showRating?: boolean; + + /** + * Whether the rating can be modiefied by the user + * + * @default false + */ + readonly?: boolean; + + /** + * The initial rating to render + * + * @default ratingCount/2 + */ + startingValue?: number; + + /** + * The number of decimal places for the rating value; must be between 0 and 20 + * + * @default undefined + */ + fractions?: number; + + /** + * Exposes style prop to add additonal styling to the container view + */ + style?: StyleProp; +} + +/** + * Rating component + * @see https://react-native-training.github.io/react-native-elements/API/rating/ + */ +export class Rating extends React.Component {} + +export interface SearchBarProps extends TextInputProperties { + /** + * TextInput container styling + */ + containerStyle?: StyleProp; + + /** + * TextInput styling + */ + inputStyle?: StyleProp; + + /** + * @deprecated + * Get ref of TextInput + */ + textInputRef?(ref: TextInput): void; + + /** + * @deprecated + * Get ref of TextInput container + */ + containerRef?(ref: any): void; + + /** + * Specify color, styling, or another Material Icon Name + */ + icon?: IconObject; + + /** + * Remove icon from textinput + * + * @default false + */ + noIcon?: boolean; + + /** + * @default false change theme to light theme + */ + lightTheme?: boolean; + + /** + * Change TextInput styling to rounded corners + * + * @default false + */ + round?: boolean; + + /** + * Specify other than the default transparent underline color + * + * @default 'transparent' + */ + underlineColorAndroid?: string; + + /** + * Specify color, styling of the loading ActivityIndicator effect + * + * @default "{ color: '#86939e' }" + */ + loadingIcon?: IconObject; + + /** + * Show the loading ActivityIndicator effect + * + * @default false + */ + showLoadingIcon?: boolean; + + /** + * Set the placeholder text + * + * @default '' + */ + placeholder?: string; + + /** + * Set the color of the placeholder text + * + * @default '#86939e' + */ + placeholderTextColor?: string; + + /** + * Method to fire when text is changed + */ + onChangeText?(text: string): void; + + /** + * Specify color, styling, or another Material Icon Name + * (Note: pressing on this icon clears text inside the searchbar) + * + * @default "{ color: '#86939e', name: 'search' }" + */ + clearIcon?: IconObject; +} + +/** + * SearchBar component + * @see https://react-native-training.github.io/react-native-elements/API/searchbar/ + */ +export class SearchBar extends React.Component { + /** + * Holds reference to the stored input. + */ + input: TextInput; + + /** + * Call focus on the TextInput + */ + focus(): void; + + /** + * Call blur on the TextInput + */ + blur(): void; + + /** + * Call clear on the TextInput + */ + clearText(): void; +} + +export interface SideMenuProps { + /** + * Menu component + */ + menu: JSX.Element; + + /** + * Props driven control over menu open state + * + * @default false + */ + isOpen?: boolean; + + /** + * Content view left margin if menu is opened + * + * @default ⅔ of device screen width + */ + openMenuOffset?: number; + + /** + * Content view left margin if menu is hidden + */ + hiddenMenuOffset?: number; + + /** + * Edge distance on content view to open side menu + * + * @default 60 + */ + edgeHitWidth?: number; + + /** + * X axis tolerance + */ + toleranceX?: number; + + /** + * Y axis tolerance + */ + toleranceY?: number; + + /** + * Disable whether the menu can be opened with gestures or not + * + * @default false + */ + disableGestures?: boolean; + + /** + * Function that accepts event as an argument and specify if side-menu should react on the touch or not. + * Check https://facebook.github.io/react-native/docs/gesture-responder-system.html for more details + */ + onStartShouldSetResponderCapture?(event: GestureResponderEvent): boolean; + + /** + * Callback on menu open/close. Is passed isOpen as an argument. + */ + onChange?(isOpen: boolean): void; + + /** + * Callback on menu move. Is passed left as an argument + */ + onMove?(left: number): void; + + /** + * Either 'left' or 'right'. + * + * @default 'left' + */ + menuPosition?: string; + + /** + * Function that accept 2 arguments (prop, value) and return an object: + * - animation you should use at the place you specify parameter to animate + * - newOffset you should use to specify the final value of prop + */ + animationFunction?( + animation: Animated.Value, + newOffset: number + ): Animated.CompositeAnimation; + + /** + * Function that accept 1 argument (value) and return an object + * - leftOffset you should use at the place you need current value of animated parameter (left offset of content view) + */ + animationStyle?(leftOffset: number): StyleProp; + + /** + * When true, content view will bounce back to openMenuOffset when dragged further + * + * @default true + */ + bounceBackOnOverdraw?: boolean; +} + +/** + * @deprecated + * Warning: SideMenu has been deprecated and will be removed in a future version of React Native Elements. For a complete navigation solution that includes SideMenu(Drawer) as well as many other + * features, be sure to check out react-navigation (https://reactnavigation.org) and it's DrawerNavigator. + * + * SideMenu component + * @see https://react-native-training.github.io/react-native-elements/API/side_menu/ + */ +export class SideMenu extends React.Component {} + +export interface SliderProps { + /** + * Initial value of the slider + * + * @default 0 + */ + value?: number; + + /** + * If true the user won't be able to move the slider + * + * @default false + */ + disabled?: boolean; + + /** + * Initial minimum value of the slider + * + * @default 0 + */ + minimumValue?: number; + + /** + * Initial maximum value of the slider + * + * @default 1 + */ + maximumValue?: number; + + /** + * Step value of the slider. The value should be between 0 and maximumValue - minimumValue) + * + * @default 0 + */ + step?: number; + + /** + * The color used for the track to the left of the button + * + * @default '#3f3f3f' + */ + minimumTrackTintColor?: string; + + /** + * The color used for the track to the right of the button + * + * @default '#b3b3b3' + */ + maximumTrackTintColor?: string; + + /** + * The color used for the thumb + * + * @default '#343434' + */ + thumbTintColor?: string; + + /** + * The size of the touch area that allows moving the thumb. The touch area has the same center as the visible thumb. + * This allows to have a visually small thumb while still allowing the user to move it easily. + * + * @default "{width: 40, height: 40}" + */ + thumbTouchSize?: { + width?: number; + height?: number; + }; + + /** + * Callback continuously called while the user is dragging the slider + */ + onValueChange?(value: number): void; + + /** + * Callback called when the user starts changing the value (e.g. when the slider is pressed) + */ + onSlidingStart?(value: number): void; + + /** + * Callback called when the user finishes changing the value (e.g. when the slider is released) + */ + onSlidingComplete?(value: number): void; + + /** + * The style applied to the slider container + */ + style?: StyleProp; + + /** + * The style applied to the track + */ + trackStyle?: StyleProp; + + /** + * The style applied to the thumb + */ + thumbStyle?: StyleProp; + + /** + * Set this to true to visually see the thumb touch rect in green. + * + * @default false + */ + debugTouchArea?: boolean; + + /** + * Set to true if you want to use the default 'spring' animation + * + * @default false + */ + animateTransitions?: boolean; + + /** + * Set to 'spring' or 'timing' to use one of those two types of animations with the default animation properties. + * + * @default 'timing' + */ + animationType?: 'spring' | 'timing'; + + /** + * Used to configure the animation parameters. These are the same parameters in the Animated library. + * + * @default undefined + */ + animationConfig?: + | Animated.TimingAnimationConfig + | Animated.SpringAnimationConfig; +} + +/** + * Slider component + * @see https://react-native-training.github.io/react-native-elements/API/slider/ + */ +export class Slider extends React.Component {} + +export type SocialMediaType = + | 'facebook' + | 'twitter' + | 'google-plus-official' + | 'pinterest' + | 'linkedin' + | 'youtube' + | 'vimeo' + | 'tumblr' + | 'instagram' + | 'quora' + | 'foursquare' + | 'wordpress' + | 'stumbleupon' + | 'github' + | 'github-alt' + | 'twitch' + | 'medium' + | 'soundcloud' + | 'gitlab' + | 'angellist' + | 'codepen'; + +export interface SocialIconProps { + /** + * Title if made into a button + */ + title?: string; + + /** + * Social media type + */ + type: SocialMediaType; + + /** + * Adds a drop shadow, set to false to remove + * + * @default true + */ + raised?: boolean; + + /** + * Creates button + * + * @default false + */ + button?: boolean; + + /** + * onPress method + */ + onPress?(): void; + + /** + * @default none function onLongPress method + */ + onLongPress?(): void; + + /** + * Reverses icon color scheme, setting background to white and icon to primary color + * + * @default false + */ + light?: boolean; + + /** + * Extra styling for icon component + */ + iconStyle?: StyleProp; + + /** + * Button styling + */ + style?: StyleProp; + + /** + * Icon color + */ + iconColor?: string; + + /** + * Icon size + * + * @default 24 + */ + iconSize?: number; + + /** + * Component Type of button + * + * @default TouchableHighlight + */ + component?: React.ComponentClass; + + /** + * Specify different font family + * + * @default System font bold (iOS), Sans Serif Black (android) + */ + fontFamily?: string; + + /** + * Specify font weight of title if set as a button with a title + * + * @default bold (ios), black(android) + */ + fontWeight?: string; + + /** + * Specify text styling + */ + fontStyle?: StyleProp; + + /** + * Disable button + * + * @default false + */ + disabled?: boolean; + + /** + * Shows loading indicator + * + * @default false + */ + loading?: boolean; +} + +/** + * SocialIcon component + * @see https://react-native-training.github.io/react-native-elements/API/social_icons/ + */ +export class SocialIcon extends React.Component {} + +export interface SwipeDeckProps { + /** + * An array of data object which contains each card details. + */ + data: ReadonlyArray; + + /** + * A function that takes a card as a prop and renders it with custom UI + */ + renderCard(card: D): JSX.Element; + + /** + * A function that renders custom UI when no more cards are present + */ + renderNoMoreCards?(): JSX.Element; + + /** + * function function A callback function that takes a card as a prop and take the approriate action when the user swipes the card right + */ + onSwipeRight?(card: D): void; + + /** + * function function A callback function that takes a card as a prop and take the approriate action when the user swipes the card left + */ + onSwipeLeft?(card: D): void; +} + +/** + * SwipeDeck component + * @see https://react-native-training.github.io/react-native-elements/API/swipedeck/ + */ +export class SwipeDeck extends React.Component< + SwipeDeckProps, + any +> {} + +/** + * @deprecated + * Warning: Tabs has been deprecated and will be removed in a future version of React Native Elements. + * For a complete navigation solution that includes Tabs as well as many other features, be sure to check out react-navigation (https://reactnavigation.org) and it's TabRouter. + */ +export class Tabs extends TabNavigator {} + +/** + * @deprecated + * Warning: Tab has been deprecated and will be removed in a future version of React Native Elements. + * For a complete navigation solution that includes Tabs as well as many other features, be sure to check out react-navigation (https://reactnavigation.org) and it's TabRouter. + */ +export class Tab extends TabNavigator.Item {} + +export interface TileProps { + /** + * Icon Component Props + */ + icon?: IconObject; + + /** + * Styling for the outer icon container + */ + iconContainerStyle?: StyleProp; + + /** + * Text inside the tile + */ + title?: string; + + /** + * Styling for the title + */ + titleStyle?: StyleProp; + + /** + * Text inside the tile when tile is featured + */ + caption?: string; + + /** + * Styling for the caption + */ + captionStyle?: StyleProp; + + /** + * Changes the look of the tile + */ + featured?: boolean; + + /** + * @default none object (style) Styling for the outer tile container + */ + containerStyle?: StyleProp; + + /** + * Source for the image + */ + imageSrc: ImageURISource | string | number; + + /** + * Styling for the image + */ + imageContainerStyle?: StyleProp; + + /** + * @default none function (event) Function to call when tile is pressed + */ + onPress?(): void; + + /** + * Number passed to control opacity on press + * + * @default 0.2 + */ + activeOpacity?: number; + + /** + * Styling for bottom container when not featured tile + */ + contentContainerStyle?: StyleProp; + + /** + * Width for the tile + * + * @default Device Width + */ + width?: number; + + /** + * Height for the tile + * + * @default Device Width * 0.8 + */ + height?: number; +} + +/** + * Tile component + * @see https://react-native-training.github.io/react-native-elements/API/tile/ + */ +export class Tile extends React.Component {} + +/** + * Colors + */ + +export interface Colors { + readonly primary: string; + readonly primary1: string; + readonly primary2: string; + readonly secondary: string; + readonly secondary2: string; + readonly secondary3: string; + readonly grey0: string; + readonly grey1: string; + readonly grey2: string; + readonly grey3: string; + readonly grey4: string; + readonly grey5: string; + readonly dkGreyBg: string; + readonly greyOutline: string; + readonly searchBg: string; + readonly disabled: string; + readonly white: string; + readonly error: string; + readonly [key: string]: string; +} + +export const colors: Colors; + +/* Utility Functions */ + +/** + * TODO make the Icon Type an export of the react-native-vector-icons type definitions. + */ +export function getIconType(type: IconType): any; + +/** + * Method to normalize size of fonts across devices + */ +export function normalize(size: number): number;