jaredh159 / tailwind-react-native-classnames

simple, expressive API for tailwindcss + react-native
2.08k stars 84 forks source link

outline width for TextInput #291

Closed tronghieu60s closed 8 months ago

tronghieu60s commented 8 months ago

I try to using twoutline-0 in TextInput tag react native but it doesn't work on react native web. (Expo) If i follow this code it working: Platform.OS === 'web' && { outlineWidth: 0 },

https://github.com/necolas/react-native-web/issues/48

<TextInput
style={[tw`flex-1 text-[17px] text-white`, Platform.OS === 'web' && { outlineWidth: 0 }]}
/>

Please additional this feature, sorry if i missing something

jaredh159 commented 8 months ago

hi there, thanks for the issue!

this library only aims to support the tailwind utilities that have a direct counterpart in React Native non-web. in other words, we don't support RN web. outline-{n} is a web-only utility, it has nothing we could map it to in terms of a RN native style prop, so it's beyond the intended scope of this library.

lots of folks use this library with RN web, but you're going to have to work around the gaps in web support. so if web is your primary target, this is a bit of a square-peg/round-hole situation. you might be better off looking into another library, like possibly NativeWind.

if you want to know more about what i mean about native style props, it's basically everything listed in these 5 pages of RN docs:

https://reactnative.dev/docs/layout-props https://reactnative.dev/docs/image-style-props https://reactnative.dev/docs/shadow-props https://reactnative.dev/docs/text-style-props https://reactnative.dev/docs/view-style-props

tronghieu60s commented 8 months ago

thank you for your support.