I’m using GlueStack UI (Tailwind-based) and Emotion (@emotion/react) in an Expo React Native project with web support.
Current Behavior:
1 GlueStack UI components work perfectly
2 Emotion styles (css prop) don’t apply at all
3 No error messages - styles just silently fail
This is the babel.config.js:
module.exports = api => {
api.cache(true)
return {
presets: [
["babel-preset-expo", { jsxImportSource: "nativewind" }],
["@babel/preset-react", {
runtime: "automatic",
importSource: "@emotion/react" // <-- THIS WON'T WORK AS EXPECTED
}],
"nativewind/babel" // Tailwind class transformer
],
plugins: [
["module-resolver", {
root: ["./"],
alias: { "@": "./", "@assets": "./assets" },
extensions: [".js", ".jsx", ".ts", ".tsx", ".json"]
}]
]
}
}
Has anyone successfully used NativeWind and Emotion together in a Expo project? How did you configure the project to prevent style conflicts?