CODEWITHSUNDEEP
reactjsreact-nativeiconsreact-navigation
MRrn
MRrn

Reputation: 1

Using my own made icons down the bottomtab(navbar)[react navigation]

I have been using react native and react-navigation to create my app, and I'm trying to replace the default icons inside the navbar with my own designed UI icons and just didn't find a way to do it in the web or the docs. Does anyone have a detailed guide on how to use my own icons inside the bottomtab and next to the title of the screen?

Upvotes: 0

Views: 62

Answers (1)

hrodric
hrodric

Reputation: 435

You have plenty of options, you can either use an Image like so:

<Tab.Screen

                name='Atrasadas'
                component={LateTasks}
                options={{

                    tabBarColor: 'rgb(100, 75,75)',
                    tabBarLabel: 'Atrasadas',
                    tabBarIcon: ({ color }) => (<Image source={require('../../images/profile_demo.jpg')}/>)
                }}
/>

Or create your own icon library, which is arguably a lot more complicated but will not hinder your performance, I suggest you read this guide: https://www.reactnative.guide/12-svg-icons-using-react-native-vector-icons/12.1-creating-custom-iconset.html

As to applying the icon in the header im not really sure since I don't use the default headers, but I suppose there is a prop to do that.

Upvotes: 0

Related Questions