Browse Source

Used other image modal lib as the previous one broke back button on android

Arnaud Vergnet 1 year ago
parent
commit
8380fb9a3d

+ 14
- 5
components/Home/FeedItem.js View File

@@ -1,9 +1,9 @@
1 1
 import * as React from 'react';
2 2
 import {Avatar, Button, Card, withTheme} from 'react-native-paper';
3
-import {TouchableOpacity, View} from "react-native";
3
+import {View} from "react-native";
4 4
 import Autolink from "react-native-autolink";
5 5
 import i18n from "i18n-js";
6
-
6
+import ImageModal from 'react-native-image-modal';
7 7
 
8 8
 const ICON_AMICALE = require('../../assets/amicale.png');
9 9
 
@@ -35,9 +35,18 @@ function FeedItem(props) {
35 35
                 left={getAvatar}
36 36
             />
37 37
             {props.full_picture !== '' && props.full_picture !== undefined ?
38
-                <TouchableOpacity onPress={props.onImagePress}>
39
-                    <Card.Cover source={{uri: props.full_picture}}/>
40
-                </TouchableOpacity> : <View/>}
38
+                <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
39
+                    <ImageModal
40
+                        resizeMode="contain"
41
+                        imageBackgroundColor={colors.background}
42
+                        style={{
43
+                            width: 250,
44
+                            height: 250,
45
+                        }}
46
+                        source={{
47
+                            uri: props.full_picture,
48
+                        }}
49
+                    /></View> : <View/>}
41 50
             <Card.Content>
42 51
                 {props.message !== undefined ?
43 52
                     <Autolink

+ 1
- 1
package.json View File

@@ -42,7 +42,7 @@
42 42
     "react-native-autolink": "^1.8.1",
43 43
     "react-native-calendars": "^1.260.0",
44 44
     "react-native-gesture-handler": "~1.5.0",
45
-    "react-native-image-viewing": "^0.1.8",
45
+    "react-native-image-modal": "^1.0.1",
46 46
     "react-native-modalize": "^1.3.6",
47 47
     "react-native-paper": "^3.6.0",
48 48
     "react-native-reanimated": "~1.4.0",

+ 16
- 27
screens/Amicale/ClubDisplayScreen.js View File

@@ -1,11 +1,11 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Image, ScrollView, TouchableOpacity, View} from 'react-native';
4
+import {ScrollView, View} from 'react-native';
5 5
 import HTML from "react-native-render-html";
6 6
 import {Linking} from "expo";
7
-import {Avatar, Card, Paragraph, Portal, withTheme} from 'react-native-paper';
8
-import ImageView from "react-native-image-viewing";
7
+import {Avatar, Card, Paragraph, withTheme} from 'react-native-paper';
8
+import ImageModal from 'react-native-image-modal';
9 9
 
10 10
 type Props = {
11 11
     navigation: Object,
@@ -42,14 +42,6 @@ class ClubDisplayScreen extends React.Component<Props, State> {
42 42
         this.props.navigation.setOptions({title: this.displayData.name})
43 43
     }
44 44
 
45
-    showImageModal = () => {
46
-        this.setState({imageModalVisible: true});
47
-    };
48
-
49
-    hideImageModal = () => {
50
-        this.setState({imageModalVisible: false});
51
-    };
52
-
53 45
     getResponsiblesRender(resp: Array<string>) {
54 46
         let final = [];
55 47
         for (let i = 0; i < resp.length; i++) {
@@ -63,7 +55,7 @@ class ClubDisplayScreen extends React.Component<Props, State> {
63 55
                     left={(props) => <Avatar.Icon
64 56
                         style={{backgroundColor: 'transparent'}}
65 57
                         {...props}
66
-                        icon="account-tie" />}
58
+                        icon="account-tie"/>}
67 59
                 />
68 60
                 <Card.Content>
69 61
                     {final}
@@ -76,12 +68,18 @@ class ClubDisplayScreen extends React.Component<Props, State> {
76 68
         return (
77 69
             <ScrollView style={{paddingLeft: 5, paddingRight: 5}}>
78 70
                 {this.displayData.logo !== null ?
79
-                    <TouchableOpacity
80
-                        onPress={this.showImageModal}
81
-                        style={{width: '100%', height: 300, marginBottom: 10}}>
82
-                        <Image style={{flex: 1, resizeMode: "contain"}}
83
-                               source={{uri: this.displayData.logo}}/>
84
-                    </TouchableOpacity>
71
+                    <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
72
+                        <ImageModal
73
+                            resizeMode="contain"
74
+                            imageBackgroundColor={this.colors.background}
75
+                            style={{
76
+                                width: 300,
77
+                                height: 300,
78
+                            }}
79
+                            source={{
80
+                                uri: this.displayData.logo,
81
+                            }}
82
+                        /></View>
85 83
                     : <View/>}
86 84
 
87 85
                 {this.displayData.description !== null ?
@@ -96,15 +94,6 @@ class ClubDisplayScreen extends React.Component<Props, State> {
96 94
                     </Card.Content>
97 95
                     : <View/>}
98 96
                 {this.getResponsiblesRender(this.displayData.responsibles)}
99
-                <Portal>
100
-                    <ImageView
101
-                        images={[{uri: this.displayData.logo}]}
102
-                        imageIndex={0}
103
-                        presentationStyle={"fullScreen"}
104
-                        visible={this.state.imageModalVisible}
105
-                        onRequestClose={this.hideImageModal}
106
-                    />
107
-                </Portal>
108 97
             </ScrollView>
109 98
         );
110 99
     }

+ 0
- 7
screens/HomeScreen.js View File

@@ -436,12 +436,6 @@ class HomeScreen extends React.Component<Props, State> {
436 436
      */
437 437
     getFeedItem(item: Object) {
438 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);
445 439
         return (
446 440
             <FeedItem
447 441
                 title={NAME_AMICALE}
@@ -449,7 +443,6 @@ class HomeScreen extends React.Component<Props, State> {
449 443
                 full_picture={item.full_picture}
450 444
                 message={item.message}
451 445
                 onOutLinkPress={onOutLinkPress}
452
-                onImagePress={onPress}
453 446
             />
454 447
         );
455 448
     }

+ 15
- 16
screens/Planning/PlanningDisplayScreen.js View File

@@ -1,13 +1,13 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Image, ScrollView, TouchableOpacity, View} from 'react-native';
4
+import {ScrollView, 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, Portal, withTheme} from 'react-native-paper';
8
+import {Card, withTheme} from 'react-native-paper';
9 9
 import DateManager from "../../managers/DateManager";
10
-import ImageView from "react-native-image-viewing";
10
+import ImageModal from 'react-native-image-modal';
11 11
 
12 12
 type Props = {
13 13
     navigation: Object,
@@ -62,10 +62,18 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
62 62
                     subtitle={subtitle}
63 63
                 />
64 64
                 {this.displayData.logo !== null ?
65
-                    <TouchableOpacity onPress={this.showImageModal} style={{width: '100%', height: 300}}>
66
-                        <Image style={{flex: 1, resizeMode: "contain"}}
67
-                               source={{uri: this.displayData.logo}}/>
68
-                    </TouchableOpacity>
65
+                    <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
66
+                        <ImageModal
67
+                            resizeMode="contain"
68
+                            imageBackgroundColor={this.colors.background}
69
+                            style={{
70
+                                width: 300,
71
+                                height: 300,
72
+                            }}
73
+                            source={{
74
+                                uri: this.displayData.logo,
75
+                            }}
76
+                        /></View>
69 77
                     : <View/>}
70 78
 
71 79
                 {this.displayData.description !== null ?
@@ -79,15 +87,6 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
79 87
                               onLinkPress={openWebLink}/>
80 88
                     </Card.Content>
81 89
                     : <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>
91 90
             </ScrollView>
92 91
         );
93 92
     }

Loading…
Cancel
Save