how can i display the selected time from a timepicker in a textinput react native

Question

I used this timepicker my objective is to select a time from the picker and display it in my text inputs everything is working fine up until I select the time it won't show and gives me an error that text input value has to be a string can anyone tell me what I'm doing wrong here is my code so far

import React, { useState } from 'react';
import { View, TextInput, Text, Platform, Button } from 'react-native';
import DateTimePickerModal from 'react-native-modal-datetime-picker';

const AttendanceMain = () => {
  const [showPicker, setShowPicker] = useState(false);
  const [selectedTime, setSelectedTime] = useState('');

  const showTimePicker = () => {
    setShowPicker(true);
  };

  const hideTimePicker = () => {
    setShowPicker(false);
  };

  const handleConfirm = (time) => {
    setSelectedTime(time);
    hideTimePicker();
  };

  return (
    <View>
      <Text>From:</Text>
      <TextInput
        placeholder="00:00"
        keyboardType="numeric"
        onFocus={showTimePicker}
        value={selectedTime}
        onChange={handleConfirm}
      />
      <Text>To:</Text>
      <TextInput
        placeholder="00:00"
        keyboardType="numeric"
        onFocus={showTimePicker}
        value={selectedTime}
        onChange={handleConfirm}
      />
      <DateTimePickerModal
        isVisible={showPicker}
        mode="time"
        is24Hour={true}
        onConfirm={handleConfirm}
        onCancel={hideTimePicker}
      />
    </View>
  );
};

export default AttendanceMain;

Answer 1

Why don't you use react-native-datetimepicker/datetimepicker

Working Example

and Implement it like this

import React, { useState } from 'react';
import { View, Button, Platform, Text, TextInput } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

const App = () => {
  const [From, setFrom] = useState(new Date());
  const [To, setTo] = useState(new Date());
  const [mode, setMode] = useState('date');
  const [show, setShow] = useState(false);
  const [currentSetting, setcurrentSetting] = useState('from');

  const onChange = (event, selectedDate) => {
    if (currentSetting === 'from') {
      const currentDate = selectedDate || From;
      setShow(Platform.OS === 'ios');
      setFrom(currentDate);
    } else {
      const currentDate = selectedDate || To;
      setShow(Platform.OS === 'ios');
      setTo(currentDate);
    }
  };

  const showTimepicker = (current) => {
    setShow(true);
    setcurrentSetting(current);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <View>
        <Text>From:</Text>
        <TextInput
          placeholder="00:00"
          keyboardType="numeric"
          onFocus={() => showTimepicker('from')}
          value={From.toLocaleTimeString()}
        />
        <Text>To:</Text>
        <TextInput
          placeholder="00:00"
          keyboardType="numeric"
          onFocus={() => showTimepicker('to')}
          value={To.toLocaleTimeString()}
        />
      </View>

      {show && (
        <DateTimePicker
          testID="dateTimePicker"
          value={From}
          mode={'time'}
          is24Hour={true}
          display="default"
          onChange={onChange}
        />
      )}
    </View>
  );
};

export default App;