Browse Source

Added fullscreen image modal

Arnaud Vergnet 4 years ago
parent
commit
754c43a81a
4 changed files with 88 additions and 20 deletions
  1. 1
    0
      components/Home/FeedItem.js
  2. 5
    4
      package.json
  3. 51
    11
      screens/HomeScreen.js
  4. 31
    5
      screens/Planning/PlanningDisplayScreen.js

+ 1
- 0
components/Home/FeedItem.js View File

@@ -4,6 +4,7 @@ import {TouchableOpacity, View} from "react-native";
4 4
 import Autolink from "react-native-autolink";
5 5
 import i18n from "i18n-js";
6 6
 
7
+
7 8
 const ICON_AMICALE = require('../../assets/amicale.png');
8 9
 
9 10
 /**

+ 5
- 4
package.json View File

@@ -28,27 +28,28 @@
28 28
     "@react-navigation/native": "^5.0.9",
29 29
     "@react-navigation/stack": "^5.1.1",
30 30
     "expo": "^36.0.0",
31
+    "expo-linear-gradient": "~8.0.0",
31 32
     "expo-localization": "~8.0.0",
32 33
     "expo-permissions": "~8.0.0",
34
+    "expo-secure-store": "~8.0.0",
33 35
     "expo-web-browser": "~8.0.0",
34 36
     "i18n-js": "^3.3.0",
35 37
     "react": "16.9.0",
36 38
     "react-dom": "16.9.0",
37 39
     "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
38 40
     "react-native-app-intro-slider": "^3.0.0",
41
+    "react-native-appearance": "~0.3.1",
39 42
     "react-native-autolink": "^1.8.1",
40 43
     "react-native-calendars": "^1.260.0",
41 44
     "react-native-gesture-handler": "~1.5.0",
45
+    "react-native-image-viewing": "^0.1.8",
42 46
     "react-native-modalize": "^1.3.6",
43 47
     "react-native-paper": "^3.6.0",
44 48
     "react-native-reanimated": "~1.4.0",
45 49
     "react-native-render-html": "^4.1.2",
46 50
     "react-native-safe-area-context": "0.6.0",
47 51
     "react-native-screens": "2.0.0-alpha.12",
48
-    "react-native-webview": "7.4.3",
49
-    "react-native-appearance": "~0.3.1",
50
-    "expo-linear-gradient": "~8.0.0",
51
-    "expo-secure-store": "~8.0.0"
52
+    "react-native-webview": "7.4.3"
52 53
   },
53 54
   "devDependencies": {
54 55
     "babel-preset-expo": "^8.0.0",

+ 51
- 11
screens/HomeScreen.js View File

@@ -5,12 +5,13 @@ import {View} from 'react-native';
5 5
 import i18n from "i18n-js";
6 6
 import DashboardItem from "../components/Home/EventDashboardItem";
7 7
 import WebSectionList from "../components/Lists/WebSectionList";
8
-import {Text, withTheme} from 'react-native-paper';
8
+import {Portal, Text, withTheme} from 'react-native-paper';
9 9
 import FeedItem from "../components/Home/FeedItem";
10 10
 import SquareDashboardItem from "../components/Home/SquareDashboardItem";
11 11
 import PreviewEventDashboardItem from "../components/Home/PreviewEventDashboardItem";
12 12
 import {stringToDate} from "../utils/Planning";
13 13
 import {openBrowser} from "../utils/WebBrowser";
14
+import ImageView from "react-native-image-viewing";
14 15
 // import DATA from "../dashboard_data.json";
15 16
 
16 17
 
@@ -29,10 +30,15 @@ type Props = {
29 30
     theme: Object,
30 31
 }
31 32
 
33
+type State = {
34
+    imageModalVisible: boolean,
35
+    imageList: Array<Object>,
36
+}
37
+
32 38
 /**
33 39
  * Class defining the app's home screen
34 40
  */
35
-class HomeScreen extends React.Component<Props> {
41
+class HomeScreen extends React.Component<Props, State> {
36 42
 
37 43
     onProxiwashClick: Function;
38 44
     onTutorInsaClick: Function;
@@ -43,6 +49,11 @@ class HomeScreen extends React.Component<Props> {
43 49
 
44 50
     colors: Object;
45 51
 
52
+    state = {
53
+        imageModalVisible: false,
54
+        imageList: [],
55
+    };
56
+
46 57
     constructor(props) {
47 58
         super(props);
48 59
         this.onProxiwashClick = this.onProxiwashClick.bind(this);
@@ -405,6 +416,18 @@ class HomeScreen extends React.Component<Props> {
405 416
         openBrowser(link, this.colors.primary);
406 417
     }
407 418
 
419
+    showImageModal(imageList) {
420
+        this.setState({
421
+            imageModalVisible: true,
422
+            imageList: imageList,
423
+        });
424
+    };
425
+
426
+    hideImageModal = () => {
427
+        this.setState({imageModalVisible: false});
428
+    };
429
+
430
+
408 431
     /**
409 432
      * Gets a render item for the given feed object
410 433
      *
@@ -412,16 +435,21 @@ class HomeScreen extends React.Component<Props> {
412 435
      * @return {*}
413 436
      */
414 437
     getFeedItem(item: Object) {
415
-        const onImagePress = this.openLink.bind(this, item.full_picture);
416 438
         const onOutLinkPress = this.openLink.bind(this, item.permalink_url);
439
+        const imageList = [
440
+            {
441
+                uri: item.full_picture,
442
+            }
443
+        ];
444
+        const onPress = this.showImageModal.bind(this, imageList);
417 445
         return (
418 446
             <FeedItem
419 447
                 title={NAME_AMICALE}
420 448
                 subtitle={HomeScreen.getFormattedDate(item.created_time)}
421 449
                 full_picture={item.full_picture}
422 450
                 message={item.message}
423
-                onImagePress={onImagePress}
424 451
                 onOutLinkPress={onOutLinkPress}
452
+                onImagePress={onPress}
425 453
             />
426 454
         );
427 455
     }
@@ -441,13 +469,25 @@ class HomeScreen extends React.Component<Props> {
441 469
     render() {
442 470
         const nav = this.props.navigation;
443 471
         return (
444
-            <WebSectionList
445
-                createDataset={this.createDataset}
446
-                navigation={nav}
447
-                autoRefreshTime={REFRESH_TIME}
448
-                refreshOnFocus={true}
449
-                fetchUrl={DATA_URL}
450
-                renderItem={this.getRenderItem}/>
472
+            <View>
473
+                <WebSectionList
474
+                    createDataset={this.createDataset}
475
+                    navigation={nav}
476
+                    autoRefreshTime={REFRESH_TIME}
477
+                    refreshOnFocus={true}
478
+                    fetchUrl={DATA_URL}
479
+                    renderItem={this.getRenderItem}/>
480
+                <Portal>
481
+                    <ImageView
482
+                        images={this.state.imageList}
483
+                        imageIndex={0}
484
+                        presentationStyle={"fullScreen"}
485
+                        visible={this.state.imageModalVisible}
486
+                        onRequestClose={this.hideImageModal}
487
+                    />
488
+                </Portal>
489
+            </View>
490
+
451 491
         );
452 492
     }
453 493
 }

+ 31
- 5
screens/Planning/PlanningDisplayScreen.js View File

@@ -1,18 +1,23 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Image, ScrollView, View} from 'react-native';
4
+import {Image, ScrollView, TouchableOpacity, View} from 'react-native';
5 5
 import HTML from "react-native-render-html";
6 6
 import {Linking} from "expo";
7 7
 import {getDateOnlyString, getFormattedEventTime} from '../../utils/Planning';
8
-import {Card, withTheme} from 'react-native-paper';
8
+import {Card, Portal, withTheme} from 'react-native-paper';
9 9
 import DateManager from "../../managers/DateManager";
10
+import ImageView from "react-native-image-viewing";
10 11
 
11 12
 type Props = {
12 13
     navigation: Object,
13 14
     route: Object
14 15
 };
15 16
 
17
+type State = {
18
+    imageModalVisible: boolean,
19
+};
20
+
16 21
 function openWebLink(event, link) {
17 22
     Linking.openURL(link).catch((err) => console.error('Error opening link', err));
18 23
 }
@@ -20,17 +25,29 @@ function openWebLink(event, link) {
20 25
 /**
21 26
  * Class defining a planning event information page.
22 27
  */
23
-class PlanningDisplayScreen extends React.Component<Props> {
28
+class PlanningDisplayScreen extends React.Component<Props, State> {
24 29
 
25 30
     displayData = this.props.route.params['data'];
26 31
 
27 32
     colors: Object;
28 33
 
34
+    state = {
35
+        imageModalVisible: false,
36
+    };
37
+
29 38
     constructor(props) {
30 39
         super(props);
31 40
         this.colors = props.theme.colors;
32 41
     }
33 42
 
43
+    showImageModal = () => {
44
+        this.setState({imageModalVisible: true});
45
+    };
46
+
47
+    hideImageModal = () => {
48
+        this.setState({imageModalVisible: false});
49
+    };
50
+
34 51
     render() {
35 52
         // console.log("rendering planningDisplayScreen");
36 53
         let subtitle = getFormattedEventTime(
@@ -45,10 +62,10 @@ class PlanningDisplayScreen extends React.Component<Props> {
45 62
                     subtitle={subtitle}
46 63
                 />
47 64
                 {this.displayData.logo !== null ?
48
-                    <View style={{width: '100%', height: 300}}>
65
+                    <TouchableOpacity onPress={this.showImageModal} style={{width: '100%', height: 300}}>
49 66
                         <Image style={{flex: 1, resizeMode: "contain"}}
50 67
                                source={{uri: this.displayData.logo}}/>
51
-                    </View>
68
+                    </TouchableOpacity>
52 69
                     : <View/>}
53 70
 
54 71
                 {this.displayData.description !== null ?
@@ -62,6 +79,15 @@ class PlanningDisplayScreen extends React.Component<Props> {
62 79
                               onLinkPress={openWebLink}/>
63 80
                     </Card.Content>
64 81
                     : <View/>}
82
+                <Portal>
83
+                    <ImageView
84
+                        images={[{uri: this.displayData.logo}]}
85
+                        imageIndex={0}
86
+                        presentationStyle={"fullScreen"}
87
+                        visible={this.state.imageModalVisible}
88
+                        onRequestClose={this.hideImageModal}
89
+                    />
90
+                </Portal>
65 91
             </ScrollView>
66 92
         );
67 93
     }

Loading…
Cancel
Save