How to set value in formik?

Question

I am working with a functional component in react native, and I want to store the image URI in the initial state of Formik.

I am getting the Image URI in the _pickimage function but I am stuck in how to pass that to Formik's initial state.

How I can set the URI value to the initial state.

and

if there a way to store other custom values from functional state to Formik initial state?

import React, { useState } from 'react';
import { View, TextInput, Picker, Text, Button } from 'react-native';
import { globalStyles } from '../styles/global'
import { Formik } from "formik";
import * as ImagePicker from 'expo-image-picker';
import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';

export default function form(props) {
    const { register } = props
    const getPermissionAsync = async () => {
        if (Constants.platform.ios) {
            const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
            if (status !== 'granted') {
                alert('Sorry, we need camera roll permissions to make this work!');
            }
        }
    }
    const _pickImage = async () => {
        getPermissionAsync();
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1
        });
        if (!result.cancelled) {
            console.log(result.uri)
         // Getting Image URI value here
        }
    }
    return (      
            <View >
                <Formik
                    initialValues={
                        {
                            image: '',                      
                        }}

                    onSubmit={(values, actions) => {                      
                            register(values);          
                            console.log(values);
                            actions.resetForm(); 
                    }}                    
                >
                    {
                        (formikprops) => (
                            <View>
                                <Button
                                    title="image"
                                    icon="add-a-photo" mode="contained"
                                    onPress={() => { _pickImage(formikprops.handleChange('image')) }}
                                />
                                {formikprops.values.image && formikprops.values.image.length > 0 ?
                                    <Image source={{ uri: formikprops.values.image }} style={{ width: 200, height: 200 }} /> : null}

                                <Button title="submit" color="coral" onPress={formikprops.handleSubmit} />
                            </View>
                        )
                    }
                </Formik>

            </View>

    )
}

Answer 1

You can make use of setFieldValue function from formik like

const _pickImage = async (setFieldValue, field) => {
        getPermissionAsync();
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1
        });
        if (!result.cancelled) {
            console.log(result.uri)
         // Getting Image URI value here
           setFieldValue(field, result.uri)
        }
    }

    ----

    <Button
        title="image"
        icon="add-a-photo" mode="contained"
        onPress={() => { _pickImage(formikprops.setFieldValue, 'image') }}
    />

Answer 2

I'm using MUI v5 and useFormik hook. I had to access the setFieldValue form formik object to make it work.

Below is excerpt from my code.

const formik = useFormik({
  initialValues: {
    car: '',
  },
  validationSchema: carSchema,
  onSubmit: (values) => {},
});

... 

<Autocomplete
   id="autocomplete"
   options={cars}
   getOptionLabel={(option) => `${option.code} - ${option.label}`}
   renderOption={(props, option) => (
     <Box component="li" {...props}>
       {option.code} - {option.label}
     </Box>
   )}
   onChange={(e, value) => {
     formik.setFieldValue(
     'car',
     `${value.code} - ${value.name}`,
     );
   }}
   renderInput={(params) => (
   <TextField
     {...params}
     id="textField"
     name="cars"
     label="Cars"
     onChange={formik.handleChange}
     onBlur={formik.handleBlur}
     inputProps={{
       ...params.inputProps,
       autoComplete: 'new-password',
     }}
     error={formik.touched['car'] && Boolean(formik.errors['car'])}
     helperText={formik.touched['car'] && formik.errors['car']}
   />
  )}
/>