Browse Source

Starting SharingFloodingZonesScreen layout

master
GabrielTrettel 4 years ago
parent
commit
b304014d6c
  1. BIN
      src/app/assets/floodZonesAssets/not_passable_icon.png
  2. BIN
      src/app/assets/floodZonesAssets/passable_icon.png
  3. 82
      src/app/screens/SharingFloodZonesScreen.js
  4. 1
      src/package.json

BIN
src/app/assets/floodZonesAssets/not_passable_icon.png

After

Width: 274  |  Height: 155  |  Size: 7.2 KiB

BIN
src/app/assets/floodZonesAssets/passable_icon.png

After

Width: 275  |  Height: 132  |  Size: 6.2 KiB

82
src/app/screens/SharingFloodZonesScreen.js

@ -0,0 +1,82 @@
import React, { useState } from "react";
import {
StyleSheet,
Text,
Image,
View,
TouchableHighlight,
} from "react-native";
import Screen from "../components/Screen";
import useLocation from "../hooks/useLocation";
import colors from "../config/colors";
function SharingFloodZonesScreen() {
const location = useLocation();
const [passable, setPassable] = useState(-1);
console.log(passable);
return (
<Screen style={styles.container}>
<Text style={styles.header}>Pontos de alagamento</Text>
<View style={styles.imgs_container}>
<TouchableHighlight onPress={() => setPassable(1)}>
<View style={styles.img_block}>
<Image
style={styles.image}
source={require("../assets/floodZonesAssets/passable_icon.png")}
/>
<Text>Transitável</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => setPassable(0)}>
<View style={styles.img_block}>
<Image
style={styles.image}
source={require("../assets/floodZonesAssets/not_passable_icon.png")}
/>
<Text>Intransitável</Text>
</View>
</TouchableHighlight>
</View>
</Screen>
);
}
const styles = StyleSheet.create({
container: {
padding: 10,
alignItems: "center",
justifyContent: "center",
},
header: {
fontSize: 18,
color: colors.primary,
fontWeight: "500",
},
image: {
width: 150,
height: "100%",
resizeMode: "cover",
backgroundColor: "blue",
},
img_block: {
height: 100,
padding: 10,
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
},
imgs_container: {
display: "flex",
flexDirection: "row",
justifyContent: "space-evenly",
padding: 10,
},
});
export default SharingFloodZonesScreen;

1
src/package.json

@ -29,6 +29,7 @@
"react-native-reanimated": "~1.13.0", "react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.4", "react-native-safe-area-context": "3.1.4",
"react-native-screens": "~2.10.1", "react-native-screens": "~2.10.1",
"react-native-svg": "12.1.0",
"react-native-web": "~0.13.12", "react-native-web": "~0.13.12",
"react-navigation": "^4.4.3", "react-navigation": "^4.4.3",
"react-navigation-tabs": "^2.10.1", "react-navigation-tabs": "^2.10.1",

Loading…
Cancel
Save