screen freezes on ios and no touch support on Layout with entering or exiting animation

[geoapostolidis]

Description

On ios the screen freezes on Layout with entering or exiting animation. When i navigate to the page that has layout on navigate back then the screen freezes and has no touch support. The problem is that there is no error in console in order to debug it.

Expected behavior

Actual behavior & steps to reproduce

Snack or minimal code example

import React, { Component } from 'react';
import Animated, { SlideInLeft, SlideOutLeft } from "react-native-reanimated";

class Search extends Component {

  render(){

    return (
      <Animated.View style={{flex: 1}} entering={SlideInLeft} exiting={SlideOutLeft}>        
      </Animated.View>
    );
  }
}

export default Search

Package versions

i have these packages installed

"@react-navigation/native": "^6.0.11", "@react-navigation/stack": "^6.2.2", "react": "18.0.0", "react-native": "0.69.1", "react-native-reanimated": "^2.9.1"

Affected platforms

• [ ] Android
• [x] iOS
• [ ] Web

[ddikodroid]

related to https://github.com/software-mansion/react-native-reanimated/issues/3124

[Tauka]

Experiencing same issue

[anhnch]

For me, all I did is just an import Animated from 'react-native-reanimated'. When I go to a screen and go back, the screen is not responding to touch/scroll. The screen is still functioning properly, but you simply can't do anything. No error, no log, nothing. Because the problem occurs when navigating and react-navigation does use react-native-reanimated, so I think it's incompatibility with react-navigation

react-native-reanimated: 2.9.1 @react-navigation/drawer: 6.4.3 @react-navigation/native: 6.0.11 @react-navigation/stack: 6.2.2 react-native-screens: 3.15.0

[Tauka]

Removing GestureHandler from react-native-gesture-handler fixed freezes for me. Read it from here: https://github.com/software-mansion/react-native-reanimated/issues/3331

[amin79]

For me, all I did is just an import Animated from 'react-native-reanimated'. When I go to a screen and go back, the screen is not responding to touch/scroll. The screen is still functioning properly, but you simply can't do anything. No error, no log, nothing. Because the problem occurs when navigating and react-navigation does use react-native-reanimated, so I think it's incompatibility with react-navigation

react-native-reanimated: 2.9.1 @react-navigation/drawer: 6.4.3 @react-navigation/native: 6.0.11 @react-navigation/stack: 6.2.2 react-native-screens: 3.15.0

Same problem here. Did you find any solutions?

[AhmadHoranieh]

@Tauka Can you explain what you did, please?

[entangledloops]

Is there a workaround or ETA on a fix for this?

[lurdharry]

Thanks so much for creating this issue, it took me a while to even know what’s causing the freeze.

[Tauka]

@AhmadHoranieh Instead of using GestureHandler from react-native-gesture-handler, I used PanGestureHandler

[aLemonFox]

@AhmadHoranieh Instead of using GestureHandler from react-native-gesture-handler, I used PanGestureHandler

This works for me too, but it's not ideal since PanGestureHandler is using the old API which is no longer maintained. Any news on this issue?

[svenngronbeck]

Any updates here?

[vanenshi]

I am facing this issue too

[Lakston]

Same problem I just spent half a day trying to figure this out.

reanimated v2.14.0 react-native v0.70.5

and just using fades:

<Animated.View
      key={"uniqueKey"}
      entering={FadeIn.duration(300)}
      exiting={FadeOut.duration(300)}
    >
      {...}
</Animated.View>

As soon as I hit the back button and leave this screen the layout is frozen and I need to reload the app

[lewisd1996]

Also experiencing this problem, after navigating to a screen, the screen generally works fine but the gesture handler is frozen and requires a hot reload to kick in. Unsure if this happens in production.

I am using GestureDetector with Gesture.Pan()

[pelayomartinez]

Also experiencing this issue - not even using react-native-gesture-handler. Screen becomes unresponsive to touch after the screen containing the layout transitions is popped from stack navigator

[kirbi96]

resolve for me after update to 3.2.0 version

[Lakston]

do you mean 3.0.2 ?

I tried to update, but upgrading reanimated breaks the async storage lib apparently, see this issue, so I'm stuck, cant use the pre made animations on 2.X and can not upgrade to 3.X because it breaks our app.

[t0ma5h]

Having the same issues weirdly after installing firebase as a dependency.

[filippobarcellos]

@t0ma5h Did you manage to get it fixed? I'm having the same problem after adding firebase as well. Not sure how they are related though.

[qaws5503]

Same problem here. Does someone solved this problem?

[MacPiston]

Recently encountered this issue with reanimated v2. I can confirm that with reanimated 3.1.0, @react-navigation/native 6.1.6 and @react-navigation/stack 6.3.16 screens are responsive again. I can't relate to AsyncStorage issue as I haven't tested that, but even if that was the case having responsive screens again is much more important.

[t0ma5h]

@filippobarcellos yeah, upgraded reanimated to 3.1.0. Be sure to reset the metro cache after you update 👌

[Lakston]

Recently encountered this issue with reanimated v2. I can confirm that with reanimated 3.1.0, @react-navigation/native 6.1.6 and @react-navigation/stack 6.3.16 screens are responsive again. I can't relate to AsyncStorage issue as I haven't tested that, but even if that was the case having responsive screens again is much more important.

Well since not being able to access the async storage completely breaks our app, it feels more important to have a fix for that first !

[ddikodroid]

Recently encountered this issue with reanimated v2. I can confirm that with reanimated 3.1.0, @react-navigation/native 6.1.6 and @react-navigation/stack 6.3.16 screens are responsive again. I can't relate to AsyncStorage issue as I haven't tested that, but even if that was the case having responsive screens again is much more important.

Well since not being able to access the async storage completely breaks our app, it feels more important to have a fix for that first !

why don't you use mmkv instead?

[Ashalbulk]

looks like that the reason is in gesture, try to use working for me on android using react-navigation and the gesture handler HOC

AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(appRoot));

instead of <GestureHandlerRootView>