Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6295

How to export SVG in react-native from different file in TypeScript

$
0
0

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'],    },  };})();

Viewing all articles
Browse latest Browse all 6295

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>