ysimard/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

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

Browse source
This commit is contained in:
Arnaud Vergnet 2020-04-02 19:38:39 +02:00
parent a42d743aeb
commit 8380fb9a3d
5 changed files with 46 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
components/Home/FeedItem.js
View file

@ -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}>
<Card.Cover source={{uri: props.full_picture}}/>
</TouchableOpacity> : <View/>}
<View style={{marginLeft: 'auto', marginRight: 'auto'}}>
<ImageModal
resizeMode="contain"
imageBackgroundColor={colors.background}
style={{
width: 250,
height: 250,
}}
source={{
uri: props.full_picture,
}}
/></View> : <View/>}
<Card.Content>
{props.message !== undefined ?
<Autolink

2
package.json
View file

@ -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",

43
screens/Amicale/ClubDisplayScreen.js
View file

@ -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 ImageView from "react-native-image-viewing";
import {Avatar, Card, Paragraph, withTheme} from 'react-native-paper';
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
onPress={this.showImageModal}
style={{width: '100%', height: 300, marginBottom: 10}}>
<Image style={{flex: 1, resizeMode: "contain"}}
source={{uri: this.displayData.logo}}/>
</TouchableOpacity>
<View style={{marginLeft: 'auto', marginRight: 'auto'}}>
<ImageModal
resizeMode="contain"
imageBackgroundColor={this.colors.background}
style={{
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>
);
}

7
screens/HomeScreen.js
View file

@ -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}
/>
);
}

31
screens/Planning/PlanningDisplayScreen.js
View file

@ -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}}>
<Image style={{flex: 1, resizeMode: "contain"}}
source={{uri: this.displayData.logo}}/>
</TouchableOpacity>
<View style={{marginLeft: 'auto', marginRight: 'auto'}}>
<ImageModal
resizeMode="contain"
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>
);
}