React-native-navigation: [V2-V3] largeTitle broken on iOS 13

[ivan3177]

Issue Description

If largeTitle is used on iOS 13 background color options are broken

Steps to Reproduce / Code Snippets / Screenshots

static options() {
  return {
    topBar: {
      title: {
        text: 'Test',
      },
      largeTitle: {
        visible: true,
      },  
      background: {
        color: 'red'
      }
    }
  }
}

Large title disabled:

Large title enabled:

Expected:

---

Environment

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

[ivan3177]

UPD: When using largeTitle native back button position in topbar is also broken

Now:

Expected:

[cesarm16]

+1

[rosskhanas]

Apparently I have a related issue. It happens when a page with no large title opens from the page with a large title. Anyone else has it?

[ivan3177]

After some digging and playing with this library iOS native code I can now say what exactly caused this issue (and #5468, #5505 and PR #5512 which are apparently is related to this one).

As @mohammadalijf did in his PR - support for UINavigationBarAppearance should be added.

And not same way it was done in this PR - it only fixes part of all problems. In all native methods related to setting options of navigation bar a support for iOS 13 and UINavigationBarAppearance should be implemented.

Hope this will help and may be someone is going to fix this any time soon.

[mohammadalijf]

on the PR i have added iOS 13 compatibility for changing UINavigationBar options. if i have missed a method please tell so i could fix the issue completely

[cesarm16]

is there a tutorial or something that can help me on test your PR?

[mohammadalijf]

@cesarm16

1. change your package.json to use my fork

"react-native-navigation": "https://github.com/mohammadalijf/react-native-navigation.git"

1. nuke you node_module

rm -rf node_module

1. run npm install or yarn install
2. run npm install or yarn install in react-native-navigation folder inside your node_modules
3. run tsc inside your react-native-navigation (if you didn't install typescript first run npm install -g typescript)
4. rm -rf node_module inside your react-native-navigation.
5. run pod install inside your ios folder
6. run your project as you would normal do🍻

[cesarm16]

wow thanks! But it crash my app at startup. i'm sure i follow all the steps.

[mohammadalijf]

@cesarm16
ok can you share the crash error?

1. open ios/{app name}.xcworkspace.
2. hit cmd+k to clean the project.
3. hit cmd+r to run the project in simulator.
4. check the console area in xcode for cause of the crash in app

[cesarm16]

@mohammadalijf sure.

=================================================================
Main Thread Checker: UI API called on a background thread: -[UINavigationController topViewController]
PID: 32286, TID: 1841857, Thread name: (none), Queue name: com.apple.root.user-initiated-qos, QoS: 25
Backtrace:
4 parcoApp 0x00000001040ef79c -[RNNStackController getCurrentChild] + 44
5 parcoApp 0x00000001041088f5 -[UIViewController(LayoutProtocol) resolveOptions] + 69
6 parcoApp 0x00000001041090f5 __62-[UIViewController(LayoutProtocol) renderTreeAndWait:perform:]_block_invoke + 869
7 libdispatch.dylib 0x000000010646adf0 _dispatch_call_block_and_release + 12
8 libdispatch.dylib 0x000000010646bd64 _dispatch_client_callout + 8
9 libdispatch.dylib 0x000000010647d46e _dispatch_root_queue_drain + 819
10 libdispatch.dylib 0x000000010647dba4 _dispatch_worker_thread2 + 132
11 libsystem_pthread.dylib 0x00007fff5141c6b3 _pthread_wqthread + 583
12 libsystem_pthread.dylib 0x00007fff5141c3fd start_wqthread + 13
2019-10-06 22:09:18.093006-0500 parcoApp[32286:1841857] [reports] Main Thread Checker: UI API called on a background thread: -[UINavigationController topViewController]
PID: 32286, TID: 1841857, Thread name: (none), Queue name: com.apple.root.user-initiated-qos, QoS: 25
Backtrace:
4 parcoApp 0x00000001040ef79c -[RNNStackController getCurrentChild] + 44
5 parcoApp 0x00000001041088f5 -[UIViewController(LayoutProtocol) resolveOptions] + 69
6 parcoApp 0x00000001041090f5 __62-[UIViewController(LayoutProtocol) renderTreeAndWait:perform:]_block_invoke + 869
7 libdispatch.dylib 0x000000010646adf0 _dispatch_call_block_and_release + 12
8 libdispatch.dylib 0x000000010646bd64 _dispatch_client_callout + 8
9 libdispatch.dylib 0x000000010647d46e _dispatch_root_queue_drain + 819
10 libdispatch.dylib 0x000000010647dba4 _dispatch_worker_thread2 + 132
11 libsystem_pthread.dylib 0x00007fff5141c6b3 _pthread_wqthread + 583
12 libsystem_pthread.dylib 0x00007fff5141c3fd start_wqthread + 13
2019-10-06 22:09:18.833405-0500 parcoApp[32286:1841531] -[__NSDictionaryM objectAtIndexedSubscript:]: unrecognized selector sent to instance 0x600002a9d7e0
2019-10-06 22:09:18.853877-0500 parcoApp[32286:1841531] * Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[__NSDictionaryM objectAtIndexedSubscript:]: unrecognized selector sent to instance 0x600002a9d7e0'
* First throw call stack:
(
0 CoreFoundation 0x00007fff23b98bde __exceptionPreprocess + 350
1 libobjc.A.dylib 0x00007fff503b5b20 objc_exception_throw + 48
2 CoreFoundation 0x00007fff23bb9704 -[NSObject(NSObject) doesNotRecognizeSelector:] + 132
3 CoreFoundation 0x00007fff23b9d7bc ___forwarding___ + 1436
4 CoreFoundation 0x00007fff23b9f6c8 _CF_forwarding_prep_0 + 120
5 parcoApp 0x00000001040f1f2a -[RNNStackPresenter applyOptions:] + 5850
6 parcoApp 0x00000001041094b4 -[UIViewController(LayoutProtocol) onChildWillAppear] + 116
7 parcoApp 0x00000001040cb489 -[RNNComponentViewController viewWillAppear:] + 297
8 UIKitCore 0x00007fff46b03591 -[UIViewController _setViewAppearState:isAnimating:] + 661
9 UIKitCore 0x00007fff46b03cad -[UIViewController __viewWillAppear:] + 115
10 UIKitCore 0x00007fff46a625b1 -[UINavigationController _startTransition:fromViewController:toViewController:] + 689
11 UIKitCore 0x00007fff46a63256 -[UINavigationController _startDeferredTransitionIfNeeded:] + 868
12 UIKitCore 0x00007fff46a645c1 -[UINavigationController __viewWillLayoutSubviews] + 150
13 UIKitCore 0x00007fff46a45ffb -[UILayoutContainerView layoutSubviews] + 217
14 UIKitCore 0x00007fff47636722 -[UIView(CALayerDelegate) layoutSublayersOfLayer:] + 2478
15 QuartzCore 0x00007fff2b030ef9 -[CALayer layoutSublayers] + 255
16 QuartzCore 0x00007fff2b0358ff _ZN2CA5Layer16layout_if_neededEPNS_11TransactionE + 517
17 QuartzCore 0x00007fff2b041fe4 _ZN2CA5Layer28layout_and_display_if_neededEPNS_11TransactionE + 80
18 QuartzCore 0x00007fff2af8a4a8 _ZN2CA7Context18commit_transactionEPNS_11TransactionEd + 324
19 QuartzCore 0x00007fff2afbfab3 _ZN2CA11Transaction6commitEv + 643
20 QuartzCore 0x00007fff2afc041a _ZN2CA11Transaction17observer_callbackEP19__CFRunLoopObservermPv + 76
21 CoreFoundation 0x00007fff23afaeb7 __CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION__ + 23
22 CoreFoundation 0x00007fff23af594e __CFRunLoopDoObservers + 430
23 CoreFoundation 0x00007fff23af5fca __CFRunLoopRun + 1514
24 CoreFoundation 0x00007fff23af56b6 CFRunLoopRunSpecific + 438
25 GraphicsServices 0x00007fff3815cbb0 GSEventRunModal + 65
26 UIKitCore 0x00007fff47162a67 UIApplicationMain + 1621
27 parcoApp 0x0000000103abbc40 main + 112
28 libdyld.dylib 0x00007fff5123bcf5 start + 1
)
libc++abi.dylib: terminating with uncaught exception of type NSException
(lldb)

[mohammadalijf]

@cesarm16
*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[__NSDictionaryM objectAtIndexedSubscript:]: unrecognized selector sent to instance 0x600002a9d7e0'
how did you set your navigationBar options?

[cesarm16]

this is my default options:

Navigation.setDefaultOptions({
        statusBar: {
            visible: true,
            style: 'dark',
            drawBehind: true,
            backgroundColor: 'transparent',
            translucent: false
        },
        layout: { backgroundColor: colors.Background, orientation: ['portrait'] },
        topBar: {
            visible: true,
            animate: true,
            drawBehind: false,
            backButton: { color: colors.DarkCyan },
            noBorder: true,
            elevation: 0,
            borderColor: colors.Polar,
            borderHeight: 1,
            leftButtonColor: colors.DarkCyan,
            title: {
                text: '',
                fontSize:  17,
                color: colors.Black,
                fontFamily:  'Lato-Bold'
            },
            largeTitle: {
                visible: true,
                fontFamily: 'Lato-Bold',
                color: colors.Black,
                fontSize: 34
            },
            background: {
                color: colors.Background
            },
            rightButtons: {
                id: 'id',
                showAsAction: 'always',
                fontFamily: 'Lato-Bold',
                color: colors.DarkCyan
            }
        },
        overlay: {
            interceptTouchOutside: true
        }
    })

and my first setroot

Navigation.setRoot({
        root: {
            stack: {
                children: [
                    {
                        component: {
                            name: SCREENS2.WELCOME,
                            options: {
                                statusBar: {
                                    style: 'light',
                                    drawBehind: true
                                },
                                topBar: {
                                    visible: false,
                                    drawBehind: true
                                }
                            }
                        }
                    }
                ]
            }
        }
    })

[nbolender]

+1

[ivan3177]

Still need to implement full support for setting UINavigationBarAppearance on iOS 13

Any updates?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[axxag]

This issue has not been resolved.

[JB-CHAUVIN]

This issue has not been resolved.

I have the same problem.