Render prop method on View does not work for Images

[Abhir16]

The following throws an error: Error: TypeError: Cannot read property 'width' of undefined

<View fixed render={({ pageNumber }) => {
        // I added this 
    if (pageNumber === 1) {
      return <View style={{ height: 150, backgroundColor: 'blue' }}><Text>{pageNumber}</Text></View>
    }

    return <View style={{height: 50, width: 50}}><Image
        style={styles.image}
        src="/images/quijote1.jpg"
                   /></View>

Ref: repl

It starts working fine when Image is not used in the render prop. What is a work around for this?

[diegomura]

render prop usage it's a bit limited. It was conceived mostly for page number texts. Never used it for images. I'll keep it open until I or someone can work on it

[santialbo]

Hi @diegomura. Below are some ideas on how we could overcome this limitation.

If I understood the code correctly there's a processing step ahead of rendering that traverses de node tree and resolves image urls.

Would it be possible to define a dependencies props so that this step can resolve those nodes? I'm thinking an API like the following

<View
  render={({pageNumber}, [logo]) => {
    return pageNumber > 0 ? logo : <View/>;
  }}
  deps={[<Image key="logo" src="..."/>]}
/>

Maybe we could even use the children prop

<View
  render={({pageNumber}, [logo]) => {
    return pageNumber > 0 ? logo : <View/>;
  }}
>{[
  <Image key="logo" src="..."/>
]}</View>

Another idea is to have some sort of AssetRegistry, similar to the Font and then we have the assets already loaded.

Assets.register({
  key: "logo",
  source: "https://w....."
});

<View
  render={({pageNumber, assets}) => {
    return pageNumber > 0 ? <Image src={assets.logo}/> : <View/>;
  }}
/>

I would love to hear your opinion on these ideas.

Same issue on #1587 #1630

[santialbo]

Hi @diegomura, I'm sorry to ping you on this again. I'm willing to try to work on a solution for this but I would like to hear your opinion before I start. I digged a little bit deeper on the deps alternative and I think it's a bit more tricky than I thought because of the ReactElement <-> node conversion. I think the Assets Registry option is more feasible. What do you think?