React-native-navigation: [Android][v2] After Update 2.0.2502 => 2.0.2503+ Custom title component was broken (Error: index=3 count=2)

[retyui]

Issue Description

After update wix/RNN to 2.0.2503+ version , custom title component was broken.
In 2.0.2502 work fine!

Steps to Reproduce / Code Snippets / Screenshots

0) yarn add [email protected]
1) Create simple application code here.
2) Compile and run it.
3) Swiper left and Tap to "Go TO NEXT"
4) Close left menu
5) Press the "PUSH" button several times VERY quickly
6) If you were quick then you will see an error, if not then you need to go back and repeat step 5

Error

index=3 count=2
addInArray
    ViewGroup.java:5234
addViewInner
    ViewGroup.java:5144
addView
    ViewGroup.java:4953
addView
    ViewGroup.java:4893
addView
    ViewGroupManager.java:45
manageChildren
    NativeViewHierarchyManager.java:437
execute
    UIViewOperationQueue.java:227
run
    UIViewOperationQueue.java:894
flushPendingBatches
    UIViewOperationQueue.java:1001
access$2400
    UIViewOperationQueue.java:46
doFrameGuarded
    UIViewOperationQueue.java:1061
doFrame
    GuardedFrameCallback.java:29
doFrame
    ReactChoreographer.java:134
doFrame
    ChoreographerCompat.java:105
run
    Choreographer.java:909
doCallbacks
    Choreographer.java:723
doFrame
    Choreographer.java:655
run
    Choreographer.java:897
handleCallback
    Handler.java:789
dispatchMessage
    Handler.java:98
loop
    Looper.java:164
main
    ActivityThread.java:6938
invoke
    Method.java
run
    Zygote.java:327
main
    ZygoteInit.java:1374

---

Environment

• React Native Navigation version: 2.0.2503
• React Native info:

  React Native Environment Info:
    System:
      OS: Linux 4.15 Linux Mint 18.3 (Sylvia)
      CPU: x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
      Memory: 2.58 GB / 15.55 GB
      Shell: 2.7.1 - /usr/bin/fish
    Binaries:
      Node: 8.12.0 - /usr/bin/node
      Yarn: 1.9.4 - /usr/bin/yarn
      npm: 6.4.1 - /usr/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      Android SDK:
        Build Tools: 23.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.2
        API Levels: 23, 25, 26, 27, 28
    npmPackages:
      react: ^16.5.2 => 16.5.2 
      react-native: ^0.56.0 => 0.56.0 
    npmGlobalPackages:
      react-native-cli: 2.0.1

• Platform: Android
• Device info: Device Samsung s9 (Android 8.1, Debug mode)

[retyui]

rel: https://github.com/wix/react-native-navigation/issues/3817#issuecomment-416278949

[bragur]

Having this problem as well. Have to use text only for Android atm.

[guyca]

Hey guys, the following works fine for me:

const React = require('react');
import { Text } from "react-native";
const MyTopBar = props => <Text>My top bar</Text>;
Navigation.registerComponent('brokenTopBar', () => MyTopBar);

Navigation.events().registerAppLaunchedListener(async () => {
    Navigation.setRoot({
    root: {
      stack: {
        children: [
          {
            component: {
              name: 'navigation.playground.PushedScreen',
              options: {
                topBar: {
                  title: {
                    component: {
                      name: 'brokenTopBar'
                    }
                  }
                }
              }
            }
          }
        ]
      }
    }
    });
  });
});

You can PR the broken layout here and we'll look into it.

[retyui]

@guyca
I update "Steps to Reproduce" information , Can you check this problem again ?

[guyca]

Hey @retyui
AFAIK this is an RN synchronisation issue. RN assumes a single react root view exists, any time you have more then one react root view - these issues start happening.
Which RN version are you using?

[retyui]

@retyui
You can see RN version in Environment -> npmPackages : react-native: ^0.56.0 => 0.56.0
How how to avoid synchronization problems?

[guyca]

Try using SyncUiImplementation:

public class MainApplication extends NavigationApplication {

    @Override
    protected ReactNativeHost createReactNativeHost() {
        return new NavigationReactNativeHost(this) {
            @Override
            protected UIImplementationProvider getUIImplementationProvider() {
                return new SyncUiImplementation.Provider();
            }
        };
    }
}

[retyui]

I updated file android/app/src/main/java/com/my/MainApplication.java but error still work

+import com.facebook.react.uimanager.UIImplementationProvider;
+import com.reactnativenavigation.react.SyncUiImplementation;

@@ -53,4 +55,15 @@ public class MainApplication extends NavigationApplication {
     public List<ReactPackage> createAdditionalReactPackages() {
         return getPackages();
     }
+
+
+    @Override
+    protected ReactNativeHost createReactNativeHost() {
+        return new NavigationReactNativeHost(this) {
+            @Override
+            protected UIImplementationProvider getUIImplementationProvider() {
+                return new SyncUiImplementation.Provider();
+            }
+        };
+    }
 }

[bragur]

@guyca Seems to work fine on first load for some reason. On consequent loads it results in the index=3 count=2 error, unless I force quit the app and load fresh.

Using RNN 2.0.2567 atm with RN 0.56 to test this out, same results as before, using SyncUiImplementation.

[bragur]

Can't for the life of me find out of this. Upon testing, when disabling DEV mode on Android, the index=3-count=2-crash magically stopped and the component in the header appeared. Huzzah! 🎉

However, all navigation on this screen ceased to work so back to square 1 😥 I double checked and I'm actually making the push call to RNN with componentId and layout correct, just absolutely nothing happens.

So I created a test project similar to this one and that works fine. I can't see what has happened differently in my app except we have multiple tabs and each has a stack with one component upon start. The first tab is the only one to have a screen with a component in the header. Somewhere along the way some kind of config is causing this, and again, this is of course specificly only happening on Android, so iOS is dealing fine with the config.

@guyca or any of you wonderful people involved, any ideas what is causing this?

[cospin]

Hello @bragur, I've been following this issue for some time, I also have the same problem.

Today I updated to version 2.0.2581 and it seems to have been fixed.

[retyui]

@CristianOspina I checked for my example and it still raises an error

[cospin]

@retyui I have set your example in my current project and it works without problems. I don't know then what has changed in my development environment, but for some reason I no longer have that error.

  "dependencies": {
    "react": "16.4.1",
    "react-native": "0.56.0",
    "react-native-navigation": "^2.0.2581",
  },

[guyca]

I've managed to reproduce this in the playground app, will look into it today

[guyca]

For the time being - disabling yellow boxes should prevent the red screen

[bragur]

Thanks for taking the time to look at this @guyca ! Seems that the solutions in the fix is possibly the same as what happens when disabling the DEV mode from the DEV settings. I'm currently able to produce the components in the header correctly, but as soon as I try to navigate from within the current stack I receive an Unhandled promise rejection yellow screen with the following error:

Error: Failed to execute stack command. Stack CustomComponent3 not found.

This only happens in tabs where there is a custom component in the header. Modals are fine and moving to other tabs works flawlessly. Also, the index of CustomComponent is not the same if the exact same component, which has only been registered once, appears in other headers.

[gislitg]

Having the same problem as @bragur

[guyca]

@bragur, @gislitg Can either of you PR a failing detox test? That would help me fix the issue. Also it seems like you've encountered a different issue then OP, I suggest you open another issue instead of piggybacking on this one.