Skip to content

Commit bb58577

Browse files
khushal87khushal87
authored
fix: animations usage in ImageGallery (#2627)
1 parent 05005ce commit bb58577

File tree

3 files changed

+74
-75
lines changed

3 files changed

+74
-75
lines changed

‎package/src/components/ImageGallery/ImageGallery.tsx‎

Lines changed: 63 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect, useRef, useState } from 'react';
22
import { Image, ImageStyle, Keyboard, StyleSheet, ViewStyle } from 'react-native';
33

4-
import { GestureDetector } from 'react-native-gesture-handler';
4+
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
55

66
import Animated, {
77
Easing,
@@ -500,77 +500,71 @@ export const ImageGallery = <
500500
style={[StyleSheet.absoluteFillObject, showScreenStyle]}
501501
>
502502
<Animated.View style={[StyleSheet.absoluteFillObject, containerBackground]} />
503-
<GestureDetector gesture={singleTap}>
503+
<GestureDetector gesture={Gesture.Simultaneous(singleTap, doubleTap, pinch, pan)}>
504504
<Animated.View style={StyleSheet.absoluteFillObject}>
505-
<GestureDetector gesture={doubleTap}>
506-
<Animated.View style={StyleSheet.absoluteFillObject}>
507-
<GestureDetector gesture={pinch}>
508-
<Animated.View style={StyleSheet.absoluteFill}>
509-
<GestureDetector gesture={pan}>
510-
<Animated.View style={StyleSheet.absoluteFill}>
511-
<Animated.View style={[styles.animatedContainer, pagerStyle, pager]}>
512-
{imageGalleryAttachments.map((photo, i) =>
513-
photo.type === FileTypes.Video ? (
514-
<AnimatedGalleryVideo
515-
attachmentId={photo.id}
516-
handleEnd={handleEnd}
517-
handleLoad={handleLoad}
518-
handleProgress={handleProgress}
519-
index={i}
520-
key={`${photo.uri}-${i}`}
521-
offsetScale={offsetScale}
522-
paused={photo.paused || false}
523-
previous={selectedIndex > i}
524-
repeat={true}
525-
scale={scale}
526-
screenHeight={fullWindowHeight}
527-
selected={selectedIndex === i}
528-
shouldRender={Math.abs(selectedIndex - i) < 4}
529-
source={{ uri: photo.uri }}
530-
style={[
531-
{
532-
height: fullWindowHeight * 8,
533-
marginRight: MARGIN,
534-
width: fullWindowWidth * 8,
535-
},
536-
slide,
537-
]}
538-
translateX={translateX}
539-
translateY={translateY}
540-
videoRef={videoRef}
541-
/>
542-
) : (
543-
<AnimatedGalleryImage
544-
accessibilityLabel={'Image Item'}
545-
index={i}
546-
key={`${photo.uri}-${i}`}
547-
offsetScale={offsetScale}
548-
photo={photo}
549-
previous={selectedIndex > i}
550-
scale={scale}
551-
screenHeight={fullWindowHeight}
552-
selected={selectedIndex === i}
553-
shouldRender={Math.abs(selectedIndex - i) < 4}
554-
style={[
555-
{
556-
height: fullWindowHeight * 8,
557-
marginRight: MARGIN,
558-
width: fullWindowWidth * 8,
559-
},
560-
slide,
561-
]}
562-
translateX={translateX}
563-
translateY={translateY}
564-
/>
565-
),
566-
)}
567-
</Animated.View>
568-
</Animated.View>
569-
</GestureDetector>
505+
<Animated.View style={StyleSheet.absoluteFillObject}>
506+
<Animated.View style={StyleSheet.absoluteFill}>
507+
<Animated.View style={StyleSheet.absoluteFill}>
508+
<Animated.View style={[styles.animatedContainer, pagerStyle, pager]}>
509+
{imageGalleryAttachments.map((photo, i) =>
510+
photo.type === FileTypes.Video ? (
511+
<AnimatedGalleryVideo
512+
attachmentId={photo.id}
513+
handleEnd={handleEnd}
514+
handleLoad={handleLoad}
515+
handleProgress={handleProgress}
516+
index={i}
517+
key={`${photo.uri}-${i}`}
518+
offsetScale={offsetScale}
519+
paused={photo.paused || false}
520+
previous={selectedIndex > i}
521+
repeat={true}
522+
scale={scale}
523+
screenHeight={fullWindowHeight}
524+
selected={selectedIndex === i}
525+
shouldRender={Math.abs(selectedIndex - i) < 4}
526+
source={{ uri: photo.uri }}
527+
style={[
528+
{
529+
height: fullWindowHeight * 8,
530+
marginRight: MARGIN,
531+
width: fullWindowWidth * 8,
532+
},
533+
slide,
534+
]}
535+
translateX={translateX}
536+
translateY={translateY}
537+
videoRef={videoRef}
538+
/>
539+
) : (
540+
<AnimatedGalleryImage
541+
accessibilityLabel={'Image Item'}
542+
index={i}
543+
key={`${photo.uri}-${i}`}
544+
offsetScale={offsetScale}
545+
photo={photo}
546+
previous={selectedIndex > i}
547+
scale={scale}
548+
screenHeight={fullWindowHeight}
549+
selected={selectedIndex === i}
550+
shouldRender={Math.abs(selectedIndex - i) < 4}
551+
style={[
552+
{
553+
height: fullWindowHeight * 8,
554+
marginRight: MARGIN,
555+
width: fullWindowWidth * 8,
556+
},
557+
slide,
558+
]}
559+
translateX={translateX}
560+
translateY={translateY}
561+
/>
562+
),
563+
)}
570564
</Animated.View>
571-
</GestureDetector>
565+
</Animated.View>
572566
</Animated.View>
573-
</GestureDetector>
567+
</Animated.View>
574568
</Animated.View>
575569
</GestureDetector>
576570
<ImageGalleryHeader<StreamChatGenerics>

‎package/src/components/ImageGallery/hooks/useImageGalleryGestures.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
withTiming,
1212
} from 'react-native-reanimated';
1313

14+
import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
1415
import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
1516
import { triggerHaptic } from '../../../native';
1617

@@ -60,6 +61,7 @@ export const useImageGalleryGestures = ({
6061
translateY: SharedValue<number>;
6162
translationX: SharedValue<number>;
6263
}) => {
64+
const { setMessages, setSelectedMessage } = useImageGalleryContext();
6365
/**
6466
* Gesture handler refs
6567
*/
@@ -403,13 +405,16 @@ export const useImageGalleryGestures = ({
403405
cancelAnimation(translateX);
404406
cancelAnimation(translateY);
405407
cancelAnimation(scale);
408+
406409
overlayOpacity.value = withTiming(
407410
0,
408411
{
409412
duration: 200,
410413
easing: Easing.out(Easing.ease),
411414
},
412415
() => {
416+
runOnJS(setSelectedMessage)(undefined);
417+
runOnJS(setMessages)([]);
413418
runOnJS(setOverlay)('none');
414419
},
415420
);
@@ -662,6 +667,7 @@ export const useImageGalleryGestures = ({
662667
.minPointers(1)
663668
.numberOfTaps(1)
664669
.onEnd(() => {
670+
console.log('single tap');
665671
cancelAnimation(headerFooterVisible);
666672
headerFooterVisible.value = headerFooterVisible.value > 0 ? withTiming(0) : withTiming(1);
667673
})

‎package/src/components/ProgressControl/ProgressControl.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ export const ProgressControl = React.memo(
4949
testID,
5050
width,
5151
} = props;
52+
const state = useSharedValue(0);
53+
const translateX = useSharedValue(0);
5254
const { width: windowWidth } = Dimensions.get('screen');
5355
const widthInNumbers = width
5456
? typeof width === 'string'
@@ -81,8 +83,6 @@ export const ProgressControl = React.memo(
8183
})
8284
.withTestId(testID);
8385

84-
const state = useSharedValue(0);
85-
const translateX = useSharedValue(0);
8686
const filledColor = filledColorFromProp || filledColorFromTheme;
8787

8888
useEffect(() => {
@@ -127,7 +127,6 @@ export const ProgressControl = React.memo(
127127

128128
const styles = StyleSheet.create({
129129
container: {
130-
borderRadius: 50,
131130
height,
132131
},
133132
filledStyle: {
@@ -137,15 +136,15 @@ const styles = StyleSheet.create({
137136
borderRadius: 5,
138137
borderWidth: 0.2,
139138
elevation: 6,
140-
height: 20,
139+
height: 30,
141140
shadowOffset: {
142141
height: 3,
143142
width: 0,
144143
},
145144
shadowOpacity: 0.27,
146145
shadowRadius: 4.65,
147-
top: -11,
148-
width: 5,
146+
top: -15,
147+
width: 6,
149148
},
150149
});
151150
ProgressControl.displayName = 'ProgressControl';

0 commit comments

Comments
 (0)