fix(#379): crash on web with Reanimated.createAnimatedComponent

netguru · May 10, 2023 · 101ec42 · 101ec42
1 parent 59f7467
commit 101ec42
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 93 deletions.
diff --git a/src/predefinedComponents/AvatarHeader/components/HeaderBar.tsx b/src/predefinedComponents/AvatarHeader/components/HeaderBar.tsx
@@ -30,8 +30,6 @@ interface HeaderProps extends IconProps {
   titleTestID?: string;
 }
 
-const AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
-
 export const HeaderBar: React.FC<HeaderProps> = ({
   backgroundColor,
   enableSafeAreaTopInset,
@@ -100,45 +98,45 @@ export const HeaderBar: React.FC<HeaderProps> = ({
   }
 
   return (
-    <AnimatedSafeAreaView
-      edges={safeAreaEdges}
-      style={[commonStyles.headerWrapper, wrapperAnimatedStyle]}>
-      {leftTopIcon ? (
-        <Pressable
-          accessibilityLabel={leftTopIconAccessibilityLabel}
-          accessibilityRole="button"
-          hitSlop={HIT_SLOP}
-          onPress={leftTopIconOnPress}
-          style={styles.leftHeaderButton}
-          testID={leftTopIconTestID}>
-          <IconRenderer icon={leftTopIcon} />
-        </Pressable>
-      ) : null}
+    <SafeAreaView edges={safeAreaEdges} style={commonStyles.container}>
+      <Animated.View style={[commonStyles.headerWrapper, wrapperAnimatedStyle]}>
+        {leftTopIcon ? (
+          <Pressable
+            accessibilityLabel={leftTopIconAccessibilityLabel}
+            accessibilityRole="button"
+            hitSlop={HIT_SLOP}
+            onPress={leftTopIconOnPress}
+            style={styles.leftHeaderButton}
+            testID={leftTopIconTestID}>
+            <IconRenderer icon={leftTopIcon} />
+          </Pressable>
+        ) : null}
 
-      <View style={[styles.headerTitleContainer, headerTitleContainerRTLStyle]}>
-        <Animated.Image
-          source={image as ImageSourcePropType}
-          style={[styles.headerPic, imageAnimatedStyle]}
-        />
-        <Animated.Text
-          numberOfLines={1}
-          style={[styles.headerTitle, nameAnimatedStyle, titleStyle]}
-          testID={titleTestID}>
-          {title}
-        </Animated.Text>
-      </View>
-      {rightTopIcon ? (
-        <Pressable
-          accessibilityLabel={rightTopIconAccessibilityLabel}
-          accessibilityRole="button"
-          hitSlop={HIT_SLOP}
-          onPress={rightTopIconOnPress}
-          style={styles.rightHeaderButton}
-          testID={rightTopIconTestID}>
-          <IconRenderer icon={rightTopIcon} />
-        </Pressable>
-      ) : null}
-    </AnimatedSafeAreaView>
+        <View style={[styles.headerTitleContainer, headerTitleContainerRTLStyle]}>
+          <Animated.Image
+            source={image as ImageSourcePropType}
+            style={[styles.headerPic, imageAnimatedStyle]}
+          />
+          <Animated.Text
+            numberOfLines={1}
+            style={[styles.headerTitle, nameAnimatedStyle, titleStyle]}
+            testID={titleTestID}>
+            {title}
+          </Animated.Text>
+        </View>
+        {rightTopIcon ? (
+          <Pressable
+            accessibilityLabel={rightTopIconAccessibilityLabel}
+            accessibilityRole="button"
+            hitSlop={HIT_SLOP}
+            onPress={rightTopIconOnPress}
+            style={styles.rightHeaderButton}
+            testID={rightTopIconTestID}>
+            <IconRenderer icon={rightTopIcon} />
+          </Pressable>
+        ) : null}
+      </Animated.View>
+    </SafeAreaView>
   );
 };
 

diff --git a/src/predefinedComponents/AvatarHeader/withAvatarHeaderFlashList.tsx b/src/predefinedComponents/AvatarHeader/withAvatarHeaderFlashList.tsx
@@ -13,10 +13,10 @@ import { HeaderBar } from './components/HeaderBar';
 import { useAvatarFlashListHeader } from './hooks/useAvatarFlashListHeader';
 
 export function withAvatarHeaderFlashList<ItemT>(
-  flashListComponent: React.ComponentType<FlashListProps<ItemT>>
+  flashListComponent: React.ComponentClass<FlashListProps<ItemT>>
 ) {
   const StickyHeaderFlashList = withStickyHeaderFlashList(
-    flashListComponent as React.ComponentType<FlashListProps<ItemT>>
+    flashListComponent as React.ComponentClass<FlashListProps<ItemT>>
   ) as (
     props: StickyHeaderFlashListProps<ItemT> & React.RefAttributes<FlashList<ItemT>>
   ) => React.ReactElement;

diff --git a/src/predefinedComponents/DetailsHeader/components/HeaderBar.tsx b/src/predefinedComponents/DetailsHeader/components/HeaderBar.tsx
@@ -26,8 +26,6 @@ const HIT_SLOP = {
   right: 15,
 };
 
-const AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
-
 export const HeaderBar: React.FC<HeaderBarProps> = ({
   backgroundColor,
   enableSafeAreaTopInset,
@@ -57,37 +55,37 @@ export const HeaderBar: React.FC<HeaderBarProps> = ({
   }
 
   return (
-    <AnimatedSafeAreaView
-      edges={safeAreaEdges}
-      style={[commonStyles.headerWrapper, wrapperAnimatedStyle]}>
-      {leftTopIcon ? (
-        <Pressable
-          accessibilityLabel={leftTopIconAccessibilityLabel}
-          accessibilityRole="button"
-          hitSlop={HIT_SLOP}
-          onPress={leftTopIconOnPress}
-          style={styles.leftHeaderButton}
-          testID={leftTopIconTestID}>
-          <IconRenderer icon={leftTopIcon} />
-        </Pressable>
-      ) : null}
-      <Animated.View style={[styles.headerTitleContainer, headerTitleContainerAnimatedStyle]}>
-        <Animated.Text style={[styles.headerTitle, titleStyle]} testID={titleTestID}>
-          {title}
-        </Animated.Text>
+    <SafeAreaView edges={safeAreaEdges} style={commonStyles.container}>
+      <Animated.View style={[commonStyles.headerWrapper, wrapperAnimatedStyle]}>
+        {leftTopIcon ? (
+          <Pressable
+            accessibilityLabel={leftTopIconAccessibilityLabel}
+            accessibilityRole="button"
+            hitSlop={HIT_SLOP}
+            onPress={leftTopIconOnPress}
+            style={styles.leftHeaderButton}
+            testID={leftTopIconTestID}>
+            <IconRenderer icon={leftTopIcon} />
+          </Pressable>
+        ) : null}
+        <Animated.View style={[styles.headerTitleContainer, headerTitleContainerAnimatedStyle]}>
+          <Animated.Text style={[styles.headerTitle, titleStyle]} testID={titleTestID}>
+            {title}
+          </Animated.Text>
+        </Animated.View>
+        {rightTopIcon ? (
+          <Pressable
+            accessibilityLabel={rightTopIconAccessibilityLabel}
+            accessibilityRole="button"
+            hitSlop={HIT_SLOP}
+            onPress={rightTopIconOnPress}
+            style={styles.rightHeaderButton}
+            testID={rightTopIconTestID}>
+            <IconRenderer icon={rightTopIcon} />
+          </Pressable>
+        ) : null}
       </Animated.View>
-      {rightTopIcon ? (
-        <Pressable
-          accessibilityLabel={rightTopIconAccessibilityLabel}
-          accessibilityRole="button"
-          hitSlop={HIT_SLOP}
-          onPress={rightTopIconOnPress}
-          style={styles.rightHeaderButton}
-          testID={rightTopIconTestID}>
-          <IconRenderer icon={rightTopIcon} />
-        </Pressable>
-      ) : null}
-    </AnimatedSafeAreaView>
+    </SafeAreaView>
   );
 };
 

diff --git a/src/predefinedComponents/DetailsHeader/withDetailsHeaderFlashList.tsx b/src/predefinedComponents/DetailsHeader/withDetailsHeaderFlashList.tsx
@@ -13,10 +13,10 @@ import { HeaderBar } from './components/HeaderBar';
 import { useDetailsFlashListHeader } from './hooks/useDetailsFlashListHeader';
 
 export function withDetailsHeaderFlashList<ItemT>(
-  flashListComponent: React.ComponentType<FlashListProps<ItemT>>
+  flashListComponent: React.ComponentClass<FlashListProps<ItemT>>
 ) {
   const StickyHeaderFlashList = withStickyHeaderFlashList(
-    flashListComponent as React.ComponentType<FlashListProps<ItemT>>
+    flashListComponent as React.ComponentClass<FlashListProps<ItemT>>
   ) as (
     props: StickyHeaderFlashListProps<ItemT> & React.RefAttributes<FlashList<ItemT>>
   ) => React.ReactElement;

diff --git a/src/predefinedComponents/TabbedHeader/components/HeaderBar.tsx b/src/predefinedComponents/TabbedHeader/components/HeaderBar.tsx
@@ -23,8 +23,6 @@ interface HeaderBarProps {
   logoStyle?: StyleProp<Animated.AnimateStyle<ImageStyle>>;
 }
 
-const AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
-
 export const HeaderBar: React.FC<HeaderBarProps> = ({
   backgroundColor,
   enableSafeAreaTopInset,
@@ -47,14 +45,14 @@ export const HeaderBar: React.FC<HeaderBarProps> = ({
 
   return (
     // @ts-ignore
-    <AnimatedSafeAreaView
-      edges={safeAreaEdges}
-      style={[commonStyles.headerWrapper, logoContainerStyle, wrapperAnimatedStyle]}>
-      <Animated.Image
-        resizeMode={logoResizeMode}
-        source={logo}
-        style={[commonStyles.logo, logoStyle]}
-      />
-    </AnimatedSafeAreaView>
+    <SafeAreaView edges={safeAreaEdges} style={commonStyles.container}>
+      <Animated.View style={[commonStyles.headerWrapper, logoContainerStyle, wrapperAnimatedStyle]}>
+        <Animated.Image
+          resizeMode={logoResizeMode}
+          source={logo}
+          style={[commonStyles.logo, logoStyle]}
+        />
+      </Animated.View>
+    </SafeAreaView>
   );
 };
diff --git a/src/predefinedComponents/TabbedHeader/withTabbedHeaderFlashList.tsx b/src/predefinedComponents/TabbedHeader/withTabbedHeaderFlashList.tsx
@@ -15,10 +15,10 @@ import { HeaderBar } from './components/HeaderBar';
 import { useTabbedFlashListHeader } from './hooks/useTabbedFlashListHeader';
 
 export function withTabbedHeaderFlashList<ItemT>(
-  flashListComponent: React.ComponentType<FlashListProps<ItemT>>
+  flashListComponent: React.ComponentClass<FlashListProps<ItemT>>
 ) {
   const StickyHeaderFlashList = withStickyHeaderFlashList(
-    flashListComponent as React.ComponentType<FlashListProps<ItemT>>
+    flashListComponent as React.ComponentClass<FlashListProps<ItemT>>
   ) as (
     props: StickyHeaderFlashListProps<ItemT> & React.RefAttributes<FlashList<ItemT>>
   ) => React.ReactElement;

diff --git a/src/primitiveComponents/withStickyHeader.tsx b/src/primitiveComponents/withStickyHeader.tsx
@@ -22,8 +22,8 @@ const createCellRenderer = (itemLayoutAnimation: any) => {
   return cellRenderer;
 };
 
-export function withStickyHeader<T extends React.ComponentType<any>>(component: T) {
-  const AnimatedComponent = Animated.createAnimatedComponent(component as any) as any;
+export function withStickyHeader<T extends React.ComponentClass<any>>(component: T) {
+  const AnimatedComponent = Animated.createAnimatedComponent(component) as any;
 
   return React.forwardRef<
     T,

diff --git a/src/primitiveComponents/withStickyHeaderFlashList.tsx b/src/primitiveComponents/withStickyHeaderFlashList.tsx
@@ -9,10 +9,10 @@ import { useStickyHeaderProps } from './useStickyHeaderProps';
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const NOOP = () => {};
 
-export function withStickyHeaderFlashList<T extends React.ComponentType<FlashListProps<any>>>(
+export function withStickyHeaderFlashList<T extends React.ComponentClass<FlashListProps<any>>>(
   flashListComponent: T
 ) {
-  const AnimatedFlashList = Animated.createAnimatedComponent(flashListComponent as any) as any;
+  const AnimatedFlashList = Animated.createAnimatedComponent(flashListComponent) as any;
 
   return React.forwardRef<
     T,