Android not showing images first time around

[robbertrosario]

Decision Table

• My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
• My issue does not look like “The HTML element <yyy> is not rendered”

Good Faith Declaration

• I have read the HELP document here: https://git.io/JBi6R
• I have read the CONTRIBUTING document here: https://git.io/JJ0Pg
• I have confirmed that this bug has not been reported yet

Description

I am working on a app where the images are behind authentication, using provideEmbeddedHeaders I am able to insert a bearer token and partly have this working on iOS however on Android no images are showing up first time around, when I come back to the screen with the images then they are there. I have been stuck on this for the past 2 days.

Is this a known issue? I've searched for the answer but couldn't find it.

My application is also facing the same bug as pointed out in this issue: #580 it keeps rerendering when the images fail to load.

React Native Information

expo-env-info 1.0.5 environment info:
    System:
      OS: macOS 13.0.1
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
      Yarn: 1.22.17 - /usr/local/bin/yarn
      npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
      Watchman: 2022.08.22.00 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
    IDEs:
      Android Studio: 4.1 AI-201.8743.12.41.6953283
      Xcode: 14.1/14B47b - /usr/bin/xcodebuild
    npmGlobalPackages:
      eas-cli: 2.9.0
      expo-cli: 6.0.5
    Expo Workflow: managed

RNRH Version

6.3.3

Tested Platforms

• Android
• iOS
• Web
• MacOS
• Windows

Reproduction Platforms

• Android
• iOS
• Web
• MacOS
• Windows

Minimal, Reproducible Example

Additional Notes

No response

[robbertrosario]

I still haven't been able to resolve this, here is an example of what I mean:

const [token, saveToken] = useState<string | null>(null);

const provideEmbeddedHeaders = (uri: string, tagName: string) => {
    if (tagName === 'img') {
      return {
        Authorization: `Bearer ${token}`,
      };
    }
};

The token state is fetched upon component render (useEffect) but provideEmbeddedHeaders has been rendered before this and does not rerender on state change. Seems like a pretty common use case to me, but the docs only show an example with a hardcoded authorization header: https://meliorence.github.io/react-native-render-html/api/renderhtmlconfig#provideembeddedheaders

Which I think is not the case most of the time, help would be appreciated.

[4mit]

Image not rendering its showing only a Box

However image link is accessible if i paste in browser addressbar

const renderersProps = {
    img: {
      enableExperimentalPercentWidth: true,
      initialDimensions:{
        height: 500,
        width: 500
      }
    }
  };

<RenderHtml
    source={htmltorender}
    contentWidth={500}
    tagsStyles={tagsStyles}
    classesStyles={classesStyles}
    renderersProps={renderersProps}
  />

[4mit]

any update here ?

[4mit]

@jsamr