Image horizontal margin is ignored due to typos

[Yupeng-li]

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

We noticed that setting horizontal margin on img doesn't take effect. Then found that there are typos in extractHorizontalSpace function, calling marginLeft as leftMargin and marginRight as rightMargin.
The function gets the margin from flatten styles. Because the names are wrong, the values are always undefined.

See the source code

The patch below seems to work.

diff --git a/node_modules/react-native-render-html/src/elements/useImageConcreteDimensions.ts b/node_modules/react-native-render-html/src/elements/useImageConcreteDimensions.ts
index 75ea596..0768708 100644
--- a/node_modules/react-native-render-html/src/elements/useImageConcreteDimensions.ts
+++ b/node_modules/react-native-render-html/src/elements/useImageConcreteDimensions.ts
@@ -14,12 +14,12 @@ export type ConcreteDimensionsProps = {

 function extractHorizontalSpace({
   marginHorizontal,
-  leftMargin,
-  rightMargin,
+  marginLeft,
+  marginRight,
   margin
 }: any) {
-  const realLeftMargin = leftMargin || marginHorizontal || margin || 0;
-  const realRightMargin = rightMargin || marginHorizontal || margin || 0;
+  const realLeftMargin = marginLeft || marginHorizontal || margin || 0;
+  const realRightMargin = marginRight || marginHorizontal || margin || 0;
   return realLeftMargin + realRightMargin;
 }

React Native Information

System:
  OS: macOS 15.7
  CPU: (10) arm64 Apple M1 Pro
  Memory: 100.20 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.18.0
    path: /var/folders/31/s483lg7x2xq7sk90ftb_ks040000gn/T/yarn--1759482558667-0.3589070447406908/node
  Yarn:
    version: 1.22.22
    path: /var/folders/31/s483lg7x2xq7sk90ftb_ks040000gn/T/yarn--1759482558667-0.3589070447406908/yarn
  npm:
    version: 10.9.3
    path: ~/.volta/tools/image/node/22.18.0/bin/npm
  Watchman:
    version: 2025.05.26.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.5
      - iOS 18.5
      - macOS 15.5
      - tvOS 18.5
      - visionOS 2.5
      - watchOS 11.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2025.1 AI-251.26094.121.2513.14007798
  Xcode:
    version: 16.4/16F6
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.16
    path: /Users/yupeng/.sdkman/candidates/java/17.0.16-zulu/bin/javac
  Ruby:
    version: 3.4.5
    path: /Users/yupeng/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 18.0.0
    wanted: 18.0.0
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.79.6
    wanted: 0.79.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: true
  newArchEnabled: false

RNRH Version

"react-native-render-html@6.3.4"

Tested Platforms

• Android
• iOS
• Web
• MacOS
• Windows

Reproduction Platforms

• Android
• iOS
• Web
• MacOS
• Windows

Minimal, Reproducible Example

N/A

Additional Notes

No response