🌞
ExpoRouterでiOSだけNativeWindが適応されない
ExpoとNativeWindを使ってReactNativeアプリを作ってた際に、Androidのビルドではtailwindcssが適応されていたが、iOSでビルドしたら適応されずにレイアウトが崩れることがあったので、その時にIssueを元に対処した内容をメモしておく。
参考にしたIssue
事象
- Expo RouterとNativewindを用いてアプリを構築
- AndroidでEAS・ローカルでビルドした際には問題なし
- iOSで同じようにビルドするとtailwindcssによるスタイリングが適応されない
やったこと
NativeWindの再インストール
NativeWindの公式ドキュメントのExpoRouterでのインストールガイドに従って再インストール。
npm install nativewind tailwindcss react-native-reanimated react-native-safe-area-context
またNon-Expo projectsと書かれた部分があるが、今回はネイティブファイルを含んでいるプロジェクトだったため、一応インストール。
npx pod-install
global.cssの移転
appの中に置いてたglobal.cssをルートディレクトリに移動。
.
├── app/
│ ├── _layout.tsx
│ ├── grobal.css 👈ここから
│ └── (tabs)/
│ ├── index.tsx
│ └── ...
├── app.json
├── grobal.css 👈ここに移動
├── tailwind.config.js
├── metro.config.js
それに伴ってmetro.config.jsを変更。
metro.config.js
const { getDefaultConfig } = require('expo/metro-config');
const { withNativeWind } = require("nativewind/metro");
/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname, {
isCSSEnabled: true,
});
module.exports = withNativeWind(config, { input: "./global.css" });
ビルドし直してキャッシュをクリア
ここまで行って再度ビルド。
今回はローカルで行う。
npx expo run:ios
ビルド後にCtrl
+C
でサーバーを停止させ、開発サーバーを再起動&JS変換キャッシュをクリア。
npx expo start --clear
これで無事iOSもtailwindcssのスタイリングが適応された。
Discussion