Tab Bar Icons not building

Expo SDK
1

I have some custom icons for my tab bar that seem to populated perfectly on the simulator but not after it’s built. I originally have the icons in my reducer and have moved them to the component using them, but I still can’t get them to populate when built.

Here is my code:

  const tabIcons = {
      'shopping': require('./assets/images/shopping.png'),
      'profile': require('./assets/images/profile.png'),
    }

    return tabs.tabs.map((tab, i) => (
      <TabBarIOS.Item
        key={ tab.key }
        icon={ tabIcons[tab.key] }
        title=''
        selected={ tabs.index === i }
        onPress={ _ => onTabClick(i) }
      >
        { this.renderTab(tab.key) }
      </TabBarIOS.Item>
    ));

Any suggestions?

2

I’m not sure how well TabBarIOS works with published assets. One thing you could do to help debug is to display an <Image /> component with one of your icons just somewhere in your app to make sure you’re able to display the icon outside of a TabBarIOS tab.

3

We have images working every where but the tab bar. Funny thing is that it works fine in the simulator and the icons show on the tab bar. Once built and deployed through Test Flight the icons don’t render.

4

I have the same issue. @ide did you mean it shouldn’t work?

5

I’m not sure if it should or shouldn’t work – I just provided some suggestions to suss out more details.

6

I see. The images via load ok for me, TabBarIOS.Item icons don’t. It’s works in simulator, but doesn’t in Expo app on my phone.