Clickable links and images in home feed

components/FetchedDataSectionList.js

@@ -5,7 +5,6 @@ import WebDataManager from "../utils/WebDataManager";
 import {Container, Content, Tab, TabHeading, Tabs, Text} from "native-base";
 import CustomHeader from "./CustomHeader";
 import {RefreshControl, SectionList, View} from "react-native";
-import i18n from "i18n-js";
 import CustomMaterialIcon from "./CustomMaterialIcon";
 
 type Props = {

package-lock.json

@@ -1609,6 +1609,14 @@
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
+    "autolinker": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/autolinker/-/autolinker-3.1.0.tgz",
+      "integrity": "sha512-FLPmzHwLqTUZlTwXTGSM1wOcu5TrsZcOc6YPq/Kdpzp+CBNPjUzKfPvHnFx+xuPZEerY1hRY96ISAm4S1A6MTw==",
+      "requires": {
+        "tslib": "^1.9.3"
+      }
+    },
     "babel-plugin-module-resolver": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-module-resolver/-/babel-plugin-module-resolver-3.2.0.tgz",
@@ -4276,6 +4284,14 @@
         "invert-kv": "^1.0.0"
       }
     },
+    "linkify-it": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-1.2.4.tgz",
+      "integrity": "sha1-B3NSbDF8j9E71TTuHRgP+Iq/iBo=",
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "load-json-file": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
@@ -4424,6 +4440,11 @@
         "buffer-alloc": "^1.1.0"
       }
     },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
+    },
     "mem": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/mem/-/mem-1.1.0.tgz",
@@ -5914,6 +5935,15 @@
         }
       }
     },
+    "react-native-autolink": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/react-native-autolink/-/react-native-autolink-1.8.1.tgz",
+      "integrity": "sha512-S/Zr4+xS2tR1zsskN0JnuGQ1JuXOjzfTCD/ihAGSk6Nsaepf1UKFspii2zjPq8vLSq36ivUPhT4Lr4H2l6eCJg==",
+      "requires": {
+        "autolinker": "^3.0.3",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-native-branch": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/react-native-branch/-/react-native-branch-2.2.5.tgz",
@@ -5946,6 +5976,28 @@
         "prop-types": "^15.5.10"
       }
     },
+    "react-native-hyperlink": {
+      "version": "0.0.14",
+      "resolved": "https://registry.npmjs.org/react-native-hyperlink/-/react-native-hyperlink-0.0.14.tgz",
+      "integrity": "sha1-E4u/5bQQZn0eN/BKK0cTFjqw7YE=",
+      "requires": {
+        "linkify-it": "^1.2.0",
+        "mdurl": "^1.0.0"
+      }
+    },
+    "react-native-image-pan-zoom": {
+      "version": "2.1.11",
+      "resolved": "https://registry.npmjs.org/react-native-image-pan-zoom/-/react-native-image-pan-zoom-2.1.11.tgz",
+      "integrity": "sha512-ZCisGUFpPchHXsjT7ZI0anlSLPgcTmjRKXqpVnPu3RDWFXfKjuL4zpY57DX4Y8YgGZCpbf9fApN7KjVYody2Mw=="
+    },
+    "react-native-image-zoom-viewer": {
+      "version": "2.2.26",
+      "resolved": "https://registry.npmjs.org/react-native-image-zoom-viewer/-/react-native-image-zoom-viewer-2.2.26.tgz",
+      "integrity": "sha512-Mh4+CJQCDcAumLFXLlDk8nQ5iMxNnupc9HwktsZ3I/v4HULcFPmTLDQ0HGAxjLa5foZRPnKDN06iKGsEb9raoA==",
+      "requires": {
+        "react-native-image-pan-zoom": "^2.1.9"
+      }
+    },
     "react-native-iphone-x-helper": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz",
@@ -5960,6 +6012,14 @@
         "react-native-iphone-x-helper": "^1.0.3"
       }
     },
+    "react-native-lightbox": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/react-native-lightbox/-/react-native-lightbox-0.8.0.tgz",
+      "integrity": "sha512-qiPx8ordPiDuyBNIfR0pxxNERSIeOSU0P40bpPSEMyuQ6xsI4JDghyuRFD+onRjIpNnuOolsLCbsTTjeVwAB5g==",
+      "requires": {
+        "prop-types": "^15.5.10"
+      }
+    },
     "react-native-maps": {
       "version": "0.24.2",
       "resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-0.24.2.tgz",
@@ -5992,6 +6052,11 @@
         "dedent": "^0.6.0"
       }
     },
+    "react-native-scalable-image": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/react-native-scalable-image/-/react-native-scalable-image-0.5.1.tgz",
+      "integrity": "sha512-bUphGBuRdet6Tx2lkgD9goa6UDcQNV9piiUUWxN59cg5BY7B1OFfkcM+9gAELCBPWqYGEoADEk6MtY35b1Rbpg=="
+    },
     "react-native-screens": {
       "version": "1.0.0-alpha.22",
       "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-1.0.0-alpha.22.tgz",
@@ -7301,6 +7366,11 @@
       "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
       "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM="
     },
+    "tslib": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+    },
     "tween-functions": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz",
@@ -7321,6 +7391,11 @@
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz",
       "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw=="
     },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+    },
     "uglify-es": {
       "version": "3.3.9",
       "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.9.tgz",

package.json

@@ -22,7 +22,12 @@
     "react-dom": "^16.8.6",
     "react-i18next": "latest",
     "react-native": "^0.59.9",
+    "react-native-autolink": "^1.8.1",
+    "react-native-hyperlink": "0.0.14",
+    "react-native-image-zoom-viewer": "^2.2.26",
+    "react-native-lightbox": "^0.8.0",
     "react-native-platform-touchable": "^1.1.1",
+    "react-native-scalable-image": "^0.5.1",
     "react-native-status-bar-height": "^2.3.1",
     "react-native-web": "^0.11.4",
     "react-navigation": "^3.11.0"

screens/HomeScreen.js

@@ -1,15 +1,16 @@
 // @flow
 
 import * as React from 'react';
-import {Image, Linking} from 'react-native';
+import {Image, Linking, TouchableOpacity, View} from 'react-native';
-import {Text, Button, Card, CardItem, Left, Body, Thumbnail} from 'native-base';
+import {Body, Button, Card, CardItem, Left, Text, Thumbnail} from 'native-base';
 import i18n from "i18n-js";
 import CustomMaterialIcon from '../components/CustomMaterialIcon';
 import FetchedDataSectionList from "../components/FetchedDataSectionList";
+import Autolink from 'react-native-autolink';
 
 const ICON_AMICALE = require('../assets/amicale.png');
 const NAME_AMICALE = 'Amicale INSA Toulouse';
-const FB_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/facebook_data.json";
+const DATA_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/facebook_data.json";
 
 
 /**
@@ -51,7 +52,7 @@ export default class HomeScreen extends FetchedDataSectionList {
     }
 
     getFetchUrl() {
-        return FB_URL;
+        return DATA_URL;
     }
 
     /**
@@ -78,9 +79,21 @@ export default class HomeScreen extends FetchedDataSectionList {
                 </CardItem>
                 <CardItem>
                     <Body>
+                        {item.full_picture !== '' && item.full_picture !== undefined ?
+                            <TouchableOpacity onPress={() => openWebLink(item.full_picture)}
+                                              style={{width: '100%', height: 250}}>
                                 <Image source={{uri: item.full_picture}}
-                               style={{width: '100%', height: 200, flex: 1}}/>
+                                       style={{flex: 1, resizeMode: "contain"}}
-                        <Text>{item.message}</Text>
+                                       resizeMode="contain"
+                                />
+                            </TouchableOpacity>
+                            : <View/>}
+                        {item.message !== undefined ?
+                            <Autolink
+                                text={item.message}
+                                hashtag="facebook"
+                            /> : <View/>
+                        }
                     </Body>
                 </CardItem>
                 <CardItem>