How to add icon on stand alone mode

[umardev500]

focusedIcon: Icon to show when tab is active
unfocusedIcon: Icon to show when tab is inactive (optional)

this very confused how to added the icon

[okwasniewski]

Hey, you can take a look at this example:

react-native-bottom-tabs/apps/example/src/Examples/FourTabs.tsx

Line 20 in 7c8097e

export default function FourTabs({

const [routes] = useState([
    {
      key: 'article',
      title: 'Article',
      focusedIcon: require('../../assets/icons/article_dark.png'),
      unfocusedIcon: require('../../assets/icons/chat_dark.png'),
      badge: '!',
    },
    {
      key: 'albums',
      title: 'Albums',
      focusedIcon: require('../../assets/icons/grid_dark.png'),
      badge: '5',
      hidden: hideOneTab,
    },
    {
      key: 'contacts',
      focusedIcon: require('../../assets/icons/person_dark.png'),
      title: 'Contacts',
    },
    {
      key: 'chat',
      focusedIcon: require('../../assets/icons/chat_dark.png'),
      title: 'Chat',
    },
  ]);

[umardev500]

I'm confused about the types I use typescript i check it that types is any does it cant be any types included react element?

[umardev500]

how to use react component for icon?

[okwasniewski]

You can't use React Element for icons, it's limitation of native components, that only children prop accepts react elements

[umardev500]

const [routes] = useState([
{
key: 'article',
title: 'Article',
focusedIcon: () => ,
unfocusedIcon: () => ,
badge: '!',
},
{
key: 'albums',
title: 'Albums',
focusedIcon: () => ,
badge: '5',
hidden: false, // use hideOneTab here
},
{
key: 'contacts',
title: 'Contacts',
focusedIcon: () => ,
},
{
key: 'chat',
title: 'Chat',
focusedIcon: () => ,
},
]);

not working

[okwasniewski]

You seem to have missed focusedIcon: require('../../assets/icons/grid_dark.png'), it's a function only when using React navigation