refactor: update input components

Author: eszlamczyk

apps/example/ios/Podfile.lock

@@ -1,16 +1,20 @@
 const path = require('path');
-const { getDefaultConfig } = require('@react-native/metro-config');
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
 const { withMetroConfig } = require('react-native-monorepo-config');
 
 const root = path.resolve(__dirname, '../..');
+const defaultConfig = getDefaultConfig(__dirname);
+const { assetExts, sourceExts } = defaultConfig.resolver;
 
-/**
- * Metro configuration
- * https://facebook.github.io/metro/docs/configuration
- *
- * @type {import('metro-config').MetroConfig}
- */
-module.exports = withMetroConfig(getDefaultConfig(__dirname), {
-  root,
-  dirname: __dirname,
-});
+module.exports = withMetroConfig(
+  mergeConfig(defaultConfig, {
+    transformer: {
+      babelTransformerPath: require.resolve('react-native-svg-transformer'),
+    },
+    resolver: {
+      assetExts: assetExts.filter((ext) => ext !== 'svg'),
+      sourceExts: [...sourceExts, 'svg'],
+    },
+  }),
+  { root, dirname: __dirname }
+);

apps/example/metro.config.js

@@ -16,7 +16,8 @@
     "react": "19.2.3",
     "react-native": "0.84.1",
     "react-native-safe-area-context": "^5.5.2",
-    "react-native-screens": "^4.24.0"
+    "react-native-screens": "^4.24.0",
+    "react-native-svg": "^15.15.4"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
@@ -30,7 +31,8 @@
     "@react-native/typescript-config": "0.84.1",
     "@types/react": "^19.2.0",
     "react-native-builder-bob": "^0.40.18",
-    "react-native-monorepo-config": "^0.3.3"
+    "react-native-monorepo-config": "^0.3.3",
+    "react-native-svg-transformer": "^1.5.3"
   },
   "engines": {
     "node": ">= 22.11.0"

apps/example/package.json

@@ -13,9 +13,9 @@ export default function App() {
         initialRouteName="Home"
         screenOptions={{
           headerStyle: {
-            backgroundColor: '#007AFF',
+            backgroundColor: '#BEEBD0',
           },
-          headerTintColor: '#fff',
+          headerTintColor: '#001A72',
           headerTitleStyle: {
             fontWeight: 'bold',
           },