Custom local svg is not showing in BotttomNavigation - How to pass it in routes icon

[Krithik-Shailesh]

I have a local svg file but when I put it as a component in routes icon it is not getting rendered.

routes: [ { key: 'purchases', title: 'Purchases', icon: <Purchases/>}, //Purchases is the local svg component ]

[Krithik-Shailesh]

I solved it using the renderIcon prop, I passed all the icons through a renderIcon function.

const renderIcon = BottomNavigation.SceneMap({ purchases: PurchaseIcon, sales: SalesIcon, tools: ToolsIcon, apps: AppsIcon, settings: SettingsIcon })
Where PurchaseIcon was const PurchaseIcon = () => <PurchasesLogo/> and the others like SalesIcon,..etc was similar to this.