From 754c43a81a17a8c5a153584993a30cc275175183 Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Thu, 2 Apr 2020 15:33:12 +0200 Subject: [PATCH] Added fullscreen image modal --- components/Home/FeedItem.js | 1 + package.json | 9 ++-- screens/HomeScreen.js | 62 +++++++++++++++++++---- screens/Planning/PlanningDisplayScreen.js | 36 +++++++++++-- 4 files changed, 88 insertions(+), 20 deletions(-) diff --git a/components/Home/FeedItem.js b/components/Home/FeedItem.js index d5f87ae..1734c36 100644 --- a/components/Home/FeedItem.js +++ b/components/Home/FeedItem.js @@ -4,6 +4,7 @@ import {TouchableOpacity, View} from "react-native"; import Autolink from "react-native-autolink"; import i18n from "i18n-js"; + const ICON_AMICALE = require('../../assets/amicale.png'); /** diff --git a/package.json b/package.json index 5c45062..53e460a 100644 --- a/package.json +++ b/package.json @@ -28,27 +28,28 @@ "@react-navigation/native": "^5.0.9", "@react-navigation/stack": "^5.1.1", "expo": "^36.0.0", + "expo-linear-gradient": "~8.0.0", "expo-localization": "~8.0.0", "expo-permissions": "~8.0.0", + "expo-secure-store": "~8.0.0", "expo-web-browser": "~8.0.0", "i18n-js": "^3.3.0", "react": "16.9.0", "react-dom": "16.9.0", "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz", "react-native-app-intro-slider": "^3.0.0", + "react-native-appearance": "~0.3.1", "react-native-autolink": "^1.8.1", "react-native-calendars": "^1.260.0", "react-native-gesture-handler": "~1.5.0", + "react-native-image-viewing": "^0.1.8", "react-native-modalize": "^1.3.6", "react-native-paper": "^3.6.0", "react-native-reanimated": "~1.4.0", "react-native-render-html": "^4.1.2", "react-native-safe-area-context": "0.6.0", "react-native-screens": "2.0.0-alpha.12", - "react-native-webview": "7.4.3", - "react-native-appearance": "~0.3.1", - "expo-linear-gradient": "~8.0.0", - "expo-secure-store": "~8.0.0" + "react-native-webview": "7.4.3" }, "devDependencies": { "babel-preset-expo": "^8.0.0", diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js index dddc50c..4a8e4b0 100644 --- a/screens/HomeScreen.js +++ b/screens/HomeScreen.js @@ -5,12 +5,13 @@ import {View} from 'react-native'; import i18n from "i18n-js"; import DashboardItem from "../components/Home/EventDashboardItem"; import WebSectionList from "../components/Lists/WebSectionList"; -import {Text, withTheme} from 'react-native-paper'; +import {Portal, Text, withTheme} from 'react-native-paper'; import FeedItem from "../components/Home/FeedItem"; import SquareDashboardItem from "../components/Home/SquareDashboardItem"; import PreviewEventDashboardItem from "../components/Home/PreviewEventDashboardItem"; import {stringToDate} from "../utils/Planning"; import {openBrowser} from "../utils/WebBrowser"; +import ImageView from "react-native-image-viewing"; // import DATA from "../dashboard_data.json"; @@ -29,10 +30,15 @@ type Props = { theme: Object, } +type State = { + imageModalVisible: boolean, + imageList: Array, +} + /** * Class defining the app's home screen */ -class HomeScreen extends React.Component { +class HomeScreen extends React.Component { onProxiwashClick: Function; onTutorInsaClick: Function; @@ -43,6 +49,11 @@ class HomeScreen extends React.Component { colors: Object; + state = { + imageModalVisible: false, + imageList: [], + }; + constructor(props) { super(props); this.onProxiwashClick = this.onProxiwashClick.bind(this); @@ -405,6 +416,18 @@ class HomeScreen extends React.Component { openBrowser(link, this.colors.primary); } + showImageModal(imageList) { + this.setState({ + imageModalVisible: true, + imageList: imageList, + }); + }; + + hideImageModal = () => { + this.setState({imageModalVisible: false}); + }; + + /** * Gets a render item for the given feed object * @@ -412,16 +435,21 @@ class HomeScreen extends React.Component { * @return {*} */ getFeedItem(item: Object) { - const onImagePress = this.openLink.bind(this, item.full_picture); const onOutLinkPress = this.openLink.bind(this, item.permalink_url); + const imageList = [ + { + uri: item.full_picture, + } + ]; + const onPress = this.showImageModal.bind(this, imageList); return ( ); } @@ -441,13 +469,25 @@ class HomeScreen extends React.Component { render() { const nav = this.props.navigation; return ( - + + + + + + + ); } } diff --git a/screens/Planning/PlanningDisplayScreen.js b/screens/Planning/PlanningDisplayScreen.js index 7d0db4f..0dc5944 100644 --- a/screens/Planning/PlanningDisplayScreen.js +++ b/screens/Planning/PlanningDisplayScreen.js @@ -1,18 +1,23 @@ // @flow import * as React from 'react'; -import {Image, ScrollView, View} from 'react-native'; +import {Image, ScrollView, TouchableOpacity, View} from 'react-native'; import HTML from "react-native-render-html"; import {Linking} from "expo"; import {getDateOnlyString, getFormattedEventTime} from '../../utils/Planning'; -import {Card, withTheme} from 'react-native-paper'; +import {Card, Portal, withTheme} from 'react-native-paper'; import DateManager from "../../managers/DateManager"; +import ImageView from "react-native-image-viewing"; type Props = { navigation: Object, route: Object }; +type State = { + imageModalVisible: boolean, +}; + function openWebLink(event, link) { Linking.openURL(link).catch((err) => console.error('Error opening link', err)); } @@ -20,17 +25,29 @@ function openWebLink(event, link) { /** * Class defining a planning event information page. */ -class PlanningDisplayScreen extends React.Component { +class PlanningDisplayScreen extends React.Component { displayData = this.props.route.params['data']; colors: Object; + state = { + imageModalVisible: false, + }; + constructor(props) { super(props); this.colors = props.theme.colors; } + showImageModal = () => { + this.setState({imageModalVisible: true}); + }; + + hideImageModal = () => { + this.setState({imageModalVisible: false}); + }; + render() { // console.log("rendering planningDisplayScreen"); let subtitle = getFormattedEventTime( @@ -45,10 +62,10 @@ class PlanningDisplayScreen extends React.Component { subtitle={subtitle} /> {this.displayData.logo !== null ? - + - + : } {this.displayData.description !== null ? @@ -62,6 +79,15 @@ class PlanningDisplayScreen extends React.Component { onLinkPress={openWebLink}/> : } + + + ); }