I'm trying to export svg`s from theme.js:
// light iconsimport Logo from './icons/logo.svg';import Home from './icons/Tabbar/Home.svg';import HomeActive from './icons/Tabbar/Home_active.svg';import Search from './icons/Tabbar/Search.svg';import SearchActive from './icons/Tabbar/Search_active.svg';import Document from './icons/Tabbar/Document.svg';import DocumentActive from './icons/Tabbar/Document_active.svg';import EyeOnLight from './icons/eyeOn.svg';import EyeOffLight from './icons/eyeOff.svg';// dark iconsimport HomeDark from './icons/Tabbar/Home.svg';import HomeActiveDark from './icons/Tabbar/Home_active.svg';import SearchDark from './icons/Tabbar/Search.svg';import SearchActiveDark from './icons/Tabbar/Search_active.svg';import DocumentDark from './icons/Tabbar/Document.svg';import DocumentActiveDark from './icons/Tabbar/Document_active.svg';export const icons = { light: { Logo: Logo, Home: Home, HomeActive: HomeActive, Search: Search, SearchActive: SearchActive, Document: Document, DocumentActive: DocumentActive, EyeOn: EyeOnLight, EyeOff: EyeOffLight, }, dark: { Logo: Logo, Home: HomeDark, HomeActive: HomeActiveDark, Search: SearchDark, SearchActive: SearchActiveDark, Document: DocumentDark, DocumentActive: DocumentActiveDark, EyeOn: EyeOnLight, EyeOff: EyeOffLight, },};
Then, I call it in App.tsx using Context.
const [theme, setTheme] = useState<ThemeType>({mode: 'dark'}); let activeIcons = icons[theme.mode]; return (<ThemeContext.Provider value={{activeIcons}}><Helpers /></ThemeContext.Provider> );
Inside Helpers I have a component Named Input. I'm trying to call SVG inside this component using react-native-svg react-native-svg-transformer.
const Input: FC<InputProps> = props => { const {activeIcons}: any = useContext(ThemeContext); const {Home} = activeIcons; return (<SafeAreaView ><Home /></SafeAreaView> );};
It returns me an error says: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: number.
My metro.config.ts file:
//@ts-ignoreconst {getDefaultConfig} = require('metro-config');module.exports = (async () => { const { resolver: {sourceExts}, } = await getDefaultConfig(); return { transformer: { babelTransformerPath: require.resolve('react-native-svg-transformer'), }, resolver: { sourceExts: [...sourceExts, 'svg'], }, };})();