React-native-datepicker with Formik

Issue

I'm trying to use Formik to get values from React-native-datepicker on form submission, however, I only get empty and can't seem to figure out how to pass the values through. I'm fairly new to react-native and Formik and would appreciate any help. I'm just trying to get the results logged on form submission. I have tried react hook form as well without much success.

My App.js code:

import React, {useState} from 'react';
import {View, Text, StyleSheet, TextInput, Button, Alert} from 'react-native';
import { Formik } from 'formik';
import DatePicker from 'react-native-datepicker';
import { DateInput } from 'react-native-date-input';


const App = props =>{
const [date, setDate] = useState(new Date())
const [date2, setDate2] = useState(new Date())
return(
   <Formik
     initialValues={{ date: '', date2: '' }}
     onSubmit={values => console.log(values)}
   >
     {({ onDateChange, handleBlur, handleSubmit, values }) => (
<View>
  <Text style={styles.selectDate}>Lab Collection Date</Text>
<DatePicker
    style={{width: 200, alignSelf: 'center'}}
    date={date}
    mode="date"
    placeholder="select date"
    format="DD MMM YYYY"
    minDate="01 Jan 2021"
    maxDate="30 Dec 2025"
    confirmBtnText="Confirm"
    cancelBtnText="Cancel"
    customStyles={{
      dateIcon: {
        position: 'absolute',
        left: 0,
        top: 4,
        marginLeft: 0
      },
      dateInput: {
        marginLeft: 36,
        borderRadius:4
      }
      // ... You can check the source to find the other keys.
    }}
   onDateChange={(newDate) => {setDate(newDate)}}
   value={values.date}
   onBlur={handleBlur('date')}
  />

    <Text style={styles.selectDate}>Symptom Onset Date</Text>
  <DatePicker
      style={{width: 200, alignSelf: 'center'}}
      date={date2}
      mode="date"
      placeholder="select date"
      format="DD MMM YYYY"
      minDate="01 Jan 2021"
      maxDate="30 Dec 2025"
      confirmBtnText="Confirm"
      cancelBtnText="Cancel"
      customStyles={{
        dateIcon: {
          position: 'absolute',
          left: 0,
          top: 4,
          marginLeft: 0
        },
        dateInput: {
          marginLeft: 36,
          borderRadius:4
        }
        // ... You can check the source to find the other keys.
      }}
     onDateChange={(newDate2) => setDate2(newDate2)}
     value={values.date2}
    />
<Button onPress={handleSubmit} title="Submit" />
    </View>
         )}
       </Formik>
  )
  };

  const styles = StyleSheet.create({
  selectDate:{
  fontFamily:'open-sans',
  fontSize:20,
  marginTop: 50,
  marginBottom:10,
  alignSelf:'center',
  color:'red'
  },
  datebox:{
  alignSelf:'center',
  height:50,
  width:500,
  }
  });



 export default App;

Solution

use setFieldValue('date1', value) from formik onDateChange of DatePicker.

const App = props => {
  const [date, setDate] = useState(new Date())
  const [date2, setDate2] = useState(new Date())
  return (
    <Formik
      initialValues={{ date: '', date2: '' }}
      onSubmit={values => console.log(values)}
    >
      {({ onDateChange, handleBlur, handleSubmit, setFieldValue, values }) => (
        <View>
          <Text style={styles.selectDate}>Lab Collection Date</Text>
          <DatePicker
            style={{ width: 200, alignSelf: 'center' }}
            date={date}
            mode="date"
            placeholder="select date"
            format="DD MMM YYYY"
            minDate="01 Jan 2021"
            maxDate="30 Dec 2025"
            confirmBtnText="Confirm"
            cancelBtnText="Cancel"
            customStyles={{
              dateIcon: {
                position: 'absolute',
                left: 0,
                top: 4,
                marginLeft: 0
              },
              dateInput: {
                marginLeft: 36,
                borderRadius: 4
              }
              // ... You can check the source to find the other keys.
            }}
            onDateChange={(newDate) => { setFieldValue('date', newDate) }}
            value={values.date}
            onBlur={handleBlur('date')}
          />

          <Text style={styles.selectDate}>Symptom Onset Date</Text>
          <DatePicker
            style={{ width: 200, alignSelf: 'center' }}
            date={date2}
            mode="date"
            placeholder="select date"
            format="DD MMM YYYY"
            minDate="01 Jan 2021"
            maxDate="30 Dec 2025"
            confirmBtnText="Confirm"
            cancelBtnText="Cancel"
            customStyles={{
              dateIcon: {
                position: 'absolute',
                left: 0,
                top: 4,
                marginLeft: 0
              },
              dateInput: {
                marginLeft: 36,
                borderRadius: 4
              }
              // ... You can check the source to find the other keys.
            }}
            onDateChange={(newDate2) => setFieldValue('date2', newDate2)}
            value={values.date2}
          />
          <Button onPress={handleSubmit} title="Submit" />
        </View>
      )}
    </Formik>
  )
};

const styles = StyleSheet.create({
  selectDate: {
    fontFamily: 'open-sans',
    fontSize: 20,
    marginTop: 50,
    marginBottom: 10,
    alignSelf: 'center',
    color: 'red'
  },
  datebox: {
    alignSelf: 'center',
    height: 50,
    width: 500,
  }
});



export default App;

Answered By - Erdenezaya