React-native-navigation: BottomTabs with custom tab icons (placed on res/drawable-x) crashes

[nyenye]

Issue Description

Working on a prototype, and I encountered what I can only explain as a bug. The design uses bottomTabs, and to support multiple resolutions for the icons, I followed this guide here from the docs.

This is the folder structure that I ended up with:

And this is the layout that I set as root:

I've rebuild the app on multiple occasions, and it made no difference.

The stacktrace that the error log shows is as follows:

java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable.mutate()' on a null object reference
at com.aurelhubert.ahbottomnavigation.AHHelper.getTintDrawable(AHHelper.java:48)
at com.aurelhubert.ahbottomnavigation.AHBottomNavigation.createClassicItems(AHBottomNavigation.java:448)
at com.aurelhubert.ahbottomnavigation.AHBottomNavigation.createItems(AHBottomNavigation.java:290)
at com.reactnativenavigation.views.BottomTabs.superCreateItems(BottomTabs.java:48)
at com.reactnativenavigation.views.BottomTabs.createItems(BottomTabs.java:36)
at com.reactnativenavigation.views.BottomTabs.enableItemsCreation(BottomTabs.java:24)
at com.reactnativenavigation.viewcontrollers.bottomtabs.BottomTabsController.applyOptions(BottomTabsController.java:88)
at com.reactnativenavigation.viewcontrollers.ViewController.onViewAppeared(ViewController.java:196)
at com.reactnativenavigation.viewcontrollers.ChildController.onViewAppeared(ChildController.java:34)
at com.reactnativenavigation.viewcontrollers.ViewController.onGlobalLayout(ViewController.java:249)
at android.view.ViewTreeObserver.dispatchOnGlobalLayout(ViewTreeObserver.java:912)
at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2147)
at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1295)
at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6400)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:876)
at android.view.Choreographer.doCallbacks(Choreographer.java:688)
at android.view.Choreographer.doFrame(Choreographer.java:623)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:862)
at android.os.Handler.handleCallback(Handler.java:754)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:163)
at android.app.ActivityThread.main(ActivityThread.java:6379)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:904)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:794)

---

Environment

• React Native Navigation version: 2.2.5
• React Native version: 0.57.7
• Platform(s) (iOS, Android, or both?): Android (at least, can't test iOS)
• Device info (Simulator/Device? OS version? Debug/Release?):
  
  
  
  • Device - 'Redmi 5 Plus - 7.1.2'
  
  
  • Simulator - 'Nexus_4_API_27(AVD) - 8.1.0'
  
  

---

NOTE

The only time I got it working, was when using icon: require('path/to/image.png'), and with the cli running (yarn start running). Just as soon as I stop the cli. it doesn't work.

[nyenye]

I was thinking could it be that the image is not fully loaded when it tries to use it?

[mattmcdonald-uk]

I'm facing the same issue, and it appears to be a problem resolving the images.

Prior to the error shown above I first see this error:
W/System.err: java.io.FileNotFoundException: No content provider: NameOfIconForTab

[mattmcdonald-uk]

The error seems to occur within the readJsDevImage method.

Modifying this line https://github.com/wix/react-native-navigation/blob/487c1da9dc5277d1ad0e7ca0e410b1c4b5dbc61e/lib/android/app/src/main/java/com/reactnativenavigation/utils/ImageLoader.java#L74 to if (drawable == null) resolves the error and the icons load correctly.

[leolusoli]

Check the icons dimensions.
For me, it happens with 36x36 icons (is possible?). Please provide a detailed information.

[wellcode]

Similar issue occurs in the debug version of android, the release version works fine.

java.lang.RuntimeException: java.io.FileNotFoundException: No content provider: down_arrow
at com.reactnativenavigation.viewcontrollers.button.NavigationIconResolver$1.onError(NavigationIconResolver.java:36)
at com.reactnativenavigation.utils.ImageLoader.loadIcon(ImageLoader.java:40)
at com.reactnativenavigation.viewcontrollers.button.NavigationIconResolver.resolve(NavigationIconResolver.java:28)
at com.reactnativenavigation.viewcontrollers.TitleBarButtonController.applyNavigationIcon(TitleBarButtonController.java:100)
at com.reactnativenavigation.views.titlebar.TitleBar.setLeftButton(TitleBar.java:173)
at com.reactnativenavigation.views.titlebar.TitleBar.setLeftButtons(TitleBar.java:168)
at com.reactnativenavigation.views.topbar.TopBar.setLeftButtons(TopBar.java:213)
at com.reactnativenavigation.presentation.StackPresenter.applyButtons(StackPresenter.java:259)
at com.reactnativenavigation.presentation.StackPresenter.applyChildOptions(StackPresenter.java:134)
at com.reactnativenavigation.viewcontrollers.stack.StackController.applyChildOptions(StackController.java:87)
at com.reactnativenavigation.viewcontrollers.ViewController.lambda$onViewAppeared$0$ViewController(ViewController.java:199)
at com.reactnativenavigation.viewcontrollers.ViewController$$Lambda$0.run(Unknown Source:4)
at com.reactnativenavigation.viewcontrollers.ViewController.performOnParentController(ViewController.java:130)
at com.reactnativenavigation.viewcontrollers.ViewController.onViewAppeared(ViewController.java:197)
at com.reactnativenavigation.viewcontrollers.ChildController.onViewAppeared(ChildController.java:34)
at com.reactnativenavigation.viewcontrollers.ComponentViewController.onViewAppeared(ComponentViewController.java:35)
at com.reactnativenavigation.viewcontrollers.ViewController.onGlobalLayout(ViewController.java:249)
at android.view.ViewTreeObserver.dispatchOnGlobalLayout(ViewTreeObserver.java:945)
at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2310)
at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1452)
at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6917)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1029)
at android.view.Choreographer.doCallbacks(Choreographer.java:841)
at android.view.Choreographer.doFrame(Choreographer.java:772)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1015)
at android.os.Handler.handleCallback(Handler.java:794)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:173)
at android.app.ActivityThread.main(ActivityThread.java:6653)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:547)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:821)
Caused by: java.io.FileNotFoundException: No content provider: down_arrow

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

[mattmcdonald-uk]

This issue still exists, and the workaround I posted above is still needed (but not a resolution for the issue).

[mtzfactory]

The solution from @mattmcdonald-uk works...

[guyca]

@mattmcdonald-uk Are you sure the issue still exists? I'm pretty sure it's fixed in latest version

[mattmcdonald-uk]

@guyca Sorry, that has solved it - was testing against 2.11.0

[duythanh90]

bug still available but I just figure out why
The tab image file was not imported to android drawable files so it can not load image and crash the app

the solution is run 'react-native bundle' once and then it works normally

eg:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

[tokict]

@duythanh90 This solution helped in my case

[adybuciuman]

The crash still happens random on Android release apk