Untitled

import React, {useEffect, useState} from 'react';
import {Text, View, TouchableOpacity, Platform} from 'react-native';
import MaterialCommunityIconsI from 'react-native-vector-icons/MaterialCommunityIcons';
import {
  heightPercentageToDP as hp,
  widthPercentageToDP as wp,
} from 'react-native-responsive-screen';
import R from '../../../../res/R';
import GlobalStyle from '../Global.style';
import styles from './styles/JSPopUp.styles';
import DateTimePicker from '@react-native-community/datetimepicker';
import DateTimePickerModal from 'react-native-modal-datetime-picker';

const TimeField = props => {
  const [showTimePicker, setShowTimePicker] = useState(false);

  const handleConfirm = date => {
    props.timeChange(date);
    setShowTimePicker(false);
  };

  const handleCancel = () => {
    setShowTimePicker(false);
  };

  return (
    <View style={{flex: 0.48, alignSelf: 'flex-start'}}>
      <TouchableOpacity
        style={styles.timeBtn}
        onPress={() => {
          setShowTimePicker(!showTimePicker);
        }}
      >
        <Text
          style={[
            GlobalStyle.textMedium,
            GlobalStyle.important,
            !props.conform && {color: R.colors.error},
            {alignSelf: 'center'},
          ]}
        >
          {props.date?.hrs}
        </Text>
        <View
          style={[
            styles.iconFormClock,
            !props.conform && {backgroundColor: R.colors.error},
          ]}
        >
          <MaterialCommunityIconsI name="clock" size={30} color="#FFF" />
        </View>
        {showTimePicker && (
          <DateTimePickerModal
            value={props.date?.date}
            mode="time"
            isVisible={showTimePicker}
            onConfirm={handleConfirm}
            onCancel={handleCancel}
            locale="fr-fr"
            cancelTextIOS="Annuler"
            confirmTextIOS="Confirmer"
          />
        )}
      </TouchableOpacity>
      {!props.conform && (
        <Text
          style={[
            GlobalStyle.text,
            {color: R.colors.error, marginTop: hp('1%')},
          ]}
        >
          {props.conformText}
        </Text>
      )}
    </View>
  );
};

/**Return true si IOS false sinon */
const IsIOS = () => {
  if (Platform.OS === 'ios') return true;
  return false;
};

export default TimeField;