[V2][iOS] leftButtons or rightButtons properties crash the app when added to topBar

[terreb]

Issue Description

I'm using an example from migration docs to apply colors to topBar buttons https://wix.github.io/react-native-navigation/v2/#/docs/options-migration?id=navbarbuttoncolor:

Navigation.setDefaultOptions( {
topBar: {
  rightButtons: [
    {
      color: 'red'
    }
  ],
  leftButtons: [
    {
      color: 'red'
    }
  ],
  backButton: {
    color: 'red'
  }
}
})

When this is added the app crashes. In the console I see the next error:

Aug 21 15:21:41 users-MacBook-Pro MyApp[39778]: *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '*** -[__NSCFConstantString stringByAppendingString:]: nil argument'
    *** First throw call stack:
    (
        0   CoreFoundation                      0x0000000104a2bd85 __exceptionPreprocess + 165
        1   libobjc.A.dylib                     0x00000001037ecdeb objc_exception_throw + 48
        2   CoreFoundation                      0x0000000104a2bcbd +[NSException raise:format:] + 205
        3   Foundation                          0x000000010339902a -[NSString stringByAppendingString:] + 96
        4   MyApp                            0x0000000102a1d834 -[RNNNavigationButtons buildButton:defaultStyle:] + 372
        5   MyApp                            0x0000000102a1d231 -[RNNNavigationButtons setButtons:side:animated:defaultStyle:] + 545
        6   MyApp                            0x0000000102a1cf8c -[RNNNavigationButtons applyLeftButtons:rightButtons:defaultLeftButtonStyle:defaultRightButtonStyle:] + 252
        7   MyApp                            0x00000001029c31c5 -[RNNTopBarOptions applyOn:] + 7637
        8   MyApp                            0x00000001029dbe0d -[RNNNavigationOptions applyOn:] + 125
        9   MyApp                            0x00000001029b3c9a -[RNNRootViewController viewWillAppear:] + 122
        10  UIKit                               0x00000001066812bd -[UIViewController _setViewAppearState:isAnimating:] + 710
        11  UIKit                               0x0000000106681958 -[UIViewController __viewWillAppear:] + 149
        12  UIKit                               0x00000001066c0c83 -[UINavigationController _startTransition:fromViewController:toViewController:] + 781
        13  UIKit                               0x00000001066c1c4d -[UINavigationController _startDeferredTransitionIfNeeded:] + 890
        14  UIKit                               0x00000001066c2d0b -[UINavigationController __viewWillLayoutSubviews] + 57
        15  UIKit                               0x0000000106871503 -[UILayoutContainerView layoutSubviews] + 248
        16  UIKit                               0x000000010659b980 -[UIView(CALayerDelegate) layoutSublayersOfLayer:] + 703
        17  QuartzCore                          0x0000000106252c00 -[CALayer layoutSublayers] + 146
        18  QuartzCore                          0x000000010624708e _ZN2CA5Layer16layout_if_neededEPNS_11TransactionE + 366
        19  QuartzCore                          0x0000000106246f0c _ZN2CA5Layer28layout_and_display_if_neededEPNS_11TransactionE + 24
        20  QuartzCore                          0x000000010623b3c9 _ZN2CA7Context18commit_transactionEPNS_11TransactionE + 277
        21  QuartzCore                          0x0000000106269086 _ZN2CA11Transaction6commitEv + 486
        22  QuartzCore                          0x00000001062697f8 _ZN2CA11Transaction17observer_callbackEP19__CFRunLoopObservermPv + 92
        23  CoreFoundation                      0x0000000104950c37 __CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION__ + 23
        24  CoreFoundation                      0x0000000104950ba7 __CFRunLoopDoObservers + 391
        25  CoreFoundation                      0x00000001049467fb __CFRunLoopRun + 1147
        26  CoreFoundation                      0x00000001049460f8 CFRunLoopRunSpecific + 488
        27  GraphicsServices                    0x000000010963bad2 GSEventRunModal + 161
        28  UIKit                               0x00000001064e0f09 UIApplicationMain + 171
        29  MyApp                            0x00000001029acdbf main + 111
        30  libdyld.dylib                       0x0000000107b6992d start + 1

Steps to Reproduce / Code Snippets / Screenshots

Please see above

---

Environment

• React Native Navigation version: 2.0.2485
• React Native version: 0.56.0
• Platform(s) (iOS, Android, or both?): iOS (not tested on Android)
• Device info (Simulator/Device? OS version? Debug/Release?): simulator, iOS 9.3, debug

[onlaps]

Same! 😞 @guyca could you please help us? Maybe we are doing something wrong )

[laukaichung]

I'm getting the same error using custom components since 2.0.2500. The only way to avoid this error is by adding ids to the button object:

{
  id: 'buttonOne',
  component: {
    id: 'buttonOne',
    name: 'example.CustomButtonComponent'
  },
}

On Android, I have this index=3,count=2 error. I have to add a total of 3 right buttons in order to avoid the error. I can't add less than 3 right buttons since 2.0.2500.

[terreb]

@stonecold123, in my case I'm just trying to style those buttons globally. Ids should be added for specific components, not in Navigation.setDefaultOptions which is reasonable. Still I have that crash.

[DaneEveritt]

I can also confirm this is happening.

react-native-navigation@2.0.2577 react-native@0.56.1

Platform is android, but not happening on iOS (which seems to be complete opposite of the OP).

[esipavicius]

I have this issue too. But I have in my project react-navigation and react-native-navigation. So I added top bar to react-navigation screen not in react-native-navigation ;D

react-native-navigation@2.0.2580 react-navigation@2.17.0 react-native@0.56.0

How I load screens? If user logged in I setRoot with

    toHomeNavigation(): void
    {
        Navigation.setRoot({
            root: {
                sideMenu: {
                    left: {
                        component: {
                            id: HOME_SIDE_MENU_ID,
                            name: HOME_SIDE_MENU_NAME,
                            options: {
                                layout: {
                                    orientation: ['portrait']
                                },
                            },
                        }
                    },
                    center: {
                        stack: {
                            children:[
                                {
                                    component: {
                                        id: HOME_ID,
                                        name: HOME_NAME,
                                        options: {
                                            layout: {
                                                orientation: ['portrait']
                                            },
                                            topBar: {
                                                visible: false,
                                                drawBehind: true,
                                                animate: false,
                                            }
                                        }
                                    }
                                }
                            ]
                        }
                    },
                },
            }
        });
    }

So main home screen loads react-navigation. If I specify custom topBar in react-native-navigation so its crashing. Its says index=3,count=2. But in another project where is only react-native-navigation its works, but I discovered its chrashed only if something wrong in custom component. I think when in my case was some mistake when loading wrong in array.

[alexsmartens]

Any solution?

[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.

[stale[bot]]

The issue has been closed for inactivity.