Commit 2eaed6e8 authored by Thomas's avatar Thomas
Browse files

map

parent ca1b4f05
......@@ -13,7 +13,7 @@ const Card = (props) => {
} else if(Score < 70 && Score >= 50) {
var transparancyColor = '#F2B05C'
} else {
var transparancyColor = '#FAA09E'
var transparancyColor = '#FF918E'
}
return(
......
import * as React from 'react';
import { SafeAreaView, Platform, StyleSheet, Share, TouchableOpacity, Text, View, Image } from 'react-native';
import {useState} from 'react';
import { SafeAreaView, Platform, StyleSheet, Share,
TouchableOpacity, Text, View, Image, Dimensions, ScrollView } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import MapView from 'react-native-maps';
import { Overlay } from 'react-native-elements';
export default function BrandScreen({ navigation, route }) {
const {BrandName, Score, Logo} = route.params
......@@ -10,7 +13,7 @@ export default function BrandScreen({ navigation, route }) {
try {
const result = await Share.share({
message:
'TraCloSo | Building towards a better future for clothing',
'TraCloSo | Building towards a better future for clothing. \nTake a look at: https://google.com',
});
if (result.action === Share.sharedAction) {
if (result.activityType) {
......@@ -26,15 +29,24 @@ export default function BrandScreen({ navigation, route }) {
}}
var BrandSummary =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in oluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
let transparencyColor;
if (Score <= 100 && Score >= 70) {
var transparancyColor = '#52D858'
} else if(Score < 70 && Score >= 50) {
var transparancyColor = '#F2B05C'
} else {
var transparancyColor = '#FAA09E'
var transparancyColor = '#FF918E'
}
const [visible, setVisible] = useState(false);
const toggleOverlay = () => {
setVisible(!visible);
};
return(
<SafeAreaView style={style.Container}>
{/*header */}
......@@ -59,22 +71,55 @@ export default function BrandScreen({ navigation, route }) {
</View>
{/*block*/}
<View style={{flexDirection: 'row', justifyContent:'space-between'}}>
{/*back button*/}
<View>
<TouchableOpacity style={style.BackButton} onPress={() => navigation.goBack()}>
<MaterialCommunityIcons style={style.Arrow} name="chevron-left" size={18}/>
<Text>back</Text>
</TouchableOpacity>
<Text style={style.UpdateText}>Last updated on 24-5-2021 13:37</Text>
<ScrollView>
<View style={{flexDirection: 'row', justifyContent:'space-between'}}>
{/*back button*/}
<View>
<TouchableOpacity style={style.BackButton} onPress={() => navigation.goBack()}>
<MaterialCommunityIcons style={style.Arrow} name="chevron-left" size={18}/>
<Text>back</Text>
</TouchableOpacity>
<Text style={style.UpdateText}>Last updated on 24-5-2021 13:37</Text>
</View>
{/*transparancy score*/}
<View style={[style.transparancyBox, {shadowColor: transparancyColor}]}>
<Text style={[style.transparancyText, {color: transparancyColor}]}>{Score}%</Text>
</View>
</View>
{/*transparancy score*/}
<View style={[style.transparancyBox, {shadowColor: transparancyColor}]}>
<Text style={[style.transparancyText, {color: transparancyColor}]}>{Score}%</Text>
{/*content*/}
<View style={style.content}>
{/*summary*/}
<Text style={style.header}>Summary</Text>
<Text>{BrandSummary}
{"\n"} {"\n"}
More info about how the score is calculated? Take a look at our information page</Text>
{/*facilities*/}
<Text style={[style.header, {paddingTop:15}]}>Facilities</Text>
<View style={style.mapview}>
<MapView style={style.Map}/>
<TouchableOpacity style={style.ExpandIcon} onPress={toggleOverlay}>
<MaterialCommunityIcons name='arrow-expand-all' size={25}/>
</TouchableOpacity>
</View>
{/*map overlay: when clicking the expand icon*/}
<View>
<Overlay
fullScreen= 'true'
isVisible={visible}
onBackdropPress={toggleOverlay}
backdropStyle={style.BackDrop}
overlayStyle={style.OverlayStyle} >
<View>
<MapView style={style.Zoom} />
<TouchableOpacity style={style.CloseIcon} onPress={toggleOverlay}>
<MaterialCommunityIcons name='close' size={25} color={'red'}/>
<Text style={style.CloseText}>Close</Text>
</TouchableOpacity>
</View>
</Overlay>
</View>
</View>
</View>
</ScrollView>
</SafeAreaView>
)
}
......@@ -150,7 +195,43 @@ const style = StyleSheet.create ({
fontSize: 12
},
Map: {
width: 200,
width: Dimensions.get('window').width-20,
height: 200,
alignItems: 'center',
justifyContent: 'center',
},
mapview: {
paddingTop: 5
},
content: {
marginTop: 20,
marginLeft: 10,
marginRight: 2
},
header: {
fontSize: 22
},
ExpandIcon: {
position: 'absolute',
right: 15,
marginTop: 10
},
Zoom :{
marginTop: 70,
width: Dimensions.get('window').width-20,
height: Dimensions.get('window').height-100
},
OverlayStyle: {
backgroundColor: 'transparent'
},
CloseIcon: {
position: 'absolute',
right: 20,
marginTop: 80,
flexDirection: 'row'
},
CloseText: {
paddingTop: 2,
color: 'red'
}
})
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment