gluestack

gluestack Logogluestack

Emotion styles not working alongside GlueStack UI in Expo React Native

kunal_34174 posted this in #support
Open in Discord
Avatar
kunal_34174OP
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?

1 Reply