Add nativewind + expo icons

app/_layout.tsx

@@ -1,7 +1,7 @@
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import {DarkTheme, DefaultTheme, ThemeProvider} from '@react-navigation/native'
 import {useAssets} from 'expo-asset'
-import {useFonts} from 'expo-font'
+import {loadAsync, useFonts} from 'expo-font'
 import {Slot, SplashScreen} from 'expo-router'
 import * as SystemUI from 'expo-system-ui'
 import {
@@ -11,11 +11,16 @@ import {
   useColorMode,
   useColorModeValue,
 } from 'native-base'
-import {useEffect} from 'react'
+import {ReactNode, useEffect} from 'react'
+import Ionicons from '@expo/vector-icons/Ionicons'
+import {useColorScheme} from 'nativewind'
+import {View} from 'react-native'
 
-import {ICONS, IMAGES} from '@/assets'
 import {useAppStore} from '@/store'
+import {ICONS, IMAGES} from '@/assets'
 import {theme} from '@/theme'
+import {ThemeName, themes} from '@/themes'
+import '../global.css'
 
 // Native Base config
 const colorModeManager: StorageManager = {
@@ -46,7 +51,10 @@ const config: INativebaseConfig = {
 SplashScreen.preventAutoHideAsync()
 
 export default function RootLayout() {
-  const [loaded, error] = useFonts({})
+  const [fontsLoaded, error] = useFonts({
+    ...Ionicons.font,
+  })
+
   const [assets] = useAssets([
     ...Object.values(IMAGES),
     ...Object.values(ICONS),
@@ -60,18 +68,28 @@ export default function RootLayout() {
   }, [error])
 
   useEffect(() => {
-    if (loaded && assets) {
+    loadAsync(Ionicons.font)
+    if (fontsLoaded && assets) {
       SplashScreen.hideAsync()
     }
-  }, [assets, loaded])
+  }, [assets, fontsLoaded])
 
-  if (!loaded) {
+  if (!fontsLoaded || !assets) {
     return null
   }
 
   return <RootLayoutNav />
 }
 
+function Theme({name, children}: {name: ThemeName; children: ReactNode}) {
+  const {colorScheme} = useColorScheme()
+  return (
+    <View className="flex-1" style={themes[name][colorScheme]}>
+      {children}
+    </View>
+  )
+}
+
 function RootLayoutNav() {
   const locale = useAppStore(state => state.locale)
   const {colorMode} = useColorMode()
@@ -85,10 +103,12 @@ function RootLayoutNav() {
   }, [backgroundColor])
 
   return (
-    <ThemeProvider value={colorMode === 'dark' ? DarkTheme : DefaultTheme}>
-      <NativeBaseProvider colorModeManager={colorModeManager} config={config}>
-        <Slot key={locale} />
-      </NativeBaseProvider>
-    </ThemeProvider>
+    <Theme name="twitter">
+      <ThemeProvider value={colorMode === 'dark' ? DarkTheme : DefaultTheme}>
+        <NativeBaseProvider colorModeManager={colorModeManager} config={config}>
+          <Slot key={locale} />
+        </NativeBaseProvider>
+      </ThemeProvider>
+    </Theme>
   )
 }

babel.config.js

@@ -1,7 +1,9 @@
 module.exports = function (api) {
   api.cache(true)
   return {
-    presets: ['babel-preset-expo'],
-    plugins: ['react-native-reanimated/plugin'],
+    presets: [
+      ['babel-preset-expo', {jsxImportSource: 'nativewind'}],
+      'nativewind/babel',
+    ],
   }
 }

global.css

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

metro.config.js

@@ -1,9 +1,8 @@
-// Learn more https://docs.expo.io/guides/customizing-metro
 const {getDefaultConfig} = require('expo/metro-config')
+const {withNativeWind} = require('nativewind/metro')
 
-/** @type {import('expo/metro-config').MetroConfig} */
 const config = getDefaultConfig(__dirname)
 
 config.resolver.sourceExts.push('mjs')
 
-module.exports = config
+module.exports = withNativeWind(config, {input: './global.css'})

nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package.json

@@ -11,9 +11,11 @@
     "test": "tsc && bun run lint",
     "lint": "eslint . --ext .ts,.tsx --max-warnings 0",
     "deploy": "gh-pages -d dist",
-    "predeploy": "npx expo export:web"
+    "predeploy": "npx expo export:web",
+    "postinstall": "patch-package"
   },
   "dependencies": {
+    "@expo/vector-icons": "^14.0.0",
     "@react-native-async-storage/async-storage": "1.21.0",
     "@react-navigation/native": "^6.1.9",
     "dayjs": "^1.10.8",
@@ -28,7 +30,9 @@
     "expo-system-ui": "~2.9.3",
     "i18n-js": "^4.3.0",
     "native-base": "^3.4.28",
+    "nativewind": "^4.0.1",
     "normalize-css-color": "^1.0.2",
+    "patch-package": "^8.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.73.2",
@@ -55,6 +59,7 @@
     "jest-expo": "~50.0.1",
     "prettier": "^2.4.1",
     "react-test-renderer": "18.2.0",
+    "tailwindcss": "^3.4.1",
     "typescript": "^5.1.3"
   },
   "private": true

patches/react-native-css-interop+0.0.22.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/react-native-css-interop/dist/runtime/components/rendering.js b/node_modules/react-native-css-interop/dist/runtime/components/rendering.js
+index 3af22bb..304c5a0 100644
+--- a/node_modules/react-native-css-interop/dist/runtime/components/rendering.js
++++ b/node_modules/react-native-css-interop/dist/runtime/components/rendering.js
+@@ -26,7 +26,7 @@ function render(jsx, type, props, ...args) {
+             else if (styles) {
+                 styles = [...newStyles, styles];
+             }
+-            else {
++            else if (newStyles.length) {
+                 styles = newStyles;
+             }
+             props[key] = styles;

tailwind.config.js

@@ -0,0 +1,20 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./app/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
+  presets: [require('nativewind/preset')],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: 'var(--color-primary)',
+        },
+      },
+      textColor: {
+        primary: {
+          DEFAULT: 'var(--color-text-primary)',
+        },
+      },
+    },
+  },
+  plugins: [],
+}

themes.ts

@@ -0,0 +1,30 @@
+import {vars, cssInterop} from 'nativewind'
+import Ionicons from '@expo/vector-icons/Ionicons'
+
+cssInterop(Ionicons, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      fontSize: 'size',
+    },
+  },
+})
+
+export type ThemeName = 'twitter'
+export type ColorScheme = 'light' | 'dark'
+
+export const themes: Record<
+  ThemeName,
+  Record<ColorScheme, Record<string, string>>
+> = {
+  twitter: {
+    light: vars({
+      '--color-primary': '#1d9bf0',
+      '--color-text-primary': '#000',
+    }),
+    dark: vars({
+      '--color-primary': '#1d9bf0',
+      '--color-text-primary': '#FFF',
+    }),
+  },
+}