Returning error when actually it's right

[ghmendonca]

Hi, I started using this library and I found something weird happening to me, when I type just one letter in my input, for some reason, it runs against my rules and does not pass in my required rule, and that's wrong since I have 1 letter in my input. Also, why is it checking my rules every time I type something in my input? I don't need that, I can just validate when I submit the form.

Note: I'm using React Native

My screen component which holds the form:

const Login: FunctionComponent<{
    navigation: StackNavigationProp<{}>
}> = ({ navigation }) => {
    const { login } = useContext(UserContext)

    const [form] = useForm()

    navigation.setOptions({
        title: 'Login'
    })

    const authenticate = () => {
        form.validateFields().then(({ email, password }) => {

        })
    }

    return (
        <Screen>
            <View style={[GlobalStyles.flex, GlobalStyles.alignCenter, GlobalStyles.justifyCenter]}>
                <Image style={styles.image} source={require('../../../assets/black_logo.png')} />
                <Form component={FormView} form={form}>
                    <Field name="email" rules={[{ required: true }]}>
                        <Input placeholder="Email" />
                    </Field>
                    <Field name="Password" rules={[{ required: true }]}>
                        <Input placeholder="Password" secureTextEntry={true} />
                    </Field>
                </Form>
                <Button type="primary" onPress={authenticate}>
                    ENTRAR
                </Button>
            </View>
        </Screen>
    )
}

My Field component:

const Field: FunctionComponent<{

} & FieldProps> = ({ children, ...props }) => {
    return (
        <FormField trigger="onChangeText" getValueFromEvent={text => text} {...props}>
            {
                (control, meta) => {
                    return <View>
                        {
                            React.cloneElement(children as any, { error: meta.errors.length > 0, ...control })
                        }
                        {
                            meta.errors.map((error, index) => (
                                <Error key={index}>
                                    {error}
                                </Error>
                            ))
                        }
                    </View>
                }
            }
        </FormField>
    )
}

And my Input component:

const Input: FunctionComponent<{
    error?: boolean
} & TextInputProps> = ({ error, ...props }) => {
    return (
        <TextInput style={[styles.container, error ? styles.error : {}]} {...props} />
    )
}

This only happens when you type the FIRST LETTER ONLY. When you type the second letter the error goes away, also if you have 2 letters and remove one letting the input value with 1 letter, the error doesn't show as well, so this only happens when the input is empty and you type one letter only.

[Vija02]

This only happens when you type the FIRST LETTER ONLY. When you type the second letter the error goes away, also if you have 2 letters and remove one letting the input value with 1 letter, the error doesn't show as well, so this only happens when the input is empty and you type one letter only.

This sounds like an issue with late update (shows the error one state after when it should be shown). And sure enough, if you paste a value into the input it also shows the same error on my test.

I changed the trigger to use onChange instead of onChangeText, updating the getValueFromEvent into {({nativeEvent}) => nativeEvent.text}. This seems to fix the issue.

Not sure why that's happening. Looks like it's a react-native issue instead of this library?