feat: added absolute path

.gitignore

@@ -33,3 +33,6 @@ yarn-error.*
 
 # typescript
 *.tsbuildinfo
+
+# cache
+.eslintcache

App.tsx

@@ -1,3 +1,4 @@
+import TestScreen from '@screens/Test';
 import { StatusBar } from 'expo-status-bar';
 import { Text, View } from 'react-native';
 
@@ -6,6 +7,7 @@ export default function App() {
     <View className="flex-1 items-center justify-center bg-white">
       <Text>Open up App.tsx to start working on your app!</Text>
       <StatusBar style="auto" />
+      <TestScreen />
     </View>
   );
 }

babel.config.js

@@ -3,6 +3,18 @@ module.exports = function (api) {
 
   return {
     presets: ['babel-preset-expo'],
-    plugins: ['nativewind/babel'],
+    plugins: [
+      'nativewind/babel',
+      [
+        'module-resolver',
+        {
+          root: ['./src'],
+          alias: {
+            '@screens': './src/screens',
+            '@components': './src/components',
+          },
+        },
+      ],
+    ],
   };
 };

package.json

@@ -26,6 +26,7 @@
     "@babel/core": "^7.20.0",
     "@types/react": "~18.2.14",
     "@typescript-eslint/eslint-plugin": "^6.4.0",
+    "babel-plugin-module-resolver": "^5.0.0",
     "eslint": "^8.56.0",
     "eslint-config-standard-with-typescript": "^43.0.0",
     "eslint-config-universe": "^12.0.0",

src/components/core/Button.tsx

@@ -0,0 +1,14 @@
+import { Text, TouchableOpacity } from 'react-native';
+
+type Props = {
+  title: string;
+  onPress?: () => object;
+};
+
+const Button = ({ title, onPress }: Props) => (
+  <TouchableOpacity onPress={onPress} className="px-6 py-2.5 bg-slate-500 rounded-md">
+    <Text className="text-white text-base">{title}</Text>
+  </TouchableOpacity>
+);
+
+export default Button;

src/screens/Test/index.tsx

@@ -1,8 +1,10 @@
+import Button from '@components/core/Button';
 import { Text, View } from 'react-native';
 
 const TestScreen = () => (
   <View>
     <Text>TestScreen</Text>
+    <Button title="Press me!" />
   </View>
 );
 

tailwind.config.js

@@ -1,9 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
+  content: ['./App.{js,jsx,ts,tsx}', './src/**/*.{js,jsx,ts,tsx}'],
   theme: {
     extend: {},
   },
   plugins: [],
-}
-
+};

tsconfig.json

@@ -1,6 +1,11 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
-    "strict": true
+    "strict": true,
+    "baseUrl": "./src",
+    "paths": {
+      "@screens/*":["./screens/*"],
+      "@components/*": ["./components/*"]
+    }
   }
 }