Skip to content

Instantly share code, notes, and snippets.

@alexxfreitag
Created November 10, 2020 23:57
Show Gist options
  • Save alexxfreitag/9318ac89321ff0dcccc1bd92567353a1 to your computer and use it in GitHub Desktop.
Save alexxfreitag/9318ac89321ff0dcccc1bd92567353a1 to your computer and use it in GitHub Desktop.
Fields value Unform
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>
);
}
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;
`;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment