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.

score 5 · Accepted Answer · answered Oct 09 '21 at 14:50

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>
    )
}

whenever I use useRef or useState. I am encountering this error. Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. — Turan Bicav, Oct 09 '21 at 15:42
Hooks work only in functional components . if you are using class component, then instead of useRef you can use React.createRef() check [here](https://stackoverflow.com/a/62499129/9790809) ```js this.formikRef = React.createRef() innerRef={this.formikRef} ``` — nitin varda, Oct 09 '21 at 16:09

handlesubmit in react native formik outside of formik

1 Answers1