Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Render prop method on View does not work for Images #1369

Open
Abhir16 opened this issue Jun 11, 2021 · 3 comments · May be fixed by #2474
Open

Render prop method on View does not work for Images #1369

Abhir16 opened this issue Jun 11, 2021 · 3 comments · May be fixed by #2474

Comments

@Abhir16
Copy link

Abhir16 commented Jun 11, 2021

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
Copy link
Owner

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
Copy link

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
Copy link

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?

tigerza117 added a commit to tigerza117/react-pdf that referenced this issue Jul 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants