React-native-ui-kitten: KittenUi + react-native-svg-transformer

[josef256]

💬 Question

Hello,
i want to use react-native-svg-transformer with kittenUi, problem is i have a default kitten ui configuration wich create a metro.config.js file & in react-native-svg-transformer install steps i need to also edit that file.
here is kittenUi default metro.config.js file :

const MetroConfig = require('@ui-kitten/metro-config');
const evaConfig = {
evaPackage: '@eva-design/eva',
};
module.exports = MetroConfig.create(evaConfig, {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
});

and here is the config i need to add:

const { getDefaultConfig } = require("metro-config");
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts },
} = await getDefaultConfig();
return {
transformer: {
babelTransformerPath: require.resolve('react-native-svg-transformer'),
},
resolver: {
assetExts: assetExts.filter(ext => ext !== 'svg'),
sourceExts: [...sourceExts, 'svg'],
},
};
})();

i trired to merge the two config it didn't work out.
any idea how to get those 2 along ?

thank you.

UI Kitten and Eva version

| Package | Version |
| ----------- | ----------- |
| @eva-design/eva | 2.0.0-alpha.1 |
| @ui-kitten/components | 5.0.0-alpha.1 |

[artyorsh]

@josef256 thanks for posting this.

You don't need to merge it with UI Kitten config, since it is merged by @ui-kitten/metro-config package. Anyway, the trick was to functions and return a plain object.

This is how you can get this work.

const MetroConfig = require('@ui-kitten/metro-config');
const defaultConfig = require('metro-config/src/defaults').getDefaultValues();

/**
 * @see https://akveo.github.io/react-native-ui-kitten/docs/guides/improving-performance
 */
const evaConfig = {
  evaPackage: '@eva-design/eva',
};

module.exports = MetroConfig.create(evaConfig, {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: defaultConfig.resolver.assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...defaultConfig.resolver.sourceExts, 'svg']
  },
});

[josef256]

thanks it worked ! (y)