New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Crashing in Production Mode When Trying to Open the Drawer #5067
Comments
I'm having the same problem with crash message "maximum call stack size exceeded" on iOS. |
Same issue here on Android:
Reverting back to v3.4.2 fixes the problem. |
+1 |
same here, only on release scheme, debug works fine. |
the same |
It worked, thank you. |
Did some tests, all versions >= I think there's something going on with |
I think this is the offending PR: #5053, the rest of commit history between |
@efstathiosntonas Could you create a hotfix patch for this as well like you created for #5061 😊 |
@ranaavneet I'm still trying to figure out what is causing it |
We're seeing this crash in Android too. +1 |
Same. react-native-reanimated |
For me, it's the newer versions >= |
@aurotones apply this patch and it will work: #5061 (comment) |
@efstathiosntonas but i was on 3.5.1, downgrading to 3.5.0 was same so i was keep downgrading till 3.5.0-nightly-20230903-79201c8c0 is working for me on both platform built by CI/CD. |
Latest working nightly on release mode is 20230907, install and patch this version using patch-package otherwise it crashes because _IS_FABRIC is undefined. 20230907 is the same as 3.5.1, everything above this version has some typings improvements and some files moved around. |
oh that's what you meant, got it. |
Hi @efstathiosntonas , any luck on finding what caused this ? |
+1 |
Hi @efstathiosntonas it seems that the issue still occurs on 3.5.1, I think it's related to #5075 |
The offending PR is definitely this one: #4794 after reverting it there's no crash. |
ok folks, here's the patch, what a nasty bug 😄 ... note: the typings are throwing errors because of this change, at least it works 💯
diff --git a/node_modules/react-native-reanimated/src/reanimated2/threads.ts b/node_modules/react-native-reanimated/src/reanimated2/threads.ts
index e95bafd..14abbd7 100644
--- a/node_modules/react-native-reanimated/src/reanimated2/threads.ts
+++ b/node_modules/react-native-reanimated/src/reanimated2/threads.ts
@@ -204,7 +204,7 @@ export function runOnJS<Args extends unknown[], ReturnValue>(
: (fun as () => ReturnValue)
);
}
- if ('__workletHash' in fun) {
+ if (fun.__workletHash) {
// If `fun` is a worklet, we schedule a call of a remote function `runWorkletOnJS`
// and pass the worklet as a first argument followed by original arguments.
@@ -214,7 +214,7 @@ export function runOnJS<Args extends unknown[], ReturnValue>(
...args
);
}
- if ('__remoteFunction' in fun) {
+ if (fun.__remoteFunction) {
// In development mode the function provided as `fun` throws an error message
// such that when someone accidentally calls it directly on the UI runtime, they
// see that they should use `runOnJS` instead. To facilitate that we put the |
@tjzel @tomekzaw @piaskowyk in example app,
|
@efstathiosntonas Note here about logging, |
@tjzel that's why I deleted the comment above yours about console.log 😄 , it smelled bad |
@tjzel Any chanse to release hotfix for this bug? |
Definitely, I'm testing it right now (waiting for the app to build) |
@efstathiosntonas Nice work, Based on your solution here's full patch diff --git a/node_modules/react-native-reanimated/src/animationBuilder.tsx b/node_modules/react-native-reanimated/src/animationBuilder.tsx
index 8204dcd..55d1f19 100644
--- a/node_modules/react-native-reanimated/src/animationBuilder.tsx
+++ b/node_modules/react-native-reanimated/src/animationBuilder.tsx
@@ -35,7 +35,7 @@ export function maybeBuild(
const isAnimationBuilder = (
value: ILayoutAnimationBuilder | LayoutAnimationFunction | Keyframe
): value is ILayoutAnimationBuilder =>
- 'build' in layoutAnimationOrBuilder &&
+ layoutAnimationOrBuilder.build &&
typeof layoutAnimationOrBuilder.build === 'function';
if (isAnimationBuilder(layoutAnimationOrBuilder)) {
diff --git a/node_modules/react-native-reanimated/src/reanimated2/component/FlatList.tsx b/node_modules/react-native-reanimated/src/reanimated2/component/FlatList.tsx
index 3687f47..41e8f93 100644
--- a/node_modules/react-native-reanimated/src/reanimated2/component/FlatList.tsx
+++ b/node_modules/react-native-reanimated/src/reanimated2/component/FlatList.tsx
@@ -69,7 +69,7 @@ export const ReanimatedFlatList = forwardRef(
// react-native defaults it to 50 for FlatLists.
// We set it to 1 so we have peace until
// there are 960 fps screens.
- if (!('scrollEventThrottle' in restProps)) {
+ if (!(restProps.scrollEventThrottle)) {
restProps.scrollEventThrottle = 1;
}
diff --git a/node_modules/react-native-reanimated/src/reanimated2/component/ScrollView.tsx b/node_modules/react-native-reanimated/src/reanimated2/component/ScrollView.tsx
index ad9a9b4..e14e638 100644
--- a/node_modules/react-native-reanimated/src/reanimated2/component/ScrollView.tsx
+++ b/node_modules/react-native-reanimated/src/reanimated2/component/ScrollView.tsx
@@ -45,7 +45,7 @@ export const AnimatedScrollView: AnimatedScrollView = forwardRef(
// to have continuous scroll events.
// We set it to 1 so we have peace until
// there are 960 fps screens.
- if (!('scrollEventThrottle' in restProps)) {
+ if (!(restProps.scrollEventThrottle)) {
restProps.scrollEventThrottle = 1;
}
diff --git a/node_modules/react-native-reanimated/src/reanimated2/layoutReanimation/animationBuilder/Keyframe.ts b/node_modules/react-native-reanimated/src/reanimated2/layoutReanimation/animationBuilder/Keyframe.ts
index f2a10fd..d20359b 100644
--- a/node_modules/react-native-reanimated/src/reanimated2/layoutReanimation/animationBuilder/Keyframe.ts
+++ b/node_modules/react-native-reanimated/src/reanimated2/layoutReanimation/animationBuilder/Keyframe.ts
@@ -254,7 +254,7 @@ class InnerKeyframe implements IEntryExitAnimationBuilder {
)
);
if (key.includes('transform')) {
- if (!('transform' in animations)) {
+ if (!(animations.transform)) {
animations.transform = [];
}
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
diff --git a/node_modules/react-native-reanimated/src/reanimated2/shareables.ts b/node_modules/react-native-reanimated/src/reanimated2/shareables.ts
index f578032..10abf6e 100644
--- a/node_modules/react-native-reanimated/src/reanimated2/shareables.ts
+++ b/node_modules/react-native-reanimated/src/reanimated2/shareables.ts
@@ -255,7 +255,7 @@ type RemoteFunction<T> = {
function isRemoteFunction<T>(value: object): value is RemoteFunction<T> {
'worklet';
- return '__remoteFunction' in value;
+ return Boolean(value.__remoteFunction);
}
export function makeShareableCloneOnUIRecursive<T>(
diff --git a/node_modules/react-native-reanimated/src/reanimated2/threads.ts b/node_modules/react-native-reanimated/src/reanimated2/threads.ts
index e95bafd..14abbd7 100644
--- a/node_modules/react-native-reanimated/src/reanimated2/threads.ts
+++ b/node_modules/react-native-reanimated/src/reanimated2/threads.ts
@@ -204,7 +204,7 @@ export function runOnJS<Args extends unknown[], ReturnValue>(
: (fun as () => ReturnValue)
);
}
- if ('__workletHash' in fun) {
+ if (fun.__workletHash) {
// If `fun` is a worklet, we schedule a call of a remote function `runWorkletOnJS`
// and pass the worklet as a first argument followed by original arguments.
@@ -214,7 +214,7 @@ export function runOnJS<Args extends unknown[], ReturnValue>(
...args
);
}
- if ('__remoteFunction' in fun) {
+ if (fun.__remoteFunction) {
// In development mode the function provided as `fun` throws an error message
// such that when someone accidentally calls it directly on the UI runtime, they
// see that they should use `runOnJS` instead. To facilitate that we put the
diff --git a/node_modules/react-native-reanimated/src/reanimated2/valueUnpacker.ts b/node_modules/react-native-reanimated/src/reanimated2/valueUnpacker.ts
index d46d04c..5fef544 100644
--- a/node_modules/react-native-reanimated/src/reanimated2/valueUnpacker.ts
+++ b/node_modules/react-native-reanimated/src/reanimated2/valueUnpacker.ts
@@ -67,7 +67,7 @@ See \`https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshoo
}
if (__DEV__ && IS_NATIVE) {
- if (!('__workletHash' in valueUnpacker)) {
+ if (!(valueUnpacker.__workletHash)) {
throw new Error('[Reanimated] `valueUnpacker` is not a worklet');
}
// @ts-ignore TODO TYPESCRIPT
|
@MrLibya Thanks, but there is no need to change it everywhere in the code, only in places when we can get a HostObject. |
Unfortunately I'm not getting any crashes on Release with your reproduction on iOS simulator @aslihanturkdonmez. If someone has another repro I'm happy to take it. |
When we can expect new version with a fix for this crash? |
any hotfix for this? |
@efstathiosntonas @MrLibya any timeline for next release with fix? |
TT |
fixes - #5067 - #5075 - #5069 - #5091 quoting @tjzel explanation just for reference > The problem is with Cpp HostObjects, they always return true for in operator in JS and now we have more situations where those can be used as worklets. Therefore the only proper check is actually checking if value is truthy. _had to skip git hooks due to typing errors_ PR that created this error: #4794 --------- Co-authored-by: Efstathios Ntonas <stathis@hikiapp.com> Co-authored-by: Tomasz Żelawski <tomasz.zelawski@swmansion.com>
fixes - #5067 - #5075 - #5069 - #5091 quoting @tjzel explanation just for reference > The problem is with Cpp HostObjects, they always return true for in operator in JS and now we have more situations where those can be used as worklets. Therefore the only proper check is actually checking if value is truthy. _had to skip git hooks due to typing errors_ PR that created this error: #4794 --------- Co-authored-by: Efstathios Ntonas <stathis@hikiapp.com> Co-authored-by: Tomasz Żelawski <tomasz.zelawski@swmansion.com>
Hey folks, |
Fixed in 3.5.2 |
@ravindraguptacapgemini I strongly suggest visiting the link provided in error message - solution is there. |
@tjzel it did not work initially, I restarted my system then it worked. Thanks! |
Thanks a lot for the fix it was just in time :P |
Environment"react-native-reanimated": "^3.5.4" Code
Problem Only release
|
still crashing in Expo development build with dependencies:
|
I had a similar issue because I passed only a callback for the reducer as the third parameter to withTiming. It works fine when I wrap this callback in runOnJS. |
Description
I'm experiencing a crash when attempting to open the drawer in a React Native project using Reanimated v3. Debug mode is functioning correctly, but in production, the app crashes on both Android and iOS. I've created a new React Native project (0.72.4) and installed the necessary navigation and drawer packages.
Steps to reproduce
I've installed the plugin's latest version and am currently working on a project built with the most recent React Native version, but I'm encountering crashes.
Snack or a link to a repository
https://github.com/aslihanturkdonmez/test
Reanimated version
3.5.1
React Native version
0.72.4
Platforms
Android, iOS
JavaScript runtime
Hermes
Workflow
React Native (without Expo)
Architecture
Paper (Old Architecture)
Build type
Release mode
Device
iOS simulator
Device model
iPhone 14 pro (16.2)
Acknowledgements
Yes
The text was updated successfully, but these errors were encountered: