adding in news component and saving avatars

2018-08-24 20:19:59 -07:00
parent 04ee616bc8
commit 2f35efc7e8
3 changed files with 156 additions and 12 deletions
@@ -0,0 +1,98 @@
+/*
+ * Twitter view component for the chat
+ */
+import React, { Component } from 'react';
+import {
+  Dimensions,
+  View,
+  TouchableOpacity,
+  Image,
+  Linking,
+  Text
+} from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
+
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
+
+type Props = {};
+export default class NewsPost extends Component<Props> {
+
+  handleClick = () => {
+    Linking.canOpenURL(this.props.url).then(supported => {
+      if (supported) {
+        Linking.openURL(this.props.url);
+      } else {
+        console.log("Don't know how to open URI: " + this.props.url);
+      }
+    });
+  };
+
+  render() {
+    const { title, source } = this.props;
+
+    return (
+      <TouchableOpacity onPress={this.handleClick} style={styles.container}>
+        <Icon
+          name='newspaper-o'
+          style={styles.icon}
+        />
+        <Text style={styles.bodyTxt}>{title}</Text>
+
+        <View style={styles.infoCont}>
+          <Text style={styles.typeTxt}>unversal</Text>
+          <Text style={styles.screenNameTxt}>@{source}</Text>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+}
+
+const styles = {
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'column',
+    backgroundColor: '#0e8f9e',
+    margin: 30,
+    padding: 10,
+    borderRadius: 5,
+    shadowColor: 'grey',
+    shadowOffset: {
+      width: 0,
+      height: 3
+    },
+    shadowRadius: 5,
+    shadowOpacity: 1.0,
+    elevation: 4
+  },
+  icon: {
+    borderRadius: 60,
+    fontSize: 20,
+    color: 'gold'
+  },
+  bodyTxt: {
+    fontSize: 16,
+    color: 'white',
+    margin: 5
+  },
+  infoCont: {
+    flex: 1,
+    alignSelf: 'stretch',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flexDirection: 'row',
+    margin: 5
+  },
+    typeTxt: {
+      fontSize: 12,
+      color: 'gold',
+      backgroundColor: 'black',
+      borderRadius: 4,
+      padding: 5
+    },
+    screenNameTxt: {
+      fontSize: 12,
+      color: 'gold'
+    }
+}