How to implement responsive SolitoImage using nativewind ?

[xinha-sh]

Hi I'm using nativewind for styling. And my image component looks like this

import { styled } from 'nativewind'
import { SolitoImage } from 'solito/image'

export const Img = styled(SolitoImage)

<Img
  className="h-16 w-16 self-center rounded-full border-2 border-slate-600 hover:border-4 hover:border-yellow-600 md:h-32 md:w-32"
  src={vertical.imageUrl}
  resizeMode="contain"
  alt={vertical.name}
 />

Error shown is

I'm able to bypass this error via adding a style prop with {{}} as value. ie

<Img
  className="h-16 w-16 self-center rounded-full border-2 border-slate-600 hover:border-4 hover:border-yellow-600 md:h-32 md:w-32"
  src={vertical.imageUrl}
  resizeMode="contain"
  alt={vertical.name}
  style={{}}
 />

But after that I'm getting following error:

[nandorojo]

I’ll look into the style issue. Width is required unless you use the fill property.

[nandorojo]

I actually don’t think this is a solito image issue. If you use it directly, the style prop isn’t required. So it must be an issue with nativewind’s styled()

[xinha-sh]

I actually don’t think this is a solito image issue. If you use it directly, the style prop isn’t required. So it must be an issue with nativewind’s styled()

Got it.Thanks.

If not using tailwind how would you recommend dynamic width height for Image component

[xinha-sh]

@nandorojo I stumbled upon this youtube video regarding next/image. It's in-dept and I felt should be included in solito docs. Hence raising a PR https://github.com/nandorojo/solito/pull/271

[nandorojo]

You should wrap solito/image with styled by the way.