Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[iOS][Android]: Support custom component for TabBarItem

See original GitHub issue

Currently, the TabBarItem only receives an image prop. I would love to have a custom component, such as an SVG icon or custom view, as oppose to an image. Is there any workaround on how this can be implemented?

Depending if this will be supported, here are some suggestions/examples

<TabBarItem title="..." badge={3} icon={() => <CustomIcon />} />

<TabBarItem
  options={{
    title: "...",
    badge: 3,
    ....,
    icon: ({active}: Props) => active ? <IconActive /> : <Icon />
  }}
/>

Issue Analytics

State:
Created 3 years ago
Comments:17 (16 by maintainers)

Top GitHub Comments

1reaction

grahammendickcommented, Jan 26, 2022

No problem. And thank you once again for raising that PR to update the React Native docs!

1reaction

vbylencommented, Jan 26, 2022

@grahammendick yes, it may be related to react native’s treatment of pixel units vs size units. See this stackoverflow post and React Native docs.

Top Results From Across the Web

How to control tab bar item color in Swift 4? - Apple Developer

I would like to have control over the color of a TabBar item based on some event. I have tried the following: UITabBarItem.appearance()....

Absolute positioned custom tab bar component renders ...

Using the setup below , position absolute renders the tab bar component behind the screen. The issue can be reproduced across, iOS ,...

Swift: How to execute an action when UITabBarItem is pressed

You could do make the FirstViewController implement the delegate and handle everything there. That way you wouldn't need to make any custom UITabBarController ......

Xamarin.Forms: A Better Tabbed Page Renderer

Forms applications that support custom colors and custom text. Just about every Xamarin.Forms project I start has some need for a TabbedPage ...

Displaying Badge in TabItem Header area with/without using ...

This is a custom render created to support TabbedPage and cannot be used for any other controls including the TabView. Query3: Do you...