SVGs don't work with TabBarIcon using it with expo router

[boblitex]

while PNGs work as TabBarIcon, SVGs are blank as opposed to what's shown in the documentation ( for react navigation) but you get the idea

[okwasniewski]

Hey @boblitex can you provide a minimal reproduction?

Here I have an example of using SVGs with bottom tabs: https://github.com/okwasniewski/ExpoNativeTabs

Can you try if it works for you?

[okwasniewski]

Can you check with 0.5.2?

[Peek-A-Booo]

Can you check with 0.5.2?

0.5.2 doesn't work for me.
(only sfSymbol and uri working, require not)

<Tab.Screen
  name="Albums"
  component={Albums}
  options={{
    tabBarIcon: () => require('person.png'),
    // SVG is also supported
    tabBarIcon: () => require('person.svg'),
    // or
    tabBarIcon: () => ({ sfSymbol: 'person' }),
    // You can also pass a URL
    tabBarIcon: () => ({ uri: 'https://example.com/icon.png' }),
  }}
/>

[okwasniewski]

@Peek-A-Booo Can you share code snippet that doesn't work for you?

Just to be sure did you provide a full path? tabBarIcon: () => require('../../assets/images/home-icon-silhouette.svg')

[Peek-A-Booo]

@okwasniewski code&result with expo router

Code

Result

[okwasniewski]

@Peek-A-Booo Thanks, and is it working for you on iOS?

[Peek-A-Booo]

@okwasniewski Thanks. For me, the only ones working in iOS are sfSymbol and uri.

Looks like

 tabBarIcon: () => ({ sfSymbol: 'person' }),

 tabBarIcon: () => ({ uri: 'https://example.com/icon.png' }),

[okwasniewski]

@Peek-A-Booo That's weird, maybe something is off with your metro config?

Can you try building this example: https://github.com/okwasniewski/ExpoNativeTabs

[Peek-A-Booo]

@okwasniewski Found my mistake. I introduced react-native-svg-transformer to use SVG, and configured it like this:
https://github.com/kristerkari/react-native-svg-transformer?tab=readme-ov-file#step-3-configure-the-react-native-packager

const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer/expo")
  };

  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"]
  };

  return config;
})();

Commenting out config.resolver = { xxx } will make it correct.

To avoid using react-native-svg-transformer, can follow this: https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md#use-with-xml-strings, so there is no need to modify the metro config.

[boblitex]

@okwasniewski maybe we should find a way around using the bottomTabs with react-native-svg-transformer, it's quite popular and I also have it in my metro config

[okwasniewski]

@boblitex

I think that if you don't add this line assetExts: assetExts.filter((ext) => ext !== "svg") which removes svg's from assetExts both libraries should work together. Can you confirm?

[boblitex]

@okwasniewski

that's what I get when I try to use the svg transformer with the assetExts line removed

the SVGs in the bottomTabs work now though. so I'm trying to see