Fields value Unform

index.js

import React, { useState, useEffect, useRef } from 'react';
import {
  Text,
  ScrollView,
  PixelRatio,
  Alert,
  Platform,
  ActivityIndicator,
} from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import Icon from 'react-native-vector-icons/Feather';
import * as Yup from 'yup';
import ImagePicker from 'react-native-image-picker';

import Button from '../../components/Button';
import Input from '../../components/Input';
import InputMask from '../../components/InputMask';
import api from '../../services/api';
import {
  Container,
  PictureView,
  PictureImage,
  InputTitle,
  FormContainer,
} from './styles';

export default function ProductRegistration({ route, navigation }) {
  const formRef = useRef(null);
  const [picture, setPicture] = useState();
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (route.params?.item) {
      const item = route.params?.item;

      // formRef.current.setFieldValue('name', 'Alex');

      setTimeout(() => {
        formRef.current.setData({
          name: item.name,
          /* description: item.description,
          category: item.category,
          value: item.value, */
        });
      }, 2000);
    }
  }, []);

  const goBack = (productId) => {
    navigation.navigate('HomeSeller', { productId });
  };

  async function handleSubmit(data) {
    /* ... */
  }

  function imagePickerCb(data) {
    /* ... */
  }

  return (
    <Container>
      <PictureView>
        /* .. */
      </PictureView>
      <FormContainer ref={formRef} onSubmit={handleSubmit}>
        <ScrollView>
          <InputTitle>Título do produto *</InputTitle>
          <Input name="name" placeholder="Ex: Lâmpada traseira" />
          <InputTitle style={{ marginTop: 20 }}>
            Descrição do produto
          </InputTitle>
          <Input
            name="description"
            placeholder="Ex: Acende uma luz quando solicitado"
          />
          <InputTitle style={{ marginTop: 20 }}>Categoria *</InputTitle>
          <Input name="category" placeholder="Ex: Motor" />
          <InputTitle style={{ marginTop: 20 }}>Valor *</InputTitle>
          <InputMask
            type="money"
            name="value"
            keyboardType="number-pad"
            placeholder="Ex: R$250,00"
          />
        </ScrollView>
        <Button
          style={{ bottom: -10 }}
          onPress={() => {
            formRef.current.submitForm();
          }}
        >
          {loading ? (
            <ActivityIndicator size={20} color="#fff" />
          ) : (
            <Text>Cadastrar</Text>
          )}
        </Button>
      </FormContainer>
    </Container>
  );
}

styles.js

import styled from 'styled-components/native';
import { PixelRatio } from 'react-native';
import { getBottomSpace } from 'react-native-iphone-x-helper';
import { Form } from '@unform/mobile';

export const Container = styled.ScrollView`
  background-color: #ffffff;
`;

export const FormContainer = styled(Form)`
  width: 100%;
  padding: ${PixelRatio.get() * 6}px;
`;

export const PictureView = styled.View`
  background-color: #d74d4d;
  justify-content: center;
  align-items: center;
  padding: ${PixelRatio.get() * 5}px 0;
  min-height: ${PixelRatio.get() * 80}px;
`;

export const PictureImage = styled.Image`
  width: ${PixelRatio.get() * 100}px;
  height: ${PixelRatio.get() * 70}px;
`;

export const InputTitle = styled.Text`
  font-size: ${PixelRatio.get() * 6}px;
  color: #000;
  font-weight: bold;
`;

export const Footer = styled.TouchableOpacity`
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background: #fafafa;
  border-top-width: 2px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-color: #d74d4d;
  padding: 16px 0 ${16 + getBottomSpace()}px;
  justify-content: center;
  align-items: center;
  flex-direction: row;
`;

export const FooterText = styled.Text`
  color: #d74d4d;
  font-size: 18px;
  margin-left: 16px;
  font-weight: bold;
`;