gluestack

gluestack Logogluestack

Multiple styling issues - looking for help and guidance

acodexm posted this in #support
Open in Discord
Avatar
acodexmOP
I have an expo app with this setup using bun:
react: 19.0.0
react-dom: 19.0.0
react-native: 0.79.5
expo: 53.0.20
expo-router: ~5.1.4
@gluestack-ui/nativewind-utils: ^1.0.26
nativewind: 4.1.23
tailwindcss: 3.4.17
typescript: 5.8.3
@babel/core: 7.28.0
react-native-gesture-handler: 2.24.0
react-native-reanimated: 3.17.5


I am few months in the project and oh boy how much troubles nativewind or gluestack or both has brought to me is really worrying me.

I am fairly new in mobile app development so I choose nativewind because I know it from web and then I've picked gluestack due to it's easy to plug in components system like in chakra-ui 🙂

Now I'm getting super stressed about issues that occured late in the project and those are:
1. shadows differences between android and ios, where on android they barely work at all and I can't fix them. the regular style={{boxShadow:xxx}} seems to work perfectly on both platforms but for some reason it cannot be correctly applied in my project.
2. I have custom colours in tailwind.config.js like brand-green-500 etc and when I use text-brand-green-500 on Gluestack Text component it does not get applied. seems like either tv or tva (the one from @gluestack-ui/nativewind-utils) is removing my custom text-colour. but if I add "!" before brand-green-500 aka !brand-green-500 it start working correctly. this should not be happening right? what am I missing?
3. another thing is that theme seems to be applied incorrectly on app lunch sometimes making things not styled at all.
4. text gets cut off in various places eg <ButtonText>foo bar buzz</ButtonText> render "foo bar "


I'm looking for an expert that could help me setup the project so that it works, thanks
Image

1 Reply