Skip to content

Commit eaf7db0

Browse files
author
alvaromb
committed
More Android basic support
1 parent 0509b76 commit eaf7db0

3 files changed

Lines changed: 120 additions & 96 deletions

File tree

‎lib/ImageBrowser.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,11 @@ class ImageBrowser extends React.Component<Props, State> {
101101
/>
102102
{this.state.displayImageViewer &&
103103
this.state.imageId && (
104-
<Modal visible={true} transparent={true}>
104+
<Modal
105+
visible={true}
106+
transparent={true}
107+
onRequestClose={this.closeImageViewer}
108+
>
105109
<ImageViewer
106110
images={this.props.images}
107111
imageId={this.state.imageId}

‎lib/ImageHorizontalContainer.js‎

Lines changed: 30 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@
22

33
import React from 'react'
44
import PropTypes from 'prop-types'
5-
import { Animated, FlatList, StyleSheet } from 'react-native'
5+
import {
6+
Animated,
7+
Platform,
8+
FlatList,
9+
StyleSheet,
10+
Dimensions
11+
} from 'react-native'
612
import OpenedImageView from './OpenedImageView'
713

814
import type { ImageSource } from './ImageBrowser'
@@ -104,13 +110,11 @@ class ImageHorizontalContainer extends React.PureComponent<Props, State> {
104110
}
105111
}
106112

107-
_getItemLayout = (items: any, index: number) => {
108-
return {
109-
length: this.props.width,
110-
index: index,
111-
offset: index * this.props.width
112-
}
113-
}
113+
_getItemLayout = (items: any, index: number) => ({
114+
length: this.props.width,
115+
index: index,
116+
offset: index * this.props.width
117+
})
114118

115119
_keyExtractor = (item: ImageSource) => `OpenedImageView-${item.id}`
116120

@@ -134,52 +138,25 @@ class ImageHorizontalContainer extends React.PureComponent<Props, State> {
134138
const initialScrollIndex: number = this.props.images.findIndex(
135139
(img: ImageSource) => img.id === this.props.imageId
136140
)
137-
// const image: ImageSource = this.props.images[initialScrollIndex]
138141
return (
139-
<Animated.View>
140-
<FlatList
141-
ref={(ref: any) => {
142-
this._flatList = ref
143-
}}
144-
style={styles.container}
145-
data={this.props.images}
146-
extraData={`w${this.state.imageWidth}-h${
147-
this.state.imageHeight
148-
}-t${this.props.transitionProgress.__getValue()}`}
149-
renderItem={this._renderItem}
150-
getItemLayout={this._getItemLayout}
151-
horizontal={true}
152-
pagingEnabled={true}
153-
initialNumToRender={1}
154-
keyExtractor={this._keyExtractor}
155-
initialScrollIndex={initialScrollIndex}
156-
onViewableItemsChanged={this._onViewableItemsChanged}
157-
/>
158-
{/*this.state.zoomOn &&
159-
this.state.zoomTransition && (
160-
<Animated.Image
161-
source={{ uri: image.URI }}
162-
resizeMode='contain'
163-
style={{
164-
position: 'absolute',
165-
width: this.props.openImageMeasurements.width,
166-
height: this.props.openImageMeasurements.height,
167-
left: this.props.openImageMeasurements.x,
168-
top: this.props.openImageMeasurements.y,
169-
transform: [
170-
{
171-
scale:
172-
this.state.zoomTransition &&
173-
this.state.zoomTransition.interpolate({
174-
inputRange: [0.02, 0.998],
175-
outputRange: [1, getImageScale()]
176-
})
177-
}
178-
]
179-
}}
180-
/>
181-
)*/}
182-
</Animated.View>
142+
<FlatList
143+
ref={(ref: any) => {
144+
this._flatList = ref
145+
}}
146+
initialNumToRender={Platform.OS === 'ios' ? 1 : this.props.images.length}
147+
style={styles.container}
148+
data={this.props.images}
149+
extraData={`w${this.state.imageWidth}-h${
150+
this.state.imageHeight
151+
}-t${this.props.transitionProgress.__getValue()}`}
152+
renderItem={this._renderItem}
153+
getItemLayout={this._getItemLayout}
154+
horizontal={true}
155+
pagingEnabled={true}
156+
keyExtractor={this._keyExtractor}
157+
initialScrollIndex={initialScrollIndex}
158+
onViewableItemsChanged={this._onViewableItemsChanged}
159+
/>
183160
)
184161
}
185162
}

‎lib/ImageViewer.js‎

Lines changed: 85 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* @flow */
22

33
import React from 'react'
4-
import { Easing, Animated, StyleSheet, Dimensions } from 'react-native'
4+
import { Easing, Platform, Animated, StyleSheet, Dimensions } from 'react-native'
55
import ViewerBackground from './ViewerBackground'
66
import ScrollSpacerView from './ScrollSpacerView'
77
import ImageHorizontalContainer from './ImageHorizontalContainer'
@@ -101,6 +101,7 @@ class ImageViewer extends React.Component<Props, State> {
101101
_getTransitionProgress = () => {
102102
const gestureDismissProgress =
103103
this.state.dismissScrollProgress &&
104+
Platform.OS === 'ios' &&
104105
this.state.dismissScrollProgress.interpolate({
105106
inputRange: [
106107
0,
@@ -286,6 +287,80 @@ class ImageViewer extends React.Component<Props, State> {
286287
}
287288
}
288289

290+
_renderVerticalScrollView(
291+
width: Animated.Value,
292+
height: Animated.Value,
293+
imageSource: ?ImageSource,
294+
openImageMeasurements: ?ImageMeasurements,
295+
openProgress: any,
296+
dismissProgress: any,
297+
transitionProgress: any
298+
) {
299+
if (Platform.OS === 'ios') {
300+
return (
301+
<Animated.ScrollView
302+
ref={this._handleRef}
303+
onScroll={Animated.event(
304+
[
305+
{
306+
nativeEvent: {
307+
contentOffset: { y: this.state.dismissScrollProgress }
308+
}
309+
}
310+
],
311+
{ useNativeDriver: true, listener: this._onScroll }
312+
)}
313+
scrollEventThrottle={1}
314+
pagingEnabled={true}
315+
showsVerticalScrollIndicator={false}
316+
>
317+
<ScrollSpacerView width={width} height={height} />
318+
<ImageHorizontalContainer
319+
images={this.props.images}
320+
imageId={this.props.imageId}
321+
uri={imageSource ? imageSource.URI : ''}
322+
width={width.__getValue()}
323+
height={height.__getValue()}
324+
imageWidth={openImageMeasurements ? openImageMeasurements.width : 0}
325+
imageHeight={
326+
openImageMeasurements ? openImageMeasurements.height : 0
327+
}
328+
realImageWidth={this.state.imageWidth}
329+
realImageHeight={this.state.imageHeight}
330+
openProgress={openProgress}
331+
dismissProgress={dismissProgress}
332+
transitionProgress={transitionProgress}
333+
dismissScrollProgress={this.state.dismissScrollProgress}
334+
onChangePhoto={this.props.onChangePhoto}
335+
openImageMeasurements={openImageMeasurements || {}}
336+
onPressImage={this._onPressImage}
337+
/>
338+
<ScrollSpacerView width={width} height={height} />
339+
</Animated.ScrollView>
340+
)
341+
}
342+
return (
343+
<ImageHorizontalContainer
344+
images={this.props.images}
345+
imageId={this.props.imageId}
346+
uri={imageSource ? imageSource.URI : ''}
347+
width={width.__getValue()}
348+
height={height.__getValue()}
349+
imageWidth={openImageMeasurements ? openImageMeasurements.width : 0}
350+
imageHeight={openImageMeasurements ? openImageMeasurements.height : 0}
351+
realImageWidth={this.state.imageWidth}
352+
realImageHeight={this.state.imageHeight}
353+
openProgress={openProgress}
354+
dismissProgress={dismissProgress}
355+
transitionProgress={transitionProgress}
356+
dismissScrollProgress={this.state.dismissScrollProgress}
357+
onChangePhoto={this.props.onChangePhoto}
358+
openImageMeasurements={openImageMeasurements || {}}
359+
onPressImage={this._onPressImage}
360+
/>
361+
)
362+
}
363+
289364
render() {
290365
const {
291366
width,
@@ -317,47 +392,15 @@ class ImageViewer extends React.Component<Props, State> {
317392
inputRange={[0, height.__getValue(), height.__getValue() * 2]}
318393
outputRange={[0.02, 1, 0.02]}
319394
/>
320-
<Animated.ScrollView
321-
ref={this._handleRef}
322-
onScroll={Animated.event(
323-
[
324-
{
325-
nativeEvent: {
326-
contentOffset: { y: this.state.dismissScrollProgress }
327-
}
328-
}
329-
],
330-
{ useNativeDriver: true, listener: this._onScroll }
331-
)}
332-
scrollEventThrottle={1}
333-
pagingEnabled={true}
334-
showsVerticalScrollIndicator={false}
335-
>
336-
<ScrollSpacerView width={width} height={height} />
337-
<ImageHorizontalContainer
338-
images={this.props.images}
339-
imageId={this.props.imageId}
340-
uri={imageSource ? imageSource.URI : ''}
341-
width={width.__getValue()}
342-
height={height.__getValue()}
343-
imageWidth={
344-
openImageMeasurements ? openImageMeasurements.width : 0
345-
}
346-
imageHeight={
347-
openImageMeasurements ? openImageMeasurements.height : 0
348-
}
349-
realImageWidth={this.state.imageWidth}
350-
realImageHeight={this.state.imageHeight}
351-
openProgress={openProgress}
352-
dismissProgress={dismissProgress}
353-
transitionProgress={transitionProgress}
354-
dismissScrollProgress={this.state.dismissScrollProgress}
355-
onChangePhoto={this.props.onChangePhoto}
356-
openImageMeasurements={openImageMeasurements || {}}
357-
onPressImage={this._onPressImage}
358-
/>
359-
<ScrollSpacerView width={width} height={height} />
360-
</Animated.ScrollView>
395+
{this._renderVerticalScrollView(
396+
width,
397+
height,
398+
imageSource,
399+
openImageMeasurements,
400+
openProgress,
401+
dismissProgress,
402+
transitionProgress
403+
)}
361404
</Animated.View>
362405
{initialImageMeasurements &&
363406
openImageMeasurements && (

0 commit comments

Comments
 (0)