Настройка React Native SVG Transformer для Expo с помощью TypeScript

Чтобы настроить преобразователь React Native SVG для Expo с помощью TypeScript (TS), вы можете выполнить шаги, описанные ниже:

  1. Установить необходимые пакеты:

    expo install react-native-svg
    expo install react-native-svg-transformer

    Эти пакеты необходимы для работы с файлами SVG в React Native.

  2. Настройте Metro Bundler для преобразования файлов SVG:
    Создайте metro.config.js

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

    Эта конфигурация указывает Metro Bundler использовать пакет react-native-svg-transformerдля преобразования файлов SVG.

  3. Обновите tsconfig.json, чтобы распознавать импорт SVG:
    Добавьте следующие строки в файл tsconfig.json:

    {
     "compilerOptions": {
       "allowJs": true,
       "esModuleInterop": true
     },
     "include": ["src", "node_modules/react-native-svg-transformer"]
    }

    Это позволяет TypeScript распознавать импорт SVG, не выдавая ошибок.

  4. Используйте файлы SVG в своем проекте:
    Теперь вы можете импортировать и использовать файлы SVG в своих компонентах React Native. Например:

    import React from 'react';
    import { View } from 'react-native';
    import { SvgXml } from 'react-native-svg';
    import MySvg from './path/to/MySvg.svg';
    const MyComponent = () => {
     return (
       <View>
         <SvgXml xml={MySvg} width={100} height={100} />
       </View>
     );
    };
    export default MyComponent;