React-native-navigation: App crashes with "nil Argument was thrown while invoking setRoot on target" when trying to use component in rightButtons

[Pungsnigel]

Issue Description

I'm trying to have a button with a custom font, size and color as my right navigation button in the top bar. As weight and size doesn't seem to be supported for topBar buttons, I created my own component to do the work. When I try to use the component (or any other component) in my topBar rightItems array, the app crashes.

-[__NSCFConstantString stringByAppendingString:]: nil argument' was thrown while invoking setRoot on target RNNBridgeModule with params (
    setRoot14,
        {
        modals =         (
        );
        overlays =         (
        );
        root =         {
            children =             (
                                {
                    children =                     (
                                                {
                            children =                             (
                            );
                            data =                             {
                                name = "Mevia.PetsScreen";
                                options =                                 {
                                    topBar =                                     {
                                        rightButtons =                                         (
                                                                                        {
                                                component =                                                 {
                                                    componentId = CustomComponent13;
                                                    name = "Mevia.NavigationText";
                                                };
                                            }
                                        );
                                        title =                                         {
                                            component =                                             {
                                                alignment = center;
                                                componentId = CustomComponent12;
                                                name = "Mevia.DefaultHeader";
                                            };
                                        };
                                    };
                                };
                            };
                            id = Component11;
                            type = Component;
                        }
                    );
                    data =                     {
                    };
                    id = Stack10;
                    type = Stack;
                }
            );
            data =             {
                options =                 {
                    topBar =                     {
                        noBorder = 0;
                        visible = 1;
                    };
                };
            };
            id = BottomTabs9;
            type = BottomTabs;
        };
    },
    964,
    965
)
callstack: (
    0   CoreFoundation                      0x00000001a7909ed0 <redacted> + 256
    1   libobjc.A.dylib                     0x00000001a6b03f18 objc_exception_throw + 60
    2   CoreFoundation                      0x00000001a780c08c <redacted> + 0
    3   Foundation                          0x00000001a82951ec <redacted> + 116
    4   Mevia                               0x0000000100a85b88 -[RNNNavigationButtons buildButton:defaultStyle:insets:] + 1032
    5   Mevia                               0x0000000100a851e4 -[RNNNavigationButtons setButtons:side:animated:defaultStyle:insets:] + 488
    6   Mevia                               0x0000000100a84f98 -[RNNNavigationButtons applyLeftButtons:rightButtons:defaultLeftButtonStyle:defaultRightButtonStyle:] + 588
    7   Mevia                               0x0000000100a4afc0 -[RNNViewControllerPresenter applyOptionsOnInit:] + 1644
    8   Mevia                               0x0000000100a07c44 -[RNNRootViewController initWithLayoutInfo:rootViewCreator:eventEmitter:presenter:options:defaultOptions:] + 620
    9   Mevia                               0x0000000100a79b58 -[RNNControllerFactory createComponent:] + 372
    10  Mevia                               0x0000000100a7954c -[RNNControllerFactory fromTree:] + 156
    11  Mevia                               0x0000000100a7ac54 -[RNNControllerFactory extractChildrenViewControllersFromNode:] + 372
    12  Mevia                               0x0000000100a79f08 -[RNNControllerFactory createStack:] + 308
    13  Mevia                               0x0000000100a795a0 -[RNNControllerFactory fromTree:] + 240
    14  Mevia                               0x0000000100a7ac54 -[RNNControllerFactory extractChildrenViewControllersFromNode:] + 372
    15  Mevia                               0x0000000100a7a0f0 -[RNNControllerFactory createTabs:] + 292
    16  Mevia                               0x0000000100a795f4 -[RNNControllerFactory fromTree:] + 324
    17  Mevia                               0x0000000100a79200 -[RNNControllerFactory createLayout:] + 72
    18  Mevia                               0x0000000100a70e34 -[RNNCommandsHandler setRoot:completion:] + 1436
    19  Mevia                               0x0000000100a34634 -[RNNBridgeModule setRoot:layout:resolver:rejecter:] + 312
    20  CoreFoundation                      0x00000001a79118a4 <redacted> + 148
    21  CoreFoundation                      0x00000001a77ea278 <redacted> + 324
    22  CoreFoundation                      0x00000001a77eaeac <redacted> + 64
    23  Mevia                               0x0000000100bf5b9c -[RCTModuleMethod invokeWithBridge:module:arguments:] + 2064
    24  Mevia                               0x0000000100ca04bc _ZN8facebook5reactL11invokeInnerEP9RCTBridgeP13RCTModuleDatajRKN5folly7dynamicE + 664
    25  Mevia                               0x0000000100ca0040 _ZZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEiENK3$_0clEv + 132
    26  Mevia                               0x0000000100c9ffb0 ___ZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEi_block_invoke + 28
    27  libdispatch.dylib                   0x000000010160f8a0 _dispatch_call_block_and_release + 32
    28  libdispatch.dylib                   0x0000000101610e38 _dispatch_client_callout + 20
    29  libdispatch.dylib                   0x000000010161e834 _dispatch_main_queue_callback_4CF + 1400
    30  CoreFoundation                      0x00000001a78980fc <redacted> + 16
    31  CoreFoundation                      0x00000001a7892d78 <redacted> + 1912
    32  CoreFoundation                      0x00000001a78922e8 CFRunLoopRunSpecific + 452
    33  GraphicsServices                    0x00000001a9b46be8 GSEventRunModal + 104
    34  UIKitCore                           0x00000001d55d4088 UIApplicationMain + 216
    35  Mevia                               0x00000001008859c0 main + 124
    36  libdyld.dylib                       0x00000001a7345050 <redacted> + 4
)

Steps to Reproduce / Code Snippets / Screenshots

This is the code I'm using for the relevant View, and as mentioned above, it doesn't work if I change the component use:

  static options(_) {
    return {
      topBar: {
        title: {
          component: {
            name: TOP_BAR_TITLE,
            alignment: 'center',
            passProps: {
              title: i18n.t('tab_1_header_title'),
              icon: theme.ICON_NAV_BAR_1
            }
          }
        },
        rightButtons: [{
          component: {
            name: TOP_BAR_NAVIGATION_TEXT,
            passProps: {
              text: i18n.t('new')
            }
          }
        }]
      }
    }
  }

---

Environment

• React Native Navigation version: 2.13.1
• React Native version: 0.55.4
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): iPhone Xr

[Pungsnigel]

Any more info I can give to help here? Not even sure if this is a bug or if its just me writing shitty code.

[otusweb]

I'm running into a similar issue because the buttons does not seem to be specified enough. You can step through the ios code in xcode in RNNNavigationButtons.m.
Don't have the solution yet

[otusweb]

try to remove the right button and see if it works.

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

[VitaliiK91]

If anyone still experiencing the issue I found that missing id field in button object will cause this error on iOS. Hope it helps somebody!

[aromahyang]

@VitaliiK91 Can you explain more detail? I'm a beginner in iOS app development, and I have the same issue. I want you to tell details about your comment.

[eightyfive]

@aromahyang

Instead of:

        "topBar": {
          "rightButtons": [{ "component": { } }]
        }

Add an ID to the button layout:

        "topBar": {
          "rightButtons": [{ "id": <SOME_ID>, "component": { } }]
        }