working css setup

App.tsx

@@ -4,26 +4,23 @@
  *
  * @format
  */
-
+import "./global.css"
 import React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaView, StatusBar } from 'react-native';
 import { AppProvider } from './src/context/AppContext';
 import AppNavigator from './src/navigation/AppNavigator';
 
 const App = () => {
   return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <SafeAreaView style={{ flex: 1, backgroundColor: '#ffffff' }}>
-        <StatusBar barStyle="dark-content" backgroundColor="#ffffff" />
-        <AppProvider>
-          <NavigationContainer>
-            <AppNavigator />
-          </NavigationContainer>
-        </AppProvider>
-      </SafeAreaView>
-    </GestureHandlerRootView>
+    <SafeAreaView style={{ flex: 1, backgroundColor: '#ffffff' }}>
+      <StatusBar barStyle="dark-content" backgroundColor="#ffffff" />
+      <AppProvider>
+        <NavigationContainer>
+          <AppNavigator />
+        </NavigationContainer>
+      </AppProvider>
+    </SafeAreaView>
   );
 };
 

android/app/build.gradle

@@ -105,6 +105,22 @@ android {
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
         }
     }
+
+    // Add this block for react-native-vector-icons
+    apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")
+
+    // applicationVariants are e.g. debug, release
+    applicationVariants.all { variant ->
+        variant.outputs.each { output ->
+            // For each separate APK per architecture, set a unique version code
+            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
+            def abi = output.getFilter(com.android.build.OutputFile.ABI)
+            if (abi != null) {  // null for the universal-debug, universal-release variants
+                output.versionCodeOverride =
+                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
+            }
+        }
+    }
 }
 
 dependencies {

babel.config.js

@@ -1,3 +1,6 @@
-module.exports = {
-  presets: ['module:@react-native/babel-preset'],
+module.exports = function (api) {
+  api.cache(false);
+  return {
+    presets: ['module:@react-native/babel-preset', "nativewind/babel"],
+  };
 };

global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

index.js

@@ -2,7 +2,6 @@
  * @format
  */
 
-import 'react-native-gesture-handler';
 import {AppRegistry} from 'react-native';
 import App from './App';
 import {name as appName} from './app.json';

metro.config.js

@@ -1,11 +1,19 @@
-const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const { withNativeWind } = require('nativewind/metro');
 
 /**
  * Metro configuration
  * https://reactnative.dev/docs/metro
  *
  * @type {import('metro-config').MetroConfig}
  */
-const config = {};
+const config = mergeConfig(getDefaultConfig(__dirname), {
+  transformer: {
+    babelTransformerPath: require.resolve('react-native-css-transformer')
+  },
+  resolver: {
+    sourceExts: ['jsx', 'js', 'ts', 'tsx', 'css', 'json'],
+  }
+});
 
-module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+module.exports = withNativeWind(config, { input: './global.css' });

nativewind-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="nativewind/types" />
+
+declare module '*.css' {
+  const value: any;
+  export default value;
+}