feat: setup react-native-svg & react-native-svg-transformer

assets
1) Add logo.svg to assets.
2) Add path alias to babel.config & tsconfig.
react-native-svg
1) Install react-native-svg & run pod install.
react-native-svg-transformer
1) Install react-native-svg-transformer as devDependency.
2) Add svg.d.ts file and declare module for future svg imports.
3) Update metro.config, according to installation guide.
4) Add Logo component to LogIn screen.

Author: MaximFedarau

assets/images/logo.svg

@@ -5,6 +5,7 @@ module.exports = {
       'module-resolver',
       {
         alias: {
+          '@assets': './assets',
           '@components': './src/components',
           '@constants': './src/constants',
           '@screens': './src/screens',

babel.config.js

@@ -379,6 +379,8 @@ PODS:
   - RNScreens (3.18.2):
     - React-Core
     - React-RCTImage
+  - RNSVG (13.6.0):
+    - React-Core
   - SocketRocket (0.6.0)
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
@@ -446,6 +448,7 @@ DEPENDENCIES:
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - RNScreens (from `../node_modules/react-native-screens`)
+  - RNSVG (from `../node_modules/react-native-svg`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -539,6 +542,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   RNScreens:
     :path: "../node_modules/react-native-screens"
+  RNSVG:
+    :path: "../node_modules/react-native-svg"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -592,6 +597,7 @@ SPEC CHECKSUMS:
   React-runtimeexecutor: 15437b576139df27635400de0599d9844f1ab817
   ReactCommon: 349be31adeecffc7986a0de875d7fb0dcf4e251c
   RNScreens: 34cc502acf1b916c582c60003dc3089fa01dc66d
+  RNSVG: 3a79c0c4992213e4f06c08e62730c5e7b9e4dc17
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: 99caf8d5ab45e9d637ee6e0174ec16fbbb01bcfc
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

ios/Podfile.lock

@@ -5,13 +5,25 @@
  * @format
  */
 
-module.exports = {
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-      },
-    }),
-  },
-};
+const { getDefaultConfig } = require('metro-config');
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts },
+  } = await getDefaultConfig();
+  return {
+    transformer: {
+      getTransformOptions: async () => ({
+        transform: {
+          experimentalImportSupport: false,
+          inlineRequires: true,
+        },
+      }),
+      babelTransformerPath: require.resolve('react-native-svg-transformer')
+    },
+    resolver: {
+      assetExts: assetExts.filter((ext) => ext !== 'svg'),
+      sourceExts: [...sourceExts, 'svg'],
+    },
+  }
+})

metro.config.js

@@ -17,6 +17,7 @@
     "react-native-safe-area-context": "^4.4.1",
     "react-native-screens": "^3.18.2",
     "react-native-splash-screen": "^3.3.0",
+    "react-native-svg": "^13.6.0",
     "styled-components": "^5.3.6"
   },
   "devDependencies": {
@@ -34,6 +35,7 @@
     "eslint": "^7.32.0",
     "jest": "^26.6.3",
     "metro-react-native-babel-preset": "0.72.3",
+    "react-native-svg-transformer": "^1.0.0",
     "react-test-renderer": "18.1.0",
     "typescript": "^4.8.3"
   },

package.json

@@ -1,3 +1,25 @@
 import React, { FC } from 'react';
+import { SafeAreaView, ScrollView, View, Text, StyleSheet } from 'react-native';
 
-export const LogIn: FC = () => <></>;
+import Logo from '@assets/images/logo.svg';
+
+export const LogIn: FC = () => (
+  <SafeAreaView>
+    <ScrollView>
+      <View style={styles.logoContainer}>
+        <Logo width={48} height={48} />
+        <Text style={styles.logoText}>CMK</Text>
+      </View>
+    </ScrollView>
+  </SafeAreaView>
+);
+
+const styles = StyleSheet.create({
+  logoContainer: {
+    alignItems: 'center',
+  },
+  logoText: {
+    fontSize: 20,
+    color: '#3F8CFF',
+  },
+});

src/screens/LogIn.tsx

@@ -0,0 +1,7 @@
+// react-native-svg
+declare module '*.svg' {
+  import React, { FC } from 'react';
+  import { SvgProps } from 'react-native-svg';
+  const content: FC<SvgProps>;
+  export default content;
+}

src/types/packages/svg.d.ts

@@ -13,6 +13,7 @@
     "types": ["styled-components-react-native", "node"],
     "baseUrl": ".",
     "paths": {
+      "@assets/*": ["assets/*"],
       "@components/*": ["src/components/*"],
       "@componets": ["src/components"],
       "@constants/*": ["src/constants/*"],