netguru / sticky-parallax-header

A simple React Native library, enabling the creation of fully customized header for your iOS and Android apps.
https://netguru.github.io/sticky-parallax-header/
MIT License
1.86k stars 190 forks source link

Reanimated error with react native web and metro #375

Closed Hadjimina closed 1 year ago

Hadjimina commented 1 year ago

Environment

Library version: "react-native-sticky-parallax-header": "^1.0.0-rc.9", OS version: Web

Affected platforms

Current behavior

I get Invariant Violation:createAnimatedComponentdoes not support stateless functional components; use a class component instead.

Expected behavior

No invariant violation.

Reproduction

Use metro bundler, react native web, and this library.

Hadjimina commented 1 year ago

Affected Platform is web.

Hadjimina commented 1 year ago

It seems like this is caused by import in react-native-parallax-header/src/index.tsx

I commented out pretty much everything in there that I did not need and it seems to be fixed.

Here is the patch, though it's just commenting out a lot of stuff. This does not seem like a good fix, but it's good enough for my use case:

diff --git a/node_modules/react-native-sticky-parallax-header/src/index.tsx b/node_modules/react-native-sticky-parallax-header/src/index.tsx
index df2fb2c..8f91a60 100644
--- a/node_modules/react-native-sticky-parallax-header/src/index.tsx
+++ b/node_modules/react-native-sticky-parallax-header/src/index.tsx
@@ -10,21 +10,21 @@ export { useStickyHeaderFlashListScrollProps } from './primitiveComponents/useSt
 export { withStickyHeaderFlashList } from './primitiveComponents/withStickyHeaderFlashList';

 // Avatar components
-export { AvatarHeaderFlatList } from './predefinedComponents/AvatarHeader/AvatarHeaderFlatList';
+/* export { AvatarHeaderFlatList } from './predefinedComponents/AvatarHeader/AvatarHeaderFlatList';
 export { AvatarHeaderScrollView } from './predefinedComponents/AvatarHeader/AvatarHeaderScrollView';
-export { AvatarHeaderSectionList } from './predefinedComponents/AvatarHeader/AvatarHeaderSectionList';
+export { AvatarHeaderSectionList } from './predefinedComponents/AvatarHeader/AvatarHeaderSectionList'; */
 export * from './predefinedComponents/AvatarHeader/AvatarHeaderProps';
-export { withAvatarHeaderFlashList } from './predefinedComponents/AvatarHeader/withAvatarHeaderFlashList';
+/* export { withAvatarHeaderFlashList } from './predefinedComponents/AvatarHeader/withAvatarHeaderFlashList'; */

 // Details components
-export { DetailsHeaderFlatList } from './predefinedComponents/DetailsHeader/DetailsHeaderFlatList';
+/* export { DetailsHeaderFlatList } from './predefinedComponents/DetailsHeader/DetailsHeaderFlatList';
 export { DetailsHeaderScrollView } from './predefinedComponents/DetailsHeader/DetailsHeaderScrollView';
-export { DetailsHeaderSectionList } from './predefinedComponents/DetailsHeader/DetailsHeaderSectionList';
+export { DetailsHeaderSectionList } from './predefinedComponents/DetailsHeader/DetailsHeaderSectionList'; */
 export * from './predefinedComponents/DetailsHeader/DetailsHeaderProps';
-export { withDetailsHeaderFlashList } from './predefinedComponents/DetailsHeader/withDetailsHeaderFlashList';
+/* export { withDetailsHeaderFlashList } from './predefinedComponents/DetailsHeader/withDetailsHeaderFlashList'; */

 // Tabbed components
-export { TabbedHeaderList } from './predefinedComponents/TabbedHeader/TabbedHeaderList';
-export { TabbedHeaderPager } from './predefinedComponents/TabbedHeader/TabbedHeaderPager';
+/* export { TabbedHeaderList } from './predefinedComponents/TabbedHeader/TabbedHeaderList';
+export { TabbedHeaderPager } from './predefinedComponents/TabbedHeader/TabbedHeaderPager'; */
 export * from './predefinedComponents/TabbedHeader/TabbedHeaderProps';
-export { withTabbedHeaderFlashList } from './predefinedComponents/TabbedHeader/withTabbedHeaderFlashList';
+/* export { withTabbedHeaderFlashList } from './predefinedComponents/TabbedHeader/withTabbedHeaderFlashList'; */