CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-v5react-navigation-bottom-tab
stef000
stef000

Reputation: 123

Custom icons with react navigation 5

I am trying to use custom icons with a react tabbar navigation. However, all the tutorials and docs always just cover implementing icons by Ionicons or Materialdesign. Is there a way I can implement my own Icons?

This is how the code looks like atm: 

<Tab.Navigator tabBarOptions={{
  inactiveTintColor: '#707070',
  activeTintColor: 'red',
  style: {
    backgroundColor: '#F1F1F1',
    height: 60,
    color: 'red',
    paddingBottom: 5
  }
}}>
  <Tab.Screen name="Bestellungen" component={BestellungenOverview}/>
  <Tab.Screen name="Kunden" component={KundenOverview} />
  <Tab.Screen name="Zahlungen" component={ZahlungenOverview} />
  <Tab.Screen name="Statistiken" component={StatistikenOverview} />
  <Tab.Screen name="Einstellungen" component={Einstellungen} />
</Tab.Navigator>

Upvotes: 3

Views: 4646

Answers (1)

arc-menace
arc-menace

Reputation: 475

You need to save your icons as a font. Check out these links and see if they help:

https://www.reactnative.guide/12-svg-icons-using-react-native-vector-icons/12.1-creating-custom-iconset.html

https://medium.com/bam-tech/add-custom-icons-to-your-react-native-application-f039c244386c

You need to take your .svg files and, using a service like IcoMoon, generate a .ttf font file and load that font into your application.

Upvotes: 2

Related Questions