toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update reanimated (#7500)

Browse source 
* update reanimated

* fix reanimated types
This commit is contained in:
Elias Nahum 2023-08-14 14:38:05 -04:00 committed by GitHub
parent 92ac99db69
commit 68939c9fcc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 79 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/components/post_list/post_list.tsx
View file

@ -4,7 +4,7 @@
import {FlatList} from '@stream-io/flat-list-mvcp';
import React, {type ReactElement, useCallback, useEffect, useMemo, useRef, useState} from 'react';
import {DeviceEventEmitter, type ListRenderItemInfo, type NativeScrollEvent, type NativeSyntheticEvent, Platform, type StyleProp, StyleSheet, type ViewStyle} from 'react-native';
import Animated from 'react-native-reanimated';
import Animated, {type AnimatedStyle} from 'react-native-reanimated';
import {fetchPosts, fetchPostThread} from '@actions/remote/post';
import CombinedUserActivity from '@components/post_list/combined_user_activity';
@ -27,7 +27,7 @@ import type PostModel from '@typings/database/models/servers/post';
type Props = {
appsEnabled: boolean;
channelId: string;
contentContainerStyle?: StyleProp<ViewStyle>;
contentContainerStyle?: StyleProp<AnimatedStyle<ViewStyle>>;
currentTimezone: string | null;
currentUserId: string;
currentUsername: string;
@ -354,6 +354,8 @@ const PostList = ({
onScroll={onScroll}
onScrollToIndexFailed={onScrollToIndexFailed}
onViewableItemsChanged={onViewableItemsChanged}
// @ts-expect-error old style ref
ref={listRef}
removeClippedSubviews={true}
renderItem={renderItem}

2
app/components/profile_picture/image.tsx
View file

@ -92,6 +92,8 @@ const Image = ({author, forwardRef, iconSize, size, source, url}: Props) => {
return (
<AnimatedFastImage
key={pictureUrl}
// @ts-expect-error TS expects old type ref
ref={forwardRef}
style={fIStyle}
source={imgSource}

4
app/components/progressive_image/index.tsx
View file

@ -120,6 +120,8 @@ const ProgressiveImage = ({
if (showHighResImage && imageUri) {
image = (
<AnimatedFastImage
// @ts-expect-error old style ref
ref={forwardRef}
nativeID={`image-${id}`}
resizeMode={resizeMode}
@ -138,6 +140,8 @@ const ProgressiveImage = ({
} else if (imageUri) {
image = (
<AnimatedFastImage
// @ts-expect-error old style ref
ref={forwardRef}
nativeID={`image-${id}`}
resizeMode={resizeMode}

2
app/components/progressive_image/thumbnail.tsx
View file

@ -25,6 +25,8 @@ const Thumbnail = ({onError, opacity, style, source, tintColor}: ThumbnailProps)
onError={onError}
resizeMode='cover'
source={source}
// @ts-expect-error style is supported but TS complains
style={style}
testID='progressive_image.miniPreview'
/>

8
app/context/gallery/index.tsx
View file

@ -1,14 +1,14 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useEffect, useLayoutEffect} from 'react';
import Animated, {makeMutable, runOnUI} from 'react-native-reanimated';
import {useEffect, useLayoutEffect} from 'react';
import Animated, {makeMutable, runOnUI, type AnimatedRef} from 'react-native-reanimated';
import type {GalleryManagerSharedValues} from '@typings/screens/gallery';
export interface GalleryManagerItem {
index: number;
ref: React.RefObject<unknown>;
ref: AnimatedRef<any>;
}
export interface GalleryManagerItems {
@ -79,7 +79,7 @@ class Gallery {
})();
}
public registerItem(index: number, ref: React.RefObject<unknown>) {
public registerItem(index: number, ref: AnimatedRef<any>) {
if (this.items.has(index)) {
return;
}

24
app/hooks/header.ts
View file

@ -95,7 +95,7 @@ export const useCollapsibleHeader = <T>(isLargeTitle: boolean, onSnap?: (offset:
return;
}
if (ctx.dragging || autoScroll.value || snapping.value) {
if (ctx?.dragging || autoScroll.value || snapping.value) {
scrollValue.value = e.contentOffset.y;
} else {
// here we want to ensure that the scroll position
@ -105,25 +105,29 @@ export const useCollapsibleHeader = <T>(isLargeTitle: boolean, onSnap?: (offset:
}
},
onEndDrag: (e, ctx) => {
if (ctx.start !== undefined) {
if (ctx?.start !== undefined) {
const dir = e.contentOffset.y < ctx.start ? 'down' : 'up';
const offset = Math.abs(e.contentOffset.y);
snapIfNeeded(dir, offset);
}
},
onMomentumBegin: (e, ctx) => {
ctx.momentum = e.contentOffset.y < (ctx.start || 0) ? 'down' : 'up';
if (ctx) {
ctx.momentum = e.contentOffset.y < (ctx.start || 0) ? 'down' : 'up';
}
},
onMomentumEnd: (e, ctx) => {
ctx.start = undefined;
ctx.dragging = false;
if (ctx.momentum === 'down') {
const offset = Math.abs(e.contentOffset.y);
if (ctx) {
ctx.start = undefined;
ctx.dragging = false;
if (ctx.momentum === 'down') {
const offset = Math.abs(e.contentOffset.y);
if (onSnap && offset < largeHeight) {
runOnJS(onSnap)(0);
if (onSnap && offset < largeHeight) {
runOnJS(onSnap)(0);
}
ctx.momentum = undefined;
}
ctx.momentum = undefined;
}
},
}, [insets, defaultHeight, largeHeight, animatedRef]);

3
app/screens/channel/channel_post_list/channel_post_list.tsx
View file

@ -19,10 +19,11 @@ import EphemeralStore from '@store/ephemeral_store';
import Intro from './intro';
import type PostModel from '@typings/database/models/servers/post';
import type {AnimatedStyle} from 'react-native-reanimated';
type Props = {
channelId: string;
contentContainerStyle?: StyleProp<ViewStyle>;
contentContainerStyle?: StyleProp<AnimatedStyle<ViewStyle>>;
isCRTEnabled: boolean;
lastViewedAt: number;
nativeID: string;

4
app/screens/gallery/gallery.tsx
View file

@ -4,7 +4,7 @@
import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
import {BackHandler} from 'react-native';
import FastImage, {type ImageStyle} from 'react-native-fast-image';
import Animated, {runOnJS, runOnUI, useAnimatedReaction} from 'react-native-reanimated';
import Animated, {runOnJS, runOnUI, useAnimatedReaction, type AnimatedStyle} from 'react-native-reanimated';
import {useGallery} from '@context/gallery';
import {freezeOtherScreens, measureItem} from '@utils/gallery';
@ -148,7 +148,7 @@ const Gallery = forwardRef<GalleryRef, GalleryProps>(({
return (
<AnimatedImage
source={{uri: item.posterUri}}
style={info.itemStyles as ImageStyle}
style={info.itemStyles as AnimatedStyle<ImageStyle>}
/>
);
}

4
app/screens/gallery/header/index.tsx
View file

@ -4,7 +4,7 @@
import React, {useMemo} from 'react';
import {type StyleProp, StyleSheet, useWindowDimensions, View, type ViewStyle} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
import Animated from 'react-native-reanimated';
import Animated, {type AnimatedStyle} from 'react-native-reanimated';
import {SafeAreaView, type Edge, useSafeAreaInsets} from 'react-native-safe-area-context';
import CompassIcon from '@components/compass_icon';
@ -16,7 +16,7 @@ import {typography} from '@utils/typography';
type Props = {
index: number;
onClose: () => void;
style: StyleProp<ViewStyle>;
style: StyleProp<AnimatedStyle<ViewStyle>>;
total: number;
}

2
app/screens/gallery/video_renderer/index.tsx
View file

@ -170,6 +170,8 @@ const VideoRenderer = ({height, index, initialIndex, item, isPageActive, onShoul
return (
<>
<AnimatedVideo
// @ts-expect-error old style ref
ref={videoRef}
source={source}
paused={paused}

2
app/screens/home/recent_mentions/recent_mentions.tsx
View file

@ -182,6 +182,8 @@ const RecentMentionsScreen = ({appsEnabled, customEmojiNames, mentions, currentT
<RoundedHeaderContext/>
</Animated.View>
<AnimatedFlatList
// @ts-expect-error old style ref
ref={scrollRef}
contentContainerStyle={paddingTop}
ListEmptyComponent={renderEmptyList()}

2
app/screens/home/saved_messages/saved_messages.tsx
View file

@ -184,6 +184,8 @@ function SavedMessages({appsEnabled, posts, currentTimezone, customEmojiNames, i
<RoundedHeaderContext/>
</Animated.View>
<AnimatedFlatList
// @ts-expect-error old style ref
ref={scrollRef}
contentContainerStyle={paddingTop}
ListEmptyComponent={emptyList}

6
app/screens/home/search/search.tsx
View file

@ -6,7 +6,7 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
import {useIntl} from 'react-intl';
import {FlatList, type LayoutChangeEvent, Platform, StyleSheet, type ViewStyle, KeyboardAvoidingView} from 'react-native';
import HWKeyboardEvent from 'react-native-hw-keyboard-event';
import Animated, {useAnimatedStyle, useDerivedValue, withTiming} from 'react-native-reanimated';
import Animated, {useAnimatedStyle, useDerivedValue, withTiming, type AnimatedStyle} from 'react-native-reanimated';
import {type Edge, SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
import {getPosts} from '@actions/local/post';
@ -233,7 +233,7 @@ const SearchScreen = ({teamId, teams}: Props) => {
handleSearch(newTeamId, lastSearchedValue);
}, [lastSearchedValue, handleSearch]);
const initialContainerStyle: ViewStyle = useMemo(() => {
const initialContainerStyle: AnimatedStyle<ViewStyle> = useMemo(() => {
return {
paddingTop: scrollPaddingTop,
flexGrow: 1,
@ -396,6 +396,8 @@ const SearchScreen = ({teamId, teams}: Props) => {
removeClippedSubviews={false}
scrollToOverflowEnabled={true}
overScrollMode='always'
// @ts-expect-error old style ref
ref={scrollRef}
renderItem={renderInitialOrLoadingItem}
/>

2
app/screens/user_profile/title/avatar.tsx
View file

@ -42,6 +42,8 @@ const UserProfileAvatar = ({enablePostIconOverride, forwardRef, imageSize, user,
return (
<View style={styles.avatar}>
<AnimatedFastImage
// @ts-expect-error TS expects old type ref
ref={forwardRef}
style={styles.avatar}
source={{uri: userIconOverride}}

4
app/utils/gallery/index.ts
View file

@ -4,7 +4,7 @@
import React from 'react';
import {DeviceEventEmitter, Keyboard, NativeModules, Platform} from 'react-native';
import {Navigation, type Options, type OptionsLayout} from 'react-native-navigation';
import {measure} from 'react-native-reanimated';
import {measure, type AnimatedRef} from 'react-native-reanimated';
import {Events, Screens} from '@constants';
import {allOrientations, showOverlay} from '@screens/navigation';
@ -100,7 +100,7 @@ export const getShouldRender = (index: number, activeIndex: number, diffValue =
return true;
};
export function measureItem(ref: React.RefObject<any>, sharedValues: GalleryManagerSharedValues) {
export function measureItem(ref: AnimatedRef<any>, sharedValues: GalleryManagerSharedValues) {
'worklet';
try {

4
ios/Podfile.lock
View file

@ -528,7 +528,7 @@ PODS:
- React-Core
- RNReactNativeHapticFeedback (2.0.3):
- React-Core
- RNReanimated (3.3.0):
- RNReanimated (3.4.2):
- DoubleConversion
- FBLazyVector
- FBReactNativeSpec
@ -987,7 +987,7 @@ SPEC CHECKSUMS:
RNLocalize: 5944c97d2fe8150913a51ddd5eab4e23a82bd80d
RNPermissions: cf3a9da0e6e6772e66282ca7338e198885ac70e7
RNReactNativeHapticFeedback: afa5bf2794aecbb2dba2525329253da0d66656df
RNReanimated: 9976fbaaeb8a188c36026154c844bf374b3b7eeb
RNReanimated: 49cdb63e767bb7e743ff4c12f7d85722c0d008f2
RNRudderSdk: 70865f8d0746d7e78e27df98c148d1ca0205c551
RNScreens: d037903436160a4b039d32606668350d2a808806
RNSentry: 9f0447b3ce13806f544903748de423259ead8552

14
package-lock.json generated
View file

@ -81,7 +81,7 @@
"react-native-navigation": "7.33.4",
"react-native-notifications": "4.3.5",
"react-native-permissions": "3.8.0",
"react-native-reanimated": "3.3.0",
"react-native-reanimated": "3.4.2",
"react-native-safe-area-context": "4.5.3",
"react-native-screens": "3.21.0",
"react-native-section-list-get-item-layout": "2.2.3",
@ -18452,9 +18452,9 @@
}
},
"node_modules/react-native-reanimated": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.3.0.tgz",
"integrity": "sha512-LzfpPZ1qXBGy5BcUHqw3pBC0qSd22qXS3t8hWSbozXNrBkzMhhOrcILE/nEg/PHpNNp1xvGOW8NwpAMF006roQ==",
"version": "3.4.2",
"resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.4.2.tgz",
"integrity": "sha512-FbtG+f1PB005vDTJSv4zAnTK7nNXi+FjFgbAM5gOzIZDajfph2BFMSUstzIsN8T77+OKuugUBmcTqLnQ24EBVg==",
"dependencies": {
"@babel/plugin-transform-object-assign": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
@ -35422,9 +35422,9 @@
}
},
"react-native-reanimated": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.3.0.tgz",
"integrity": "sha512-LzfpPZ1qXBGy5BcUHqw3pBC0qSd22qXS3t8hWSbozXNrBkzMhhOrcILE/nEg/PHpNNp1xvGOW8NwpAMF006roQ==",
"version": "3.4.2",
"resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.4.2.tgz",
"integrity": "sha512-FbtG+f1PB005vDTJSv4zAnTK7nNXi+FjFgbAM5gOzIZDajfph2BFMSUstzIsN8T77+OKuugUBmcTqLnQ24EBVg==",
"requires": {
"@babel/plugin-transform-object-assign": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",

2
package.json
View file

@ -78,7 +78,7 @@
"react-native-navigation": "7.33.4",
"react-native-notifications": "4.3.5",
"react-native-permissions": "3.8.0",
"react-native-reanimated": "3.3.0",
"react-native-reanimated": "3.4.2",
"react-native-safe-area-context": "4.5.3",
"react-native-screens": "3.21.0",
"react-native-section-list-get-item-layout": "2.2.3",

21
patches/react-native-reanimated+3.3.0.patch → patches/react-native-reanimated+3.4.2.patch
View file

@ -1,8 +1,25 @@
diff --git a/node_modules/react-native-reanimated/lib/typescript/reanimated2/hook/utils.d.ts b/node_modules/react-native-reanimated/lib/typescript/reanimated2/hook/utils.d.ts
index 67c921b..cbb6f83 100644
--- a/node_modules/react-native-reanimated/lib/typescript/reanimated2/hook/utils.d.ts
+++ b/node_modules/react-native-reanimated/lib/typescript/reanimated2/hook/utils.d.ts
@@ -9,7 +9,11 @@ interface Handlers<T, TContext extends Context> {
[key: string]: Handler<T, TContext> | undefined;
}
type useEventType = <T extends object>(handler: (e: T) => void, eventNames?: string[], rebuild?: boolean) => (e: NativeSyntheticEvent<T>) => void;
-export declare const useEvent: useEventType;
+export declare function useEvent<T, K>(
+ handler: T,
+ events: string[],
+ rebuild: boolean,
+): K;
type useHandlerType = <T, TContext extends Context = Record<string, never>>(handlers: Handlers<T, TContext>, deps?: DependencyList) => {
context: TContext;
doDependenciesDiffer: boolean;
diff --git a/node_modules/react-native-reanimated/src/reanimated2/mutables.ts b/node_modules/react-native-reanimated/src/reanimated2/mutables.ts
index 90de1f1..ae59355 100644
index 6c4213d..e3cc49c 100644
--- a/node_modules/react-native-reanimated/src/reanimated2/mutables.ts
+++ b/node_modules/react-native-reanimated/src/reanimated2/mutables.ts
@@ -95,25 +95,25 @@ export function makeMutable<T>(
@@ -94,25 +94,25 @@ export function makeMutable<T>(
}
return value;
},

12
types/modules/react-native-reanimated.d.ts vendored
View file

@ -1,12 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
declare module 'react-native-reanimated' {
function makeRemote<T>(value: T): T;
function useEvent<T, K>(
handler: T,
events: string[],
rebuild: boolean,
): K;
}