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 )

[ammarfaris]

Is there an existing issue for this?

• [X] I have searched the existing issues

Do you want this issue prioritized?

• [ ] Yes, I have sponsored
• [X] Not urgent

Current Behavior

When i use SolitoImage with source(src) from expo-image-picker and running it in my iOS Simulator / Android physical device, the image is not shown

pickedImage.base64 is coming from expo-image-picker

            <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"

            />

Image not displayed even if I switched src to src={pickedImage.uri}

Note for ios and android; pickedImage.uri are in these format: ios Simulator => "file:///Users/myname/Library/Developer/CoreSimulator/Devices/.../Library/Caches/ImagePicker/4289C8F8-139F-467B-8994-7C39C4C31EE6.jpg

android physical => "file:///data/user/0/com.mydomain.myapp/cache/ImagePicker/5ba4b1d6-abae-48be-acd4-58437a57493d.jpeg"

When using src from external link like https://dummyimage.com/250/ffffff/000000. it works fine

Additionally, when I replaced it with expo-image, the image is displayed correctly

           import { Image } from 'expo-image'

            <Image
                source={{ uri: pickedImage.uri }} // or src={`data:image/;base64,${pickedImage.base64}`}
                style={{ width: 400, height: 400, marginTop: 10 }}
                alt="picked image"
            />

Expected Behavior

SolitoImage should behave similar to Image from expo-image for native

Steps To Reproduce

1. setup SolitoImage as per info described in Current Behavior
2. try compare with setup with Image from expo-image

Versions

- Solito: 4.0.1
- Next.js: 13.4.19
- Expo: 49.0.21
- React Native: 0.72.6

Screenshots

Attached to Current Behavior section

Reproduction

No response

[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) => https://github.com/vercel/next.js/issues/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 https://github.com/vercel/next.js/issues/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.