diff --git a/src/.gitignore b/src/.gitignore new file mode 100644 index 0000000..3c3629e --- /dev/null +++ b/src/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/src/App.js b/src/App.js index 9941d6d..14c9bd8 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,13 @@ -import React from 'react'; +import React from "react"; +import { NavigationContainer } from "@react-navigation/native"; -import ViewImageScreen from "./app/screens/ViewImageScreen"; +import navigationTheme from "./app/navigation/navigationTheme"; +import AppNavigator from "./app/navigation/AppNavigator"; export default function App() { - return ; -} + return ( + + + + ); +} \ No newline at end of file diff --git a/src/app/assets/chuva_peq.png b/src/app/assets/chuva_peq.png new file mode 100644 index 0000000..dbf86b0 Binary files /dev/null and b/src/app/assets/chuva_peq.png differ diff --git a/src/app/assets/ddangelorb.png b/src/app/assets/ddangelorb.png new file mode 100644 index 0000000..3a08c40 Binary files /dev/null and b/src/app/assets/ddangelorb.png differ diff --git a/src/app/assets/defesa_civil.png b/src/app/assets/defesa_civil.png new file mode 100644 index 0000000..a6a0d61 Binary files /dev/null and b/src/app/assets/defesa_civil.png differ diff --git a/src/app/assets/pontos_alagamento_peq.png b/src/app/assets/pontos_alagamento_peq.png new file mode 100644 index 0000000..851c747 Binary files /dev/null and b/src/app/assets/pontos_alagamento_peq.png differ diff --git a/src/app/assets/previsao_tempo.png b/src/app/assets/previsao_tempo.png new file mode 100644 index 0000000..2f47091 Binary files /dev/null and b/src/app/assets/previsao_tempo.png differ diff --git a/src/app/components/Button.js b/src/app/components/Button.js new file mode 100644 index 0000000..d2a9e2c --- /dev/null +++ b/src/app/components/Button.js @@ -0,0 +1,35 @@ +import React from "react"; +import { StyleSheet, Text, TouchableOpacity } from "react-native"; + +import colors from "../config/colors"; + +function AppButton({ title, onPress, color = "primary" }) { + return ( + + {title} + + ); +} + +const styles = StyleSheet.create({ + button: { + backgroundColor: colors.primary, + borderRadius: 25, + justifyContent: "center", + alignItems: "center", + padding: 15, + width: "100%", + marginVertical: 10, + }, + text: { + color: colors.white, + fontSize: 18, + textTransform: "uppercase", + fontWeight: "bold", + }, +}); + +export default AppButton; diff --git a/src/app/components/CategoryPickerItem.js b/src/app/components/CategoryPickerItem.js new file mode 100644 index 0000000..86d8213 --- /dev/null +++ b/src/app/components/CategoryPickerItem.js @@ -0,0 +1,35 @@ +import React from "react"; +import { View, StyleSheet, TouchableOpacity } from "react-native"; + +import Icon from "./Icon"; +import Text from "./Text"; + +function CategoryPickerItem({ item, onPress }) { + return ( + + + + + {item.label} + + ); +} + +const styles = StyleSheet.create({ + container: { + paddingHorizontal: 30, + paddingVertical: 15, + alignItems: "center", + width: "50%", + }, + label: { + marginTop: 5, + textAlign: "center", + }, +}); + +export default CategoryPickerItem; diff --git a/src/app/components/Icon.js b/src/app/components/Icon.js new file mode 100644 index 0000000..f87fda8 --- /dev/null +++ b/src/app/components/Icon.js @@ -0,0 +1,27 @@ +import React from "react"; +import { View } from "react-native"; +import { MaterialCommunityIcons } from "@expo/vector-icons"; + +function Icon({ + name, + size = 40, + backgroundColor = "#000", + iconColor = "#fff", +}) { + return ( + + + + ); +} + +export default Icon; diff --git a/src/app/components/ImageInput.js b/src/app/components/ImageInput.js new file mode 100644 index 0000000..4538e95 --- /dev/null +++ b/src/app/components/ImageInput.js @@ -0,0 +1,78 @@ +import React, { useEffect } from "react"; +import { + View, + StyleSheet, + Image, + TouchableWithoutFeedback, + Alert, +} from "react-native"; +import { MaterialCommunityIcons } from "@expo/vector-icons"; +import * as ImagePicker from "expo-image-picker"; + +import colors from "../config/colors"; + +function ImageInput({ imageUri, onChangeImage }) { + useEffect(() => { + requestPermission(); + }, []); + + const requestPermission = async () => { + const { granted } = await ImagePicker.requestCameraRollPermissionsAsync(); + if (!granted) alert("You need to enable permission to access the library."); + }; + + const handlePress = () => { + if (!imageUri) selectImage(); + else + Alert.alert("Delete", "Are you sure you want to delete this image?", [ + { text: "Yes", onPress: () => onChangeImage(null) }, + { text: "No" }, + ]); + }; + + const selectImage = async () => { + try { + const result = await ImagePicker.launchImageLibraryAsync({ + mediaTypes: ImagePicker.MediaTypeOptions.Images, + quality: 0.5, + }); + if (!result.cancelled) onChangeImage(result.uri); + } catch (error) { + console.log("Error reading an image", error); + } + }; + + return ( + + + {!imageUri && ( + + )} + {imageUri && } + + + ); +} + +const styles = StyleSheet.create({ + container: { + alignItems: "center", + backgroundColor: colors.light, + borderRadius: 15, + height: 100, + justifyContent: "center", + marginVertical: 10, + overflow: "hidden", + width: 100, + }, + image: { + height: "100%", + width: "100%", + }, +}); + +export default ImageInput; diff --git a/src/app/components/ImageInputList.js b/src/app/components/ImageInputList.js new file mode 100644 index 0000000..4839a72 --- /dev/null +++ b/src/app/components/ImageInputList.js @@ -0,0 +1,40 @@ +import React, { useRef } from "react"; +import { View, StyleSheet, ScrollView } from "react-native"; +import ImageInput from "./ImageInput"; + +function ImageInputList({ imageUris = [], onRemoveImage, onAddImage }) { + const scrollView = useRef(); + + return ( + + scrollView.current.scrollToEnd()} + > + + {imageUris.map((uri) => ( + + onRemoveImage(uri)} + /> + + ))} + onAddImage(uri)} /> + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flexDirection: "row", + }, + image: { + marginRight: 10, + }, +}); + +export default ImageInputList; diff --git a/src/app/components/Picker.js b/src/app/components/Picker.js new file mode 100644 index 0000000..4d0eed9 --- /dev/null +++ b/src/app/components/Picker.js @@ -0,0 +1,98 @@ +import React, { useState } from "react"; +import { + View, + StyleSheet, + TouchableWithoutFeedback, + Modal, + Button, + FlatList, +} from "react-native"; +import { MaterialCommunityIcons } from "@expo/vector-icons"; + +import Text from "./Text"; +import defaultStyles from "../config/styles"; +import PickerItem from "./PickerItem"; +import Screen from "./Screen"; + +function AppPicker({ + icon, + items, + numberOfColumns = 1, + onSelectItem, + PickerItemComponent = PickerItem, + placeholder, + selectedItem, + width = "100%", +}) { + const [modalVisible, setModalVisible] = useState(false); + + return ( + <> + setModalVisible(true)}> + + {icon && ( + + )} + {selectedItem ? ( + {selectedItem.label} + ) : ( + {placeholder} + )} + + + + + + +