ListItem.js

import React, {PropTypes, Component} from 'react';
import {
  ScrollView,
  View,
  StyleSheet,
  TouchableHighlight,
  Image,
  Platform,
  Switch,
  TextInput,
  DatePickerAndroid,
  DatePickerIOS, 
  TimePickerAndroid,
  TouchableWithoutFeedback,
  TouchableOpacity,
  Animated,
  Modal,
  Button
} from 'react-native';
import Badge from '../badge/badge';
import Icon from '../icons/Icon';
import Text from '../text/Text';
import colors from '../config/colors';
import fonts from '../config/fonts';
import normalize from '../helpers/normalizeText';
import Moment from 'moment';

let styles;

const FORMATS = {
  'date': 'YYYY-MM-DD',
  'datetime': 'YYYY-MM-DD HH:mm',
  'time': 'HH:mm'
};
const SUPPORTED_ORIENTATIONS = ['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'];

class ListItem extends Component {
  constructor(props) {
    super(props);
    var date = new Date();
    this.state = {
      currentDateTime: date.getFullYear() + (date.getMonth() + 1) + date.getDay() + " " + date.getHours() + ":" + date.getMinutes(),
      currentTime: this._formatTime(date.getHours(), + date.getMinutes()),
      currentHour: date.getHours(),
      currentMinute: date.getMinutes(),
      is24Hour: false,
      date: date,
      timeZoneOffsetInHours: (-1) * (date).getTimezoneOffset() / 60,
      modalVisible: false,
      animatedHeight: new Animated.Value(0)
    }
  }
  /**
   * 
   */
  showPickerAndroid = async(options) => {
    try {
      var newState = {};
      const {action, year, month, day} = await DatePickerAndroid.open(options);
      if (action === DatePickerAndroid.dismissedAction) {
        newState['currentText'] = 'dismissed';
      } else {
        var date = new Date(year, month, day);
        newState['currentText'] = date.toLocaleDateString();
        newState['currentDate'] = date;
        this
          .props
          .textInputDateOnChange(date);
      }
      this.setState(newState);
    } catch ({code, message}) {
      console.warn(`Error `, message);
    }
  };
  /**
   * 
   */
  showTimePickerAndroid = async(options) => {
    try {
      const {action, minute, hour} = await TimePickerAndroid.open(options);
      var newState = {};
      if (action === TimePickerAndroid.timeSetAction) {
        newState['currentTime'] = this._formatTime(hour, minute);
        newState['currentHour'] = hour;
        newState['currentMinute'] = minute;
        this
          .props
          .textInputTimeOnChange(this._formatTime(hour, minute));
      } else if (action === TimePickerAndroid.dismissedAction) {
        newState['currentText'] = 'dismissed';
      }
      this.setState(newState);
    } catch ({code, message}) {
      console.warn(`Error `, message);
    }
  };
  /**
   * no prefer this style method
  onDateChange = (date) => {
    this.setState({ date: date });
  };
  **/
  onDateChange(date) {
    this.setState({date: date});
    return date;
  }
  /**
   *
   */
  onTimezoneChange = (event) => {
    var offset = parseInt(event.nativeEvent.text, 10);
    if (isNaN(offset)) {
      return;
    }
    this.setState({timeZoneOffsetInHours: offset});
  };
  /**
   * Format Time
   *  @param {string} hour
   *  @param {string} minute
   */
  _formatTime(hour, minute) {
    return hour + ':' + (minute < 10
      ? '0' + minute
      : minute);
  }
  /**
   * Format Date Time
   */
  _formatDateTime(date, hour, minute) {
    return "on done yet";
  }
  /**
   * Format Date. Either using default or pre-defined
   * @param {object} date
   * @param {type} dateType
   * @param {object} format
   * @returns {string} date
   */
  _formatDate(date, type, format) {

    dateParse = null;

    // if js can do like this..  could be shorter  FORMATS.{type} ?
    var dateParse = null;
    // use pre defined  format
    console.log(typeof format);
    console.log(FORMATS.date);
    if (typeof format === 'undefined') {
  
      switch (type) {
        case "date":
          dateParse = Moment(date, FORMATS.date).format(FORMATS.date);
          break;
        case "datetime":
          dateParse = Moment(date, FORMATS.datetime).format(FORMATS.datatime);
          break;
        case "time":
          dateParse = Moment(date, FORMATS.time).format(FORMATS.time);
          break;
        case "hour":
          if (date.length == 1) {
            dateParse = "0".date;
          } else {
            dataParse = date;
          }
          break;
        case "minute":
          if (date.length == 1) {
            dateParse = "0".date;
          } else {
            dataParse = date;
          }
          break;
        default:
          dateParse = "1.4 : unknown custom date";
      }
    } else {
      if(format.length  ==0 ) {
  switch (type) {
        case "date":
          dateParse = Moment(date, FORMATS.date).format(FORMATS.date);
          break;
        case "datetime":
          dateParse = Moment(date, FORMATS.datetime).format(FORMATS.datatime);
          break;
        case "time":
          dateParse = Moment(date, FORMATS.time).format(FORMATS.time);
          break;
        case "hour":
          if (date.length == 1) {
            dateParse = "0".date;
          } else {
            dataParse = date;
          }
          break;
        case "minute":
          if (date.length == 1) {
            dateParse = "0".date;
          } else {
            dataParse = date;
          }
          break;
        default:
          dateParse = "1.4 : unknown custom date";
      } 
      }else{
      switch (type) {
        case "date":
          dateParse = Moment(date, format).format(format);
          
          break;
        case "datetime":
          dateParse = Moment(date, format).format(format);
          
          break;
        case "time":
          dateParse = Moment(date, format).format(format);
          
          break;
        case "hour":
          if (date.length == 1) {
            dateParse = "0".date;
          } else {
            dataParse = date;
          }
          break;
        case "minute":
          if (date.length == 1) {
            dateParse = "0".date;
          } else {
            dataParse = date;
          }
          break;
        default:
          dateParse = "2.4 unknown custom date";
      }
    }
    }
    return dateParse;
  }
  /**
   * TextInput Focus
   * @returns {void}
   */
  focus() {
    const ref = this.props.textInputRef;
    this
      .refs[ref]
      .focus();
  }
  /**
   * TextInput Blur
   * @returns {void}
   */
  blur() {
    const ref = this.props.textInputRef;
    this
      .refs[ref]
      .blur();
  }
  /**
   * Switch Value
   * @param {bool} value
   */
  _onSwitchChange(value) {
    this
      .props
      .switchOnChange(value);
  }
  setModalVisible(visible) {
    const {height, duration} = this.props;

    // slide animation
    if (visible) {
      this.setState({modalVisible: visible});
      return Animated.timing(
        this.state.animatedHeight,
        {
          toValue: height,
          duration: duration
        }
      ).start();
    } else {
      return Animated.timing(
        this.state.animatedHeight,
        {
          toValue: 0,
          duration: duration
        }
      ).start(() => {
        this.setState({modalVisible: visible});
      });
    }
  }
  /**
   * IOS only
   */
  _onPressDate(){
    this.setModalVisible(true);
  }
  /**
   * IOS only
   * Date Picker Modal Cancel Button Event
   */
  _onPressCancel() {
    this.setModalVisible(false);
    if (typeof this.props.onCloseModal === 'function') {
      this
        .props
        .onCloseModal();
    }
  }
  /**
   * IOS only
   * Date Picker Modal Cancel Button Event
   */
  _onPressConfirm() {
    this._onDatePicked();
    this.setModalVisible(false);

    if (typeof this.props.onCloseModal === 'function') {
      this
        .props
        .onCloseModal();
    }
  }
  /**
   * IOS onlya
   */
  _onDatePicked() {
    if (typeof this.props.onDateChange === 'function') {
      this
        .props
        .textInputDateOnChange(this.state.date);
    }
  }
  _onDateTimePicked() {
    if (typeof this.props.onDateTimeChange === 'function') {
      this
        .props
        .textInputDateTimeOnChange(this._formatDateTime(hour, minute));

    }
  }
  _onTimePicked() {
    if (typeof this.props.onTimeChange === 'function') {
      this
        .props
        .textInputTimeOnChange(this._formatTime(hour, minute));

    }
  }
  /**
   *  Render
   */
  render() {
    const {
      onPress,
      title,
      leftIcon,
      rightIcon,
      leftIconContainerStyle,
      avatarStyle,
      underlayColor,
      subtitle,
      subtitleStyle,
      containerStyle,
      wrapperStyle,
      titleStyle,
      titleContainerStyle,
      hideChevron,
      chevronColor,
      chevronOnPress,
      roundAvatar,
      component,
      fontFamily,
      rightTitle,
      rightTitleContainerStyle,
      rightTitleStyle,
      subtitleContainerStyle,
      badge,
      badgeContainerStyle,
      badgeTextStyle,
      label,
      onLongPress,
      switchButton,
      onSwitch,
      switchDisabled,
      switchOnTintColor,
      switchThumbTintColor,
      switchTintColor,
      switched,
      textInput,
      textInputRef,
      textInputSecureTextEntry,
      textInputAutoCapitalize,
      textInputAutoCorrect,
      textInputFocus,
      textInputAutoFocus,
      textInputEditable,
      textInputKeyboardType,
      textInputMaxLength,
      textInputMultiline,
      textInputOnChangeText,
      textInputOnFocus,
      textInputOnBlur,
      textInputOnSubmitEditing,
      textInputSelectTextOnFocus,
      textInputReturnKeyType,
      textInputValue,
      textInputStyle,
      textInputContainerStyle,
      textInputPlaceHolder,
      textInputHour,
      textInputHourFormat,
      textInputMinute,
      textInputMinuteFormat,
      textInputTime,
      textInputTimeFormat,
      textInputTimeIs24Hour,
      textInputDate,
      textInputDateFormat,
      textInputDateMode,
      textInputDateMinDate,
      textInputDateMaxDate,
      textInputDateTime,
      textInputDateTimeFormat,
      textInputDateButtonCancelText,
      textInputDateButtonConfirmText,
      ...attributes
    } = this.props;
    let {avatar} = this.props;

    if (typeof avatar === 'string') {
      avatar = {
        uri: avatar
      }
    }
    if (typeof textInputDate === "string") {
      // just double recheck from  props..
      if (textInputDate.length > 0) {
        // check valid date and is format
        if (Moment(textInputDate, textInputDateFormat, true).isValid()) {
          this.setState({currentDate: textInputDate});
        } else {
          console.log("Date give is not in right format. Date : " + textInputDate + "  Format " + textInputDateFormat);
        }
      }
    }
    if (typeof textInputDateTime === "string") {
      // just double recheck from  props..
      if (textInputDateTime.length > 0) {
        // check valid date and is format
        if (Moment(textInputDateTime, textInputDateTimeFormat, true).isValid()) {
          this.setState({currentDateTime: textInputDateTime});
        } else {
          console.log("Date give is not in right format. Date : " + textInputDateTime + "  Format " + textInputDateTimeFormat);
        }
      }
    }
    if (typeof textInputHour === "string") {
      if (textInputHour.length > 0) {
        if (Moment(textInputHour, textInputHourFormat, true).isValid()) {
          this.setState({currentHour: textInputHour});
        }
      }
    }
    // unknown yet output should be
    if (typeof textInputMinute === "string") {
      if (textInputMinute.length > 0) {
        if (Moment(textInputHour, textInputTimeFormat, true).isValid()) {
          this.setState({currentMinute: textInputMinute});
        }
      }
    }
    if (typeof textInputTimeIs24Hour === "string") {
      // just double recheck from  props..
      if (textInputTimeIs24Hour.length > 0) {
        if (textInputTimeIs24Hour == "true" || textInputTimeIs24Hour == "false" || textInputTimeIs24Hour == true || textInputTimeIs24Hour == false) {
          this.setState({is24Hour: textInputTimeIs24Hour});
        }
      }
    }
    return (
      <View
        onLongPress={onLongPress}
        onPress={onPress}
        underlayColor={underlayColor}
        style={[
        styles.container, containerStyle && containerStyle
      ]}
        {...attributes}>
        <View
          style={[
          styles.wrapper, wrapperStyle && wrapperStyle
        ]}>
          {leftIcon && leftIcon.name && (
            <View
              style={[
              styles.iconStyle, leftIconContainerStyle && leftIconContainerStyle
            ]}><Icon
              type={leftIcon.type}
              iconStyle={[
              styles.icon, leftIcon.style && leftIcon.style
            ]}
              name={leftIcon.name}
              color={leftIcon.color || colors.grey4}
              size={leftIcon.size || 24}/>
            </View>
          )
}
          {avatar && (<Image
            style={[
            styles.avatar, roundAvatar && {
              borderRadius: 17
            },
            avatarStyle && avatarStyle
          ]}
            source={avatar}/>)
}
          <View style={styles.titleSubtitleContainer}>
            <View style={titleContainerStyle}>
              {(title && (typeof title === 'string' || typeof title === 'number'))
                ? (
                  <Text
                    style={[
                    styles.title, !leftIcon && {
                      marginLeft: 10
                    },
                    titleStyle && titleStyle,
                    fontFamily && {
                      fontFamily
                    }
                  ]}>{title}</Text>
                )
                : (
                  <View>
                    {title}
                  </View>
                )}
            </View>
            <View style={subtitleContainerStyle}>
              {(subtitle && (typeof subtitle === 'string' || typeof subtitle === 'number'))
                ? (
                  <Text
                    style={[
                    styles.subtitle, !leftIcon && {
                      marginLeft: 10
                    },
                    subtitleStyle && subtitleStyle,
                    fontFamily && {
                      fontFamily
                    }
                  ]}>{subtitle}</Text>
                )
                : (
                  <View>
                    {subtitle}
                  </View>
                )}
            </View>
          </View>
          {rightTitle && (rightTitle !== '') && !textInput && (
            <View style={[styles.rightTitleContainer, rightTitleContainerStyle]}>
              <Text style={[styles.rightTitleStyle, rightTitleStyle]}>{rightTitle}</Text>
            </View>
          )
}
          {textInput && (
            <View style={textInputContainerStyle}>
              <TextInput
                ref={textInputRef}
                secureTextEntry={textInputSecureTextEntry}
                underlineColorAndroid='transparent'
                style={textInputStyle}
                defaultValue={rightTitle}
                value={textInputValue}
                autoCapitalize={textInputAutoCapitalize}
                autoCorrect={textInputAutoCorrect}
                autoFocus={textInputAutoFocus}
                focus={textInputFocus}
                editable={textInputEditable}
                keyboardType={textInputKeyboardType}
                maxLength={textInputMaxLength}
                multiline={textInputMultiline}
                onChangeText={textInputOnChangeText}
                onFocus={textInputOnFocus}
                onBlur={textInputOnBlur}
                onSubmitEditing={textInputOnSubmitEditing}
                selectTextOnFocus={textInputSelectTextOnFocus}
                returnKeyType={textInputReturnKeyType}
                placeholder={textInputPlaceHolder}/>
            </View>
          )
}

          {Platform.OS === 'android' && textInputDate && (
            <View style={textInputContainerStyle}>
              <TouchableWithoutFeedback
                onPress={this
                .showPickerAndroid
                .bind(this, {
                  date: this.state.currentDate,
                  mode: textInputDateMode,
                  minDate: textInputDateMinDate,
                  maxDate: textInputDateMaxDate
                })}>
                <View style={styles.datePickerStyle}>
                  <Text>{this._formatDate(this.state.currentDate, "date", textInputDateFormat)}</Text>
                </View>
              </TouchableWithoutFeedback>
            </View>
          )
}
          {Platform.OS === 'android' && textInputDateTime && (
            <View style={textInputContainerStyle}>
              <Text>Sorry not supported yet by react native
              </Text>
            </View>
          )
}
          {Platform.OS === 'android' && textInputTime && (
            <View style={textInputContainerStyle}>
              <TouchableWithoutFeedback
                onPress={this
                .showTimePickerAndroid
                .bind(this, {
                  hour: this.state.currentHour,
                  minute: this.state.currentMinute,
                  is24Hour: this.state.is24Hour
                })}>
                <View style={styles.datePickerStyle}>
                  <Text>{this.state.currentTime}</Text>
                </View>
              </TouchableWithoutFeedback>
            </View>
          )
}

          {Platform.OS === 'ios' && textInputDate && (
            <TouchableHighlight onPress={this._onPressDate.bind(this)}>
            <View style={{flex:1}}>
                 <View style={styles.datePickerStyle}>
                  <Text>{this._formatDate(this.state.date, "date", textInputDateFormat)}</Text>
                </View>
                <Modal
                  transparent={true}
                  animationType="none"
                  visible={this.state.modalVisible}
                  supportedOrientations={SUPPORTED_ORIENTATIONS}
                  onRequestClose={() => {
                  this.setModalVisible(false);
                }}>
                  <View style={{
                    flex: 1
                  }}>
                    <TouchableHighlight
                      style={styles.datePickerMask}
                      activeOpacity={1}
                      underlayColor={'#00000077'}
                      onPress={this
                      ._onPressCancel
                      .bind(this)}>
                      <TouchableHighlight
                        underlayColor={'#fff'}
                        style={{
                        flex: 1
                      }}>
                        <Animated.View
                          style={[
                          styles.datePickerCon, {
                            height: this.state.animatedHeight
                          }
                        ]}>
                          <DatePickerIOS
                            date={this.state.date}
                            mode='date'
                            minimumDate={textInputDateMinDate}
                            maximumDate={textInputDateMaxDate}
                            onDateChange={(date) => this.setState({date: date})}
                            style={[styles.datePicker]}/>
                          <Button
                            onPress
                            ={this
                            ._onPressCancel
                            .bind(this)}
                            color='#ccc'
                            title={textInputDateButtonCancelText}/>
                          <Button
                            onPress
                            ={this
                            ._onPressConfirm
                            .bind(this)}
                            color='#efefef'
                            title={textInputDateButtonConfirmText}/>
                        </Animated.View>
                      </TouchableHighlight>
                    </TouchableHighlight>
                  </View>
                </Modal>
              </View>
            </TouchableHighlight>
          )
}

          {Platform.OS === 'ios' && textInputDateTime && (
             <TouchableHighlight onPress={this._onPressDate.bind(this)}>
            <View style={{flex:1}}>
                 <View style={styles.datePickerStyle}>
                  <Text>{this._formatDate(this.state.date, "datetime", textInputDateFormat)}</Text>
                </View>
                <Modal
                  transparent={true}
                  animationType="none"
                  visible={this.state.modalVisible}
                  supportedOrientations={SUPPORTED_ORIENTATIONS}
                  onRequestClose={() => {
                  this.setModalVisible(false);
                }}>
                  <View style={{
                    flex: 1
                  }}>
                    <TouchableHighlight
                      style={styles.datePickerMask}
                      activeOpacity={1}
                      underlayColor={'#00000077'}
                      onPress={this
                      ._onPressCancel
                      .bind(this)}>
                      <TouchableHighlight
                        underlayColor={'#fff'}
                        style={{
                        flex: 1
                      }}>
                        <Animated.View
                          style={[
                          styles.datePickerCon, {
                            height: this.state.animatedHeight
                          }
                        ]}>
                          <DatePickerIOS
                            date={this.state.date}
                            mode='datetime'
                            minimumDate={textInputDateMinDate}
                            maximumDate={textInputDateMaxDate}
                            onDateChange={(date) => this.setState({date: date})}
                            style={[styles.datePicker]}/>
                          <Button
                            onPress
                            ={this
                            ._onPressCancel
                            .bind(this)}
                            color='#ccc'
                            title={textInputDateButtonCancelText}/>
                          <Button
                            onPress
                            ={this
                            ._onPressConfirm
                            .bind(this)}
                            color='#efefef'
                            title={textInputDateButtonConfirmText}/>
                        </Animated.View>
                      </TouchableHighlight>
                    </TouchableHighlight>
                  </View>
                </Modal>
              </View>
            </TouchableHighlight>
          )
}
          {Platform.OS === 'ios' && textInputTime && (
             <TouchableHighlight onPress={this._onPressDate.bind(this)}>
            <View style={{flex:1}}>
                 <View style={styles.datePickerStyle}>
                  <Text>{this._formatDate(this.state.date, "time", textInputDateFormat)}</Text>
                </View>
                <Modal
                  transparent={true}
                  animationType="none"
                  visible={this.state.modalVisible}
                  supportedOrientations={SUPPORTED_ORIENTATIONS}
                  onRequestClose={() => {
                  this.setModalVisible(false);
                }}>
                  <View style={{
                    flex: 1
                  }}>
                    <TouchableHighlight
                      style={styles.datePickerMask}
                      activeOpacity={1}
                      underlayColor={'#00000077'}
                      onPress={this
                      ._onPressCancel
                      .bind(this)}>
                      <TouchableHighlight
                        underlayColor={'#fff'}
                        style={{
                        flex: 1
                      }}>
                        <Animated.View
                          style={[
                          styles.datePickerCon, {
                            height: this.state.animatedHeight
                          }
                        ]}>
                          <DatePickerIOS
                            date={this.state.date}
                            mode='time'
                            minimumDate={textInputDateMinDate}
                            maximumDate={textInputDateMaxDate}
                            onDateChange={(date) => this.setState({date: date})}
                            style={[styles.datePicker]}/>
                          <Button
                            onPress
                            ={this
                            ._onPressCancel
                            .bind(this)}
                            color='#ccc'
                            title={textInputDateButtonCancelText}/>
                          <Button
                            onPress
                            ={this
                            ._onPressConfirm
                            .bind(this)}
                            color='#efefef'
                            title={textInputDateButtonConfirmText}/>
                        </Animated.View>
                      </TouchableHighlight>
                    </TouchableHighlight>
                  </View>
                </Modal>
              </View>
            </TouchableHighlight>
          )
}
          {!hideChevron && (
            <View style={styles.chevronContainer} onPress={chevronOnPress}>
              <Icon
                type={rightIcon.type}
                iconStyle={rightIcon.style}
                size={28}
                name={rightIcon.name || 'chevron-right'}
                color={rightIcon.color || chevronColor}/>
            </View>
          )
}
          {switchButton && hideChevron && (
            <View style={styles.switchContainer}>
              <Switch
                onValueChange={this
                ._onSwitchChange
                .bind(this)}
                style={{
                marginBottom: 10
              }}
                disabled={switchDisabled}
                onTintColor={switchOnTintColor}
                thumbTintColor={switchThumbTintColor}
                tintColor={switchTintColor}
                value={switched}/>
            </View>
          )
}
          {badge && !rightTitle && (<Badge badge={badge}/>)
}
          {label && label
}
        </View>
      </View>
    )
  }
};

ListItem.defaultProps = {
  underlayColor: 'white',
  chevronColor: colors.grey4,
  rightIcon: {
    name: 'chevron-right'
  },
  hideChevron: false,
  roundAvatar: false,
  textInputEditable: true
}

ListItem.propTypes = {
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
  avatar: PropTypes.object,
  icon: PropTypes.any,
  onPress: PropTypes.func,
  rightIcon: PropTypes.object,
  underlayColor: PropTypes.string,
  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
  subtitleStyle: PropTypes.any,
  containerStyle: PropTypes.any,
  wrapperStyle: PropTypes.any,
  titleStyle: PropTypes.any,
  titleContainerStyle: PropTypes.any,
  hideChevron: PropTypes.bool,
  chevronColor: PropTypes.string,
  roundAvatar: PropTypes.bool,
  badge: PropTypes.any,
  switchButton: PropTypes.bool,
  onSwitch: PropTypes.func,
  switchDisabled: PropTypes.bool,
  switchOnTintColor: PropTypes.string,
  switchThumbTintColor: PropTypes.string,
  switchTintColor: PropTypes.string,
  switched: PropTypes.bool,
  textInput: PropTypes.bool,
  textInputAutoCapitalize: PropTypes.bool,
  textInputAutoCorrect: PropTypes.bool,
  textInputAutoFocus: PropTypes.bool,
  textInputEditable: PropTypes.bool,
  textInputKeyboardType: PropTypes.oneOf([
    'default',
    'email-address',
    'numeric',
    'phone-pad',
    'ascii-capable',
    'numbers-and-punctuation',
    'url',
    'number-pad',
    'name-phone-pad',
    'decimal-pad',
    'twitter',
    'web-search'
  ]),
  textInputMaxLength: PropTypes.number,
  textInputMultiline: PropTypes.bool,
  textInputOnChangeText: PropTypes.func,
  textInputOnFocus: PropTypes.func,
  textInputOnBlur: PropTypes.func,
  textInputSelectTextOnFocus: PropTypes.bool,
  textInputReturnKeyType: PropTypes.string,
  textInputValue: PropTypes.string,
  textInputStyle: PropTypes.any,
  textInputContainerStyle: PropTypes.any,
  textInputDate: PropTypes.any,
  textInputDateMinDate: PropTypes.any,
  textInputDateMaxDate: PropTypes.any,
  textInputDateTime: PropTypes.any,
  textInputTime: PropTypes.any,
  textInputHour: PropTypes.number,
  textInputMinute: PropTypes.number,
  textInputHourFormat: PropTypes.string,  
  textInputMinuteFormat: PropTypes.string,
  textInputTimeIs24Hour: PropTypes.bool,
  textInputDateOnChange: PropTypes.func,
  textInputDateMode: PropTypes.oneOf(['default', 'calendar', 'spinner', 'default']),
  textInputDateIosMode: PropTypes.oneOf(['date', 'time', 'datetime']),
  switchOnChange: PropTypes.func,
  chevronOnPress: PropTypes.func,
  onDateChange: React.PropTypes.func,
  onOpenModal: React.PropTypes.func,
  onCloseModal: React.PropTypes.func
};

styles = StyleSheet.create({
  avatar: {
    width: 34,
    height: 34
  },
  container: {
    paddingTop: 10,
    paddingRight: 10,
    paddingBottom: 10,
    borderBottomColor: '#ededed',
    borderBottomWidth: 1,
    backgroundColor: 'transparent'
  },
  wrapper: {
    flexDirection: 'row',
    marginLeft: 10
  },
  iconStyle: {
    flex: 0.3,
    justifyContent: 'center',
    alignItems: 'center'
  },
  icon: {
    marginRight: 8
  },
  title: {
    fontSize: normalize(14),
    color: colors.grey1
  },
  subtitle: {
    color: colors.grey3,
    fontSize: normalize(12),
    marginTop: 1,
    ...Platform.select({
      ios: {
        fontWeight: '600'
      },
      android: {
        ...fonts.android.bold
      }
    })
  },
  titleSubtitleContainer: {
    justifyContent: 'center',
    flex: 1
  },
  chevronContainer: {
    flex: 0.3,
    alignItems: 'flex-end',
    justifyContent: 'center'
  },
  switchContainer: {
    flex: 0.15,
    alignItems: 'flex-end',
    justifyContent: 'center',
    marginRight: 5
  },
  rightTitleContainer: {
    flex: 1,
    alignItems: 'flex-end',
    justifyContent: 'center'
  },
  rightTitleStyle: {
    marginRight: 5,
    color: colors.grey4
  },
  datePickerStyle: {
    alignItems: 'flex-start',
    flex: 1
  },
  datePickerMask: {
    flex: 1,
    alignItems: 'flex-end',
    flexDirection: 'row',
    backgroundColor: '#00000077'
  },
  datePickerCon: {
    backgroundColor: '#fff',
    height: 0,
    overflow: 'hidden'
  },
  datePicker: {
    marginTop: 42,
    borderTopColor: '#ccc',
    borderTopWidth: 1
  },
  inputTextDateCancelButton:{
    color:'#b71c1c'
  },
  inputTextDateConfirmButton:{
    color:'#40c4ff'
  }
});

export default ListItem;