IjzerenHein / IjzerenHein/react-navigation-shared-element

InteractionManager.runAfterInteractions not running at all!

Open
#94 7 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
1.3k
Forks
125
PR merge metrics
No merged PRs in 30d

Description

## First off

First off, I had a really hard time debugging this, and I've already opened issues at react-native, react-navigation and react-native-screens. I've eliminated all possible causes for this, and finally came to the conclusion that the library causing this issue is react-navigation-shared-element.

## Description

I am using a lot of `InteractionManager.runAfterInteractions(() => ...)` calls throughout my project.

For example, I have a **feed of multiple posts** in my HomeScreen (Tab Navigator) and each post has `useEffect` and `useFocusEffect` hooks which call `InteractionManager.runAfterInteractions` inside the hook to schedule loading extra post data after some animations have completed. _"Some animations"_ = mostly navigation transitions from react-navigation-shared-element, but since the post items specifically are inside a Tab Navigator, no navigation transitions/animations are run so this should fire almost immediately.

In development/debug build everything works fine, but once I build for production/release, the extra post data never gets loaded, a test `Alert.alert(...)` I've put in there never gets shown, and my animations will never start, causing my app to be fully stuck.

I have added a `GlobalErrorHandler` callback to my entry point (`App.tsx`) since I thought "hey, maybe some JS error is thrown and execution is stopped?":

```ts
const defaultErrorHandler = ErrorUtils.getGlobalHandler();
ErrorUtils.setGlobalHandler((error, isFatal) => {
Alert.alert(`Unexpected ${isFatal ? 'fatal error' : 'error'}!`, `Unexpected error occured! ${JSON.stringify(error)}`);
Logger.logError(isFatal ? 'A fatal, unhandled error occured!' : 'An unhandled error occured!', error);
if (defaultErrorHandler) defaultErrorHandler(error, isFatal);
});
```

but this doesn't get called either.

Unfortunately, since this only happens on production/release builds, I'm having a hard time debugging this. I will happily provide any extra information needed.

---

## Extra Details

My root view is a `NavigationContainer`, and inside of it, I conditionally render the `LoginStackNavigator` or the `HomeStackNavigator` depending if the user is logged in or not. I'll go over my navigation hierachy in a bit

---

### Current Behavior

Right now, the InteractionManager does not call the callback function at all, causing my app to be "broken". Data is never getting loaded, delayed animations are not getting started, etc.

### Expected Behavior

The InteractionManager should call the callback after animations have finished. (Which, on a Tab navigator, should be instantly.)

---

## Screenshots

Debug/Development Build
Release/Production Build

Everything working fine, all InteractionManager.runAfterInteraction callbacks inside my useEffect hooks are being called.

Everything is broken, InteractionManager.runAfterInteraction callbacks inside my useEffect hooks are not being called, the text for the post is not being loaded (which is inside an InteractionManager.runAfterInteraction callback), and weirdly the react-native-vector-icons are not being displayed. no idea why that's the case, since that has nothing to do with an InteractionManager.runAfterInteraction callback.

> When the InteractionManager.runAfterInteractions doesn't get called, my views are also not yet enabled so the user can't actually use the app at all.

## How to reproduce

1. Create awesome app
2. Use `react-navigation` for navigation, create NavigationContainer, in my case a Stack Navigator containing a Tab Navigator (Home) and a "Post Details Screen".
3. Add `InteractionManager.runAfterInteractions(() => ...)` callbacks in your components (e.g. `useEffect()` hook)
4. Callbacks will be called in debug, but never in release

## Navigation Structure

Dumbed down, I have the following Navigation Structure:

* `NavigationContainer`
- `Stack.Navigator` from `createNativeStackNavigator`
* Some Screens like an Add Screen which are irrelevant here
* A `Stack.Navigator` from `createSharedElementStackNavigator`
* Bottom Tabs with 4 Screens from `createBottomTabNavigator`
- Home Screen which contains a list of Posts with the `` inside
- other tabs
* Post Details Screen which is just a simple Screen with the `` inside

> My Tab Navigator's Screens (Home Screen, ...) are nested within another Shared Element Stack because of https://github.com/IjzerenHein/react-navigation-shared-element/issues/80

## My Environment

| software | version |
| ------------------------------ | ------- |
| iOS or Android | iOS, 13.5.1
| react-native-shared-element | ^0.7.0
| react-navigation-shared-element | ^3.0.0
| @react-navigation/native | 5.7.1
| react-native-screens | ^2.9.0
| react-native | 0.63.2
| react-native-gesture-handler | ^1.7.0
| @react-native-community/masked-view | ^0.1.10
| react-native-reanimated | ^1.10.1
| react-native-safe-area-context | ^3.0.7
| node | v14.4.0
| npm or yarn | npm, 6.14.6

## Conclusion

I would really appreciate some help with this. I am having an incredibly hard time finding the cause for this and cannot release my app for production.

I have tried rewriting my app to use [wix/react-native-navigation](https://github.com/wix/react-native-navigation), and noticed that all InteractionManagers work correctly there.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the release-build behavior with InteractionManager.runAfterInteractions in the NavigationContainer and nested shared-element stack described in the issue. Compare the debug and release paths around the App.tsx entry point and the listed navigation setup. Done means callbacks execute after transitions in release builds without leaving views disabled.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
frontend, mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.