Browse Source

Sharing data Screen - layout

master
analuizaff 4 years ago
parent
commit
678b654e92
  1. BIN
      src/app/assets/diario_pluviometrico.png
  2. BIN
      src/app/assets/nivel_rio.png
  3. 133
      src/app/screens/SharingDataScreen.js

BIN
src/app/assets/diario_pluviometrico.png

After

Width: 650  |  Height: 601  |  Size: 153 KiB

BIN
src/app/assets/nivel_rio.png

After

Width: 433  |  Height: 437  |  Size: 137 KiB

133
src/app/screens/SharingDataScreen.js

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import { StyleSheet } from "react-native";
import { StyleSheet, View } from "react-native";
import * as Yup from "yup"; import * as Yup from "yup";
import { import {
@ -12,98 +12,65 @@ import CategoryPickerItem from "../components/CategoryPickerItem";
import Screen from "../components/Screen"; import Screen from "../components/Screen";
import FormImagePicker from "../components/forms/FormImagePicker"; import FormImagePicker from "../components/forms/FormImagePicker";
import useLocation from "../hooks/useLocation"; import useLocation from "../hooks/useLocation";
const validationSchema = Yup.object().shape({
title: Yup.string().required().min(1).label("Title"),
price: Yup.number().required().min(1).max(10000).label("Price"),
description: Yup.string().label("Description"),
category: Yup.object().required().nullable().label("Category"),
images: Yup.array().min(1, "Please select at least one image."),
});
const categories = [
{
backgroundColor: "#2e53ff",
icon: "wave",
label: "Pontos de alagamento",
value: 1,
},
{
backgroundColor: "#2e53ff",
icon: "weather-pouring",
label: "Chuva",
value: 2,
},
{
backgroundColor: "#2e53ff",
icon: "waves",
label: "Diário do pluviômetro",
value: 3,
},
{
backgroundColor: "#2e53ff",
icon: "waves",
label: "Diário do pluviômetro",
value: 3,
import { Image, Text } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
//1/3
const styles = StyleSheet.create({
container:{
paddingTop:50,
}, },
{
backgroundColor: "#2e53ff",
icon: "water-percent",
label: "Nível do rio",
value: 4,
rainLogo: {
width: 110,
height:100,
margin:30,
}, },
];
floodingLogo: {
width: 85,
height:85,
marginTop: 70,
function SharingDataScreen() {
const location = useLocation();
},
})
const SharingDataScreen = () => {
return( return(
<Screen style={styles.container}>
<Form
initialValues={{
title: "",
price: "",
description: "",
category: null,
images: [],
}}
onSubmit={(values) => console.log(location)}
validationSchema={validationSchema}
>
<FormImagePicker name="images" />
<FormField maxLength={255} name="title" placeholder="Título" />
<FormField
keyboardType="numeric"
maxLength={8}
name="price"
placeholder="Valor"
width={120}
<View style={styles.container}>
<Text style={{ fontSize: 25, textAlign: 'center', backgroundColor: 'lightgray'}}>
Enviar uma informação
</Text>
<View style={{flexDirection:'row', justifyContent: 'space-around'}}>
<Image
style = {styles.floodingLogo}
source={require("../assets/pontos_alagamento_peq.png")}
/> />
<Picker
items={categories}
name="category"
numberOfColumns={3}
PickerItemComponent={CategoryPickerItem}
placeholder="Categoria"
width="50%"
<Image
style = {styles.floodingLogo}
source={require("../assets/chuva_peq.png")}
/>
</View>
<View style={{flexDirection:'row'}}>
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10, marginLeft: 50}}>Pontos de {"\n"}alagamento</Text>
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10, marginLeft: 130}}>Chuva</Text>
</View>
<View style={{flexDirection:'row', justifyContent: 'space-around'}}>
<Image
style = {styles.floodingLogo}
source={require("../assets/diario_pluviometrico.png")}
/> />
<FormField
maxLength={255}
multiline
name="description"
numberOfLines={3}
placeholder="Descrição"
<Image
style = {styles.floodingLogo}
source={require("../assets/nivel_rio.png")}
/> />
<SubmitButton title="Post" />
</Form>
</Screen>
</View>
<View style={{flexDirection:'row', justifyContent: 'space-around'}}>
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10}}>Diário do{"\n"}pluviômetro</Text>
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10}}>Nível de água {"\n"}no rio</Text>
</View>
</View>
); );
} }
const styles = StyleSheet.create({
container: {
padding: 10,
},
});
export default SharingDataScreen; export default SharingDataScreen;
Loading…
Cancel
Save