Clickable links and images in home feed
This commit is contained in:
keplyx
parent
e46517f785
commit
b42ae421f5
4 changed files with 103 additions and 11 deletions
|
|
@ -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 = {
|
||||
|
|
|
|||
75
package-lock.json
generated
75
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Image, Linking} from 'react-native';
|
||||
import {Text, Button, Card, CardItem, Left, Body, Thumbnail} from 'native-base';
|
||||
import {Image, Linking, TouchableOpacity, View} from 'react-native';
|
||||
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";
|
||||
|
||||
|
||||
/**
|
||||
|
|
@ -33,11 +34,11 @@ export default class HomeScreen extends FetchedDataSectionList {
|
|||
return false;
|
||||
}
|
||||
|
||||
getKeyExtractor(item : Object) {
|
||||
getKeyExtractor(item: Object) {
|
||||
return item !== undefined ? item.id : undefined;
|
||||
}
|
||||
|
||||
createDataset(fetchedData : Object) {
|
||||
createDataset(fetchedData: Object) {
|
||||
let data = [];
|
||||
if (fetchedData.data !== undefined)
|
||||
data = fetchedData.data;
|
||||
|
|
@ -51,7 +52,7 @@ export default class HomeScreen extends FetchedDataSectionList {
|
|||
}
|
||||
|
||||
getFetchUrl() {
|
||||
return FB_URL;
|
||||
return DATA_URL;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -64,7 +65,7 @@ export default class HomeScreen extends FetchedDataSectionList {
|
|||
return date.toLocaleString();
|
||||
}
|
||||
|
||||
getRenderItem(item: Object, section : Object, data : Object) {
|
||||
getRenderItem(item: Object, section: Object, data: Object) {
|
||||
return (
|
||||
<Card style={{flex: 0}}>
|
||||
<CardItem>
|
||||
|
|
@ -78,9 +79,21 @@ export default class HomeScreen extends FetchedDataSectionList {
|
|||
</CardItem>
|
||||
<CardItem>
|
||||
<Body>
|
||||
<Image source={{uri: item.full_picture}}
|
||||
style={{width: '100%', height: 200, flex: 1}}/>
|
||||
<Text>{item.message}</Text>
|
||||
{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={{flex: 1, resizeMode: "contain"}}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
: <View/>}
|
||||
{item.message !== undefined ?
|
||||
<Autolink
|
||||
text={item.message}
|
||||
hashtag="facebook"
|
||||
/> : <View/>
|
||||
}
|
||||
</Body>
|
||||
</CardItem>
|
||||
<CardItem>
|
||||
|
|
|
|||
Loading…
Reference in a new issue