React-native-navigation: Crashing when setting root to bottomTabs with Icons

[jorrharris]

I am using React-Native-Navigation v2.18.5 with React Native 0.59.8 and when I try to use Navigation.setRoot(...) with bottomTabs layout, the app just crashes. Nothing shows up in the console but logcat shows this:
java.lang.RuntimeException: Tried to get null value! at com.reactnativenavigation.parse.params.Param.get(Param.java:14) at com.reactnativenavigation.viewcontrollers.bottomtabs.BottomTabsController.lambda$createTabs$3(BottomTabsController.java:155) at com.reactnativenavigation.viewcontrollers.bottomtabs.-$$Lambda$BottomTabsController$hVDDSxSvqNX-4DhQHls8ynB4x2w.map(Unknown Source:4) at com.reactnativenavigation.utils.CollectionUtils.map(CollectionUtils.java:42) at com.reactnativenavigation.viewcontrollers.bottomtabs.BottomTabsController.createTabs(BottomTabsController.java:151) at com.reactnativenavigation.viewcontrollers.bottomtabs.BottomTabsController.createView(BottomTabsController.java:75) at com.reactnativenavigation.viewcontrollers.ViewController.getView(ViewController.java:167) at com.reactnativenavigation.viewcontrollers.ParentController.getView(ParentController.java:60) at com.reactnativenavigation.viewcontrollers.navigator.RootPresenter.setRoot(RootPresenter.java:35) at com.reactnativenavigation.viewcontrollers.navigator.Navigator.setRoot(Navigator.java:135) at com.reactnativenavigation.react.NavigationModule.lambda$setRoot$1(NavigationModule.java:70) at com.reactnativenavigation.react.-$$Lambda$NavigationModule$IfiDeOnYfgJADKZUxIVN9Zforsw.run(Unknown Source:8) at android.os.Handler.handleCallback(Handler.java:873) at android.os.Handler.dispatchMessage(Handler.java:99) at android.os.Looper.loop(Looper.java:193) at android.app.ActivityThread.main(ActivityThread.java:6669) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)

Here is my code:

import { Navigation } from "react-native-navigation";

import Icon from "react-native-vector-icons/Ionicons";

const startMainTabs = () => {
  Promise.all([
    Icon.getImageSource("md-body", 30),
    Icon.getImageSource("md-time", 30)
  ])
    .then(sources => {
      console.log("GOT IMAGES");
      console.log(sources[0], sources[1]);
      Navigation.setRoot({
        root: {
          bottomTabs: {
            children: [
              {
                component: {
                  name: "fitboard.myworkouts",
                  options: {
                    buttomTab: {
                      text: "MyWorkouts",
                      icon: sources[0]
                    }
                  }
                }
              },
              {
                component: {
                  name: "fitboard.hiittimer",
                  options: {
                    bottomTab: {
                      text: "HIITTimer",
                      icon: sources[1]
                    }
                  }
                }
              }
            ]
          }
        }
      });
    })
    .catch(err => {
      console.log(err);
    });
};

export default startMainTabs;

And the screens are also registered in my App.js:

Navigation.registerComponent(`fitboard.hiittimer`, () => HiitTimer);

Navigation.registerComponent(`fitboard.myworkouts`, () => MyWorkouts);

As you can see, I am providing the Icon, so that is not the issue... Also, react-native-navigation doesn't crash my app when I use the component layout. Any ideas?

[cedricavigo]

Could be unrelated, but I see a typo 'buttomTab'

[syedabuthahirm]

Every Bottom Tab Needs its own stack layout..

Try this below code

  Navigation.setRoot({
    root: {
      bottomTabs: {
        children: [
          {
            stack: {
              children: [
                {
                  component: {
                    name: 'SCREENS.TREND'
                  }
                }
              ],
              options: {
                bottomTab: {
                  text: "Home",
                  fontSize: 12,
                  icon: require("../icons/home.png")
                }
              }
            }
          },
          {
            stack: {
              children: [
                {
                  component: {
                    name: 'SCREENS.HOME'
                  }
                }
              ],
              options: {
                bottomTab: {
                  text: "Home",
                  fontSize: 12,
                  icon: require("../icons/home.png")
                }
              }
            }
          },
        ]
      }
   }
});

[brunoluigi]

I had the same issue, wasn't suppling a valid Icon for the tab and it crashed, here is the Java code:

    private List<AHBottomNavigationItem> createTabs() {
        if (tabs.size() > 5) throw new RuntimeException("Too many tabs!");
        return map(tabs, tab -> {
            BottomTabOptions options = tab.resolveCurrentOptions().bottomTabOptions;
            return new AHBottomNavigationItem(
                    options.text.get(""),
                    imageLoader.loadIcon(getActivity(), options.icon.get()),
                    options.testId.get("")
            );
        });
    }

Once I added a valid image as the Icon everything worked fine.

[jsancho]

Noticed the same behaviour here with RN 0.59.9 and RNN 2.21.0

• not providing icons works fine in iOS, the bottomTabs simply render with text and no image content.
• Android crashes automatically when trying to navigate to a screen with bottomTabs

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

[idanlo]

relevant

[aniciom]

still happening on android with v3 and RN 0.60.4, when no icon value is set, at least in debug mode i didn't try it on release mode, actually the Promise's based code is working for me.

Its working fine in iOS

[idanlo]

It happens to me even when an icon value is set - I haven't tried a release build as well, this happens to me on a debug build, when the phone is connected to the computer everything is working fine when it is not connected the app crashes on startup

[aniciom]

@idanlo there's something else, maybe in release mode its not happening, try to assemble it and give it a try, btw i reported an issue https://github.com/wix/react-native-navigation/issues/5228#issuecomment-516506357 when you want to make the assemble release with the library

[temchannat]

I followed this @syedabuthahirm work fine for me. In this link

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

[nastarfan]

I stumble upon this very same problem on Android, the thing is, I have already put the icon but still get the same error, see https://github.com/wix/react-native-navigation/issues/5483.

Where do you guys put your icon image? I put it in my /src/assets/images/ and also tried to manually put my icon in drawable android res directory but still get the error. Any help would be much appreciated

[idanlo]

Crashes for me as well with icon set in production build

[syedabuthahirm]

@idanlo and @nastarfan This Comment will fix issue upto RN 0.59.8 and RNN 2.* I didn't tested them on RN 0.60.* and RNN 3.*. Can tell your RN & RNN verison?

[nastarfan]

hi @syedabuthahirm, thanks a lot that fixes my issue!
I was insisting that it doesn't have to have stack layout as its children so I was using component layout on my bottomTabs last child as the official documentation even has component layout as its child. So I was like that should be ok.

updating https://github.com/wix/react-native-navigation/issues/5483 just in case other has the same problem with me

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