Skip to content
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

v3.4.1 crash _clearAnimationConfigForTag #4836

Closed
fukemy opened this issue Jul 28, 2023 · 44 comments · Fixed by #4878
Closed

v3.4.1 crash _clearAnimationConfigForTag #4836

fukemy opened this issue Jul 28, 2023 · 44 comments · Fixed by #4878
Assignees
Labels
Missing repro This issue need minimum repro scenario Needs review Issue is ready to be reviewed by a maintainer Platform: iOS This issue is specific to iOS

Comments

@fukemy
Copy link

fukemy commented Jul 28, 2023

Description

Screenshot 2023-07-28 at 11 37 46

I checked viewtag = nil but still run into this block:
Screenshot 2023-07-28 at 11 39 26

Steps to reproduce

  1. Install v3.4.1
  2. run pod install
  3. run app

Snack or a link to a repository

https://snack.expo.dev

Reanimated version

3.4.1

React Native version

0.72.3

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Real device

Device model

Ipad gen7

Acknowledgements

Yes

@fukemy fukemy added the Needs review Issue is ready to be reviewed by a maintainer label Jul 28, 2023
@github-actions github-actions bot added Platform: iOS This issue is specific to iOS Missing repro This issue need minimum repro scenario labels Jul 28, 2023
@github-actions
Copy link

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

@fukemy
Copy link
Author

fukemy commented Jul 28, 2023

I also installed react-native-screens 3.23.0

@yedi97
Copy link

yedi97 commented Jul 28, 2023

i same issue on IOS, work fine on android!

@windduong
Copy link

I same issue on IOS, work fine on android!

@david-tabaka-guesty
Copy link

Same issue. For me, it's reproducing only with Chrome Debugger turned on.

@tjzel
Copy link
Contributor

tjzel commented Jul 28, 2023

Hi, if so many people have this issue maybe someone can throw in a repro? 😅

@ethanneff
Copy link

had to downgrade to 3.3.0. too many crashes on 3.4.1

@suhailpahmin
Copy link

suhailpahmin commented Jul 31, 2023

is there any update on this issue? I'm getting the same crashes.

these are my versions

    "react": "18.2.0",
    "react-native": "0.72.3",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/material-top-tabs": "^6.6.3",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "react-native-reanimated": "^3.4.1",
    "react-native-screens": "^3.23.0",

@ipoogleduck
Copy link

I'm still getting the same crash after downgrading to version 3.3.0. Any updates or help would be appreciated!

@tjzel
Copy link
Contributor

tjzel commented Aug 1, 2023

Please post a repro so we can investigate this issue 🙏

@kunger97
Copy link

kunger97 commented Aug 1, 2023

clash after call navigation.goBack();
with

@babel/core@7.22.9
@babel/preset-env@7.22.9
@babel/runtime@7.22.6
@expo/vector-icons@13.0.0
@ouroboros/react-native-picker@0.3.1
@react-native-async-storage/async-storage@1.19.1
@react-native-community/eslint-config@3.2.0
@react-navigation/native-stack@6.9.13
@react-navigation/native@6.1.7
@tsconfig/react-native@2.0.3
@types/jest@29.5.3
@types/react-test-renderer@18.0.0
@types/react@18.2.17
babel-jest@29.6.2
eslint@8.46.0
expo-barcode-scanner@12.5.3
expo-secure-store@12.3.1
expo-splash-screen@0.18.2
expo@48.0.20
jest@29.6.2
jsencrypt@3.3.2
lodash@4.17.21
metro-react-native-babel-preset@0.73.9
moment@2.29.4
prettier@2.8.8
prop-types@15.8.1
react-native-actions-sheet@0.8.29
react-native-gesture-handler@2.12.0
react-native-reanimated@3.4.1
react-native-root-toast@3.4.1
react-native-safe-area-context@4.7.1
react-native-screens@3.23.0
react-native@0.71.12
react-test-renderer@18.2.0
react@18.2.0
typescript@4.8.4
uuid@9.0.0

@suhailpahmin
Copy link

yep, mine is the same as @kunger97 , but I've downgraded to 3.3.0 and it's working now

@david-tabaka-guesty
Copy link

@tjzel I am encountering a consistent crash whenever I use the "Debug with Chrome" feature and navigate to another screen. This happens on a newly initialized project, and the error is reproducible. Here are the step-by-step details of how to reproduce the issue:

Steps to reproduce:

  1. Initialize a new project with the latest RN version.
  2. Add @react-navigation/native, react-native-screens, react-native-safe-area-context, and @react-navigation/native-stack packages.
  3. The newest version of react-native-reanimated is then added.
  4. Disable Hermes so that the Chrome Debugger can function.
  5. Next, create a simple NativeStack.
  6. Enable the "Debug with Chrome" feature.
  7. Then, simply navigate to another screen and then back (the crash happens here).

Every single time I navigate back, the app crashes without fail, and it also crashes the moment I disable the "Debug with Chrome" feature.

This is a major issue for us because our team heavily relies on the React Native Debugger and we literally can't use it at the moment for the newly created project. Could you please look into it? Thanks.

Here is my dependencies list:

"dependencies": {
    "@react-navigation/native": "6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "react": "18.2.0",
    "react-native": "0.72.3",
    "react-native-reanimated": "3.4.1",
    "react-native-safe-area-context": "4.7.1",
    "react-native-screens": "3.23.0"
  }

App.tsx file:

import React from 'react';
import { Button, SafeAreaView, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import {
  createNativeStackNavigator,
  NativeStackScreenProps,
} from '@react-navigation/native-stack';

const Home = ({ navigation: { navigate } }: NativeStackScreenProps<any>) => {
  return (
    <SafeAreaView>
      <Text>Main screen</Text>

      <Button title="Go to details" onPress={() => navigate('Details')} />
    </SafeAreaView>
  );
};
const Details = ({ navigation: { goBack } }: NativeStackScreenProps<any>) => {
  return (
    <SafeAreaView>
      <Text>Main screen</Text>

      <Button title="Go back" onPress={goBack} />
    </SafeAreaView>
  );
};

const NativeStack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <NativeStack.Navigator>
        <NativeStack.Screen name={'Home'} component={Home} />
        <NativeStack.Screen name={'Details'} component={Details} />
      </NativeStack.Navigator>
    </NavigationContainer>
  );
};

export default App;

@piaskowyk piaskowyk self-assigned this Aug 1, 2023
@piaskowyk
Copy link
Member

@david-tabaka-guesty thank you for providing the reproduction! 🙏 I have an idea how to solve this issue. I will post a PR soon.

@caixingyue
Copy link

I have this problem too, it's been bothering me for a day

"react-native-reanimated": "^3.4.1",

@tjzel
Copy link
Contributor

tjzel commented Aug 1, 2023

If you need a temporary workaround you can put
import 'react-native-reanimated'
somewhere early in your JS code, if you don't import anything from react-native-reanimated already

@caixingyue
Copy link

If you need a temporary workaround you can put import 'react-native-reanimated' somewhere early in your JS code, if you don't import anything from react-native-reanimated already

Your method works, thanks

@caixingyue
Copy link

@david-tabaka-guesty thank you for providing the reproduction! 🙏 I have an idea how to solve this issue. I will post a PR soon.

import type {WithSpringConfig, WithTimingConfig} from 'react-native-reanimated';

When this is introduced on the screen, the editor will prompt as follows, whether it can be solved together, thank you

Module ""react-native-reanimated"" has no exported member "WithSpringConfig". Are you trying to use "import WithSpringConfig from "react-native-reanimated"" instead?

@tjzel
Copy link
Contributor

tjzel commented Aug 1, 2023

@caixingyue This is a known issue that with release of 3.4.0 we accidentally stopped exporting those utility types, they will be restored once #4847 is merged and released in 3.4.2.

@sebasgarcia29
Copy link

Hi @tjzel when is the next relese for the version 3.4.2?

@atulsharmaTFT
Copy link

Is there any update on this error ... i m facing this issue while navigating from one screen to another from Drawer.
I tried with 3.4.1 , 3.3.0, 3.2.0 nothing worked in my case... any suggestion?

Screenshot 2023-08-03 at 1 04 00 PM

@caixingyue
Copy link

caixingyue commented Aug 3, 2023

Is there any update on this error ... i m facing this issue while navigating from one screen to another from Drawer. I tried with 3.4.1 , 3.3.0, 3.2.0 nothing worked in my case... any suggestion?

Screenshot 2023-08-03 at 1 04 00 PM

Temporary solution, add import 'react-native-reanimated' to index.js or App.ts

@dariusbiro
Copy link

Is there any update on this error ... i m facing this issue while navigating from one screen to another from Drawer. I tried with 3.4.1 , 3.3.0, 3.2.0 nothing worked in my case... any suggestion?

Screenshot 2023-08-03 at 1 04 00 PM

Another temporary solution I found (but I don't think it's better then the one @caixingyue suggested) is to just disable the chrome deubugging for now.

@tjzel
Copy link
Contributor

tjzel commented Aug 3, 2023

This issue is under investigation.

@sebasgarcia29 I can't guarantee that it will be released in 3.4.2 which will be either tomorrow or next week - in that case it would be released in 3.4.3 not long after.

@Acetyld
Copy link

Acetyld commented Aug 3, 2023

import 'react-native-reanimated'
worked for now.

@slim81
Copy link

slim81 commented Aug 3, 2023

If you need a temporary workaround you can put import 'react-native-reanimated' somewhere early in your JS code, if you don't import anything from react-native-reanimated already

I spent hours trying different fixes. This is the way...

github-merge-queue bot pushed a commit that referenced this issue Aug 4, 2023
…4878)

## Summary

This PR adds default instances for uninitialized blocks in
AnimationManager on iOS. It helps avoid null exceptions in two cases:
- When reloading during Layout Animations and Shared Transitions.
- When someone has installed Reanimated but doesn't import anything from
it. In this situation, these blocks will not be set, but due to
swizzling in Screens, there is a possibility of calling some of these
blocks.

Fixes
#4836
Fixes:
<img width="500" alt="Screenshot 2023-06-26 at 21 26 52"
src="https://github.com/software-mansion/react-native-reanimated/assets/36106620/5bc60a08-da8b-4b14-8762-bbd1ab9a45ec">

## Test plan

1. Run Example -> open [LA] Entering and Exiting with Layout -> click
toggle -> press R in console
2. Run example from
#4836 (comment)
@lucasAmarall
Copy link

import 'react-native-reanimated' worked for now.

Way to go!
It was unbelievable how long it took me to find this and realize it wasn't any error in my code!

@SMKH-PRO
Copy link

SMKH-PRO commented Aug 7, 2023

:*( this error cost me sleepless nights!, the irony is that it only appeared on production build/real device.

Same error in 3.4.2

@piaskowyk
Copy link
Member

This fix hasn't released yet. It will be available in 3.5.0

@fargo31
Copy link

fargo31 commented Aug 8, 2023

add in babel.config.json
"plugins": [
"react-native-reanimated/plugin"
].

https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/#babel-plugin
don't forget : npm start -- --reset-cache

This works for me

@david-tabaka-guesty
Copy link

For some reason, import 'react-native-reanimated' doesn't work in our case, so we're still waiting for a fix 🙏🏻.

@tjzel
Copy link
Contributor

tjzel commented Aug 8, 2023

You can use current nightly version that has it fixed, yarn add react-native-reanimated@nightly.

@DevNomadAbhi
Copy link

This is an issue in latest react native reanimated , putting
import 'react-native-gesture-handler' import 'react-native-reanimated' in index.js file at the very top level resolves the error .

@david-tabaka-guesty
Copy link

@tjzel thanks a lot, nightly version works as expected!🙏🏻

@dennis-gonzales
Copy link

I was able to reproduce the issue still on version 3.4.2.

importing react-native-reanimated in index.js does fixes the issue albeit a temporary fix.

but since the post has been declared closed I'm assuming the fix is going to be released soon.

@suretarget
Copy link

suretarget commented Aug 20, 2023

@dennis-gonzales

This fix hasn't released yet. It will be available in 3.5.0

#4836 (comment)

@kushal-mobiledev
Copy link

had to downgrade to 3.3.0. too many crashes on 3.4.1

This worked.

@DevNomadAbhi
Copy link

import 'react-native-reanimated'

Tried with importing but its also failing to solve the issue

#4836 (comment)

warrendeleon added a commit to warrendeleon/rn-warrendeleon that referenced this issue Aug 26, 2023
warrendeleon added a commit to warrendeleon/rn-warrendeleon that referenced this issue Aug 26, 2023
warrendeleon added a commit to warrendeleon/rn-warrendeleon that referenced this issue Sep 1, 2023
@dangnguyen1004
Copy link

If you need a temporary workaround you can put import 'react-native-reanimated' somewhere early in your JS code, if you don't import anything from react-native-reanimated already

Amazing work around

@gibo77
Copy link

gibo77 commented Sep 10, 2023

When you do yarn add react-native-reanimated@nightly
you need to remove the import 'react-native-reanimated' from your index.js.
This works for me, but only in iOS debug mode.
If I change to iOS Release mode in Xcode, app will crash when the page changes with React Native Navigation.

Xcode Crash Report below. Crash trigger only.

Thread 3 Crashed:: Dispatch queue: com.facebook.react.ExceptionsManagerQueue
0 libsystem_kernel.dylib 0x7ff8376f4202 __pthread_kill + 10
1 libsystem_pthread.dylib 0x7ff83774cee6 pthread_kill + 263
2 libsystem_c.dylib 0x7ff800131e58 abort + 130
3 libc++abi.dylib 0x7ff80025a5f2 abort_message + 241
4 libc++abi.dylib 0x7ff80024c7cb demangling_terminate_handler() + 267
5 libobjc.A.dylib 0x7ff800032182 _objc_terminate() + 96
6 libc++abi.dylib 0x7ff800259a4b std::__terminate(void (*)()) + 6
7 libc++abi.dylib 0x7ff800259a06 std::terminate() + 54
8 libdispatch.dylib 0x7ff80013d0ed _dispatch_client_callout + 28
9 libdispatch.dylib 0x7ff800144b23 _dispatch_lane_serial_drain + 1008
10 libdispatch.dylib 0x7ff8001457ef _dispatch_lane_invoke + 400
11 libdispatch.dylib 0x7ff800152475 _dispatch_workloop_worker_thread + 873
12 libsystem_pthread.dylib 0x7ff837749c55 _pthread_wqthread + 327
13 libsystem_pthread.dylib 0x7ff837748bbf start_wqthread + 15

Below are the dependencies.

"@react-native-community/slider": "^4.4.2",
"@react-navigation/native": "^6.1.7",
"@react-navigation/native-stack": "^6.9.13",
"babel": "^6.23.0",
"base64-js": "^1.5.1",
"buffer": "^6.0.3",
"react": "^18.2.0",
"react-native": "^0.71.7",
"react-native-gesture-handler": "^2.12.1",
"react-native-reanimated": "^3.5.0-nightly-20230909-073b64568",
"react-native-safe-area-context": "^4.7.2",
"react-native-screens": "^3.25.0",
"react-native-size-matters": "^0.4.0",
"react-native-udp": "^4.1.7",
"react-native-vector-icons": "^10.0.0",
"react-native-wifi-reborn": "^4.7.0",
"upgrade": "^1.1.0"

@Ahmed-Imam
Copy link

any update on this ?? still getting the issue on

    "react-native-gesture-handler": "^2.12.1",
    "react-native-reanimated": "^3.3.0",
    "react-native-reanimated-carousel": "^3.5.1",
     "react-native": "0.69.4",

@Ahmed-Imam
Copy link

@piaskowyk have you found a solution for this issue? If you could share the solution or the PR, we could apply a patch until it's officially released

@piaskowyk
Copy link
Member

Today we released version that contains the fix, you should update your Reanimated to 3.5.0

@Dip76
Copy link

Dip76 commented May 6, 2024

I had the same error in Reanimated version 3.8.1. I tried several Reanimated versions and imported Reanimated into my App.tsx file, but nothing worked in my instance.

After many tries, I decided to import Animated from'react-native-reanimated' and apply it to any view of my landing page, which worked!

You can use it on any view on your screen.

Example usage:

Import Animated from'react-native-reanimated'

<Animated.View style={[{ marginHorizontal: 16, }]}>
<TouchableOpacity style={[customButtons.primaryButton,{marginVertical:14}]} onPress={() => navigation.navigate('CreateAccount')}>
<Text allowFontScaling={false} style={[textStyle.continueBtnText,{color:"#fff"}]}>Create a new account

<TouchableOpacity style={[customButtons.landingButton,]} onPress={() => navigation.navigate('LoginScreen')}>
Already have an account? Log in

</Animated.View>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Missing repro This issue need minimum repro scenario Needs review Issue is ready to be reviewed by a maintainer Platform: iOS This issue is specific to iOS
Projects
None yet