Upgrade to work with react-native-reanimated 3.0.0

[arambrosius]

react-native-renamiated released a version 3.0.0 to work with fabric for Android. This has caused a breaking change and I get a crash that react-native-renatimated v3 is not compatible.

Can we upgrade the dependency react-native-reanimated? These changes are still release candidates but these will be breaking changes as those release candidates get pushed.

Error: Requiring module "node_modules/react-native-draggable-flatlist/lib/index.js", which threw an exception: Error: Incompatible Reanimated version (useValue not found)

[computerjazz]

can you try the beta tagged release on NPM? https://www.npmjs.com/package/react-native-draggable-flatlist?activeTab=versions

Just a word of warning though -- this is all still very bleeding edge, there may be some strange behavior/flickers due to reanimated 3 bugs.

[mlecoq]

It works fine, I just have a warning on Android

Warning: Cannot record touch end without a touch start.
Touch End: {"identifier":0,"pageX":0,"pageY":0,"timestamp":9254099}
Touch Bank: [null,{"touchActive":true,"startPageX":320.75054931640625,"startPageY":507.40625,"startTimeStamp":9253217,"currentPageX":320.75054931640625,"currentPageY":494.23553466796875,"currentTimeStamp":9254092,"previousPageX":320.75054931640625,"previousPageY":501.5003662109375,"previousTimeStamp":9254076}]

[v-x2]

I've tried the 4.0.0-beta.12 with reanimated v.3.0.0-rc.4 and it works without any warning (iOS)

[mhuretski]

refreshControl triggers error, tried RefreshControl both from react-native and react-native-gesture-handler

RangeError: Maximum call stack size exceeded, js engine: hermes

also dragging stops working

"react-native": "0.71.4",
"react-native-draggable-flatlist": "^3.0.4",
"react-native-gesture-handler": "^2.9.0",
"react-native-reanimated": "^3.0.2",

[computerjazz]

Please upgrade draggable flatlist to 4.0.1 @mhuretski

[mhuretski]

Updated to 4.0.1, cleaned node_modules and build folder, installed Pods, started with react-native start --reset-cache but issue remains

It boils down to

node_modules/@babel/runtime/helpers/slicedToArray.js
node_modules/react-native-reanimated/src/reanimated2/shareables.ts

also updated babel dependencies to the latest version

    "@babel/core": "^7.20.0",
    "@babel/eslint-parser": "^7.19.1",
    "@babel/plugin-transform-react-jsx": "^7.21.0",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.21.0",
    "@babel/runtime": "^7.20.0",
    "babel-plugin-module-resolver": "^5.0.0",

node version v18.12.0

[alzalabany]

same problem, with 4.0.1 i get ERROR RangeError: Maximum call stack size exceeded, js engine: hermes

[sorinns]

I get the same error whenever I use ListFooterComponent for example ListFooterComponent={ <Text>Test</Text> } When this is not set, everything works fine.

[alzalabany]

setting list empty component prop also crash on ios;

[sorinns]

This solved it for me.

Replaced

          ListFooterComponent={renderListFooterComponent(
            listLength,
            screenHeight
          )}

With

          ListFooterComponent={() => renderListFooterComponent(
            listLength,
            screenHeight
          )}