tailwind addition

vanGalilea · Feb 1, 2024 · cccf3e1 · cccf3e1
1 parent 579281f
commit cccf3e1
Show file tree

Hide file tree

Showing 10 changed files with 426 additions and 35 deletions.
diff --git a/apps/rn-expo-app/app/_layout.tsx b/apps/rn-expo-app/app/_layout.tsx
@@ -1,5 +1,5 @@
 import {Tabs} from 'expo-router';
-
+import '../global.css';
 export default function Layout() {
   return (
     <Tabs>

diff --git a/apps/rn-expo-app/app/index.tsx b/apps/rn-expo-app/app/index.tsx
@@ -1,13 +1,13 @@
-import {Text} from 'react-native';
+import { Text, View } from "react-native";
 
 export default function Page() {
   return (
-    <>
+    <View className="flex 1 bg-amber-300">
       <Text>RN Media Group</Text>
       <Text>Trending</Text>
       <Text>For you</Text>
       <Text>Following</Text>
       <Text>Listen</Text>
-    </>
+    </View>
   );
 }
diff --git a/apps/rn-expo-app/babel.config.js b/apps/rn-expo-app/babel.config.js
@@ -1,6 +1,9 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
   };
 };
diff --git a/apps/rn-expo-app/global.css b/apps/rn-expo-app/global.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/apps/rn-expo-app/ios/Podfile.lock b/apps/rn-expo-app/ios/Podfile.lock
@@ -1079,6 +1079,11 @@ PODS:
     - React-jsi (= 0.73.1)
     - React-logger (= 0.73.1)
     - React-perflogger (= 0.73.1)
+  - RNReanimated (3.6.2):
+    - glog
+    - RCT-Folly (= 2022.05.16.00)
+    - React-Core
+    - ReactCommon/turbomodule/core
   - RNScreens (3.29.0):
     - glog
     - RCT-Folly (= 2022.05.16.00)
@@ -1150,6 +1155,7 @@ DEPENDENCIES:
   - React-runtimescheduler (from `../../../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`)
   - React-utils (from `../../../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../../../node_modules/react-native/ReactCommon`)
+  - RNReanimated (from `../../../node_modules/react-native-reanimated`)
   - RNScreens (from `../../../node_modules/react-native-screens`)
   - RNVectorIcons (from `../../../node_modules/react-native-vector-icons`)
   - Yoga (from `../../../node_modules/react-native/ReactCommon/yoga`)
@@ -1274,6 +1280,8 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/react-native/ReactCommon/react/utils"
   ReactCommon:
     :path: "../../../node_modules/react-native/ReactCommon"
+  RNReanimated:
+    :path: "../../../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../../../node_modules/react-native-screens"
   RNVectorIcons:
@@ -1340,6 +1348,7 @@ SPEC CHECKSUMS:
   React-runtimescheduler: 93a4c84e46a85c3fc9678abd4f6923b785226ea7
   React-utils: debda2c206770ee2785bdebb7f16d8db9f18838a
   ReactCommon: ddb128564dcbfa0287d3d1a2d10f8c7457c971f6
+  RNReanimated: f3fba771d22558875411f702aaf520de2268d24b
   RNScreens: b582cb834dc4133307562e930e8fa914b8c04ef2
   RNVectorIcons: 210f910e834e3485af40693ad4615c1ec22fc02b
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17

diff --git a/apps/rn-expo-app/metro.config.js b/apps/rn-expo-app/metro.config.js
@@ -1,4 +1,5 @@
 const {getDefaultConfig} = require('expo/metro-config');
+const {withNativeWind} = require('nativewind/metro');
 const path = require('path');
 
 // Find the project and workspace directories
@@ -18,4 +19,4 @@ config.resolver.nodeModulesPaths = [
 // 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
 config.resolver.disableHierarchicalLookup = true;
 
-module.exports = config;
+module.exports = withNativeWind(config, {input: './global.css'});
diff --git a/apps/rn-expo-app/nativewind-env.d.ts b/apps/rn-expo-app/nativewind-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />
diff --git a/apps/rn-expo-app/package.json b/apps/rn-expo-app/package.json
@@ -20,11 +20,14 @@
     "expo-linking": "~6.2.2",
     "expo-router": "~3.4.6",
     "expo-status-bar": "~1.11.1",
+    "nativewind": "^4.0.23",
     "react": "18.2.0",
     "react-native": "0.73.1",
+    "react-native-reanimated": "^3.6.2",
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "~3.29.0",
-    "react-native-vector-icons": "^10.0.3"
+    "react-native-vector-icons": "^10.0.3",
+    "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",
@@ -37,6 +40,7 @@
     "jest-expo": "~50.0.1",
     "prettier": "^3.2.4",
     "react-test-renderer": "^18.2.0",
+    "tailwindcss": "3.4.1",
     "typescript": "^5.1.3"
   },
   "private": true,

diff --git a/apps/rn-expo-app/tailwind.config.js b/apps/rn-expo-app/tailwind.config.js
@@ -0,0 +1,9 @@
+/** @type {import("tailwindcss").Config} */
+module.exports = {
+  content: ['./app/**/*.{js,jsx,ts,tsx}'],
+  presets: [require("nativewind/preset")],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};