forked from vergnet/application-amicale
Used other image modal lib as the previous one broke back button on android
This commit is contained in:
parent
a42d743aeb
commit
8380fb9a3d
5 changed files with 46 additions and 56 deletions
|
@ -1,9 +1,9 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import {Avatar, Button, Card, withTheme} from 'react-native-paper';
|
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 Autolink from "react-native-autolink";
|
||||||
import i18n from "i18n-js";
|
import i18n from "i18n-js";
|
||||||
|
import ImageModal from 'react-native-image-modal';
|
||||||
|
|
||||||
const ICON_AMICALE = require('../../assets/amicale.png');
|
const ICON_AMICALE = require('../../assets/amicale.png');
|
||||||
|
|
||||||
|
@ -35,9 +35,18 @@ function FeedItem(props) {
|
||||||
left={getAvatar}
|
left={getAvatar}
|
||||||
/>
|
/>
|
||||||
{props.full_picture !== '' && props.full_picture !== undefined ?
|
{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>
|
<Card.Content>
|
||||||
{props.message !== undefined ?
|
{props.message !== undefined ?
|
||||||
<Autolink
|
<Autolink
|
||||||
|
|
|
@ -42,7 +42,7 @@
|
||||||
"react-native-autolink": "^1.8.1",
|
"react-native-autolink": "^1.8.1",
|
||||||
"react-native-calendars": "^1.260.0",
|
"react-native-calendars": "^1.260.0",
|
||||||
"react-native-gesture-handler": "~1.5.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-modalize": "^1.3.6",
|
||||||
"react-native-paper": "^3.6.0",
|
"react-native-paper": "^3.6.0",
|
||||||
"react-native-reanimated": "~1.4.0",
|
"react-native-reanimated": "~1.4.0",
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import * as React from 'react';
|
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 HTML from "react-native-render-html";
|
||||||
import {Linking} from "expo";
|
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 = {
|
type Props = {
|
||||||
navigation: Object,
|
navigation: Object,
|
||||||
|
@ -42,14 +42,6 @@ class ClubDisplayScreen extends React.Component<Props, State> {
|
||||||
this.props.navigation.setOptions({title: this.displayData.name})
|
this.props.navigation.setOptions({title: this.displayData.name})
|
||||||
}
|
}
|
||||||
|
|
||||||
showImageModal = () => {
|
|
||||||
this.setState({imageModalVisible: true});
|
|
||||||
};
|
|
||||||
|
|
||||||
hideImageModal = () => {
|
|
||||||
this.setState({imageModalVisible: false});
|
|
||||||
};
|
|
||||||
|
|
||||||
getResponsiblesRender(resp: Array<string>) {
|
getResponsiblesRender(resp: Array<string>) {
|
||||||
let final = [];
|
let final = [];
|
||||||
for (let i = 0; i < resp.length; i++) {
|
for (let i = 0; i < resp.length; i++) {
|
||||||
|
@ -63,7 +55,7 @@ class ClubDisplayScreen extends React.Component<Props, State> {
|
||||||
left={(props) => <Avatar.Icon
|
left={(props) => <Avatar.Icon
|
||||||
style={{backgroundColor: 'transparent'}}
|
style={{backgroundColor: 'transparent'}}
|
||||||
{...props}
|
{...props}
|
||||||
icon="account-tie" />}
|
icon="account-tie"/>}
|
||||||
/>
|
/>
|
||||||
<Card.Content>
|
<Card.Content>
|
||||||
{final}
|
{final}
|
||||||
|
@ -76,12 +68,18 @@ class ClubDisplayScreen extends React.Component<Props, State> {
|
||||||
return (
|
return (
|
||||||
<ScrollView style={{paddingLeft: 5, paddingRight: 5}}>
|
<ScrollView style={{paddingLeft: 5, paddingRight: 5}}>
|
||||||
{this.displayData.logo !== null ?
|
{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/>}
|
: <View/>}
|
||||||
|
|
||||||
{this.displayData.description !== null ?
|
{this.displayData.description !== null ?
|
||||||
|
@ -96,15 +94,6 @@ class ClubDisplayScreen extends React.Component<Props, State> {
|
||||||
</Card.Content>
|
</Card.Content>
|
||||||
: <View/>}
|
: <View/>}
|
||||||
{this.getResponsiblesRender(this.displayData.responsibles)}
|
{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>
|
</ScrollView>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -436,12 +436,6 @@ class HomeScreen extends React.Component<Props, State> {
|
||||||
*/
|
*/
|
||||||
getFeedItem(item: Object) {
|
getFeedItem(item: Object) {
|
||||||
const onOutLinkPress = this.openLink.bind(this, item.permalink_url);
|
const onOutLinkPress = this.openLink.bind(this, item.permalink_url);
|
||||||
const imageList = [
|
|
||||||
{
|
|
||||||
uri: item.full_picture,
|
|
||||||
}
|
|
||||||
];
|
|
||||||
const onPress = this.showImageModal.bind(this, imageList);
|
|
||||||
return (
|
return (
|
||||||
<FeedItem
|
<FeedItem
|
||||||
title={NAME_AMICALE}
|
title={NAME_AMICALE}
|
||||||
|
@ -449,7 +443,6 @@ class HomeScreen extends React.Component<Props, State> {
|
||||||
full_picture={item.full_picture}
|
full_picture={item.full_picture}
|
||||||
message={item.message}
|
message={item.message}
|
||||||
onOutLinkPress={onOutLinkPress}
|
onOutLinkPress={onOutLinkPress}
|
||||||
onImagePress={onPress}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import * as React from 'react';
|
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 HTML from "react-native-render-html";
|
||||||
import {Linking} from "expo";
|
import {Linking} from "expo";
|
||||||
import {getDateOnlyString, getFormattedEventTime} from '../../utils/Planning';
|
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 DateManager from "../../managers/DateManager";
|
||||||
import ImageView from "react-native-image-viewing";
|
import ImageModal from 'react-native-image-modal';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
navigation: Object,
|
navigation: Object,
|
||||||
|
@ -62,10 +62,18 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
|
||||||
subtitle={subtitle}
|
subtitle={subtitle}
|
||||||
/>
|
/>
|
||||||
{this.displayData.logo !== null ?
|
{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/>}
|
: <View/>}
|
||||||
|
|
||||||
{this.displayData.description !== null ?
|
{this.displayData.description !== null ?
|
||||||
|
@ -79,15 +87,6 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
|
||||||
onLinkPress={openWebLink}/>
|
onLinkPress={openWebLink}/>
|
||||||
</Card.Content>
|
</Card.Content>
|
||||||
: <View/>}
|
: <View/>}
|
||||||
<Portal>
|
|
||||||
<ImageView
|
|
||||||
images={[{uri: this.displayData.logo}]}
|
|
||||||
imageIndex={0}
|
|
||||||
presentationStyle={"fullScreen"}
|
|
||||||
visible={this.state.imageModalVisible}
|
|
||||||
onRequestClose={this.hideImageModal}
|
|
||||||
/>
|
|
||||||
</Portal>
|
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue