Picker doesnt pass the value to props

[nimabk82]

I can get all the values like email and password in console.log except selected value for picker

import React from 'react';
import { Text, View ,StyleSheet, Button, TextInput } from 'react-native';
import { TextField } from 'react-native-material-textfield';
import { compose } from 'recompose';
import { Formik } from 'formik';
import Yup from 'yup';
import makeInputGreatAgain, {
    withNextInputAutoFocusForm,
    withNextInputAutoFocusInput,
    withPickerValues
} from 'react-native-formik';

export class MaterialTextInput extends React.PureComponent {
    // Your custom input needs a focus function for `withNextInputAutoFocus` to work
    focus() {
        this.input.focus();
    }

    render() {
        const { error, touched, ...props } = this.props;
        //
         const displayError = !!error && touched;
         const errorColor = 'rgb(239, 51, 64)';

        return (
            <View>
                <TextField
                    ref={input => (this.input = input)}
                    labelHeight={12}
                    baseColor={displayError ? errorColor : '#1976D2'}
                    tintColor="#2196F3"
                    textColor="#212121"
                    {...props}
                />
                <Text
                    style={{
                        textAlign: 'right',
                        color: displayError ? errorColor : 'transparent',
                        height: 20,
                    }}
                >
                    {error}
                </Text>
            </View>
        );
    }
}

const MyInput = compose(makeInputGreatAgain, withNextInputAutoFocusInput)(MaterialTextInput);
const Form = withNextInputAutoFocusForm(View);
const MyPicker = withPickerValues(TextInput);

const validationSchema = Yup.object().shape({
    email: Yup.string()
        .required('please! email?')
        .email("well that's not an email"),
    password: Yup.string()
        .required()
        .min(2, 'pretty sure this will be hacked'),
});

export default props => (
    <Formik
        onSubmit={values => console.log(values)}
        validationSchema={validationSchema}
        render={props => {
            return (
                <Form>
                    <MyInput label="Email" name="email" type="email" />
                    <MyInput label="Password" name="password" type="password" />
                    <MyInput label="First Name" name="firstName" type="name" />
                    <MyInput label="Last Name" name="lastName" type="name" />
                    <MyPicker
                        name="gender"
                        values={[{ label: 'male', value: 'Mr' }, { label: 'female', value: 'Mrs' }]}
                    />
                    <Button onPress={props.handleSubmit} title="SUBMIT" />
                   
                </Form>
            );
        }}
    />
);

[ckorhonen]

I'm seeing a similar thing with 1.4.1.

• Tapping the text field opens up the PickerModal and I can see my values. Selecting one dismisses the modal, but does not set the value on the component, it remains blank.
• Setting a default value as a prop looks up the correct label for the component and displays it, still unable to select anything.

Using this with Formik 0.11.11

[Almouro]

Hi @nimamyscreen and @ckorhonen, thanks for reporting!
Indeed, the docs are wrong on the use of the picker, I'm updating them now :)

[Almouro]

Essentially, withPickerValues needs to be composed with makeInputGreatAgain.
See for instance, this fix on the docs:
https://github.com/bamlab/react-native-formik/pull/20/files#diff-04c6e90faac2675aa89e2176d2eec7d8

Do you guys think it's clearer with this documentation fix? :)

It might even be worth it to add a makePicker that basically does the compose to abstract this from the user

[Almouro]

Hi @nimamyscreen and @ckorhonen,
I merged the above PR, let me know if it works for you now :)

[Almouro]

Closing this issue, since there was no activity in a while. Feel free to reopen if needed!