Browse Source

Collecting all texts dimensions to constant values in config file "dimensions"

master
GabrielTrettel 4 years ago
parent
commit
e9d76cfac4
  1. 27
      src/app/components/forms/FormDatePicker.js
  2. 3
      src/app/components/forms/FormImagePicker.js
  3. 11
      src/app/config/dimensions.js
  4. 16
      src/app/screens/AccountScreen.js
  5. 30
      src/app/screens/MessagesScreen.js
  6. 12
      src/app/screens/OfficialMessagesScreen.js
  7. 10
      src/app/screens/PluviometerSharingDataScreen.js
  8. 8
      src/app/screens/RainSharingDataScreen.js
  9. 6
      src/app/screens/RiverFloodSharingDataScreen.js
  10. 4
      src/app/screens/SharingDataScreen.js
  11. 12
      src/app/screens/SharingFloodZonesScreen.js

27
src/app/components/forms/FormDatePicker.js

@ -13,6 +13,7 @@ import DateTimePicker from "@react-native-community/datetimepicker";
import moment from "moment"; import moment from "moment";
import colors from "../../config/colors"; import colors from "../../config/colors";
import { dimensions } from "../../config/dimensions";
const FormDatePicker = (props) => { const FormDatePicker = (props) => {
const { textStyle, defaultDate } = props; const { textStyle, defaultDate } = props;
@ -65,15 +66,21 @@ const FormDatePicker = (props) => {
return ( return (
<TouchableOpacity onPress={() => setShow(true)}> <TouchableOpacity onPress={() => setShow(true)}>
<View style={{ flex: 1, flexDirection: "row", alignItems: 'center', justifyContent: "space-between" }}>
<View style={ styles.dateInput }>
<Text> {date.format("DD/MM/YYYY")}</Text>
<View
style={{
flex: 1,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
<View style={styles.dateInput}>
<Text style={{ fontSize: dimensions.text.default }}>
{" "}
{date.format("DD/MM/YYYY")}
</Text>
</View> </View>
<FontAwesome5
name="calendar-day"
size={30}
color="grey"
/>
<FontAwesome5 name="calendar-day" size={30} color="grey" />
</View> </View>
{Platform.OS !== "ios" && show && renderDatePicker()} {Platform.OS !== "ios" && show && renderDatePicker()}
@ -140,7 +147,7 @@ const FormDatePicker = (props) => {
FormDatePicker.defaultProps = { FormDatePicker.defaultProps = {
textStyle: {}, textStyle: {},
defaultDate: moment(), defaultDate: moment(),
onDateChange: () => { },
onDateChange: () => {},
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@ -165,7 +172,7 @@ const styles = StyleSheet.create({
borderRadius: 25, borderRadius: 25,
padding: 18, padding: 18,
marginVertical: 10, marginVertical: 10,
}
},
}); });
export default FormDatePicker; export default FormDatePicker;

3
src/app/components/forms/FormImagePicker.js

@ -5,6 +5,7 @@ import ErrorMessage from "./ErrorMessage";
import ImageInputList from "../ImageInputList"; import ImageInputList from "../ImageInputList";
import { View, Text, StyleSheet } from "react-native"; import { View, Text, StyleSheet } from "react-native";
import colors from "../../config/colors"; import colors from "../../config/colors";
import { dimensions } from "../../config/dimensions";
function FormImagePicker({ name }) { function FormImagePicker({ name }) {
const { errors, setFieldValue, touched, values } = useFormikContext(); const { errors, setFieldValue, touched, values } = useFormikContext();
@ -36,7 +37,7 @@ function FormImagePicker({ name }) {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
labelStyle: { labelStyle: {
fontSize: 16,
fontSize: dimensions.text.secondary,
fontWeight: "bold", fontWeight: "bold",
textAlign: "left", textAlign: "left",
color: colors.primary, color: colors.primary,

11
src/app/config/dimensions.js

@ -2,6 +2,15 @@ import { Dimensions } from "react-native";
const screen_width = Dimensions.get("window").width; const screen_width = Dimensions.get("window").width;
const dimensions = {
text: {
header: 24,
secondary: 20,
default: 18,
tertiary: 14,
},
};
/* imageScaleToSize (iw, ih, scale_w) /* imageScaleToSize (iw, ih, scale_w)
* function for scaling images dinamically based on screen width * function for scaling images dinamically based on screen width
* *
@ -21,4 +30,4 @@ function scaleDimsFromWidth(iw, ih, scale_w) {
return { width: sw, height: sh }; return { width: sw, height: sh };
} }
export { screen_width, scaleDimsFromWidth };
export { screen_width, scaleDimsFromWidth, dimensions };

16
src/app/screens/AccountScreen.js

@ -3,15 +3,18 @@ import { StyleSheet, View, Text } from "react-native";
import colors from "../config/colors"; import colors from "../config/colors";
import Screen from "../components/Screen"; import Screen from "../components/Screen";
import { AntDesign } from '@expo/vector-icons';
import { AntDesign } from "@expo/vector-icons";
import { dimensions } from "../config/dimensions";
function AccountScreen({ navigation }) { function AccountScreen({ navigation }) {
return ( return (
<Screen style={styles.screen}> <Screen style={styles.screen}>
<View style={styles.container}> <View style={styles.container}>
<AntDesign name="warning" size={60} color="black" />
<Text style={{fontSize: 30, fontWeight: "bold"}}>Em construção...</Text>
</View>
<AntDesign name="warning" size={60} color="black" />
<Text style={{ fontSize: dimensions.text.header, fontWeight: "bold" }}>
Em construção...
</Text>
</View>
</Screen> </Screen>
); );
} }
@ -23,9 +26,8 @@ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
flexDirection: "column", flexDirection: "column",
alignItems:"center",
justifyContent: "flex-start"
alignItems: "center",
justifyContent: "flex-start",
}, },
}); });

30
src/app/screens/MessagesScreen.js

@ -9,7 +9,8 @@ import {
} from "../components/lists"; } from "../components/lists";
import colors from "../config/colors"; import colors from "../config/colors";
import { AntDesign } from '@expo/vector-icons';
import { AntDesign } from "@expo/vector-icons";
import { dimensions } from "../config/dimensions";
/*const initialMessages = [ /*const initialMessages = [
{ {
@ -36,7 +37,8 @@ function MessagesScreen(props) {
}; */ }; */
return ( return (
{/*<Screen>
{
/*<Screen>
<FlatList <FlatList
data={messages} data={messages}
keyExtractor={(message) => message.id.toString()} keyExtractor={(message) => message.id.toString()}
@ -64,13 +66,20 @@ function MessagesScreen(props) {
]); ]);
}} }}
/> />
</Screen>*/},
<Screen style={styles.screen}>
<View style={styles.container}>
<AntDesign name="warning" size={60} color="black" />
<Text style={{ fontSize: 30, fontWeight: "bold" }}>Em construção...</Text>
</View>
</Screen>
</Screen>*/
},
(
<Screen style={styles.screen}>
<View style={styles.container}>
<AntDesign name="warning" size={60} color="black" />
<Text
style={{ fontSize: dimensions.text.header, fontWeight: "bold" }}
>
Em construção...
</Text>
</View>
</Screen>
)
); );
} }
@ -82,8 +91,7 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
flexDirection: "column", flexDirection: "column",
alignItems: "center", alignItems: "center",
justifyContent: "flex-start"
justifyContent: "flex-start",
}, },
}); });

12
src/app/screens/OfficialMessagesScreen.js

@ -3,14 +3,17 @@ import { StyleSheet, View, Text } from "react-native";
import colors from "../config/colors"; import colors from "../config/colors";
import Screen from "../components/Screen"; import Screen from "../components/Screen";
import { AntDesign } from '@expo/vector-icons';
import { AntDesign } from "@expo/vector-icons";
import { dimensions } from "../config/dimensions";
function OfficialMessagesScreen(props) { function OfficialMessagesScreen(props) {
return ( return (
<Screen style={styles.screen}>
<Screen style={styles.screen}>
<View style={styles.container}> <View style={styles.container}>
<AntDesign name="warning" size={60} color="black" /> <AntDesign name="warning" size={60} color="black" />
<Text style={{ fontSize: 30, fontWeight: "bold" }}>Em construção...</Text>
<Text style={{ fontSize: dimensions.text.header, fontWeight: "bold" }}>
Em construção...
</Text>
</View> </View>
</Screen> </Screen>
); );
@ -24,8 +27,7 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
flexDirection: "column", flexDirection: "column",
alignItems: "center", alignItems: "center",
justifyContent: "flex-start"
justifyContent: "flex-start",
}, },
}); });

10
src/app/screens/PluviometerSharingDataScreen.js

@ -12,7 +12,7 @@ import useLocation from "../hooks/useLocation";
import FormImagePicker from "../components/forms/FormImagePicker"; import FormImagePicker from "../components/forms/FormImagePicker";
import { insertPluviometerData } from "../database/databaseLoader"; import { insertPluviometerData } from "../database/databaseLoader";
import { showMessage } from "react-native-flash-message"; import { showMessage } from "react-native-flash-message";
import { scaleDimsFromWidth } from "../config/dimensions";
import { dimensions, scaleDimsFromWidth } from "../config/dimensions";
import FormDatePicker from "../components/forms/FormDatePicker"; import FormDatePicker from "../components/forms/FormDatePicker";
import colors from "../config/colors/"; import colors from "../config/colors/";
@ -41,7 +41,11 @@ function PluviometerSharingDataScreen(props) {
source={require("../assets/pluviometro.png")} source={require("../assets/pluviometro.png")}
/> />
<Text <Text
style={{ fontSize: 18, fontWeight: "bold", color: colors.primary }}
style={{
fontSize: dimensions.text.header,
fontWeight: "bold",
color: colors.primary,
}}
> >
Pluviômetro Pluviômetro
</Text> </Text>
@ -112,7 +116,7 @@ const styles = StyleSheet.create({
alignItems: "center", alignItems: "center",
}, },
labelStyle: { labelStyle: {
fontSize: 16,
fontSize: dimensions.text.secondary,
fontWeight: "bold", fontWeight: "bold",
textAlign: "left", textAlign: "left",
color: colors.primary, color: colors.primary,

8
src/app/screens/RainSharingDataScreen.js

@ -11,7 +11,7 @@ import colors from "../config/colors";
import { TouchableNativeFeedback } from "react-native-gesture-handler"; import { TouchableNativeFeedback } from "react-native-gesture-handler";
import { insertRainData } from "../database/databaseLoader"; import { insertRainData } from "../database/databaseLoader";
import { showMessage } from "react-native-flash-message"; import { showMessage } from "react-native-flash-message";
import { scaleDimsFromWidth } from "../config/dimensions";
import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
import assets from "../config/assets"; import assets from "../config/assets";
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
@ -29,7 +29,7 @@ function RainSharingDataScreen(props) {
<Screen style={styles.container}> <Screen style={styles.container}>
<Text <Text
style={{ style={{
fontSize: 18,
fontSize: dimensions.text.header,
fontWeight: "bold", fontWeight: "bold",
color: colors.primary, color: colors.primary,
textAlign: "center", textAlign: "center",
@ -183,12 +183,12 @@ const styles = StyleSheet.create({
justifyContent: "space-between", justifyContent: "space-between",
}, },
text: { text: {
fontSize: 14,
fontSize: dimensions.text.default,
textAlign: "center", textAlign: "center",
marginTop: 10, marginTop: 10,
}, },
error_txt: { error_txt: {
fontSize: 18,
fontSize: dimensions.text.default,
color: colors.danger, color: colors.danger,
}, },
}); });

6
src/app/screens/RiverFloodSharingDataScreen.js

@ -13,7 +13,7 @@ import { insertRiverData } from "../database/databaseLoader";
import { showMessage } from "react-native-flash-message"; import { showMessage } from "react-native-flash-message";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"; import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import assets from "../config/assets"; import assets from "../config/assets";
import { scaleDimsFromWidth } from "../config/dimensions";
import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
images: Yup.array(), images: Yup.array(),
@ -30,7 +30,7 @@ function RiverFloodSharingDataScreen(props) {
<Screen style={styles.container}> <Screen style={styles.container}>
<Text <Text
style={{ style={{
fontSize: 18,
fontSize: dimensions.text.header,
fontWeight: "bold", fontWeight: "bold",
color: colors.primary, color: colors.primary,
textAlign: "center", textAlign: "center",
@ -159,7 +159,7 @@ const styles = StyleSheet.create({
justifyContent: "space-between", justifyContent: "space-between",
}, },
text: { text: {
fontSize: 14,
fontSize: dimensions.text.default,
textAlign: "center", textAlign: "center",
marginTop: 10, marginTop: 10,
}, },

4
src/app/screens/SharingDataScreen.js

@ -3,7 +3,7 @@ import { StyleSheet, View } from "react-native";
import { Image, Text, TouchableOpacity, ScrollView } from "react-native"; import { Image, Text, TouchableOpacity, ScrollView } from "react-native";
import assets from "../config/assets"; import assets from "../config/assets";
import { scaleDimsFromWidth } from "../config/dimensions";
import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
//1/3 //1/3
@ -55,7 +55,7 @@ const dims = scaleDimsFromWidth(248, 251, 35);
const styles = StyleSheet.create({ const styles = StyleSheet.create({
text: { text: {
fontSize: 14,
fontSize: dimensions.text.default,
textAlign: "center", textAlign: "center",
marginTop: 10, marginTop: 10,
}, },

12
src/app/screens/SharingFloodZonesScreen.js

@ -6,7 +6,7 @@ import { Form, SubmitButton, FormField } from "../components/forms";
import FormImagePicker from "../components/forms/FormImagePicker"; import FormImagePicker from "../components/forms/FormImagePicker";
import useLocation from "../hooks/useLocation"; import useLocation from "../hooks/useLocation";
import colors from "../config/colors"; import colors from "../config/colors";
import { scaleDimsFromWidth } from "../config/dimensions";
import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
import { TouchableNativeFeedback } from "react-native-gesture-handler"; import { TouchableNativeFeedback } from "react-native-gesture-handler";
import { insertFloodZone } from "../database/databaseLoader"; import { insertFloodZone } from "../database/databaseLoader";
import { showMessage } from "react-native-flash-message"; import { showMessage } from "react-native-flash-message";
@ -33,7 +33,7 @@ function SharingFloodZonesScreen(props) {
<Screen style={styles.container}> <Screen style={styles.container}>
<Text <Text
style={{ style={{
fontSize: 18,
fontSize: dimensions.text.header,
fontWeight: "bold", fontWeight: "bold",
color: colors.primary, color: colors.primary,
textAlign: "center", textAlign: "center",
@ -122,11 +122,6 @@ const styles = StyleSheet.create({
backgroundColor: colors.white, backgroundColor: colors.white,
}, },
header: {
fontSize: 18,
color: colors.primary,
fontWeight: "500",
},
image: { image: {
width: dims.width * 0.9, width: dims.width * 0.9,
height: dims.height * 0.9, height: dims.height * 0.9,
@ -147,7 +142,8 @@ const styles = StyleSheet.create({
}, },
text: { text: {
fontSize: 14,
paddingTop: 5,
fontSize: dimensions.text.default,
}, },
error_txt: { error_txt: {
fontSize: 18, fontSize: 18,

Loading…
Cancel
Save