Image for native not shown when using SolitoImage with source from expo-image-picker (web works fine) ; ImageBackground query and Nextjs issue (Image... has either width or height modified, but not the other ) about solito

[ammarfaris]

okay actually the Versions section got me thinking that my Solito version is quite old; so I upgraded to the latest Solito of 4.2.0 and now it works as expected ; one issue down

While I am at this, I have two questions @nandorojo :

1. I saw that expo-image has ImageBackground implementation to mimick https://reactnative.dev/docs/imagebackground ; does SolitoImage also implements ImageBackground ? if so, how can i access it / have similar implementation ? not sure if there is a nextjs-image equivalent or not

2. Nextjs issue (Image... has either width or height modified, but not the other )

Looking at this similar issue (see comments in link) => vercel/next.js#40762 ; is there a workaroud when using SolitoImage so that i don't have to add style={{ width: 400, height: 400 }} like below:

            <SolitoImage
                src={`data:image/;base64,${pickedImage.base64}`}
                height={400}
                width={400}
                // code below needed https://github.com/vercel/next.js/issues/40762
                style={{ width: 400, height: 400, marginTop: 10 }}
                alt="picked image"

            />

[nandorojo]

Try the unoptimized prop.

[ammarfaris]

Try the unoptimized prop.

I tried adding unoptimized but still got the same error below:

Image with src
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgQAAAFfCAYAAAAxo
9Q/AAABXWlDQ1BJQ0MgUHJvZmlsZQAAKJF1kMFKAlEUhv8xTbKBXEhBRMwqCExEW......
v/HX+nfDd6ioD5P//SlU+68/vf5cAAAAASUVORK5CYII=" has either width or height modified, but not the other. 
If you use CSS to change the size of your image, 
also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.

Is it related to vercel/next.js#40762 somehow?

As for my question number 1 ; Does Solito have ImageBackground component implementation?

Because we can technically do import { ImageBackground } from 'expo-image' ; but maybe for nextjs we need to adjust Image to have {children} component overlay on top of it

[nandorojo]

Rather than ImageBackground, you can simply pass fill={true} and render it before the items it should go behind.