{React Native} Resetting Formik form after submit

Question

I am stuck at resetting my form after it has been submitted.

Here is what I have

  const PostEvent = () =>{

        //Omitted code for brevity. 

return(
    <Formik
         initialValues ={{user: userName.currentUser.displayName, description: '',datePosted: new Date(), location: '', eventDate: '', title: ''}}
         onSubmit ={(values, {resetForm}) =>{
                 firebase.firestore().collection('PostedFunEvents').add({
                     datePosted: values.datePosted.toDateString(),
                     description: values.description, 
                     eventDate: date.toDateString(),
                     eventTime: date.toTimeString(),
                     location: values.location,
                     title: values.title,
                     user: firebase.auth().currentUser.displayName,
                     userId : firebase.auth().currentUser.uid
                     });
                 resetForm({values:''})
                 }}> 
         {props =>(

         <ScrollView keyboardShouldPersistTaps='always'>
         <DismissKeyBoard>
         <View style={{flex:1}}>
             <View  style={styles.form}><Text  style={styles.text}>Pick a place for the event</Text></View>
             <View style= {{paddingTop:20}}>
                 <GoogleAutocomplete 
                     placeholder = 'Insert place to post about '
                     onPress={(data, details = null) => {
                             {props.values.location = data.description}
                         }}>     
                 </GoogleAutocomplete>
             </View >

                <View style={styles.form}>    

                 <Text style={styles.text}>{userName.currentUser.displayName}</Text>
                 <TextInput
                     placeholder= 'Title of the event'
                     onChangeText = {props.handleChange('title')} 
                     style={styles.text}/>
                 <TextInput
                     placeholder= 'Description (e.g This is located...)'
                     multiline={true}
                     onChangeText = {props.handleChange('description')}
                     values = {props.values.description} 
                     style={styles.textBox}/>

                 <Text  style={styles.text} >Click on the below icons to pick a time and a date for the event</Text>

                 <DateTimeImage onPress={showTimepicker} name = 'alarm'>Time?</DateTimeImage> 
                 <DateTimeImage onPress={showDatepicker} name = 'calendar'>Date?</DateTimeImage> 

                  {show && (<DateTimePicker onChange={onChange} value = {date} mode = {mode}></DateTimePicker>)}

                 <Button onPress={props.handleSubmit}>Submit</Button>

                 </View>    

         </View>       
         </DismissKeyBoard>     
         </ScrollView>
         )}
     </Formik> 
 )
}

This task should be pretty trivial, but I cannot seem to have it work. I have looked at many tutorials and SO posts, and they all seem to have the same idea, which is to pass a callback reset function to the onSubmit prop of the <Formik> component. Anyone has any idea of what I could try?

Thanks in advance.

Answer 1

When you reset the form the values should be of the format of initialValues. You can take out the initalValues as an object and pass it on to reset form

const initialValues = {
      user: userName.currentUser.displayName, 
      description: '',
      datePosted: new Date(), 
      location: '', 
      eventDate: '', 
      title: ''
}

..
<Formik
     initialValues ={initialValues}
     onSubmit ={(values, {resetForm}) =>{
             firebase.firestore().collection('PostedFunEvents').add({
                 datePosted: values.datePosted.toDateString(),
                 description: values.description, 
                 eventDate: date.toDateString(),
                 eventTime: date.toTimeString(),
                 location: values.location,
                 title: values.title,
                 user: firebase.auth().currentUser.displayName,
                 userId : firebase.auth().currentUser.uid
                 });
             resetForm({values: initialValues})
             }}> 

Linked github issue