feat(react-native-elements): add rating component

2026-08-11 20:40:20 +00:00 · 2017-09-17 09:58:32 +01:00
parent af86165a93
commit eef8baf613
3 changed files with 628 additions and 563 deletions
@@ -21,7 +21,7 @@ List will update as typings are added
 - [ ] Slider Component
 - [ ] Tile Component
 - [x] Avatar Component
- [ ] Rating Component
+- [x] Rating Component
 - [ ] SwipeDeck Component
 - [x] Header Component
 - [x] Divider
@@ -23,6 +23,9 @@ import {
    StyleProp,
 } from 'react-native';

+/**
+ * Supports auto complete for most used types as well as any other string type.
+ */
 export type IconType =
    | 'material'
    | 'material-community'
@@ -33,7 +36,8 @@ export type IconType =
    | 'ionicon'
    | 'foundation'
    | 'evilicon'
-    | 'entypo';
+    | 'entypo'
+    | string;

 export interface IconObject {
    name?: string;
@@ -44,7 +48,7 @@ export interface IconObject {
 }

 export interface AvatarIcon extends IconObject {
-    iconStyle?: TextStyle;
+    iconStyle?: StyleProp<TextStyle>;
 }

 export interface TextProps {
@@ -76,7 +80,7 @@ export interface TextProps {
    /**
     * Additional styling for Text
     */
-    style?: TextStyle;
+    style?: StyleProp<TextStyle>;
 }

 /**
@@ -121,7 +125,7 @@ export interface AvatarProps {
    /**
     * Styling for outer container
     */
-    containerStyle?: ViewStyle;
+    containerStyle?: StyleProp<ViewStyle>;

    /**
     * Image source
@@ -148,12 +152,12 @@ export interface AvatarProps {
    /**
     * Style for the title
     */
-    titleStyle?: TextStyle;
+    titleStyle?: StyleProp<TextStyle>;

    /**
     * Style for the view outside image or icon
     */
-    overlayContainerStyle?: ViewStyle;
+    overlayContainerStyle?: StyleProp<ViewStyle>;

    /**
     * Opacity when pressed
@@ -170,7 +174,7 @@ export interface AvatarProps {
    /**
     * extra styling for icon component
     */
-    iconStyle?: TextStyle;
+    iconStyle?: StyleProp<TextStyle>;

    /**
     * Small sized icon
@@ -201,7 +205,7 @@ export interface AvatarProps {
 export class Avatar extends React.Component<AvatarProps, any> {}

 export interface ButtonIcon extends IconObject {
-    buttonStyle?: TextStyle;
+    buttonStyle?: StyleProp<TextStyle>;
 }

 export interface ButtonProps extends TouchableWithoutFeedbackProps {
@@ -217,7 +221,7 @@ export interface ButtonProps extends TouchableWithoutFeedbackProps {
     *
     * @default null
     */
-    buttonStyle?: ViewStyle;
+    buttonStyle?: StyleProp<ViewStyle>;

    /**
     * Button title
@@ -302,7 +306,7 @@ export interface ButtonProps extends TouchableWithoutFeedbackProps {
     *
     * @default null
     */
-    textStyle?: TextStyle;
+    textStyle?: StyleProp<TextStyle>;

    /**
     * Font size
@@ -337,14 +341,14 @@ export interface ButtonProps extends TouchableWithoutFeedbackProps {
     *
     * @default null
     */
-    disabledStyle?: ViewStyle;
+    disabledStyle?: StyleProp<ViewStyle>;

    /**
     * Styling for Component container
     *
     * @default null
     */
-    containerViewStyle?: ViewStyle;
+    containerViewStyle?: StyleProp<ViewStyle>;
 }

 /**
@@ -365,17 +369,17 @@ export interface BadgeProps {
    /**
     * Style for the outer badge component
     */
-    containerStyle?: ViewStyle;
+    containerStyle?: StyleProp<ViewStyle>;

    /**
     * Style for the outer-most badge component
     */
-    wrapperStyle?: ViewStyle;
+    wrapperStyle?: StyleProp<ViewStyle>;

    /**
     * Style for the text in the badge
     */
-    textStyle?: TextStyle;
+    textStyle?: StyleProp<TextStyle>;

    /**
     * Override the default badge contents, mutually exclusive with 'value' property
@@ -385,7 +389,7 @@ export interface BadgeProps {
    /**
     * Custom component to replace the badge outer component
     *
-     * @default View, if onPress then TouchableOpacity
+     * @default View (if onPress then TouchableOpacity)
     */
    component?: React.ComponentClass;

@@ -413,12 +417,12 @@ export interface CardProps {
    /**
     * Outer container style
     */
-    containerStyle?: ViewStyle;
+    containerStyle?: StyleProp<ViewStyle>;

    /**
     * Inner container style
     */
-    wrapperStyle?: ViewStyle;
+    wrapperStyle?: StyleProp<ViewStyle>;

    /**
     * Card title
@@ -428,7 +432,7 @@ export interface CardProps {
    /**
     * Additional title styling (if title provided)
     */
-    titleStyle?: TextStyle;
+    titleStyle?: StyleProp<TextStyle>;

    /**
     * Title rendered over the image
@@ -439,7 +443,7 @@ export interface CardProps {
    /**
     * Styling for featured title
     */
-    featuredTitleStyle?: TextStyle;
+    featuredTitleStyle?: StyleProp<TextStyle>;

    /**
     * Subtitle rendered over the image
@@ -450,13 +454,13 @@ export interface CardProps {
    /**
     * Styling for featured subtitle
     */
-    featuredSubtitleStyle?: TextStyle;
+    featuredSubtitleStyle?: StyleProp<TextStyle>;

    /**
     * Additional divider styling
     * (if title provided)
     */
-    dividerStyle?: ViewStyle;
+    dividerStyle?: StyleProp<ViewStyle>;

    /**
     * Specify different font family
@@ -473,7 +477,7 @@ export interface CardProps {
    /**
     * Specify styling for view surrounding image
     */
-    imageWrapperStyle?: ViewStyle;
+    imageWrapperStyle?: StyleProp<ViewStyle>;

    /**
     * Add an image as the heading with the image prop
@@ -497,9 +501,6 @@ export interface ElementObject {

 /**
 * Set the border styles for a component.
- *
- * @export
- * @interface InnerBorderStyleProperty
 */
 export interface InnerBorderStyleProperty {
    color?: string;
@@ -515,7 +516,6 @@ export interface ButtonGroupProps {
    /**
     * Method to update Button Group Index
     */
-    // onPress(): void;
    onPress(selectedIndex: number): void;

    /**
@@ -533,12 +533,12 @@ export interface ButtonGroupProps {
    /**
     * Specify styling for main button container
     */
-    containerStyle?: ViewStyle;
+    containerStyle?: StyleProp<ViewStyle>;

    /**
-     * inherited styling	object (style)	specify styling for button
+     * inherited styling	specify styling for button
     */
-    buttonStyle?: ViewStyle;
+    buttonStyle?: StyleProp<ViewStyle>;

    /**
     * Specify color for selected state of button
@@ -550,12 +550,12 @@ export interface ButtonGroupProps {
    /**
     * Specify specific styling for text
     */
-    textStyle?: TextStyle;
+    textStyle?: StyleProp<TextStyle>;

    /**
     * Specify specific styling for text in the selected state
     */
-    selectedTextStyle?: TextStyle;
+    selectedTextStyle?: StyleProp<TextStyle>;

    /**
     * inherited styling	object { width, color }	update the styling of the interior border of the list of buttons
@@ -583,19 +583,13 @@ export interface ButtonGroupProps {

    /**
     * Border radius for the container
-     *
-     * @type {number}
-     * @memberof ButtonGroupProps
     */
    containerBorderRadius?: number;

    /**
     * Styling for the final border edge
-     *
-     * @type {(ViewStyle | TextStyle)}
-     * @memberof ButtonGroupProps
     */
-    lastBorderStyle?: ViewStyle | TextStyle;
+    lastBorderStyle?: StyleProp<TextStyle | ViewStyle>;

    /**
     *
@@ -664,12 +658,12 @@ export interface CheckBoxProps {
    /**
     * Style of main container
     */
-    containerStyle?: ViewStyle;
+    containerStyle?: StyleProp<ViewStyle>;

    /**
-     * object (style)	style of text
+     * style of text
     */
-    textStyle?: TextStyle;
+    textStyle?: StyleProp<TextStyle>;

    /**
     * onLongPress function for checkbox
@@ -737,11 +731,8 @@ export interface DividerProps {
     * Style the divider
     *
     * @default {height: 1, backgroundColor: #e1e8ee}
-     *
-     * @type {ViewStyle}
-     * @memberof DividerProps
     */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
 }

 export class Divider extends React.Component<DividerProps, any> {}
@@ -749,25 +740,16 @@ export class Divider extends React.Component<DividerProps, any> {}
 export interface FormValidationMessageProps extends ViewProperties {
    /**
     * Style of the container
-     *
-     * @type {ViewStyle}
-     * @memberof FormValidationMessageProps
     */
-    containerStyle?: ViewStyle;
+    containerStyle?: StyleProp<ViewStyle>;

    /**
     * Style of the text within the label message
-     *
-     * @type {TextStyle}
-     * @memberof FormValidationMessageProps
     */
-    labelStyle?: TextStyle;
+    labelStyle?: StyleProp<TextStyle>;

    /**
     * Font family for the message
-     *
-     * @type {string}
-     * @memberof FormValidationMessageProps
     */
    fontFamily?: string;
 }
@@ -780,21 +762,21 @@ export interface FormInputProps extends TextInputProperties {
    /**
     * TextInput container styling
     */
-    containerStyle?: ViewStyle;
+    containerStyle?: StyleProp<ViewStyle>;

    /**
     * TextInput styling
     */
-    inputStyle?: TextStyle;
+    inputStyle?: StyleProp<TextStyle>;

    /**
-     * DEPRECATED
+     * @deprecated
     * Get ref of TextInput
     */
    textInputRef?(ref: TextInput): void;

    /**
-     * DEPRECATED
+     * @deprecated
     * Get ref of TextInput container
     */
    containerRef?(ref: any): void;
@@ -808,9 +790,6 @@ export interface FormInputProps extends TextInputProperties {
 export class FormInput extends React.Component<FormInputProps, any> {
    /**
     * Holds reference to the stored input.
-     *
-     * @type {TextInput}
-     * @memberof FormInput
     */
    input: TextInput;

@@ -841,12 +820,12 @@ export interface FormLabelProps extends ViewProperties {
    /**
     * Additional label container style
     */
-    containerStyle?: ViewStyle;
+    containerStyle?: StyleProp<ViewStyle>;

    /**
     * Additional label styling
     */
-    labelStyle?: TextStyle;
+    labelStyle?: StyleProp<TextStyle>;

    /**
     * Specify different font family
@@ -862,7 +841,7 @@ export interface GridProps extends ViewProperties {
    /**
     * Outer grid styling
     */
-    containerStyle?: ViewStyle;
+    containerStyle?: StyleProp<ViewStyle>;

    /**
     * Opacity on pressing
@@ -881,12 +860,10 @@ export interface GridProps extends ViewProperties {
 }

 /**
- * DEPRECATED
+ * @deprecated
 * Warning: Grid has been deprecated and will be removed in a future version of React Native Elements
 *
- * @export
- * @class Grid
- * @extends {React.Component<GridProps, any>}
+ * @see https://react-native-training.github.io/react-native-elements/API/grid
 */
 export class Grid extends React.Component<GridProps, any> {}

@@ -906,7 +883,7 @@ export interface SubGridProps extends ViewProperties {
    /**
     * Styling for the outer column or row
     */
-    containerStyle?: ViewStyle;
+    containerStyle?: StyleProp<ViewStyle>;

    /**
     * onPress method
@@ -915,21 +892,18 @@ export interface SubGridProps extends ViewProperties {
 }

 /**
- * DEPRECATED
+ * @deprecated
 * Warning: Row has been deprecated and will be removed in a future version of React Native Elements
- * @export
- * @class Row
- * @extends {React.Component<RowProps, any>}
+ * @see https://react-native-training.github.io/react-native-elements/API/grid/#row
 */
 export class Row extends React.Component<SubGridProps, any> {}

 /**
- * DEPRECATED
+ * @deprecated
 * Warning: Col has been deprecated and will be removed in a future version of React Native Elements
 *
- * @export
- * @class Col
- * @extends {React.Component<ColProps, any>}
+ * @see https://react-native-training.github.io/react-native-elements/API/grid/#column
+ *
 */
 export class Col extends React.Component<SubGridProps, any> {}

@@ -964,34 +938,30 @@ export interface HeaderProps extends ViewProperties {
    rightComponent?: HeaderSubComponent;

    /**
-     * string	sets backgroundColor of the parent component
+     * Sets backgroundColor of the parent component
     */
    backgroundColor?: string;

    /**
     * Styling for outer container
     */
-    outerContainerStyles?: ViewStyle;
+    outerContainerStyles?: StyleProp<ViewStyle>;

    /**
     * Styling for inner container
     */
-    innerContainerStyles?: ViewStyle;
+    innerContainerStyles?: StyleProp<ViewStyle>;
 }

 /**
 * Header component
 * @see https://react-native-training.github.io/react-native-elements/API/header/
- *
- * @export
- * @class Header
- * @extends {React.Component<HeaderProps, any>}
 */
 export class Header extends React.Component<HeaderProps, any> {}

 export interface IconProps {
    /**
-     * Name of icon (required)
+     * Name of icon
     */
    name: string;

@@ -1002,35 +972,35 @@ export interface IconProps {
    type?: IconType;

    /**
-     * Size of icon (optional)
+     * Size of icon
     * @default 26
     */
    size?: number;

    /**
-     * Color of icon (optional)
+     * Color of icon
     *
     * @default 'black'
     */
    color?: string;

    /**
-     * Additional styling to icon (optional)
+     * Additional styling to icon
     */
-    iconStyle?: ViewStyle | TextStyle;
+    iconStyle?: StyleProp<TextStyle | ViewStyle>;

    /**
-     * View if no onPress method is defined, TouchableHighlight if onPress method is defined	React Native component	update React Native Component (optional)
+     * 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 (optional)
+     * onPress method for button
     */
    onPress?(): void;

    /**
-     * onLongPress method for button (optional)
+     * onLongPress method for button
     */
    onLongPress?(): void;

@@ -1040,26 +1010,26 @@ export interface IconProps {
    underlayColor?: string;

    /**
-     * Reverses color scheme (optional)
+     * Reverses color scheme
     *
     * @default false
     */
    reverse?: boolean;

    /**
-     * Adds box shadow to button (optional)
+     * Adds box shadow to button
     *
     * @default false
     */
    raised?: boolean;

    /**
-     * Add styling to container holding icon (optional)
+     * Add styling to container holding icon
     */
-    containerStyle?: ViewStyle;
+    containerStyle?: StyleProp<ViewStyle>;

    /**
-     * Specify reverse icon color (optional)
+     * Specify reverse icon color
     *
     * @default 'white'
     */
@@ -1069,10 +1039,6 @@ export interface IconProps {
 /**
 * Icon component
 * @see https://react-native-training.github.io/react-native-elements/API/icons/
- *
- * @export
- * @class Icon
- * @extends {React.Component<IconProps, any>}
 */
 export class Icon extends React.Component<IconProps, any> {}

@@ -1081,16 +1047,12 @@ export interface ListProps extends ViewProperties {
     * Style the list container
     * @default '{marginTop: 20, borderTopWidth: 1, borderBottomWidth: 1, borderBottomColor: #cbd2d9}'
     */
-    containerStyle?: ViewStyle;
+    containerStyle?: StyleProp<ViewStyle>;
 }

 /**
 * List component
 * @see https://react-native-training.github.io/react-native-elements/API/lists/
- *
- * @export
- * @class List
- * @extends {React.Component<ListProps, any>}
 */
 export class List extends React.Component<ListProps, any> {}

@@ -1101,19 +1063,19 @@ export interface ListItemProps {
    avatar?: ImageURISource | ImageURISource[];

    /**
-     * Avatar styling (optional). This is the React Native Image style prop
+     * Avatar styling. This is the React Native Image style prop
     */
    avatarStyle?: ImageStyle;

    /**
-     * Avatar outer container styling (optional)
+     * Avatar outer container styling
     */
-    avatarContainerStyle?: ViewStyle;
+    avatarContainerStyle?: StyleProp<ViewStyle>;

    /**
-     * Avatar overlay container styling (optional)
+     * Avatar overlay container styling
     */
-    avatarOverlayContainerStyle?: ViewStyle;
+    avatarOverlayContainerStyle?: StyleProp<ViewStyle>;

    /**
     * Set chevron color
@@ -1124,22 +1086,22 @@ export interface ListItemProps {

    /**
     * View or TouchableHighlight if onPress method is added as prop
-     * Replace element with custom element (optional)
+     * Replace element with custom element
     */
    component?: React.ComponentClass;

    /**
-     * Additional main container styling (optional)
+     * Additional main container styling
     */
    containerStyle?: StyleProp<ViewStyle>;

    /**
-     * Additional wrapper styling (optional)
+     * Additional wrapper styling
     */
    wrapperStyle?: StyleProp<ViewStyle>;

    /**
-     * Define underlay color for TouchableHighlight (optional)
+     * Define underlay color for TouchableHighlight
     *
     * @default 'white'
     */
@@ -1154,19 +1116,19 @@ export interface ListItemProps {
    fontFamily?: string;

    /**
-     * Set if you do not want a chevron (optional)
+     * Set if you do not want a chevron
     *
     * @default false
     */
    hideChevron?: boolean;

    /**
-     * onPress method for link (optional)
+     * onPress method for link
     */
    onPress?(): void;

    /**
-     * onLongPress method for link (optional)
+     * onLongPress method for link
     */
    onLongPress?(): void;

@@ -1178,7 +1140,7 @@ export interface ListItemProps {
    roundAvatar?: boolean;

    /**
-     * Main title for list item, can be text or custom view (required)
+     * Main title for list item, can be text or custom view
     */
    title?: string;

@@ -1190,7 +1152,7 @@ export interface ListItemProps {
    titleNumberOfLines?: number;

    /**
-     * Additional title styling (optional)
+     * Additional title styling
     */
    titleStyle?: StyleProp<TextStyle>;

@@ -1200,7 +1162,7 @@ export interface ListItemProps {
    titleContainerStyle?: StyleProp<ViewStyle>;

    /**
-     * Subtitle text or custom view (optional)
+     * Subtitle text or custom view
     */
    subtitle?: string | JSX.Element;

@@ -1217,7 +1179,7 @@ export interface ListItemProps {
    subtitleContainerStyle?: StyleProp<ViewStyle>;

    /**
-     * Additional subtitle styling (optional)
+     * Additional subtitle styling
     */
    subtitleStyle?: StyleProp<TextStyle>;

@@ -1253,7 +1215,7 @@ export interface ListItemProps {
    label?: JSX.Element;

    /**
-     * Icon configuration for left icon (optional), either a name from the icon library (like material) or a React Native element like Image.
+     * 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
@@ -1279,7 +1241,7 @@ export interface ListItemProps {

    /**
     * {name: 'chevron-right'}	object {name, color, style, type} (type defaults to material icons) OR
-     * React Native element	icon configuration for right icon (optional), either a name from the icon library (like material) or a React Native element like Image.
+     * 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;
@@ -1393,12 +1355,12 @@ export interface ListItemProps {
    textInputSecure?: boolean;

    /**
-     * 	object (style)	Style for the input text
+     * 	Style for the input text
     */
    textInputStyle?: StyleProp<TextStyle>;

    /**
-     * 	object (style)	Style for the container surrounding the input text
+     * 	Style for the container surrounding the input text
     */
    textInputContainerStyle?: StyleProp<ViewStyle>;

@@ -1425,8 +1387,6 @@ export interface ListItemProps {
    /**
     * Add a badge to the ListItem by using this prop
     *
-     * @type {(BadgeProps | ElementObject)}
-     * @memberof ListItemProps
     */
    badge?: BadgeProps | ElementObject;
 }
@@ -1434,43 +1394,39 @@ export interface ListItemProps {
 /**
 * ListItem component
 * @see https://react-native-training.github.io/react-native-elements/API/lists/
- *
- * @export
- * @class ListItem
- * @extends {React.Component<ListItemProps, any>}
 */
 export class ListItem extends React.Component<ListItemProps, any> {}

 export interface ButtonInformation {
    title: string;
    icon: string;
-    buttonStyle?: ViewStyle;
+    buttonStyle?: StyleProp<ViewStyle>;
 }

 export interface PricingCardProps {
    /**
-     * Title (required)
+     * Title
     */
    title?: string;

    /**
-     * Price (required)
+     * Price
     */
    price: string;

    /**
-     * Color scheme for button & title (required)
+     * Color scheme for button & title
     */
    color: string;

    /**
-     * Pricing information (optional)
+     * Pricing information
     */
    info?: string[];

    /**
     * {title, icon, buttonStyle}
-     * button information (required)
+     * Button information
     */
    button: ButtonInformation;

@@ -1480,12 +1436,12 @@ export interface PricingCardProps {
    onButtonPress?(): void;

    /**
-     * Outer component styling (optional)
+     * Outer component styling
     */
    containerStyle?: StyleProp<ViewStyle>;

    /**
-     * Inner wrapper component styling (optional)
+     * Inner wrapper component styling
     */
    wrapperStyle?: StyleProp<ViewStyle>;

@@ -1522,4 +1478,90 @@ export interface PricingCardProps {
    buttonFont?: string;
 }

+/**
+ * PricingCard component
+ * @see https://react-native-training.github.io/react-native-elements/API/pricing/
+ */
 export class PricingCard extends React.Component<PricingCardProps, any> {}
+
+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<ViewStyle>;
+}
+
+/**
+ * Rating component
+ * @see https://react-native-training.github.io/react-native-elements/API/rating/
+ */
+export class Rating extends React.Component<RatingProps, any> {}
@@ -1,294 +1,288 @@
 import * as React from 'react';
 import {
-    ListView,
-    View,
-    StyleSheet,
-    TouchableNativeFeedback,
-    Image,
+  ListView,
+  View,
+  StyleSheet,
+  TouchableNativeFeedback,
+  Image
 } from 'react-native';
 import {
-    Button,
-    Text,
-    Badge,
-    Avatar,
-    Card,
-    ButtonGroup,
-    CheckBox,
-    Divider,
-    FormInput,
-    FormValidationMessage,
-    FormLabel,
-    Header,
-    Icon,
-    List,
-    ListItem,
-    PricingCard,
+  Button,
+  Text,
+  Badge,
+  Avatar,
+  Card,
+  ButtonGroup,
+  CheckBox,
+  Divider,
+  FormInput,
+  FormValidationMessage,
+  FormLabel,
+  Header,
+  Icon,
+  List,
+  ListItem,
+  PricingCard,
+  Rating
 } from 'react-native-elements';

 class TextTest extends React.Component<any, any> {
-    render() {
-        return (
-            <View>
-                <Text h1>Heading 1</Text>
-                <Text h2>Heading 2</Text>
-                <Text h3>Heading 3</Text>
-                <Text h4>Heading 4</Text>
-            </View>
-        );
-    }
+  render() {
+    return (
+      <View>
+        <Text h1>Heading 1</Text>
+        <Text h2>Heading 2</Text>
+        <Text h3>Heading 3</Text>
+        <Text h4>Heading 4</Text>
+      </View>
+    );
+  }
 }

 class AvatarTest extends React.Component<any, any> {
-    render() {
-        return (
-            <View>
-                <View>
-                    <Text style={AvatarStyles.title}>Avatars</Text>
-                    <Avatar
-                        small
-                        rounded
-                        source={{
-                            uri:
-                                'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
-                        }}
-                        onPress={() => console.log('Works!')}
-                        activeOpacity={0.7}
-                    />
-                    <Avatar
-                        medium
-                        source={{
-                            uri:
-                                'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg',
-                        }}
-                        onPress={() => console.log('Works!')}
-                        activeOpacity={0.7}
-                    />
-                    <Avatar
-                        large
-                        source={{
-                            uri:
-                                'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
-                        }}
-                        onPress={() => console.log('Works!')}
-                        activeOpacity={0.7}
-                    />
-                    <Avatar
-                        xlarge
-                        rounded
-                        source={{
-                            uri:
-                                'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
-                        }}
-                        onPress={() => console.log('Works!')}
-                        activeOpacity={0.7}
-                    />
-                </View>
+  render() {
+    return (
+      <View>
+        <View>
+          <Text style={AvatarStyles.title}>Avatars</Text>
+          <Avatar
+            small
+            rounded
+            source={{
+              uri:
+                'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg'
+            }}
+            onPress={() => console.log('Works!')}
+            activeOpacity={0.7}
+          />
+          <Avatar
+            medium
+            source={{
+              uri:
+                'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg'
+            }}
+            onPress={() => console.log('Works!')}
+            activeOpacity={0.7}
+          />
+          <Avatar
+            large
+            source={{
+              uri:
+                'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg'
+            }}
+            onPress={() => console.log('Works!')}
+            activeOpacity={0.7}
+          />
+          <Avatar
+            xlarge
+            rounded
+            source={{
+              uri:
+                'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg'
+            }}
+            onPress={() => console.log('Works!')}
+            activeOpacity={0.7}
+          />
+        </View>

-                <View>
-                    <Text style={AvatarStyles.title}>Avatar with initials</Text>
-                    <Avatar
-                        small
-                        rounded
-                        title="MT"
-                        onPress={() => console.log('Works!')}
-                        activeOpacity={0.7}
-                    />
-                    <Avatar
-                        medium
-                        title="BP"
-                        onPress={() => console.log('Works!')}
-                        activeOpacity={0.7}
-                    />
-                    <Avatar
-                        large
-                        title="LW"
-                        onPress={() => console.log('Works!')}
-                        activeOpacity={0.7}
-                    />
-                    <Avatar
-                        xlarge
-                        rounded
-                        title="CR"
-                        onPress={() => console.log('Works!')}
-                        activeOpacity={0.7}
-                    />
-                </View>
+        <View>
+          <Text style={AvatarStyles.title}>Avatar with initials</Text>
+          <Avatar
+            small
+            rounded
+            title="MT"
+            onPress={() => console.log('Works!')}
+            activeOpacity={0.7}
+          />
+          <Avatar
+            medium
+            title="BP"
+            onPress={() => console.log('Works!')}
+            activeOpacity={0.7}
+          />
+          <Avatar
+            large
+            title="LW"
+            onPress={() => console.log('Works!')}
+            activeOpacity={0.7}
+          />
+          <Avatar
+            xlarge
+            rounded
+            title="CR"
+            onPress={() => console.log('Works!')}
+            activeOpacity={0.7}
+          />
+        </View>

-                <View>
-                    <Text style={AvatarStyles.title}>Avatar with icons</Text>
-                    <Avatar
-                        small
-                        rounded
-                        icon={{ name: 'user' }}
-                        onPress={() => console.log('Works!')}
-                        activeOpacity={0.7}
-                        containerStyle={{
-                            flex: 2,
-                            marginLeft: 20,
-                            marginTop: 115,
-                        }}
-                    />
-                    <Avatar
-                        medium
-                        overlayContainerStyle={{ backgroundColor: 'blue' }}
-                        icon={{ name: 'meetup', color: 'red' }}
-                        onPress={() => console.log('Works!')}
-                        activeOpacity={0.7}
-                        containerStyle={{ flex: 3, marginTop: 100 }}
-                    />
-                    <Avatar
-                        large
-                        icon={{ name: 'rocket', color: 'orange' }}
-                        overlayContainerStyle={{ backgroundColor: 'white' }}
-                        onPress={() => console.log('Works!')}
-                        activeOpacity={0.7}
-                        containerStyle={{ flex: 4, marginTop: 75 }}
-                    />
-                    <Avatar
-                        xlarge
-                        rounded
-                        icon={{ name: 'home' }}
-                        onPress={() => console.log('Works!')}
-                        activeOpacity={0.7}
-                        containerStyle={{ flex: 5, marginRight: 60 }}
-                    />
-                </View>
-            </View>
-        );
-    }
+        <View>
+          <Text style={AvatarStyles.title}>Avatar with icons</Text>
+          <Avatar
+            small
+            rounded
+            icon={{ name: 'user' }}
+            onPress={() => console.log('Works!')}
+            activeOpacity={0.7}
+            containerStyle={{
+              flex: 2,
+              marginLeft: 20,
+              marginTop: 115
+            }}
+          />
+          <Avatar
+            medium
+            overlayContainerStyle={{ backgroundColor: 'blue' }}
+            icon={{ name: 'meetup', color: 'red' }}
+            onPress={() => console.log('Works!')}
+            activeOpacity={0.7}
+            containerStyle={{ flex: 3, marginTop: 100 }}
+          />
+          <Avatar
+            large
+            icon={{ name: 'rocket', color: 'orange' }}
+            overlayContainerStyle={{ backgroundColor: 'white' }}
+            onPress={() => console.log('Works!')}
+            activeOpacity={0.7}
+            containerStyle={{ flex: 4, marginTop: 75 }}
+          />
+          <Avatar
+            xlarge
+            rounded
+            icon={{ name: 'home' }}
+            onPress={() => console.log('Works!')}
+            activeOpacity={0.7}
+            containerStyle={{ flex: 5, marginRight: 60 }}
+          />
+        </View>
+      </View>
+    );
+  }
 }

 const AvatarStyles = StyleSheet.create({
-    title: {
-        fontSize: 30,
-        marginBottom: 10,
-    },
+  title: {
+    fontSize: 30,
+    marginBottom: 10
+  }
 });

 class BadgeTest extends React.Component<any, any> {
-    render() {
-        return (
-            <View>
-                <Badge value={3} textStyle={{ color: 'orange' }} />
+  render() {
+    return (
+      <View>
+        <Badge value={3} textStyle={{ color: 'orange' }} />

-                <Badge containerStyle={{ backgroundColor: 'violet' }}>
-                    <Text>User 1</Text>
-                </Badge>
+        <Badge containerStyle={{ backgroundColor: 'violet' }}>
+          <Text>User 1</Text>
+        </Badge>

-                <Badge onPress={() => console.log('pressed')} value="5" />
+        <Badge onPress={() => console.log('pressed')} value="5" />

-                <Badge component={TouchableNativeFeedback} value={10} />
-            </View>
-        );
-    }
+        <Badge component={TouchableNativeFeedback} value={10} />
+      </View>
+    );
+  }
 }

 class ButtonTest extends React.Component<any, any> {
-    handleButtonPress() {
-        console.log('I got pressed');
-    }
+  handleButtonPress() {
+    console.log('I got pressed');
+  }

-    render() {
-        return (
-            <View>
-                <Button
-                    title="BUTTON"
-                    onPress={() => this.handleButtonPress()}
-                />
+  render() {
+    return (
+      <View>
+        <Button title="BUTTON" onPress={() => this.handleButtonPress()} />

-                <Button
-                    raised
-                    icon={{ name: 'cached' }}
-                    title="BUTTON WITH ICON"
-                    onPress={() => this.handleButtonPress()}
-                />
+        <Button
+          raised
+          icon={{ name: 'cached' }}
+          title="BUTTON WITH ICON"
+          onPress={() => this.handleButtonPress()}
+        />

-                <Button
-                    large
-                    iconRight
-                    icon={{ name: 'code' }}
-                    title="LARGE WITH RIGHT ICON"
-                    onPress={() => this.handleButtonPress()}
-                />
+        <Button
+          large
+          iconRight
+          icon={{ name: 'code' }}
+          title="LARGE WITH RIGHT ICON"
+          onPress={() => this.handleButtonPress()}
+        />

-                <Button
-                    large
-                    icon={{ name: 'envira', type: 'font-awesome' }}
-                    title="LARGE WITH RIGHT ICON"
-                    onPress={() => this.handleButtonPress()}
-                />
+        <Button
+          large
+          icon={{ name: 'envira', type: 'font-awesome' }}
+          title="LARGE WITH RIGHT ICON"
+          onPress={() => this.handleButtonPress()}
+        />

-                <Button
-                    large
-                    icon={{
-                        name: 'squirrel',
-                        type: 'octicon',
-                        buttonStyle: ButtonStyles.someButtonStyle,
-                    }}
-                    title="OCTICON"
-                    onPress={() => this.handleButtonPress()}
-                />
-            </View>
-        );
-    }
+        <Button
+          large
+          icon={{
+            name: 'squirrel',
+            type: 'octicon',
+            buttonStyle: ButtonStyles.someButtonStyle
+          }}
+          title="OCTICON"
+          onPress={() => this.handleButtonPress()}
+        />
+      </View>
+    );
+  }
 }

 const ButtonStyles = StyleSheet.create({
-    someButtonStyle: {
-        color: 'pink',
-    },
+  someButtonStyle: {
+    color: 'pink'
+  }
 });

 class CardTest extends React.Component<any, any> {
-    render() {
-        const users = [
-            {
-                name: 'brynn',
-                avatar:
-                    'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
-            },
-        ];
+  render() {
+    const users = [
+      {
+        name: 'brynn',
+        avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg'
+      }
+    ];

-        return (
-            <View>
-                {/* implemented without image with header */}
-                <Card title="CARD WITH DIVIDER">
-                    {users.map((u, i) => {
-                        return (
-                            <View key={i}>
-                                <Image
-                                    resizeMode="cover"
-                                    source={{ uri: u.avatar }}
-                                />
-                                <Text>{u.name}</Text>
-                            </View>
-                        );
-                    })}
-                </Card>
+    return (
+      <View>
+        {/* implemented without image with header */}
+        <Card title="CARD WITH DIVIDER">
+          {users.map((u, i) => {
+            return (
+              <View key={i}>
+                <Image resizeMode="cover" source={{ uri: u.avatar }} />
+                <Text>{u.name}</Text>
+              </View>
+            );
+          })}
+        </Card>

-                {/* implemented with Text and Button as children */}
-                <Card title="HELLO WORLD" image={require('../images/pic2.jpg')}>
-                    <Text style={{ marginBottom: 10 }}>
-                        The idea with React Native Elements is more about
-                        component structure than actual design.
-                    </Text>
-                    <Button
-                        onPress={() => {}}
-                        icon={{ name: 'code' }}
-                        backgroundColor="#03A9F4"
-                        fontFamily="Lato"
-                        buttonStyle={{
-                            borderRadius: 0,
-                            marginLeft: 0,
-                            marginRight: 0,
-                            marginBottom: 0,
-                        }}
-                        title="VIEW NOW"
-                    />
-                </Card>
-            </View>
-        );
-    }
+        {/* implemented with Text and Button as children */}
+        <Card title="HELLO WORLD" image={require('../images/pic2.jpg')}>
+          <Text style={{ marginBottom: 10 }}>
+            The idea with React Native Elements is more about component
+            structure than actual design.
+          </Text>
+          <Button
+            onPress={() => {}}
+            icon={{ name: 'code' }}
+            backgroundColor="#03A9F4"
+            fontFamily="Lato"
+            buttonStyle={{
+              borderRadius: 0,
+              marginLeft: 0,
+              marginRight: 0,
+              marginBottom: 0
+            }}
+            title="VIEW NOW"
+          />
+        </Card>
+      </View>
+    );
+  }
 }

 const component1 = () => <Text>Hello</Text>;
@@ -296,203 +290,232 @@ const component2 = () => <Text>World</Text>;
 const component3 = () => <Text>ButtonGroup</Text>;

 class ButtonGroupTest extends React.Component<any, any> {
-    state = {
-        selectedIndexStrings: 2,
-        selectedIndexObjects: 2,
-    };
+  state = {
+    selectedIndexStrings: 2,
+    selectedIndexObjects: 2
+  };

-    updateIndexStrings = (selectedIndexStrings: number) => {
-        this.setState({ selectedIndexStrings });
-    }
+  updateIndexStrings = (selectedIndexStrings: number) => {
+    this.setState({ selectedIndexStrings });
+  }

-    updateIndexObjects = (selectedIndexObjects: number) => {
-        this.setState({ selectedIndexObjects });
-    }
+  updateIndexObjects = (selectedIndexObjects: number) => {
+    this.setState({ selectedIndexObjects });
+  }

-    render() {
-        const buttonStrings = ['Hello', 'World', 'Buttons'];
-        const buttonObjects = [
-            { element: component1 },
-            { element: component2 },
-            { element: component3 },
-        ];
+  render() {
+    const buttonStrings = ['Hello', 'World', 'Buttons'];
+    const buttonObjects = [
+      { element: component1 },
+      { element: component2 },
+      { element: component3 }
+    ];

-        const { selectedIndexStrings, selectedIndexObjects } = this.state;
-        return (
-            <View>
-                <ButtonGroup
-                    onPress={this.updateIndexStrings}
-                    selectedIndex={selectedIndexStrings}
-                    buttons={buttonStrings}
-                    containerStyle={{ height: 100 }}
-                />
-                <ButtonGroup
-                    onPress={this.updateIndexObjects}
-                    selectedIndex={selectedIndexObjects}
-                    buttons={buttonObjects}
-                    containerStyle={{ height: 100 }}
-                    component={TouchableNativeFeedback}
-                />
-            </View>
-        );
-    }
+    const { selectedIndexStrings, selectedIndexObjects } = this.state;
+    return (
+      <View>
+        <ButtonGroup
+          onPress={this.updateIndexStrings}
+          selectedIndex={selectedIndexStrings}
+          buttons={buttonStrings}
+          containerStyle={{ height: 100 }}
+        />
+        <ButtonGroup
+          onPress={this.updateIndexObjects}
+          selectedIndex={selectedIndexObjects}
+          buttons={buttonObjects}
+          containerStyle={{ height: 100 }}
+          component={TouchableNativeFeedback}
+        />
+      </View>
+    );
+  }
 }

 interface CheckBoxTestState {
-    checked: boolean;
+  checked: boolean;
 }
 class CheckBoxTest extends React.Component<any, CheckBoxTestState> {
-    state = {
-        checked: false,
-    };
-    render() {
-        return (
-            <View>
-                <CheckBox title="Click Here" checked={this.state.checked} />
+  state = {
+    checked: false
+  };
+  render() {
+    return (
+      <View>
+        <CheckBox title="Click Here" checked={this.state.checked} />

-                <CheckBox
-                    center
-                    title="Click Here"
-                    checked={this.state.checked}
-                />
+        <CheckBox center title="Click Here" checked={this.state.checked} />

-                <CheckBox
-                    center
-                    title="Click Here"
-                    checkedIcon="dot-circle-o"
-                    uncheckedIcon="circle-o"
-                    checked={this.state.checked}
-                />
+        <CheckBox
+          center
+          title="Click Here"
+          checkedIcon="dot-circle-o"
+          uncheckedIcon="circle-o"
+          checked={this.state.checked}
+        />

-                <CheckBox
-                    center
-                    title="Click Here to Remove This Item"
-                    iconRight
-                    iconType="material"
-                    checkedIcon="clear"
-                    uncheckedIcon="add"
-                    checkedColor="red"
-                    checked={this.state.checked}
-                />
-            </View>
-        );
-    }
+        <CheckBox
+          center
+          title="Click Here to Remove This Item"
+          iconRight
+          iconType="material"
+          checkedIcon="clear"
+          uncheckedIcon="add"
+          checkedColor="red"
+          checked={this.state.checked}
+        />
+      </View>
+    );
+  }
 }

 class DividerTest extends React.Component {
-    render() {
-        return <Divider style={{ backgroundColor: 'blue' }} />;
-    }
+  render() {
+    return <Divider style={{ backgroundColor: 'blue' }} />;
+  }
 }

 class FormTest extends React.Component<any, any> {
-    input: FormInput;
-    onChangeText(text: string) {
-        console.log('changed text', text);
-    }
+  input: FormInput;
+  onChangeText(text: string) {
+    console.log('changed text', text);
+  }

-    storeFormInput = (input: any) => {
-        this.input = input;
-    }
+  storeFormInput = (input: any) => {
+    this.input = input;
+  }

-    focus() {
-        this.input.focus();
-    }
+  focus() {
+    this.input.focus();
+  }

-    render() {
-        return (
-            <View>
-                <FormLabel>Name</FormLabel>
-                <FormInput
-                    ref={this.storeFormInput}
-                    onChangeText={this.onChangeText}
-                />
-                <FormValidationMessage>Error message</FormValidationMessage>
-            </View>
-        );
-    }
+  render() {
+    return (
+      <View>
+        <FormLabel>Name</FormLabel>
+        <FormInput ref={this.storeFormInput} onChangeText={this.onChangeText} />
+        <FormValidationMessage>Error message</FormValidationMessage>
+      </View>
+    );
+  }
 }

 class HeaderTest extends React.Component<any, any> {
-    render() {
-        return (
-            <View>
-                <Header
-                    leftComponent={<View />}
-                    rightComponent={{ icon: 'home', style: { color: '#fff' } }}
-                />
-                <Header>
-                    <View />
-                    <View />
-                    <View />
-                </Header>
-            </View>
-        );
-    }
+  render() {
+    return (
+      <View>
+        <Header
+          leftComponent={<View />}
+          rightComponent={{ icon: 'home', style: { color: '#fff' } }}
+        />
+        <Header>
+          <View />
+          <View />
+          <View />
+        </Header>
+      </View>
+    );
+  }
 }

 class IconTest extends React.Component<any, any> {
-    render() {
-        return (
-            <View>
-                <Icon name="rowing" />
-                <Icon name="g-translate" color="#00aced" />
-                <Icon name="sc-telegram" type="evilicon" color="#517fa4" />
-                <Icon
-                    reverse
-                    name="ios-american-football"
-                    type="ionicon"
-                    color="#517fa4"
-                />
-                <Icon
-                    raised
-                    name="heartbeat"
-                    type="font-awesome"
-                    color="#f50"
-                    onPress={() => console.log('hello')}
-                />
-            </View>
-        );
-    }
+  render() {
+    return (
+      <View>
+        <Icon name="rowing" />
+        <Icon name="g-translate" color="#00aced" />
+        <Icon name="sc-telegram" type="evilicon" color="#517fa4" />
+        <Icon
+          reverse
+          name="ios-american-football"
+          type="ionicon"
+          color="#517fa4"
+        />
+        <Icon
+          raised
+          name="heartbeat"
+          type="font-awesome"
+          color="#f50"
+          onPress={() => console.log('hello')}
+        />
+      </View>
+    );
+  }
 }

 class ListTest extends React.Component<any, any> {
-    list = [
-        {
-            title: 'Appointments',
-            icon: 'av-timer',
-        },
-        {
-            title: 'Trips',
-            icon: 'flight-takeoff',
-        },
-    ];
-
-    render() {
-        return (
-            <List>
-                {this.list.map((item, i) => (
-                    <ListItem
-                        key={i}
-                        title={item.title}
-                        leftIcon={{ name: item.icon }}
-                    />
-                ))}
-            </List>
-        );
+  list = [
+    {
+      title: 'Appointments',
+      icon: 'av-timer'
+    },
+    {
+      title: 'Trips',
+      icon: 'flight-takeoff'
    }
+  ];
+
+  render() {
+    return (
+      <List>
+        {this.list.map((item, i) => (
+          <ListItem key={i} title={item.title} leftIcon={{ name: item.icon }} />
+        ))}
+      </List>
+    );
+  }
 }

 class PricingCardTest extends React.Component {
-    render() {
-        return (
-            <PricingCard
-                color="#4f9deb"
-                title="Free"
-                price="$0"
-                info={['1 User', 'Basic Support', 'All Core Features']}
-                button={{ title: 'GET STARTED', icon: 'flight-takeoff' }}
-            />
-        );
-    }
+  render() {
+    return (
+      <PricingCard
+        color="#4f9deb"
+        title="Free"
+        price="$0"
+        info={['1 User', 'Basic Support', 'All Core Features']}
+        button={{ title: 'GET STARTED', icon: 'flight-takeoff' }}
+      />
+    );
+  }
+}
+
+class RatingTest extends React.Component {
+  ratingCompleted(rating: number) {
+    console.log('Rating is: ' + rating);
+  }
+
+  render() {
+    return (
+      <View>
+        <Rating
+          showRating
+          onFinishRating={this.ratingCompleted}
+          style={{ paddingVertical: 10 }}
+        />
+
+        <Rating
+          showRating
+          type="star"
+          fractions={1}
+          startingValue={3.6}
+          readonly
+          imageSize={40}
+          onFinishRating={this.ratingCompleted}
+          style={{ paddingVertical: 10 }}
+        />
+
+        <Rating
+          type="heart"
+          ratingCount={3}
+          fractions={2}
+          startingValue={1.57}
+          imageSize={40}
+          onFinishRating={this.ratingCompleted}
+          showRating
+          style={[{ paddingVertical: 10 }]}
+        />
+      </View>
+    );
+  }
 }