LucasVeloz/react-native-dynamic-skeletons

Does not work with tailwind styling approaches

1finedev opened this issue · 7 comments

I want to thank you for this amazing package which makes creating beautiful shimmers a breeze.

I style using nativewind in react native hence i have children that might look like this

      <View className="w-[6vh] h-[6vh] bg-primary rounded-full" />

but it does not show up unless i use the style attribute.
any insight is appreciated

Thank you for your issue. It seems legit. I'll take a look and try to find a solution. If you already have a solution feel free to send your PR.
I work on this project in my free time. I'll look this issue on the weekend.

@LucasVeloz thank you for your amazing package, unfortunately it doesn't work with styled component as well.

@MariyaAntonenko @Klin-Coders Could you test if this version is supporting?

PopBot commented

Hi, I just tested the latest edition with the twrnc package, and unfortunately didn't find it to be compatible. Willing to help out.

Hi! I'll take a look and fix it. It might take a while... because I work on this in my free time.
If you wanna collaborate, you could help fixing the issue, with documentation... any help are welcome!
thank you guys for the participation

I was thinking in creating a fallback props, if the library doesn't get the style of the child. it appeals to the fallback index. It might resolve for you guys? @PopBot @1finedev @MariyaAntonenko

PopBot commented

I looked react-native-shimmer-placeholder because twrnc is working there.

After taking a brief look at the code of both packages, I do think it has to do with the defaultStyles, and our issue lies within createChildensWithStyles in utils.ts. I think it's when the cssStyles are being reduced where the the twrnc styling breaks.

Perhaps if we just spread the style prop and removed the reducing in createChildrensWithStyles, that might help?