Icons not showing in nested react-navigation bar

Question

Following the example of this docs page from React Navigation , I created a nested bottom navigation system for my React Native app (simplified version of my code can be seen and tested here ). However, I have noticed that the icons for the pages shown in the navigation bar are the typical question mark symbols (on iOS) that show when the image is not recognized:

However, if I use a simple navigation bar, with no nesting, the icons are shown no problem. Any ideas on how to fix this?

Answer 1

I found out what the problem was: I was adding the icon into the deepest (second) layer of the navigation bar. When using nested navigation bars, the icons must be placed in the highest level navigation layer. Here is a working version of the previous example, with the appropriate correction.