Skip to content

Commit de27078

Browse files
khushal87khushal87
authored
fix: animations laginess on the ImageGallery and MessageOverlay on new architecture (#2633)
1 parent 924beb4 commit de27078

File tree

16 files changed

+255
-246
lines changed

16 files changed

+255
-246
lines changed

‎examples/ExpoMessaging/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"@op-engineering/op-sqlite": "^6.0.4",
1515
"@react-native-community/netinfo": "11.3.1",
1616
"@react-navigation/elements": "^1.3.30",
17-
"expo": "~51.0.28",
17+
"expo": "~51.0.31",
1818
"expo-av": "~14.0.7",
1919
"expo-build-properties": "~0.12.5",
2020
"expo-clipboard": "~6.0.3",

‎examples/ExpoMessaging/yarn.lock‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4132,10 +4132,10 @@ [email protected]:
41324132
require-from-string "^2.0.2"
41334133
resolve-from "^5.0.0"
41344134

4135-
[email protected].21:
4136-
version "1.12.21"
4137-
resolved "https://registry.yarnpkg.com/expo-modules-core/-/expo-modules-core-1.12.21.tgz#8014fa549af3c1c00b14fd84a26ef921b39207fb"
4138-
integrity sha512-UQxRljqPcowS1+bECW9tnuVGfvWL18GAKPiKMnu9sZwJssAN9FU/JhED50DJzdzICLR0hL17FZAgV4rbMG3IWQ==
4135+
[email protected].23:
4136+
version "1.12.23"
4137+
resolved "https://registry.yarnpkg.com/expo-modules-core/-/expo-modules-core-1.12.23.tgz#ea1c0c876aa52db2cb9d25cb59404c334f92446f"
4138+
integrity sha512-NYp/rWhKW6zlqNdC8/r+FckzlAGWX0IJEjOxwYHuYeRUn/vnKksb43G4E3jcaQEZgmWlKxK4LpxL3gr7m0RJFA==
41394139
dependencies:
41404140
invariant "^2.2.4"
41414141

@@ -4171,10 +4171,10 @@ expo-status-bar@~1.12.1:
41714171
resolved "https://registry.yarnpkg.com/expo-status-bar/-/expo-status-bar-1.12.1.tgz#52ce594aab5064a0511d14375364d718ab78aa66"
41724172
integrity sha512-/t3xdbS8KB0prj5KG5w7z+wZPFlPtkgs95BsmrP/E7Q0xHXTcDcQ6Cu2FkFuRM+PKTb17cJDnLkawyS5vDLxMA==
41734173

4174-
expo@~51.0.28:
4175-
version "51.0.29"
4176-
resolved "https://registry.yarnpkg.com/expo/-/expo-51.0.29.tgz#333d27bc1976353b48b8ecd636c0b3f171fe0585"
4177-
integrity sha512-bW8JR3RAw5hQhEGbwDqO3UxtjEq8noCYfqQ9v3aUfdtCoWtAp4jwB+xtwfDZPvRh1b8ebSJ/WI2jK/RljZw3mA==
4174+
expo@~51.0.31:
4175+
version "51.0.31"
4176+
resolved "https://registry.yarnpkg.com/expo/-/expo-51.0.31.tgz#edd623e718705d88681406e72869076dfeb485ff"
4177+
integrity sha512-YiUNcxzSkQ0jlKW+e8F81KnZfAhCugEZI9VYmuIsFONHivtiYIADHdcFvUWnexUEdgPQDkgWw85XBnIbzIZ39Q==
41784178
dependencies:
41794179
"@babel/runtime" "^7.20.0"
41804180
"@expo/cli" "0.18.29"
@@ -4188,7 +4188,7 @@ expo@~51.0.28:
41884188
expo-font "~12.0.9"
41894189
expo-keep-awake "~13.0.2"
41904190
expo-modules-autolinking "1.11.2"
4191-
expo-modules-core "1.12.21"
4191+
expo-modules-core "1.12.23"
41924192
fbemitter "^3.0.0"
41934193
whatwg-url-without-unicode "8.0.0-3"
41944194

‎package/src/components/AttachmentPicker/components/AttachmentPickerBottomSheetHandle.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { StyleSheet, View, ViewStyle } from 'react-native';
3-
import Animated, { useAnimatedStyle } from 'react-native-reanimated';
3+
import Animated, { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
44

55
import { useTheme } from '../../../contexts/themeContext/ThemeContext';
66

@@ -18,7 +18,7 @@ const styles = StyleSheet.create({
1818
});
1919

2020
type Props = {
21-
animatedIndex: Animated.SharedValue<number>;
21+
animatedIndex: SharedValue<number>;
2222
};
2323

2424
export const AttachmentPickerBottomSheetHandle = ({ animatedIndex }: Props) => {

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

Lines changed: 58 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Animated, {
77
Easing,
88
runOnJS,
99
runOnUI,
10+
SharedValue,
1011
useAnimatedStyle,
1112
useDerivedValue,
1213
useSharedValue,
@@ -103,7 +104,7 @@ export type ImageGalleryCustomComponents<
103104

104105
type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
105106
ImageGalleryCustomComponents<StreamChatGenerics> & {
106-
overlayOpacity: Animated.SharedValue<number>;
107+
overlayOpacity: SharedValue<number>;
107108
} & Pick<
108109
OverlayProviderProps<StreamChatGenerics>,
109110
| 'giphyVersion'
@@ -502,68 +503,62 @@ export const ImageGallery = <
502503
<Animated.View style={[StyleSheet.absoluteFillObject, containerBackground]} />
503504
<GestureDetector gesture={Gesture.Simultaneous(singleTap, doubleTap, pinch, pan)}>
504505
<Animated.View style={StyleSheet.absoluteFillObject}>
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-
)}
564-
</Animated.View>
565-
</Animated.View>
566-
</Animated.View>
506+
<Animated.View style={[styles.animatedContainer, pagerStyle, pager]}>
507+
{imageGalleryAttachments.map((photo, i) =>
508+
photo.type === FileTypes.Video ? (
509+
<AnimatedGalleryVideo
510+
attachmentId={photo.id}
511+
handleEnd={handleEnd}
512+
handleLoad={handleLoad}
513+
handleProgress={handleProgress}
514+
index={i}
515+
key={`${photo.uri}-${i}`}
516+
offsetScale={offsetScale}
517+
paused={photo.paused || false}
518+
previous={selectedIndex > i}
519+
repeat={true}
520+
scale={scale}
521+
screenHeight={fullWindowHeight}
522+
selected={selectedIndex === i}
523+
shouldRender={Math.abs(selectedIndex - i) < 4}
524+
source={{ uri: photo.uri }}
525+
style={[
526+
{
527+
height: fullWindowHeight * 8,
528+
marginRight: MARGIN,
529+
width: fullWindowWidth * 8,
530+
},
531+
slide,
532+
]}
533+
translateX={translateX}
534+
translateY={translateY}
535+
videoRef={videoRef}
536+
/>
537+
) : (
538+
<AnimatedGalleryImage
539+
accessibilityLabel={'Image Item'}
540+
index={i}
541+
key={`${photo.uri}-${i}`}
542+
offsetScale={offsetScale}
543+
photo={photo}
544+
previous={selectedIndex > i}
545+
scale={scale}
546+
screenHeight={fullWindowHeight}
547+
selected={selectedIndex === i}
548+
shouldRender={Math.abs(selectedIndex - i) < 4}
549+
style={[
550+
{
551+
height: fullWindowHeight * 8,
552+
marginRight: MARGIN,
553+
width: fullWindowWidth * 8,
554+
},
555+
slide,
556+
]}
557+
translateX={translateX}
558+
translateY={translateY}
559+
/>
560+
),
561+
)}
567562
</Animated.View>
568563
</Animated.View>
569564
</GestureDetector>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { View } from 'react-native';
33
import type { ImageStyle, StyleProp } from 'react-native';
4-
import Animated, { useAnimatedStyle } from 'react-native-reanimated';
4+
import Animated, { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
55

66
import { useViewport } from '../../../hooks/useViewport';
77

@@ -10,15 +10,15 @@ const oneEighth = 1 / 8;
1010
type Props = {
1111
accessibilityLabel: string;
1212
index: number;
13-
offsetScale: Animated.SharedValue<number>;
13+
offsetScale: SharedValue<number>;
1414
photo: { uri: string };
1515
previous: boolean;
16-
scale: Animated.SharedValue<number>;
16+
scale: SharedValue<number>;
1717
screenHeight: number;
1818
selected: boolean;
1919
shouldRender: boolean;
20-
translateX: Animated.SharedValue<number>;
21-
translateY: Animated.SharedValue<number>;
20+
translateX: SharedValue<number>;
21+
translateY: SharedValue<number>;
2222
style?: StyleProp<ImageStyle>;
2323
};
2424

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState } from 'react';
22
import { StyleSheet, View, ViewStyle } from 'react-native';
33
import type { StyleProp } from 'react-native';
4-
import Animated, { useAnimatedStyle } from 'react-native-reanimated';
4+
import Animated, { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
55

66
import { useViewport } from '../../../hooks/useViewport';
77
import {
@@ -23,16 +23,16 @@ export type AnimatedGalleryVideoType = {
2323
handleLoad: (index: string, duration: number) => void;
2424
handleProgress: (index: string, progress: number, hasEnd?: boolean) => void;
2525
index: number;
26-
offsetScale: Animated.SharedValue<number>;
26+
offsetScale: SharedValue<number>;
2727
paused: boolean;
2828
previous: boolean;
29-
scale: Animated.SharedValue<number>;
29+
scale: SharedValue<number>;
3030
screenHeight: number;
3131
selected: boolean;
3232
shouldRender: boolean;
3333
source: { uri: string };
34-
translateX: Animated.SharedValue<number>;
35-
translateY: Animated.SharedValue<number>;
34+
translateX: SharedValue<number>;
35+
translateY: SharedValue<number>;
3636
videoRef: React.RefObject<VideoType>;
3737
repeat?: boolean;
3838
style?: StyleProp<ViewStyle>;

0 commit comments

Comments
 (0)