forked from vergnet/application-amicale
Added fullscreen image modal
This commit is contained in:
parent
cb98e1c546
commit
754c43a81a
4 changed files with 88 additions and 20 deletions
|
@ -4,6 +4,7 @@ import {TouchableOpacity, 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";
|
||||||
|
|
||||||
|
|
||||||
const ICON_AMICALE = require('../../assets/amicale.png');
|
const ICON_AMICALE = require('../../assets/amicale.png');
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -28,27 +28,28 @@
|
||||||
"@react-navigation/native": "^5.0.9",
|
"@react-navigation/native": "^5.0.9",
|
||||||
"@react-navigation/stack": "^5.1.1",
|
"@react-navigation/stack": "^5.1.1",
|
||||||
"expo": "^36.0.0",
|
"expo": "^36.0.0",
|
||||||
|
"expo-linear-gradient": "~8.0.0",
|
||||||
"expo-localization": "~8.0.0",
|
"expo-localization": "~8.0.0",
|
||||||
"expo-permissions": "~8.0.0",
|
"expo-permissions": "~8.0.0",
|
||||||
|
"expo-secure-store": "~8.0.0",
|
||||||
"expo-web-browser": "~8.0.0",
|
"expo-web-browser": "~8.0.0",
|
||||||
"i18n-js": "^3.3.0",
|
"i18n-js": "^3.3.0",
|
||||||
"react": "16.9.0",
|
"react": "16.9.0",
|
||||||
"react-dom": "16.9.0",
|
"react-dom": "16.9.0",
|
||||||
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
|
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
|
||||||
"react-native-app-intro-slider": "^3.0.0",
|
"react-native-app-intro-slider": "^3.0.0",
|
||||||
|
"react-native-appearance": "~0.3.1",
|
||||||
"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-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",
|
||||||
"react-native-render-html": "^4.1.2",
|
"react-native-render-html": "^4.1.2",
|
||||||
"react-native-safe-area-context": "0.6.0",
|
"react-native-safe-area-context": "0.6.0",
|
||||||
"react-native-screens": "2.0.0-alpha.12",
|
"react-native-screens": "2.0.0-alpha.12",
|
||||||
"react-native-webview": "7.4.3",
|
"react-native-webview": "7.4.3"
|
||||||
"react-native-appearance": "~0.3.1",
|
|
||||||
"expo-linear-gradient": "~8.0.0",
|
|
||||||
"expo-secure-store": "~8.0.0"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"babel-preset-expo": "^8.0.0",
|
"babel-preset-expo": "^8.0.0",
|
||||||
|
|
|
@ -5,12 +5,13 @@ import {View} from 'react-native';
|
||||||
import i18n from "i18n-js";
|
import i18n from "i18n-js";
|
||||||
import DashboardItem from "../components/Home/EventDashboardItem";
|
import DashboardItem from "../components/Home/EventDashboardItem";
|
||||||
import WebSectionList from "../components/Lists/WebSectionList";
|
import WebSectionList from "../components/Lists/WebSectionList";
|
||||||
import {Text, withTheme} from 'react-native-paper';
|
import {Portal, Text, withTheme} from 'react-native-paper';
|
||||||
import FeedItem from "../components/Home/FeedItem";
|
import FeedItem from "../components/Home/FeedItem";
|
||||||
import SquareDashboardItem from "../components/Home/SquareDashboardItem";
|
import SquareDashboardItem from "../components/Home/SquareDashboardItem";
|
||||||
import PreviewEventDashboardItem from "../components/Home/PreviewEventDashboardItem";
|
import PreviewEventDashboardItem from "../components/Home/PreviewEventDashboardItem";
|
||||||
import {stringToDate} from "../utils/Planning";
|
import {stringToDate} from "../utils/Planning";
|
||||||
import {openBrowser} from "../utils/WebBrowser";
|
import {openBrowser} from "../utils/WebBrowser";
|
||||||
|
import ImageView from "react-native-image-viewing";
|
||||||
// import DATA from "../dashboard_data.json";
|
// import DATA from "../dashboard_data.json";
|
||||||
|
|
||||||
|
|
||||||
|
@ -29,10 +30,15 @@ type Props = {
|
||||||
theme: Object,
|
theme: Object,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type State = {
|
||||||
|
imageModalVisible: boolean,
|
||||||
|
imageList: Array<Object>,
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Class defining the app's home screen
|
* Class defining the app's home screen
|
||||||
*/
|
*/
|
||||||
class HomeScreen extends React.Component<Props> {
|
class HomeScreen extends React.Component<Props, State> {
|
||||||
|
|
||||||
onProxiwashClick: Function;
|
onProxiwashClick: Function;
|
||||||
onTutorInsaClick: Function;
|
onTutorInsaClick: Function;
|
||||||
|
@ -43,6 +49,11 @@ class HomeScreen extends React.Component<Props> {
|
||||||
|
|
||||||
colors: Object;
|
colors: Object;
|
||||||
|
|
||||||
|
state = {
|
||||||
|
imageModalVisible: false,
|
||||||
|
imageList: [],
|
||||||
|
};
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.onProxiwashClick = this.onProxiwashClick.bind(this);
|
this.onProxiwashClick = this.onProxiwashClick.bind(this);
|
||||||
|
@ -405,6 +416,18 @@ class HomeScreen extends React.Component<Props> {
|
||||||
openBrowser(link, this.colors.primary);
|
openBrowser(link, this.colors.primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
showImageModal(imageList) {
|
||||||
|
this.setState({
|
||||||
|
imageModalVisible: true,
|
||||||
|
imageList: imageList,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
hideImageModal = () => {
|
||||||
|
this.setState({imageModalVisible: false});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Gets a render item for the given feed object
|
* Gets a render item for the given feed object
|
||||||
*
|
*
|
||||||
|
@ -412,16 +435,21 @@ class HomeScreen extends React.Component<Props> {
|
||||||
* @return {*}
|
* @return {*}
|
||||||
*/
|
*/
|
||||||
getFeedItem(item: Object) {
|
getFeedItem(item: Object) {
|
||||||
const onImagePress = this.openLink.bind(this, item.full_picture);
|
|
||||||
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}
|
||||||
subtitle={HomeScreen.getFormattedDate(item.created_time)}
|
subtitle={HomeScreen.getFormattedDate(item.created_time)}
|
||||||
full_picture={item.full_picture}
|
full_picture={item.full_picture}
|
||||||
message={item.message}
|
message={item.message}
|
||||||
onImagePress={onImagePress}
|
|
||||||
onOutLinkPress={onOutLinkPress}
|
onOutLinkPress={onOutLinkPress}
|
||||||
|
onImagePress={onPress}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -441,6 +469,7 @@ class HomeScreen extends React.Component<Props> {
|
||||||
render() {
|
render() {
|
||||||
const nav = this.props.navigation;
|
const nav = this.props.navigation;
|
||||||
return (
|
return (
|
||||||
|
<View>
|
||||||
<WebSectionList
|
<WebSectionList
|
||||||
createDataset={this.createDataset}
|
createDataset={this.createDataset}
|
||||||
navigation={nav}
|
navigation={nav}
|
||||||
|
@ -448,6 +477,17 @@ class HomeScreen extends React.Component<Props> {
|
||||||
refreshOnFocus={true}
|
refreshOnFocus={true}
|
||||||
fetchUrl={DATA_URL}
|
fetchUrl={DATA_URL}
|
||||||
renderItem={this.getRenderItem}/>
|
renderItem={this.getRenderItem}/>
|
||||||
|
<Portal>
|
||||||
|
<ImageView
|
||||||
|
images={this.state.imageList}
|
||||||
|
imageIndex={0}
|
||||||
|
presentationStyle={"fullScreen"}
|
||||||
|
visible={this.state.imageModalVisible}
|
||||||
|
onRequestClose={this.hideImageModal}
|
||||||
|
/>
|
||||||
|
</Portal>
|
||||||
|
</View>
|
||||||
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,18 +1,23 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import {Image, ScrollView, View} from 'react-native';
|
import {Image, ScrollView, TouchableOpacity, 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, withTheme} from 'react-native-paper';
|
import {Card, Portal, withTheme} from 'react-native-paper';
|
||||||
import DateManager from "../../managers/DateManager";
|
import DateManager from "../../managers/DateManager";
|
||||||
|
import ImageView from "react-native-image-viewing";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
navigation: Object,
|
navigation: Object,
|
||||||
route: Object
|
route: Object
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type State = {
|
||||||
|
imageModalVisible: boolean,
|
||||||
|
};
|
||||||
|
|
||||||
function openWebLink(event, link) {
|
function openWebLink(event, link) {
|
||||||
Linking.openURL(link).catch((err) => console.error('Error opening link', err));
|
Linking.openURL(link).catch((err) => console.error('Error opening link', err));
|
||||||
}
|
}
|
||||||
|
@ -20,17 +25,29 @@ function openWebLink(event, link) {
|
||||||
/**
|
/**
|
||||||
* Class defining a planning event information page.
|
* Class defining a planning event information page.
|
||||||
*/
|
*/
|
||||||
class PlanningDisplayScreen extends React.Component<Props> {
|
class PlanningDisplayScreen extends React.Component<Props, State> {
|
||||||
|
|
||||||
displayData = this.props.route.params['data'];
|
displayData = this.props.route.params['data'];
|
||||||
|
|
||||||
colors: Object;
|
colors: Object;
|
||||||
|
|
||||||
|
state = {
|
||||||
|
imageModalVisible: false,
|
||||||
|
};
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.colors = props.theme.colors;
|
this.colors = props.theme.colors;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
showImageModal = () => {
|
||||||
|
this.setState({imageModalVisible: true});
|
||||||
|
};
|
||||||
|
|
||||||
|
hideImageModal = () => {
|
||||||
|
this.setState({imageModalVisible: false});
|
||||||
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
// console.log("rendering planningDisplayScreen");
|
// console.log("rendering planningDisplayScreen");
|
||||||
let subtitle = getFormattedEventTime(
|
let subtitle = getFormattedEventTime(
|
||||||
|
@ -45,10 +62,10 @@ class PlanningDisplayScreen extends React.Component<Props> {
|
||||||
subtitle={subtitle}
|
subtitle={subtitle}
|
||||||
/>
|
/>
|
||||||
{this.displayData.logo !== null ?
|
{this.displayData.logo !== null ?
|
||||||
<View style={{width: '100%', height: 300}}>
|
<TouchableOpacity onPress={this.showImageModal} style={{width: '100%', height: 300}}>
|
||||||
<Image style={{flex: 1, resizeMode: "contain"}}
|
<Image style={{flex: 1, resizeMode: "contain"}}
|
||||||
source={{uri: this.displayData.logo}}/>
|
source={{uri: this.displayData.logo}}/>
|
||||||
</View>
|
</TouchableOpacity>
|
||||||
: <View/>}
|
: <View/>}
|
||||||
|
|
||||||
{this.displayData.description !== null ?
|
{this.displayData.description !== null ?
|
||||||
|
@ -62,6 +79,15 @@ class PlanningDisplayScreen extends React.Component<Props> {
|
||||||
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