Display a image through require.

[giacomocerquone]

Hi all, I don't understand why this doesn't work

<FastImage
        source={{
          uri: require('../myfolder/myimage.jpg'),
          priority: FastImage.priority.high,
        }}
        fallback
        style={{
 width: 40, height: 40, borderRadius: 30, padding: 10,
}}
        resizeMode={FastImage.resizeMode.cover}
      />

If I use fallback true, and a default Image component is used, why I still must use a file url?
The error I get, of course, is this:

undefined is not a function evaluating source.uri.startsWith('file://')

I know how I can get around the problem (I'd just create a component that shows the default Image component or the fast image one based on certain condition), but I'd like to know if there is a proper way of doing this without the need of adding boilerplate code!

If it's normal that it doesn't work, it shouldn't be harder at all to implement it since you're already falling back to the Image default component that accepts a required local image

[Mikunj]

<FastImage
    source={require('../myfolder/myimage.jpg')}
/>

Have you tried doing that? I think it works similar to the source of the Image component.

[giacomocerquone]

jeez this works... so why @DylanVann wrote this in #160 :

I am going to add support for local images. Probably soon / in the next major version. For now it does fallback to Image though.

Doing like you wrote it already works!
Anyway the api of this module are somehow awkward and the docs too.
What I mean with this is that the "source" prop can be both a required Image or an object defined by this lib specified in the doc that has this shape:

    source={{
      uri: 'https://unsplash.it/400/400?image=1',
      headers:{ Authorization: 'someAuthToken' },
      priority: FastImage.priority.normal,
    }}

and this is really confusing.

I propose two things:

1. I believe that the docs should be fixed ASAP (pr is coming) to specify that the source prop can be also a required image.

And in the near future:

2. a - There should be some prop like "fallbackSource" where you define the image to show when the lib goes in default mode (means when it uses the Image default component)

OR

2. b - The source prop becomes a string and should be used only for the uri (so it can be used interchangeably with required images, file url and remote url) and the other options like headers and priorities become other different props

Intuitively this is needed in order to give a clear shape to the source prop
I'm available to implement this changes and propose a PR if you @DylanVann say it's ok for you

[gugakatsi]

@giacomocerquone just type there asset folder url for your image, after bundling it would be {{ uri: 'imagE_myimage'}} , and it will fallback to local image and u will't have to write boilerplate

[n1ru4l]

On the current master the require/import is no longer working.

[gugakatsi]

@n1ru4l bcs it support offline image docoding i gueess

[gabrielfgularte]

Hi there, I'm using the 8.3.2 version and I can't use either require() or a string on uri to make it work for local images. Methods I've tried and it's errors:

Method 1

const image = require('../assets/img.png');
// ...
return (
    <FastImage style={{ width: 720, height: 12000 }} source={image} />
)

Method 2

return (
    <FastImage style={{ width: 720, height: 12000 }} source={require('../assets/img.png')} />
)

Same error for methods 1 and 2: App simply closes without any feedback.

Method 3

return (
    <FastImage style={{ width: 720, height: 12000 }} source={{uri: require('../assets/img.png')}} />
)

Method 4

return (
    <FastImage style={{ width: 720, height: 12000 }} source={{uri: '../assets/img.png'}} />
)

Same error for methods 3 and 4:

Any thoughts on this? Thanks in advance :)

[giacomocerquone]

@gabrielfgularte
Might be the last xcode-rn problems that appeared recently? facebook/react-native#26699

[gabrielfgularte]

@giacomocerquone thanks for your answer. But I'm afraid that not, this isn't linked with that problem. Those errors and prints were tested in a Android Studio simulator. =/

[hackrx]

@gabrielfgularte have you find any-workaround for this issue? I am also facing the same issue,

[TARASANTAN]

Use single dot like
<FastImage style={{ width: 720, height: 12000 }} source={require('./assets/img.png')} />