about page

src/scenes/MyAbout.js

@@ -1,24 +1,77 @@
 import React, { Component } from 'react';
-import { View, Text, Image } from 'react-native';
-
-const MyAbout = () => {
-    return (
-      <View style={{flex:1}}>
-        <Text style={{fontSize:20, alignSelf:'center', fontWeight:'700'}}>
-          ESPECIFICOS Buenos Aires
-        </Text>
-
-        <Image source={require('../../img/casa.png')}
-          style={{height: 300, width:400}}
-          resizeMode='contain'
-        />
-        <Text>Leopoldo Marechal 914, CABA (C1405BMD), Buenos Aires, Argentina.</Text>
-        <Text>
-          Teléfono: +5411 4139-6860/1 +5411 4982-2892.
-        </Text>
-        <Text>Cómo llegar?</Text>
-      </View>
-    );
+import { View, Text, Image, Linking, StyleSheet, TouchableOpacity } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+
+class MyAbout extends Component {
+	handleClick = (url) => {
+		Linking.canOpenURL(url).then(supported => {
+			if (supported) {
+				Linking.openURL(url);
+	      	} else {
+	        	console.log('Don\'t know how to open URI: ' + url);
+	      	}
+		});
+	};
+
+	render() {
+		const { textColor, viewStyle, iconStyle } = styles;
+		return (
+		<View style={{flex:1,padding:20}}>
+			<Text style={{fontSize:20, alignSelf:'center', fontWeight:'700'}}>
+			  ESPECIFICOS Buenos Aires
+			</Text>
+
+			<Image source={require('../../img/casa.png')}
+			  style={{width:350,alignSelf:'center',height:220}}
+			  resizeMode='contain'
+			/>
+			<TouchableOpacity style={viewStyle}
+				onPress={() => this.handleClick('geo:-34.60761,-58.437967')}>
+
+				<Icon size={30} style={[textColor, iconStyle]} name="md-pin" />
+				<Text style={textColor}>
+					 Leopoldo Marechal 914, CABA, Argentina.
+				</Text>
+
+			</TouchableOpacity>
+
+
+			<TouchableOpacity style={viewStyle}
+				onPress={() => this.handleClick('tel:+541141396860')}>
+				<Icon size={30} style={[textColor, iconStyle]} name="md-call" />
+				<View>
+					<Text style={textColor}>
+						+5411 4139-6860/1
+					</Text>
+					<Text style={textColor}>
+						+5411 4982-2892
+					</Text>
+				</View>
+			</TouchableOpacity>
+
+			<View style={viewStyle}>
+				<Icon size={30} style={[textColor, iconStyle]} name="md-time" />
+				<Text style={textColor}>
+					Abierto Lunes a Viernes 9 a 18hs.
+				</Text>
+			</View>
+		</View>
+		);
+	}
 }
 
+const styles = StyleSheet.create({
+	viewStyle: {
+		flexDirection:'row',
+		alignItems: 'center',
+	},
+	iconStyle: {
+		margin:5,
+		marginRight: 10
+	},
+	textColor:{
+		color:'#6281A2'
+	}
+});
+
 export default MyAbout;