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

components/Home/FeedItem.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import {Avatar, Button, Card, withTheme} from 'react-native-paper';
-import {TouchableOpacity, View} from "react-native";
+import {View} from "react-native";
 import Autolink from "react-native-autolink";
 import i18n from "i18n-js";
-
+import ImageModal from 'react-native-image-modal';
 
 const ICON_AMICALE = require('../../assets/amicale.png');
 
@@ -35,9 +35,18 @@ function FeedItem(props) {
                 left={getAvatar}
             />
             {props.full_picture !== '' && props.full_picture !== undefined ?
-                <TouchableOpacity onPress={props.onImagePress}>
+                <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
-                    <Card.Cover source={{uri: props.full_picture}}/>
+                    <ImageModal
-                </TouchableOpacity> : <View/>}
+                        resizeMode="contain"
+                        imageBackgroundColor={colors.background}
+                        style={{
+                            width: 250,
+                            height: 250,
+                        }}
+                        source={{
+                            uri: props.full_picture,
+                        }}
+                    /></View> : <View/>}
             <Card.Content>
                 {props.message !== undefined ?
                     <Autolink

package.json

@@ -42,7 +42,7 @@
     "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-image-modal": "^1.0.1",
     "react-native-modalize": "^1.3.6",
     "react-native-paper": "^3.6.0",
     "react-native-reanimated": "~1.4.0",

screens/Amicale/ClubDisplayScreen.js

@@ -1,11 +1,11 @@
 // @flow
 
 import * as React from 'react';
-import {Image, ScrollView, TouchableOpacity, View} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import HTML from "react-native-render-html";
 import {Linking} from "expo";
-import {Avatar, Card, Paragraph, Portal, withTheme} from 'react-native-paper';
+import {Avatar, Card, Paragraph, withTheme} from 'react-native-paper';
-import ImageView from "react-native-image-viewing";
+import ImageModal from 'react-native-image-modal';
 
 type Props = {
     navigation: Object,
@@ -42,14 +42,6 @@ class ClubDisplayScreen extends React.Component<Props, State> {
         this.props.navigation.setOptions({title: this.displayData.name})
     }
 
-    showImageModal = () => {
-        this.setState({imageModalVisible: true});
-    };
-
-    hideImageModal = () => {
-        this.setState({imageModalVisible: false});
-    };
-
     getResponsiblesRender(resp: Array<string>) {
         let final = [];
         for (let i = 0; i < resp.length; i++) {
@@ -63,7 +55,7 @@ class ClubDisplayScreen extends React.Component<Props, State> {
                     left={(props) => <Avatar.Icon
                         style={{backgroundColor: 'transparent'}}
                         {...props}
-                        icon="account-tie" />}
+                        icon="account-tie"/>}
                 />
                 <Card.Content>
                     {final}
@@ -76,12 +68,18 @@ class ClubDisplayScreen extends React.Component<Props, State> {
         return (
             <ScrollView style={{paddingLeft: 5, paddingRight: 5}}>
                 {this.displayData.logo !== null ?
-                    <TouchableOpacity
+                    <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
-                        onPress={this.showImageModal}
+                        <ImageModal
-                        style={{width: '100%', height: 300, marginBottom: 10}}>
+                            resizeMode="contain"
-                        <Image style={{flex: 1, resizeMode: "contain"}}
+                            imageBackgroundColor={this.colors.background}
-                               source={{uri: this.displayData.logo}}/>
+                            style={{
-                    </TouchableOpacity>
+                                width: 300,
+                                height: 300,
+                            }}
+                            source={{
+                                uri: this.displayData.logo,
+                            }}
+                        /></View>
                     : <View/>}
 
                 {this.displayData.description !== null ?
@@ -96,15 +94,6 @@ class ClubDisplayScreen extends React.Component<Props, State> {
                     </Card.Content>
                     : <View/>}
                 {this.getResponsiblesRender(this.displayData.responsibles)}
-                <Portal>
-                    <ImageView
-                        images={[{uri: this.displayData.logo}]}
-                        imageIndex={0}
-                        presentationStyle={"fullScreen"}
-                        visible={this.state.imageModalVisible}
-                        onRequestClose={this.hideImageModal}
-                    />
-                </Portal>
             </ScrollView>
         );
     }

screens/HomeScreen.js

@@ -436,12 +436,6 @@ class HomeScreen extends React.Component<Props, State> {
      */
     getFeedItem(item: Object) {
         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}
@@ -449,7 +443,6 @@ class HomeScreen extends React.Component<Props, State> {
                 full_picture={item.full_picture}
                 message={item.message}
                 onOutLinkPress={onOutLinkPress}
-                onImagePress={onPress}
             />
         );
     }

screens/Planning/PlanningDisplayScreen.js

@@ -1,13 +1,13 @@
 // @flow
 
 import * as React from 'react';
-import {Image, ScrollView, TouchableOpacity, View} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import HTML from "react-native-render-html";
 import {Linking} from "expo";
 import {getDateOnlyString, getFormattedEventTime} from '../../utils/Planning';
-import {Card, Portal, withTheme} from 'react-native-paper';
+import {Card, withTheme} from 'react-native-paper';
 import DateManager from "../../managers/DateManager";
-import ImageView from "react-native-image-viewing";
+import ImageModal from 'react-native-image-modal';
 
 type Props = {
     navigation: Object,
@@ -62,10 +62,18 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
                     subtitle={subtitle}
                 />
                 {this.displayData.logo !== null ?
-                    <TouchableOpacity onPress={this.showImageModal} style={{width: '100%', height: 300}}>
+                    <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
-                        <Image style={{flex: 1, resizeMode: "contain"}}
+                        <ImageModal
-                               source={{uri: this.displayData.logo}}/>
+                            resizeMode="contain"
-                    </TouchableOpacity>
+                            imageBackgroundColor={this.colors.background}
+                            style={{
+                                width: 300,
+                                height: 300,
+                            }}
+                            source={{
+                                uri: this.displayData.logo,
+                            }}
+                        /></View>
                     : <View/>}
 
                 {this.displayData.description !== null ?
@@ -79,15 +87,6 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
                               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>
         );
     }