Clickable links and images in home feed

This commit is contained in:
keplyx 2019-07-30 13:59:28 +02:00
parent e46517f785
commit b42ae421f5
4 changed files with 103 additions and 11 deletions

View file

@ -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
View file

@ -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",

View file

@ -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"

View file

@ -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>
{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}}/>
<Text>{item.message}</Text>
style={{flex: 1, resizeMode: "contain"}}
resizeMode="contain"
/>
</TouchableOpacity>
: <View/>}
{item.message !== undefined ?
<Autolink
text={item.message}
hashtag="facebook"
/> : <View/>
}
</Body>
</CardItem>
<CardItem>