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

Bug Report

Invariant Violation: [6749,“RCTImageView”,{“width”:0,“height”:“<<NaN>>”}] 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 <unknown> 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 <unknown> index.bundle?platform=ios&dev=true&minify=false:3072:36 <unknown> index.bundle?platform=ios&dev=true&minify=false:144884:43 tryCallOne index.bundle?platform=ios&dev=true&minify=false:7349:15 <unknown> 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 <unknown> 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.

<ScrollView style={{flex: 1}}> <HTML html={htmlCode} imagesMaxWidth={Dimensions.get(‘window’).width} /> </ScrollView>

React Native

System: OS: macOS 10.15.4 CPU: (4) x64 Intel® Core™ 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 You can try my reproduction here: https://snack.expo.io/@jsamr/rnrhtml-392 and use the “web” renderer (panel on the right).

[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.