Mutiple styling issues - looking for help

[acodexm]

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 foo bar buzz render "foo bar "

I'm looking for an expert that could help me setup the project so that it works, thanks.
Even a simple expo staring project with working configuration for both platforms would do.