1

When I import svg files into my BottomTabNavigator I get the following Render Error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: number.

How do I get rid of this error?

I've installed react-native-svg and react-native-svg-transformer, and added an index.d.ts file with declare module '*.svg'; in it.

In src/components/BottomTabNavigator.tsx, I have the following code:

import React, {FC} from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import screens from '../screens/';
import {BottomTabNavigatorIcons} from '../assets';
  
const Tab = createBottomTabNavigator();  

const bottomTabNavigatorOptions = \[
    {
        id: 'search',
        name: 'Search',
        component: screens.SearchScreen,
        icon: BottomTabNavigatorIcons.defaultIcon.searchIcon,
    },
    {
        id: 'record',
        name: 'Record',
        component: screens.RecordScreen,
        icon: BottomTabNavigatorIcons.defaultIcon.recordIcon,
    },
    {
        id: 'profile',
        name: 'Profile',
        component: screens.ProfileScreen,
        icon: BottomTabNavigatorIcons.defaultIcon.profileIcon,
    },
\];

export const BottomTabNavigator: FC = () =\> {
    return (
        \<\>
            \<Tab.Navigator screenOptions={{headerShown: false}}\>
                {bottomTabNavigatorOptions.map(screen =\> (
                    \<Tab.Screen
                        key={screen.id}
                        name={screen.name}
                        component={screen.component}
                        options={{
                            tabBarIcon: () =\> \<screen.icon /\>,
                        }}
                    /\>
               ))}
            \</Tab.Navigator\>
        \</\>
    );
};

In src/assets/bottom-navigation I have three svg files.

In src/assets I have an index.ts file with the following code:

import ProfileIcon from './bottom-navigation/profile.svg';
import RecordIcon from './bottom-navigation/record.svg';
import SearchIcon from './bottom-navigation/search.svg';

const BottomTabNavigatorIcons = {
    defaultIcon: {
        profileIcon: ProfileIcon,
        recordIcon: RecordIcon,
        searchIcon: SearchIcon,
    },
};

export {BottomTabNavigatorIcons};\`

If I console.log(bottomTabNavigatorOptions), icon does output a number but I'm not sure what it's meant to output?

[{"component": [Function SearchScreen], "icon": 3, "id": "search", "name": "Search"}, {"component": [Function RecordScreen], "icon": 2, "id": "record", "name": "Record"}, {"component": [Function ProfileScreen], "icon": 1, "id": "profile", "name": "Profile"}]

Thank you very much in advance!

alski
  • 11
  • 4

1 Answers1

0

I think you need to use your BottomTabNavigatorIcons in this way:

<Tab.Screen
  key={screen.id}
  name={screen.name}
  component={screen.component}
  options={{
     tabBarIcon: () => screen.icon,
  }}
 />

Also, change your src/assets file as below:

import ProfileIcon from './bottom-navigation/profile.svg';
import RecordIcon from './bottom-navigation/record.svg';
import SearchIcon from './bottom-navigation/search.svg';

const BottomTabNavigatorIcons = {
    defaultIcon: {
        profileIcon: <ProfileIcon/>,
        recordIcon: <RecordIcon/>,
        searchIcon: <SearchIcon/>,
    },
};

export {BottomTabNavigatorIcons};

Try to call your svg in this way which returns component.

Yakupguly Malikov
  • 584
  • 1
  • 1
  • 12