Added fullscreen image modal

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');
 
 /**

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-webview": "7.4.3"
-    "react-native-appearance": "~0.3.1",
-    "expo-linear-gradient": "~8.0.0",
-    "expo-secure-store": "~8.0.0"
   },
   "devDependencies": {
     "babel-preset-expo": "^8.0.0",

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<Object>,
+}
+
 /**
  * Class defining the app's home screen
  */
-class HomeScreen extends React.Component<Props> {
+class HomeScreen extends React.Component<Props, State> {
 
     onProxiwashClick: Function;
     onTutorInsaClick: Function;
@@ -43,6 +49,11 @@ class HomeScreen extends React.Component<Props> {
 
     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<Props> {
         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<Props> {
      * @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 (
             <FeedItem
                 title={NAME_AMICALE}
                 subtitle={HomeScreen.getFormattedDate(item.created_time)}
                 full_picture={item.full_picture}
                 message={item.message}
-                onImagePress={onImagePress}
                 onOutLinkPress={onOutLinkPress}
+                onImagePress={onPress}
             />
         );
     }
@@ -441,6 +469,7 @@ class HomeScreen extends React.Component<Props> {
     render() {
         const nav = this.props.navigation;
         return (
+            <View>
                 <WebSectionList
                     createDataset={this.createDataset}
                     navigation={nav}
@@ -448,6 +477,17 @@ class HomeScreen extends React.Component<Props> {
                     refreshOnFocus={true}
                     fetchUrl={DATA_URL}
                     renderItem={this.getRenderItem}/>
+                <Portal>
+                    <ImageView
+                        images={this.state.imageList}
+                        imageIndex={0}
+                        presentationStyle={"fullScreen"}
+                        visible={this.state.imageModalVisible}
+                        onRequestClose={this.hideImageModal}
+                    />
+                </Portal>
+            </View>
+
         );
     }
 }

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<Props> {
+class PlanningDisplayScreen extends React.Component<Props, State> {
 
     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<Props> {
                     subtitle={subtitle}
                 />
                 {this.displayData.logo !== null ?
-                    <View style={{width: '100%', height: 300}}>
+                    <TouchableOpacity onPress={this.showImageModal} style={{width: '100%', height: 300}}>
                         <Image style={{flex: 1, resizeMode: "contain"}}
                                source={{uri: this.displayData.logo}}/>
-                    </View>
+                    </TouchableOpacity>
                     : <View/>}
 
                 {this.displayData.description !== null ?
@@ -62,6 +79,15 @@ class PlanningDisplayScreen extends React.Component<Props> {
                               onLinkPress={openWebLink}/>
                     </Card.Content>
                     : <View/>}
+                <Portal>
+                    <ImageView
+                        images={[{uri: this.displayData.logo}]}
+                        imageIndex={0}
+                        presentationStyle={"fullScreen"}
+                        visible={this.state.imageModalVisible}
+                        onRequestClose={this.hideImageModal}
+                    />
+                </Portal>
             </ScrollView>
         );
     }