React-native-navigation: Top bar options not working on iOS 13

[ivan3177]

Issue Description

Top bar options not working on iOS 13(background color, large title etc.)
On version 3.2.0 its even get's worse(screenshot #3, all top bar titles are mess). This also happens on iOS 12.

My guess it's somehow related to Main Thread Checker as on iOS 13 there are some exceptions on application start in console:

Main Thread Checker: UI API called on a background thread: -[UIViewController childViewControllers]
PID: 76500, TID: 951449, Thread name: (none), Queue name: com.apple.root.user-initiated-qos, QoS: 25
Backtrace:
4 Busfor 0x000000010be90a05 __62-[UIViewController(LayoutProtocol) renderTreeAndWait:perform:]_block_invoke + 117
5 libdispatch.dylib 0x000000010ddf7df0 _dispatch_call_block_and_release + 12
6 libdispatch.dylib 0x000000010ddf8d64 _dispatch_client_callout + 8
7 libdispatch.dylib 0x000000010de0a46e _dispatch_root_queue_drain + 819
8 libdispatch.dylib 0x000000010de0aba4 _dispatch_worker_thread2 + 132
9 libsystem_pthread.dylib 0x00007fff511c671d _pthread_wqthread + 220
10 libsystem_pthread.dylib 0x00007fff511c65bf start_wqthread + 15

Main Thread Checker: UI API called on a background thread: -[UITabBarController selectedViewController]
PID: 76500, TID: 951449, Thread name: (none), Queue name: com.apple.root.user-initiated-qos, QoS: 25
Backtrace:
4 Busfor 0x000000010be42b3c -[RNNBottomTabsController getCurrentChild] + 44
5 Busfor 0x000000010be90695 -[UIViewController(LayoutProtocol) resolveOptions] + 69
6 Busfor 0x000000010be90cf5 __62-[UIViewController(LayoutProtocol) renderTreeAndWait:perform:]_block_invoke + 869
7 libdispatch.dylib 0x000000010ddf7df0 _dispatch_call_block_and_release + 12
8 libdispatch.dylib 0x000000010ddf8d64 _dispatch_client_callout + 8
9 libdispatch.dylib 0x000000010de0a46e _dispatch_root_queue_drain + 819
10 libdispatch.dylib 0x000000010de0aba4 _dispatch_worker_thread2 + 132
11 libsystem_pthread.dylib 0x00007fff511c671d _pthread_wqthread + 220
12 libsystem_pthread.dylib 0x00007fff511c65bf start_wqthread + 15

Main Thread Checker: UI API called on a background thread: -[UINavigationController topViewController]
PID: 76500, TID: 951449, Thread name: (none), Queue name: com.apple.root.user-initiated-qos, QoS: 25
Backtrace:
4 Busfor 0x000000010be78d7c -[RNNStackController getCurrentChild] + 44
5 Busfor 0x000000010be90695 -[UIViewController(LayoutProtocol) resolveOptions] + 69
6 Busfor 0x000000010be906b1 -[UIViewController(LayoutProtocol) resolveOptions] + 97
7 Busfor 0x000000010be90cf5 __62-[UIViewController(LayoutProtocol) renderTreeAndWait:perform:]_block_invoke + 869
8 libdispatch.dylib 0x000000010ddf7df0 _dispatch_call_block_and_release + 12
9 libdispatch.dylib 0x000000010ddf8d64 _dispatch_client_callout + 8
10 libdispatch.dylib 0x000000010de0a46e _dispatch_root_queue_drain + 819
11 libdispatch.dylib 0x000000010de0aba4 _dispatch_worker_thread2 + 132
12 libsystem_pthread.dylib 0x00007fff511c671d _pthread_wqthread + 220
13 libsystem_pthread.dylib 0x00007fff511c65bf start_wqthread + 15

Screenshots

---

Environment

• React Native Navigation version: 2.21.0, 3.2.0
• React Native version: 0.59.10
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Both, iOS 13, both

[davidmarinangeli]

Any update on this? Seems like a crucial functionality

[mohammadalijf]

calling topViewController and childViewControllers from background thread is not causing this problems. i temporary moved api to main thread and got the same results. still UI API called from background threads should get fixed.

[mohammadalijf]

my problem was the navigationBar's barTint color on iOS 13
which will be solved by implementing UINavigationBarAppearance for iOS 13
but if you cant wait for a fix you can add

      layout: {
        backgroundColor: "blue",
      },

to your Navigation Options then change your parent component's backgroundColor to white

[ivan3177]

my problem was the navigationBar's barTint color on iOS 13
which will be solved by implementing UINavigationBarAppearance for iOS 13
but if you cant wait for a fix you can add

      layout: {
        backgroundColor: "blue",
      },

to your Navigation Options then change your parent component's backgroundColor to white

Any predictions on how long it’s going to take get it fixed?

[mohammadalijf]

@ivan3177
I will probably fix it tomorrow on my free time and create a PR

[davidmarinangeli]

@mohammadalijf thanks for your tip, you hit the target. In my app, the problem was in the TopBar custom component. So this:

    background: {
       component: {
         name: 'com.example.customComponent',
         clipToBounds: true
       }
    }

became this:

    background: {
      color:'blue',
    }

I don't know if the structure/components of the TopBar could avoid this strange behavior. As for now, this is the only solution we've found.

[FRizzonelli]

@guyca I think this is somehow related to #5138, basically if we use a custom background prop, all other settings (title,buttons and stuff) are rendered behind the component :(
If, as @davidmarinangeli stated, we remove the custom background component and we replace it with a simple color, everything works.

@yogevbd do you have any idea on how to fix this? (I know you're more in iOS part of the library)

[mohammadalijf]

created the PR to fix these issues

[StasD]

When I run my app from VS Code (in a simulator with iPhone 11 Pro running iOS 13), it runs fine, but when I do it from XCode, the app does not start and I get "UI API called on a background thread" error (similar to the one above) in the trace... Setting the backgroundColor for "layout" does not change anything. In fact, as I use overlays, I don't think I would be able to use that workaround even if that worked.

[mohammadalijf]

@StasD created a PR to fix the issue but still waiting to get reviewed

[JB-CHAUVIN]

Hello,

I have the same issue.

Do you have a workaroung ?
Is there a fix planned ?

Thanks

[ivan3177]

Any updates?

[julianklumpers]

Same problem here. background on ios13+ is ignored and defaults to black.

[JB-CHAUVIN]

Hello, any fixes on this issue ?

[yogevbd]

All topBar options issues solved in 4.0.4. closing

[davidmarinangeli]

Actually I'm finding some problems with a custom TopBar with a _component_ background: Here a video to show you my problem.

As you can see, in the first one the options disappear as soon as the screen pushes. In the second one, the options simply don't work.

[snairsumith]

@davidmarinangeli did you find any solution ?