React Native Formik use with react redux (ReferenceError: Can't Find Variable: title)

Question

I suspect I'm having a problem with my onSubmit function. The error stated above is what I encounter when I run the application.

I have tried to change my onSubmit function to take "title" as the payload, but that too did not work

Assistance would greatly be appreciated.

addAuctionForm:

import React, {Component} from 'react'
import { TextInput, Button } from 'react-native-paper'
import { View } from 'react-native'
import { connect} from 'react-redux'
import { Formik } from 'formik'

import { addAuction} from '../../actions/index'


function mapDispatchToProps(dispatch) {
    return {
        addAuction: auction => dispatch(addAuction(auction))
    }
}

class ConnectedForm extends Component {
    constructor(props) {
        super(props)
        this.state = {
            title: ''
        }
        
    }
    
    render() {
        return (
            <Formik
                onSubmit={() => addAuction(auction)}
            >
                {({ handleChange, handleSubmit, values}) => (
                    <View>
                        <TextInput
                        onChangeText={handleChange('title')}
                        value={auction.title}
                        />
                        <Button onPress={handleSubmit} title="SUBMIT"/>
                    </View>     
                )}
            </Formik>
        );
    }
}

const Form = connect(null, mapDispatchToProps)(ConnectedForm)

export default Form

action:

import { ADD_AUCTION } from '../constants/action-types'

export function addAuction(payload) {
    return { type: 'ADD_AUCTION', payload}
}

reducer:

import {ADD_AUCTION} from '../constants/action-types';

const initialState = {
    auctions: []
}

function rootReducer(state = initialState, action) {

    if (action.type === ADD_AUCTION) {
        return Object.assign({}, state, {
            auctions: state.auctions.concat(action.payload)
        })
    }
    return state
}

export default rootReducer;

Answer 1

The lib you are using ( react-native-paper ) and Formik are not directly compatible. You won't be able to use the handle* props directly.

Your best bet is to use setFieldValue and submitForm directly:

            <Formik
                onSubmit={() => addAuction(auction)}
            >
                {({ setFieldValue, submitForm, values}) => (
                    <View>
                        <TextInput
                        onChangeText={v => setFieldValue('title', v)}
                        value={auction.title}
                        />
                        <Button onPress={() => submitForm()} title="SUBMIT"/>
                    </View>     
                )}
            </Formik>