Copy
1import React, { useEffect, useRef, useState } from 'react';
2
3import { TextInput } from 'react-native';
4import { useField } from '@unform/core';
5
6function Input({ name, ...rest }) {
7  const inputRef = useRef(null);
8
9  const { fieldName, registerField, defaultValue, error } = useField(name);
10
11  useEffect(() => {
12    inputRef.current.value = defaultValue;
13  }, [defaultValue]);
14
15  useEffect(() => {
16    registerField({
17      name: fieldName,
18      ref: inputRef.current,
19      path: 'value',
20      clearValue(ref) {
21        ref.value = '';
22        ref.clear();
23      },
24      setValue(ref, value) {
25        ref.setNativeProps({ text: value });
26        inputRef.current.value = value;
27      },
28      getValue(ref) {
29        return ref.value;
30      },
31    });
32  }, [fieldName, registerField]);
33
34  return (
35    <TextInput
36      ref={inputRef}
37      keyboardAppearance="dark"
38      defaultValue={defaultValue}
39      placeholderTextColor="#666360"
40      onChangeText={value => {
41        if (inputRef.current) {
42          inputRef.current.value = value;
43        }
44      }}
45      {...rest}
46    />
47  );
48}
49
50export default Input;

Copy
1import React, { useRef } from 'react';
2import { Button } from 'react-native';
3import { Form } from '@unform/mobile';
4import Input from './components/Input';
5
6export default function SignIn() {
7  const formRef = useRef(null);
8
9  function handleSubmit(data) {
10    console.log(data);
11    // { email: 'test@example.com', password: '123456' }
12  }
13
14  return (
15    <Form ref={formRef} onSubmit={handleSubmit}>
16      <Input name="email" type="email" />
17      <Input name="password" type="password" />
18
19      <Button title="Sign in" onPress={() => formRef.current.submitForm()} />
20    </Form>
21  );
22}