Zenn
🌞

ExpoRouterでiOSだけNativeWindが適応されない

2025/01/26に公開

ExpoとNativeWindを使ってReactNativeアプリを作ってた際に、Androidのビルドではtailwindcssが適応されていたが、iOSでビルドしたら適応されずにレイアウトが崩れることがあったので、その時にIssueを元に対処した内容をメモしておく。

参考にしたIssue

https://github.com/nativewind/nativewind/issues/886?utm_source=chatgpt.com

事象

  • 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のスタイリングが適応された。

アプリ開発サークル@IPUT

Discussion

ログインするとコメントできます