Browse Source

Clickable links and images in home feed

keplyx 2 years ago
parent
commit
b42ae421f5
4 changed files with 103 additions and 11 deletions
  1. 0
    1
      components/FetchedDataSectionList.js
  2. 75
    0
      package-lock.json
  3. 5
    0
      package.json
  4. 23
    10
      screens/HomeScreen.js

+ 0
- 1
components/FetchedDataSectionList.js View File

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

+ 75
- 0
package-lock.json View File

@@ -1609,6 +1609,14 @@
1609 1609
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
1610 1610
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
1611 1611
     },
1612
+    "autolinker": {
1613
+      "version": "3.1.0",
1614
+      "resolved": "https://registry.npmjs.org/autolinker/-/autolinker-3.1.0.tgz",
1615
+      "integrity": "sha512-FLPmzHwLqTUZlTwXTGSM1wOcu5TrsZcOc6YPq/Kdpzp+CBNPjUzKfPvHnFx+xuPZEerY1hRY96ISAm4S1A6MTw==",
1616
+      "requires": {
1617
+        "tslib": "^1.9.3"
1618
+      }
1619
+    },
1612 1620
     "babel-plugin-module-resolver": {
1613 1621
       "version": "3.2.0",
1614 1622
       "resolved": "https://registry.npmjs.org/babel-plugin-module-resolver/-/babel-plugin-module-resolver-3.2.0.tgz",
@@ -4276,6 +4284,14 @@
4276 4284
         "invert-kv": "^1.0.0"
4277 4285
       }
4278 4286
     },
4287
+    "linkify-it": {
4288
+      "version": "1.2.4",
4289
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-1.2.4.tgz",
4290
+      "integrity": "sha1-B3NSbDF8j9E71TTuHRgP+Iq/iBo=",
4291
+      "requires": {
4292
+        "uc.micro": "^1.0.1"
4293
+      }
4294
+    },
4279 4295
     "load-json-file": {
4280 4296
       "version": "2.0.0",
4281 4297
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
@@ -4424,6 +4440,11 @@
4424 4440
         "buffer-alloc": "^1.1.0"
4425 4441
       }
4426 4442
     },
4443
+    "mdurl": {
4444
+      "version": "1.0.1",
4445
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
4446
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
4447
+    },
4427 4448
     "mem": {
4428 4449
       "version": "1.1.0",
4429 4450
       "resolved": "https://registry.npmjs.org/mem/-/mem-1.1.0.tgz",
@@ -5914,6 +5935,15 @@
5914 5935
         }
5915 5936
       }
5916 5937
     },
5938
+    "react-native-autolink": {
5939
+      "version": "1.8.1",
5940
+      "resolved": "https://registry.npmjs.org/react-native-autolink/-/react-native-autolink-1.8.1.tgz",
5941
+      "integrity": "sha512-S/Zr4+xS2tR1zsskN0JnuGQ1JuXOjzfTCD/ihAGSk6Nsaepf1UKFspii2zjPq8vLSq36ivUPhT4Lr4H2l6eCJg==",
5942
+      "requires": {
5943
+        "autolinker": "^3.0.3",
5944
+        "prop-types": "^15.7.2"
5945
+      }
5946
+    },
5917 5947
     "react-native-branch": {
5918 5948
       "version": "2.2.5",
5919 5949
       "resolved": "https://registry.npmjs.org/react-native-branch/-/react-native-branch-2.2.5.tgz",
@@ -5946,6 +5976,28 @@
5946 5976
         "prop-types": "^15.5.10"
5947 5977
       }
5948 5978
     },
5979
+    "react-native-hyperlink": {
5980
+      "version": "0.0.14",
5981
+      "resolved": "https://registry.npmjs.org/react-native-hyperlink/-/react-native-hyperlink-0.0.14.tgz",
5982
+      "integrity": "sha1-E4u/5bQQZn0eN/BKK0cTFjqw7YE=",
5983
+      "requires": {
5984
+        "linkify-it": "^1.2.0",
5985
+        "mdurl": "^1.0.0"
5986
+      }
5987
+    },
5988
+    "react-native-image-pan-zoom": {
5989
+      "version": "2.1.11",
5990
+      "resolved": "https://registry.npmjs.org/react-native-image-pan-zoom/-/react-native-image-pan-zoom-2.1.11.tgz",
5991
+      "integrity": "sha512-ZCisGUFpPchHXsjT7ZI0anlSLPgcTmjRKXqpVnPu3RDWFXfKjuL4zpY57DX4Y8YgGZCpbf9fApN7KjVYody2Mw=="
5992
+    },
5993
+    "react-native-image-zoom-viewer": {
5994
+      "version": "2.2.26",
5995
+      "resolved": "https://registry.npmjs.org/react-native-image-zoom-viewer/-/react-native-image-zoom-viewer-2.2.26.tgz",
5996
+      "integrity": "sha512-Mh4+CJQCDcAumLFXLlDk8nQ5iMxNnupc9HwktsZ3I/v4HULcFPmTLDQ0HGAxjLa5foZRPnKDN06iKGsEb9raoA==",
5997
+      "requires": {
5998
+        "react-native-image-pan-zoom": "^2.1.9"
5999
+      }
6000
+    },
5949 6001
     "react-native-iphone-x-helper": {
5950 6002
       "version": "1.2.1",
5951 6003
       "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz",
@@ -5960,6 +6012,14 @@
5960 6012
         "react-native-iphone-x-helper": "^1.0.3"
5961 6013
       }
5962 6014
     },
6015
+    "react-native-lightbox": {
6016
+      "version": "0.8.0",
6017
+      "resolved": "https://registry.npmjs.org/react-native-lightbox/-/react-native-lightbox-0.8.0.tgz",
6018
+      "integrity": "sha512-qiPx8ordPiDuyBNIfR0pxxNERSIeOSU0P40bpPSEMyuQ6xsI4JDghyuRFD+onRjIpNnuOolsLCbsTTjeVwAB5g==",
6019
+      "requires": {
6020
+        "prop-types": "^15.5.10"
6021
+      }
6022
+    },
5963 6023
     "react-native-maps": {
5964 6024
       "version": "0.24.2",
5965 6025
       "resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-0.24.2.tgz",
@@ -5992,6 +6052,11 @@
5992 6052
         "dedent": "^0.6.0"
5993 6053
       }
5994 6054
     },
6055
+    "react-native-scalable-image": {
6056
+      "version": "0.5.1",
6057
+      "resolved": "https://registry.npmjs.org/react-native-scalable-image/-/react-native-scalable-image-0.5.1.tgz",
6058
+      "integrity": "sha512-bUphGBuRdet6Tx2lkgD9goa6UDcQNV9piiUUWxN59cg5BY7B1OFfkcM+9gAELCBPWqYGEoADEk6MtY35b1Rbpg=="
6059
+    },
5995 6060
     "react-native-screens": {
5996 6061
       "version": "1.0.0-alpha.22",
5997 6062
       "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-1.0.0-alpha.22.tgz",
@@ -7301,6 +7366,11 @@
7301 7366
       "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
7302 7367
       "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM="
7303 7368
     },
7369
+    "tslib": {
7370
+      "version": "1.10.0",
7371
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
7372
+      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
7373
+    },
7304 7374
     "tween-functions": {
7305 7375
       "version": "1.2.0",
7306 7376
       "resolved": "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz",
@@ -7321,6 +7391,11 @@
7321 7391
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz",
7322 7392
       "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw=="
7323 7393
     },
7394
+    "uc.micro": {
7395
+      "version": "1.0.6",
7396
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
7397
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
7398
+    },
7324 7399
     "uglify-es": {
7325 7400
       "version": "3.3.9",
7326 7401
       "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.9.tgz",

+ 5
- 0
package.json View File

@@ -22,7 +22,12 @@
22 22
     "react-dom": "^16.8.6",
23 23
     "react-i18next": "latest",
24 24
     "react-native": "^0.59.9",
25
+    "react-native-autolink": "^1.8.1",
26
+    "react-native-hyperlink": "0.0.14",
27
+    "react-native-image-zoom-viewer": "^2.2.26",
28
+    "react-native-lightbox": "^0.8.0",
25 29
     "react-native-platform-touchable": "^1.1.1",
30
+    "react-native-scalable-image": "^0.5.1",
26 31
     "react-native-status-bar-height": "^2.3.1",
27 32
     "react-native-web": "^0.11.4",
28 33
     "react-navigation": "^3.11.0"

+ 23
- 10
screens/HomeScreen.js View File

@@ -1,15 +1,16 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Image, Linking} from 'react-native';
5
-import {Text, Button, Card, CardItem, Left, Body, Thumbnail} from 'native-base';
4
+import {Image, Linking, TouchableOpacity, View} from 'react-native';
5
+import {Body, Button, Card, CardItem, Left, Text, Thumbnail} from 'native-base';
6 6
 import i18n from "i18n-js";
7 7
 import CustomMaterialIcon from '../components/CustomMaterialIcon';
8 8
 import FetchedDataSectionList from "../components/FetchedDataSectionList";
9
+import Autolink from 'react-native-autolink';
9 10
 
10 11
 const ICON_AMICALE = require('../assets/amicale.png');
11 12
 const NAME_AMICALE = 'Amicale INSA Toulouse';
12
-const FB_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/facebook_data.json";
13
+const DATA_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/facebook_data.json";
13 14
 
14 15
 
15 16
 /**
@@ -33,11 +34,11 @@ export default class HomeScreen extends FetchedDataSectionList {
33 34
         return false;
34 35
     }
35 36
 
36
-    getKeyExtractor(item : Object) {
37
+    getKeyExtractor(item: Object) {
37 38
         return item !== undefined ? item.id : undefined;
38 39
     }
39 40
 
40
-    createDataset(fetchedData : Object) {
41
+    createDataset(fetchedData: Object) {
41 42
         let data = [];
42 43
         if (fetchedData.data !== undefined)
43 44
             data = fetchedData.data;
@@ -51,7 +52,7 @@ export default class HomeScreen extends FetchedDataSectionList {
51 52
     }
52 53
 
53 54
     getFetchUrl() {
54
-        return FB_URL;
55
+        return DATA_URL;
55 56
     }
56 57
 
57 58
     /**
@@ -64,7 +65,7 @@ export default class HomeScreen extends FetchedDataSectionList {
64 65
         return date.toLocaleString();
65 66
     }
66 67
 
67
-    getRenderItem(item: Object, section : Object, data : Object) {
68
+    getRenderItem(item: Object, section: Object, data: Object) {
68 69
         return (
69 70
             <Card style={{flex: 0}}>
70 71
                 <CardItem>
@@ -78,9 +79,21 @@ export default class HomeScreen extends FetchedDataSectionList {
78 79
                 </CardItem>
79 80
                 <CardItem>
80 81
                     <Body>
81
-                        <Image source={{uri: item.full_picture}}
82
-                               style={{width: '100%', height: 200, flex: 1}}/>
83
-                        <Text>{item.message}</Text>
82
+                        {item.full_picture !== '' && item.full_picture !== undefined ?
83
+                            <TouchableOpacity onPress={() => openWebLink(item.full_picture)}
84
+                                              style={{width: '100%', height: 250}}>
85
+                                <Image source={{uri: item.full_picture}}
86
+                                       style={{flex: 1, resizeMode: "contain"}}
87
+                                       resizeMode="contain"
88
+                                />
89
+                            </TouchableOpacity>
90
+                            : <View/>}
91
+                        {item.message !== undefined ?
92
+                            <Autolink
93
+                                text={item.message}
94
+                                hashtag="facebook"
95
+                            /> : <View/>
96
+                        }
84 97
                     </Body>
85 98
                 </CardItem>
86 99
                 <CardItem>

Loading…
Cancel
Save