I have added tailwindcss-react-native
to a bare react-native app. As per the installation instructions, I have updated the babel.config.js
to -
module.exports = {
presets: ["module:metro-react-native-babel-preset"],
plugins: [
"inline-dotenv",
"react-native-reanimated/plugin",
"tailwindcss-react-native/babel",
],
};
- It works perfectly when running the app in development mode using
expo run:ios
- When I create a simulator build, the app launches without errors, but the portion of the app which is impacted by
tailwindcss-react-native
doesn’t render anything. - If I push an OTA using
eas update
, the app works perfectly after downloading the OTA. - It seems really weird, but is it possible that the bundle generated during
eas build
somehow doesn’t apply thetailwindcss-react-native/babel
plugin? But somehoweas update
bundle applies it?
I am really confused. Would be grateful for any help.
My app uses
- Bare workflow
- eas-cli version 0.54.1
- I have tried different configurations on
metro.config.js
andbabel.config.js
babel.config.js
module.exports = {
presets: ["module:metro-react-native-babel-preset"],
plugins: [
"inline-dotenv",
"react-native-reanimated/plugin",
"tailwindcss-react-native/babel",
],
};
metro.config.js
const { getDefaultConfig } = require("expo/metro-config");
const path = require("path");
const projectRoot = __dirname;
const workspaceRoot = path.resolve(projectRoot, "../..");
const config = getDefaultConfig(projectRoot);
config.watchFolders = [workspaceRoot];
config.resolver.nodeModulesPath = [
path.resolve(projectRoot, "node_modules"),
path.resolve(workspaceRoot, "node_modules"),
];
module.exports = config;
Screenshot: development mode
Screenshot: simulator build via eas-build --local
Screenshot: simulator build after ota update via eas update