SolitoImageProvider loader not working

[cgorrieri]

Actual

Custom SolitoImageProvider loader is not being used by SolitoImage components down the App.

Expected

The custom loader is used.

Versions

• Solito: 2.1.0

How to reproduce

Follow the steps at https://solito.dev/tailwind and install the dependencies for solito/image as mentioned in https://solito.dev/usage/image#expo

In apps/expo/App.tsx:

import { NativeNavigation } from 'app/navigation/native'
import { Provider } from 'app/provider'
import { SolitoImageProvider } from 'solito/image'

export default function App() {
  return (
    <SolitoImageProvider
      loader={({ quality, width, src }) => {
        console.log('loader called with', quality, width, src);
        return 'https://images.freeimages.com/images/large-previews/218/my-dog-cutter-1499799.jpg';
      }}
    >
      <Provider>
        <NativeNavigation />
      </Provider>
    </SolitoImageProvider>
  )
}

in packages/app/features/home/screen.tsx:

import { A, H1, P, Text, TextLink } from 'app/design/typography'
import { Row } from 'app/design/layout'
import { View } from 'app/design/view'
import { MotiLink } from 'solito/moti'
import { SolitoImage } from 'solito/image'

export function HomeScreen() {
  return (
    <View className="flex-1 items-center justify-center p-3">
      <H1>Welcome to Solito.</H1>
      <View className="max-w-xl">
        <P className="text-center">
          Here is a basic starter to show you how you can navigate from one
          screen to another. This screen uses the same code on Next.js and React
          Native.
        </P>
        <View className={'m-auto'}>
          <SolitoImage
            src={'https://images.freeimages.com/images/large-previews/36e/black-fly-1641767.jpg'}
            alt={'image'}
            width={140}
            height={80}
            style={{width: 140, height: 80}}
          />
        </View>
       ....

When running npx expo run:ios (or android) I see the image provided to the SolitoImage and not the one that is returned by the loader nor the log from the console.log.

If I put the loader directly on the SolitoImage component, I get as expected the image returned by the loader. So it seems that the context is not used properly by the SolitoImage or there is something I am missing.

[nandorojo]

It’s possible it’s because your image starts with https…this might have been an incorrect implementation on my end, I figured that’d only be used for unoptimized URLs. Not positive that’s it, but it might be.

[nandorojo]

If I put the loader directly on the SolitoImage component, I get as expected the image returned by the loader. So it seems that the context is not used properly by the SolitoImage or there is something I am missing.

Hm, that’s weird. Do you have multiple versions of Solito installed?

[cgorrieri]

I just ran yarn list solito and I have only one.

[cgorrieri]

It looks like in https://github.com/nandorojo/solito/blob/master/src/image/use-solito-image.ts#L77 it is using the loader passed to it, and in there https://github.com/nandorojo/solito/blob/master/src/image/fast/fast.tsx#L11 the loader passed to it is the one from the props. Nowhere it is checking for the one in the context.

[nandorojo]

Can you try Solito 2.1.1? I think I just released a fix.

[cgorrieri]

Yes! It is working now. Thank you :)