handlesubmit in react native formik outside of formik

Question

I want to use the TouchableOpacity that I use in formik outside of formik.I don't know how I can use handleSubmit' outside formik's function.

how can i do it without using useFormik

}
_handleSubmit = (values) =>{

  const user = firebase.auth().currentUser.uid;
  if(user){
    const profileData = firebase.database().ref('kullaniciBilgiler/'+`${user}`);
    profileData.update({
      age:values.age,
      cinsiyet:values.cinsiyet,
      email:values.email,
      job:values.job,
      liveCity:values.liveCity,
      name:values.name,
      school:values.school,
      schoolLevel:values.schoolLevel,
      surname:values.surname,
    }).then(()=>console.log('işlem tamam usta'))
  }
  alert('başarılı dirim!');
  

}



  render() {



    return (

      <SafeAreaView style={styles.container} >
       
        <View style={styles.profilePhoto}>
        <TouchableOpacity  onPress={this.selectFile} >
        <Image
            source={{
              
              uri:  this.state.fileUri,   
             // this.state.urlPP
            }}
            style={styles.profPhoto}
          />
           </TouchableOpacity>
          
         
        </View>
        
        <View style={styles.profileDetails}>
        <View style={{flex:1, alignSelf:'center', justifyContent:'center'}}>
       <FlatList style={{width:'100%',}}
          data={this.state.list} 
          keyExtractor={(item)=>item.key}
          renderItem={({item})=>{
             return(
            
              <Formik
              initialValues={{
               
                val : item.val
                
               
              }}
              onSubmit={this._handleSubmit}
              validationSchema={
                Yup.object().shape({
                 
                  val: Yup.string().required(<Text style={{ color: 'red' }}>basarısız {item.key}</Text>),
                  

                  
  
                })
              }
            >
              {
                ({
                  values,
                  handleSubmit,
                  isValid,
                  isSubmitting,
                  errors,
                  handleChange
                }) => (
                <View style={{flexDirection:'column',
                width:windowWidth,
                paddingHorizontal:20,
                paddingVertical:10}}>
                   <Text style={styles.ppText}>{item.key}</Text> 
                   <TextInput
                   
                   defaultValue={values=item.val}
                   style={styles.input}
                   onChangeText={handleChange(item.key)}
                   
                  
                   ></TextInput>
                   {(errors.val) && <Text>{errors.val}</Text>}
                  
              
                <TouchableOpacity //I want to get this button out of the formik
              //disabled={!isValid || isSubmitting}
              onPress={handleSubmit}
             
              >
                <Text style={{textAlign:'center'}}>GÜNCELLE</Text>
              </TouchableOpacity>
              </View>
                 )

                 
                }
                 
              </Formik>
                )
             }}/>
     </View>       
     <TouchableOpacity 
              //disabled={!isValid || isSubmitting}
              onPress={this}
              
              >
                <Text style={{textAlign:'center'}}>GÜNCELLE</Text>
              </TouchableOpacity>
   </View>
                   
      </SafeAreaView>
      
   

I want to use the TouchableOpacity that I use in formik outside of formik.I don't know how I can use handleSubmit' outside formik's function.

Answer 1

You can use "useRef" on formik component.

Later you can use that reference in any function and can call formik methods.

Formik has an innerRef prop where you can pass the variable you created using useRef.

import React,{useRef} from 'react'
import { View, Text,TextInput, Button } from 'react-native'
import { Formik} from 'formik'

export default function Example(props) {
    const formikRef = useRef(null)
    const initialValues = {
        email:''
    }
    const submitForm = () =>{
        formikRef.current.submitForm()
    }

    return (
        <View>

            <Formik
            innerRef={formikRef}
                initialValues={initialValues}
                onSubmit={values => console.log(values)}
            >
                {({ handleChange, handleBlur, handleSubmit, values }) => (
                <View>
                    <TextInput
                    onChangeText={handleChange('email')}
                    onBlur={handleBlur('email')}
                    value={values.email}
                    />
                    
                </View>
                )}
            </Formik>


            <Button title="submit" onPress={submitForm} />
        </View>
    )
}