AnimatedLayout breaking iOS touch when using with react-native-modal

[raulmax319]

Description

Problem with reanimated 2 AnimatedLayout when using with react-native-modal library

Expected behavior

The Modal opens inside a AnimatedLayout component, and when you close it the touch does not stop working

Actual behavior & steps to reproduce

When you toggle the modal inside a AnimatedLayout it disables all touch events on the app To reproduce this issue you need @react-navigation/native@5.9.4 @react-navigation/stack@5.14.5 react-native-reanimated@2.3.0-alpha.1 react-native-modal@12.0.3 yarn You also need to fix the problem related to the issue #2124 so it won't break when initializing the app

cd ios && pod install
cd .. && yarn ios

Snack or minimal code example

You can see all the code by following the link bellow: https://github.com/raulmax319/react-native-typescript-redux-boilerplate/tree/repro/rn-modal

This is a example video of the actual behavior

https://user-images.githubusercontent.com/17752968/129127972-a3fdd287-b88b-44bb-b845-a0cc0f5023d8.mov

Package versions

• React Native: 0.64.1
• React Native Reanimated: 2.3.0-alpha.1
• NodeJS: 16.1.0
• Xcode: 12.5.1

Affected platforms

• [ ] Android
• [ X ] iOS
• [ ] Web

[github-actions[bot]]

Issue validator

The issue is valid!

[jmysliv]

Hi @raulmax319 ! We have just released 2.3.0-alpha.3 without AnimatedLayout and I think your problem might be gone. Can you check it and let me know?

[raulmax319]

Hello @jmysliv ! I tried updating my project and removed the AnimatedLayout component to a common View but it didn't seem to work, sadly, now the problem seems to persist even if the <Modal /> is outside the Container scope (wrapped inside a fragment as shown in the example video), because now there's no AnimatedLayout to wrap it. I tried switching from react-native-modal to react-native's modal but it had the same effect as the lib uses the same component but is a bit more customizable. I also updated the repo's rn version to 0.65.1 and reanimated's ver. to 2.3.0-alpha.3

[raulmax319]

On another note, I tried building on my android phone as a safety measure, but now when I build it I get the following error screen:

react-native: 0.65.1 hermes-engine: 0.8.1 react-native-reanimated: 2.3.0-alpha.3 Android version: 10 Phone: Xiaomi Mi A2 Lite (Android One)

I think this is related to the rn upgrade as seen here: #2369

[piaskowyk]

The reason for the problem with null ptr is probably the same as in #2369

But I can confirm that problem with modal still exists on alpha.3

[xand3r40r93]

I have the same issue with: "react-native": "0.66.0", "react-native-reanimated": "2.3.0-beta.2",

[raulmax319]

Hi, I'm sorry I am not much of a help when it comes to native code, all I can do is give feedback. When I have a screen with no entering/exiting but using shared Values, it has the same effect on the modals.

I tried downgrading an application's reanimated version to 2.2.2 and it works fine, but when I go back to @beta, every kind of modal that is rendered outside the view hierarchy is not unmounted properly after it mounts for the first time.

I've tried using react-navigation's @react-navigation/native's createStackNavigator's option presentation: 'transparentModal' to find a workaround but no dice, when I use navigation.goBack() the component unmount and I can use the app normally if I'm using presentation: 'transparentModal', but after I navigate()or push() the same happens, the modal is mounted above everything, as seen in the video below. Note: I didn't test for navigation.reset();

https://user-images.githubusercontent.com/17752968/137041092-ef6a40b8-cd29-454a-b92a-337dbc5caf34.mov

As for react-native/react-native-modal it just keeps the RCTModalHost instead of RNSScreen mounted, but the effect is the same.

[raulmax319]

Hello, I've come with a workaround by using the @react-navigation transparent modal.

I just had to not navigate inside an asynchronous function, I can use the application normally if I navigate inside synchronous functions, not async ones.

I still don't know the reason for that and I still need to send API calls on some modals so it's not a solution, but I can work with this until this is solved.

[piaskowyk]

Resolved by - https://github.com/software-mansion/react-native-reanimated/pull/2581

[raulmax319]

Thank you very much!!