React-native-render-html: Invariant Violation: [6749,"RCTImageView",{"width":0,"height":"<<NaN>>"}] is not usable as a native method argument

[softmastx]

Bug Report

Invariant Violation: [6749,"RCTImageView",{"width":0,"height":"<>"}] is not usable as a native method argument

This error is located at:
in RCTImageView (at Image.ios.js:127)
in Image (at HTMLImage.js:107)
in HTMLImage (at HTMLRenderers.js:65)
in RCTView (at HTML.js:487)
in RCTView (at HTML.js:519)
in HTML (at WordPressPostDetailScreen.js:140)
in RCTScrollContentView (at ScrollView.js:1063)
in RCTScrollView (at ScrollView.js:1196)
in ScrollView (at WordPressPostDetailScreen.js:139)
in RCTView (at WordPressPostDetailScreen.js:131)
in RCTView (at VirtualizedList.js:2058)
in CellRenderer (at VirtualizedList.js:851)
in RCTScrollContentView (at ScrollView.js:1063)
in RCTScrollView (at ScrollView.js:1196)
in ScrollView (at VirtualizedList.js:1280)
in VirtualizedList (at FlatList.js:633)
in FlatList (at WordPressPostDetailScreen.js:202)
in RCTView (at WordPressPostDetailScreen.js:168)
in Screen (at ComponentWrapper.js:34)
in WrappedComponent (at renderApplication.js:45)
in RCTView (at AppContainer.js:109)
in RCTView (at AppContainer.js:135)
in AppContainer (at renderApplication.js:39)

invariant
index.bundle?platform=ios&dev=true&minify=false:5948:25
enqueueNativeCall
index.bundle?platform=ios&dev=true&minify=false:6715:19
nonPromiseMethodWrapper
index.bundle?platform=ios&dev=true&minify=false:6329:41
commitUpdate
index.bundle?platform=ios&dev=true&minify=false:16994:58
commitWork
index.bundle?platform=ios&dev=true&minify=false:27133:30
commitMutationEffects
index.bundle?platform=ios&dev=true&minify=false:28890:26
invokeGuardedCallbackImpl
index.bundle?platform=ios&dev=true&minify=false:14468:20
invokeGuardedCallback
index.bundle?platform=ios&dev=true&minify=false:14562:41
commitRootImpl
index.bundle?platform=ios&dev=true&minify=false:28677:35
commitRootImpl
[native code]:0
unstable_runWithPriority
index.bundle?platform=ios&dev=true&minify=false:48692:29
commitRoot
index.bundle?platform=ios&dev=true&minify=false:28588:23
finishSyncRender
index.bundle?platform=ios&dev=true&minify=false:28134:18
performSyncWorkOnRoot
index.bundle?platform=ios&dev=true&minify=false:28117:30
performSyncWorkOnRoot
[native code]:0

index.bundle?platform=ios&dev=true&minify=false:18032:37
unstable_runWithPriority
index.bundle?platform=ios&dev=true&minify=false:48692:29
flushSyncCallbackQueueImpl
index.bundle?platform=ios&dev=true&minify=false:18027:27
flushSyncCallbackQueue
index.bundle?platform=ios&dev=true&minify=false:18016:34
scheduleUpdateOnFiber
index.bundle?platform=ios&dev=true&minify=false:27675:36
enqueueSetState
index.bundle?platform=ios&dev=true&minify=false:19532:22

index.bundle?platform=ios&dev=true&minify=false:3072:36

index.bundle?platform=ios&dev=true&minify=false:144884:43
tryCallOne
index.bundle?platform=ios&dev=true&minify=false:7349:15

index.bundle?platform=ios&dev=true&minify=false:7450:26
_callTimer
index.bundle?platform=ios&dev=true&minify=false:33570:16
_callImmediatesPass
index.bundle?platform=ios&dev=true&minify=false:33606:18
callImmediates
index.bundle?platform=ios&dev=true&minify=false:33824:32
callImmediates
[native code]:0
__callImmediates
index.bundle?platform=ios&dev=true&minify=false:6785:34

index.bundle?platform=ios&dev=true&minify=false:6571:33
__guard
index.bundle?platform=ios&dev=true&minify=false:6768:14
flushedQueue
index.bundle?platform=ios&dev=true&minify=false:6570:20
flushedQueue
[native code]:0
invokeCallbackAndReturnFlushedQueue
[native code]:0

Setup

import {
Text,
View,
FlatList,
TouchableOpacity,
StyleSheet,
ScrollView,
Dimensions,
} from 'react-native';
import HTML from 'react-native-render-html';

const htmlCode = <p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>

<figure class="wp-block-image size-large"><img src="https://www.mywordpress.com/wp-content/uploads/2020/07/98111969_3177336948992061_738269793070074191_o-1024x1024.jpg" alt="" class="wp-image-21" srcset="https://www.mywordpress.com/wp-content/uploads/2020/07/98111969_3177336948992061_738269793070074191_o-1024x1024.jpg 1024w, https://www.mywordpress.com/wp-content/uploads/2020/07/98111969_3177336948992061_738269793070074191_o-300x300.jpg 300w, https://www.mywordpress.com/wp-content/uploads/2020/07/98111969_3177336948992061_738269793070074191_o-150x150.jpg 150w, https://www.mywordpress.com/wp-content/uploads/2020/07/98111969_3177336948992061_738269793070074191_o-768x768.jpg 768w, https://www.mywordpress.com/wp-content/uploads/2020/07/98111969_3177336948992061_738269793070074191_o-1536x1536.jpg 1536w, https://www.mywordpress.com/wp-content/uploads/2020/07/98111969_3177336948992061_738269793070074191_o-1200x1200.jpg 1200w, https://www.mywordpress.com/wp-content/uploads/2020/07/98111969_3177336948992061_738269793070074191_o.jpg 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p></p>

// Please note that the htmlCode taken from WordPress REST API.

html={htmlCode}
imagesMaxWidth={Dimensions.get('window').width}
/>

React Native

System:
OS: macOS 10.15.4
CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Memory: 68.01 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.12.0 - /usr/local/bin/node
Yarn: Not Found
npm: 6.13.7 - /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.9.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK:
API Levels: 23, 25, 26, 27, 28
Build Tools: 23.0.1, 23.0.2, 25.0.0, 25.0.1, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.3
System Images: android-23 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 3.4 AI-183.5429.30.34.5452501
Xcode: 11.5/11E608c - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_111 - /usr/bin/javac
Python: 2.7.17 - /usr/local/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.11.0 => 16.11.0
react-native: 0.62.2 => 0.62.2
npmGlobalPackages:
react-native: Not Found

Libraries

"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@react-native-community/async-storage": "^1.11.0",
"@react-native-community/datetimepicker": "^2.1.0",
"base64-js": "^1.3.1",
"buffer": "^5.4.3",
"html-entities": "^1.3.1",
"moment": "^2.24.0",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-base64": "0.0.2",
"react-native-fast-image": "^7.0.2",
"react-native-fbsdk": "^1.1.1",
"react-native-fs": "^2.16.2",
"react-native-highlight-words": "github:clauderic/react-native-highlight-words",
"react-native-navigation": "^6.7.2",
"react-native-raw-bottom-sheet": "^2.1.0",
"react-native-render-html": "^4.2.2",
"react-native-searchbar": "^1.16.0",
"react-native-swipe-list-view": "^3.1.2",
"react-native-vector-icons": "^6.6.0",
"react-native-video": "^4.4.5",
"react-native-webview": "^8.0.2",
"react-redux": "^7.2.0",
"realm": "^6.0.2",
"redux": "^4.0.5"
},
"devDependencies": {
"@babel/core": "7.10.2",
"@babel/runtime": "7.10.2",
"@react-native-community/eslint-config": "0.0.5",
"babel-jest": "24.9.0",
"eslint": "6.8.0",
"jest": "24.9.0",
"metro-react-native-babel-preset": "0.58.0",
"react-test-renderer": "16.11.0"
},
"jest": {
"preset": "react-native"
}

• react-native-render-html:
• react-native-webview:

Devices

iOS Simulator version 11.5

Reproduction

Try to load html from wordpress which have image tag.

Description

The error occurs every html pages have image tag

[jsamr]

@softmastx This issue is impossible to reproduce because you didn't provide enough information. Can you at least give the <img> HTML excerpt which is causing this error?

[softmastx]

@softmastx This issue is impossible to reproduce because you didn't provide enough information. Can you _at least_ give the <img> HTML excerpt which is causing this error?

I've updated the html from WordPress.

[jsamr]

@softmastx OK thank you, I'll take a look very soon. BTW, your message will be easier to read if you use markdown formatting!

[softmastx]

@softmastx OK thank you, I'll take a look very soon. BTW, your message will be easier to read if you use markdown formatting!

@jsamr Thanks for your prompt reply and looking forward for the fix.
Apology for the messey. I'm quite new for using markdown format!

Thanks again.

[jsamr]

@softmastx You can try to put your html into a web browser and you'll notice the image is not displayed. This is because the domain you're trying to access has a TLS misconfiguration, and the error SEC_ERROR_EXPIRED_CERTIFICATE is raised. I agree that we should handle this failure gracefully though. I am closing, but I am adding a note for the next major to this concern.

[jsamr]

@softmastx You can try my reproduction here: https://snack.expo.io/@jsamr/rnrhtml-392 and use the "web" renderer (panel on the right).

[softmastx]

@softmastx You can try my reproduction here: https://snack.expo.io/@jsamr/rnrhtml-392 and use the "web" renderer (panel on the right).

@jsamr The link rendering is working fine on the component and turn out that the problem was on WordPress side!

It was the .htaccess not allow unauthorised requests for images! Possibly, It was redirected to WordPress login page which is not correct image format so, setting back to public works as expected.

Wondering if I could send an authorization header (Bearer 1234...) with the component?

[jsamr]

@softmastx Custom headers for image components is a fair feature request! Currently, there is a massive revamp of the image component in the workshop, see #389, but the focus has been consistent scaling behavior. In the meantime, you can use a custom renderer for img tags, and set the headers via source prop. But I think it is an important feature and I'll consider it for next major release.

The source prop definition is a bit hidden ; it has the following typescript definition (from @types/react-native)

export interface ImageURISource {
    /**
     * `uri` is a string representing the resource identifier for the image, which
     * could be an http address, a local file path, or the name of a static image
     * resource (which should be wrapped in the `require('./path/to/image.png')`
     * function).
     */
    uri?: string;
    /**
     * `bundle` is the iOS asset bundle which the image is included in. This
     * will default to [NSBundle mainBundle] if not set.
     * @platform ios
     */
    bundle?: string;
    /**
     * `method` is the HTTP Method to use. Defaults to GET if not specified.
     */
    method?: string;
    /**
     * `headers` is an object representing the HTTP headers to send along with the
     * request for a remote image.
     */
    headers?: { [key: string]: string };
    /**
     * `cache` determines how the requests handles potentially cached
     * responses.
     *
     * - `default`: Use the native platforms default strategy. `useProtocolCachePolicy` on iOS.
     *
     * - `reload`: The data for the URL will be loaded from the originating source.
     * No existing cache data should be used to satisfy a URL load request.
     *
     * - `force-cache`: The existing cached data will be used to satisfy the request,
     * regardless of its age or expiration date. If there is no existing data in the cache
     * corresponding the request, the data is loaded from the originating source.
     *
     * - `only-if-cached`: The existing cache data will be used to satisfy a request, regardless of
     * its age or expiration date. If there is no existing data in the cache corresponding
     * to a URL load request, no attempt is made to load the data from the originating source,
     * and the load is considered to have failed.
     *
     * @platform ios
     */
    cache?: 'default' | 'reload' | 'force-cache' | 'only-if-cached';
    /**
     * `body` is the HTTP body to send with the request. This must be a valid
     * UTF-8 string, and will be sent exactly as specified, with no
     * additional encoding (e.g. URL-escaping or base64) applied.
     */
    body?: string;
    /**
     * `width` and `height` can be specified if known at build time, in which case
     * these will be used to set the default `<Image/>` component dimensions.
     */
    width?: number;
    height?: number;
    /**
     * `scale` is used to indicate the scale factor of the image. Defaults to 1.0 if
     * unspecified, meaning that one image pixel equates to one display point / DIP.
     */
    scale?: number;
}

[softmastx]

That's cool! Thanks for help.