react-native-reanimated: screen freezes on ios and no touch support on Layout with entering or exiting animation

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
iOS
Web

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 18
Comments: 25

Most upvoted comments

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

entangledloops on Sep 30, 2022

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

Tauka on Aug 11, 2022

@Tauka Can you explain what you did, please?

AhmadHoranieh on Aug 17, 2022

resolve for me after update to 3.2.0 version

kirbi96 on Mar 14, 2023

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

Lakston on Mar 3, 2023

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

anhnch on Aug 1, 2022