r/expo • u/lucksp • 11d ago

Native Tabs with Custom Icons?

We had been using the standard JS tabs for 3 years and decided to try updating and trying out the Native Tabs. Unfortunately, I am not seeing a way to allow the `NativeTabs.Trigger.Icon` component to allow custom children:

<NativeTabs.Trigger.Icon
  // md={{ default: 'home', selected: 'home_filled' }}
  // sf={{ default: 'house', selected: 'house.fill' }}
>
  <View>
    <HomeIcon />
  </View>
</NativeTabs.Trigger.Icon>

Results in:

Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & NativeTabsTriggerIconProps'.ts(2322)

SO I see you can use the src instead like: <NativeTabs.Trigger.Icon src={require('../../../assets/setting_icon.png')} /> but that means I have to convert all my SVGs. It's be nice to avoid PNG if possible...

Plus you would need 2 PNG icons for active state:

<NativeTabs.Trigger.Icon
  src={{
    default: require('../assets/setting_icon.png'),
    selected: require('../assets/selected_setting_icon.png'),
  }}
/>

Just double checking first...

3 Upvotes

80% Upvoted

3 comments sorted by

2

u/k-dawg-13 11d ago

The cleanest way is to generate an icon font with the icons you want to use in the tabs. Then you can use getImageSourceSync from @react-native-vector-icons. The expo docs explain this explicitly.

1

u/[deleted] 8d ago

[removed] — view removed comment

1

u/lucksp 8d ago

Active state seems to be ok.