From 335df032c70764c34be382c89e830d42b908ff20 Mon Sep 17 00:00:00 2001 From: Kyle Roach Date: Mon, 4 Dec 2017 17:05:43 -0400 Subject: [PATCH 1/2] Remove react-native-elements --- notNeededPackages.json | 6 + types/react-native-elements/README.md | 26 - types/react-native-elements/index.d.ts | 2265 ----------------- .../react-native-elements-tests.tsx | 975 ------- types/react-native-elements/tsconfig.json | 25 - types/react-native-elements/tslint.json | 1 - 6 files changed, 6 insertions(+), 3292 deletions(-) delete mode 100644 types/react-native-elements/README.md delete mode 100644 types/react-native-elements/index.d.ts delete mode 100644 types/react-native-elements/react-native-elements-tests.tsx delete mode 100644 types/react-native-elements/tsconfig.json delete mode 100644 types/react-native-elements/tslint.json diff --git a/notNeededPackages.json b/notNeededPackages.json index 0e5f946e07..2414ebea00 100644 --- a/notNeededPackages.json +++ b/notNeededPackages.json @@ -570,6 +570,12 @@ "sourceRepoURL": "https://github.com/gpbl/react-day-picker", "asOfVersion": "5.3.0" }, + { + "libraryName": "react-native-elements", + "typingsPackageName": "react-native-elements", + "sourceRepoURL": "https://github.com/react-native-training/react-native-elements", + "asOfVersion": "0.18" + }, { "libraryName": "realm", "typingsPackageName": "realm", diff --git a/types/react-native-elements/README.md b/types/react-native-elements/README.md deleted file mode 100644 index 9e3975ecdf..0000000000 --- a/types/react-native-elements/README.md +++ /dev/null @@ -1,26 +0,0 @@ -# [React Native Elements](https://github.com/react-native-training/react-native-elements) - -### Component Checklist - -- [x] Buttons -- [x] Badge -- [x] Social Icons / Social Icon Buttons -- [x] Icons -- [x] Side Menu -- [x] Form Elements -- [x] SearchBar -- [x] ButtonGroup -- [x] CheckBoxes -- [x] List Element -- [x] Tab Bar Component -- [x] HTML style headings -- [x] Card component -- [x] Pricing Component -- [x] Grid Component -- [x] Slider Component -- [x] Tile Component -- [x] Avatar Component -- [x] Rating Component -- [x] SwipeDeck Component -- [x] Header Component -- [x] Divider diff --git a/types/react-native-elements/index.d.ts b/types/react-native-elements/index.d.ts deleted file mode 100644 index 821e9b65e7..0000000000 --- a/types/react-native-elements/index.d.ts +++ /dev/null @@ -1,2265 +0,0 @@ -// 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.4 - -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; - - /** - * Icon configuration for icon on right side of title - */ - iconRight?: ButtonIcon; - - /** - * 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; - - /** - * Styling for loading spinner - * - * @default null - */ - activityIndicatorStyle?: StyleProp; - - /** - * Display a loading spinner - * - * @default false - */ - loading?: boolean; - - /** - * Display the spinner to the right - * - * @default false - */ - loadingRight?: boolean; -} - -/** - * 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 - * - */ - 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; diff --git a/types/react-native-elements/react-native-elements-tests.tsx b/types/react-native-elements/react-native-elements-tests.tsx deleted file mode 100644 index 29155829b2..0000000000 --- a/types/react-native-elements/react-native-elements-tests.tsx +++ /dev/null @@ -1,975 +0,0 @@ -import * as React from 'react'; -import { - ListView, - View, - StyleSheet, - TouchableNativeFeedback, - Image, - TextInput, - Animated, - Dimensions -} from 'react-native'; -import { - Button, - Text, - Badge, - Avatar, - Card, - ButtonGroup, - CheckBox, - Divider, - FormInput, - FormValidationMessage, - FormLabel, - Header, - Icon, - List, - ListItem, - PricingCard, - Rating, - SearchBar, - SideMenu, - Slider, - SocialIcon, - SwipeDeck, - Tabs, - Tab, - Tile, - colors, - getIconType, - normalize -} from 'react-native-elements'; - -const { width, height } = Dimensions.get('window'); - -class TextTest extends React.Component { - render() { - return ( - - Heading 1 - Heading 2 - Heading 3 - Heading 4 - - ); - } -} - -class AvatarTest extends React.Component { - render() { - return ( - - - Avatars - console.log('Works!')} - activeOpacity={0.7} - /> - console.log('Works!')} - activeOpacity={0.7} - /> - console.log('Works!')} - activeOpacity={0.7} - /> - console.log('Works!')} - activeOpacity={0.7} - /> - - - - Avatar with initials - console.log('Works!')} - activeOpacity={0.7} - /> - console.log('Works!')} - activeOpacity={0.7} - /> - console.log('Works!')} - activeOpacity={0.7} - /> - console.log('Works!')} - activeOpacity={0.7} - /> - - - - Avatar with icons - console.log('Works!')} - activeOpacity={0.7} - containerStyle={{ - flex: 2, - marginLeft: 20, - marginTop: 115 - }} - /> - console.log('Works!')} - activeOpacity={0.7} - containerStyle={{ flex: 3, marginTop: 100 }} - /> - console.log('Works!')} - activeOpacity={0.7} - containerStyle={{ flex: 4, marginTop: 75 }} - /> - console.log('Works!')} - activeOpacity={0.7} - containerStyle={{ flex: 5, marginRight: 60 }} - /> - - - ); - } -} - -const AvatarStyles = StyleSheet.create({ - title: { - fontSize: 30, - marginBottom: 10 - } -}); - -class BadgeTest extends React.Component { - render() { - return ( - - - - - User 1 - - - console.log('pressed')} value="5" /> - - - - ); - } -} - -class ButtonTest extends React.Component { - handleButtonPress() { - console.log('I got pressed'); - } - - render() { - return ( - -