meliorence / react-native-render-html

iOS/Android pure javascript react-native component that renders your HTML into 100% native views
https://meliorence.github.io/react-native-render-html/
BSD 2-Clause "Simplified" License
3.48k stars 589 forks source link

does "contentWidth" not working when set contentWidth = width* 0.6 #569

Closed fukemy closed 2 years ago

fukemy commented 2 years ago

Decision Table

Good Faith Declaration

Description

I have set contentWidth = width*0.6 to ensure the width of html, but not working

React Native Information

OS: macOS 12.4
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Memory: 181.20 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 18.3.0 - /usr/local/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 8.11.0 - /usr/local/bin/npm
    Watchman: 2022.06.06.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /Users/thehe/.rvm/gems/ruby-2.7.4/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
    Xcode: 13.4/13F17a - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.14.1 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: ^0.68.0 => 0.68.1 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

RNRH Version

6.3.4

Tested Platforms

Reproduction Platforms

Minimal, Reproducible Example


export function ChatHtml(props) {
    const { theme } = useContext(ThemeContext)
    const { width } = useWindowDimensions();
    const position = props.position ?? 'left'
    console.log('width' , width,  props.width)
    return (
        <View
            style={{
                ...style[position].container,
                backgroundColor: position === 'left' ? theme.leftChatBubbleBg : theme.rightChatBubbleBg
            }}>
            <RenderHtml
                contentWidth={width*0.6}
                source={{html: props.currentMessage.html}}
            />
        </View>
    )
}

Additional Notes

Screen Shot 2022-06-10 at 15 28 15

Here is image

fukemy commented 2 years ago

im. sorry, it's my fault, i need to set parent container width

kkkasio commented 2 years ago

im. sorry, it's my fault, i need to set parent container width

can you show a solution? just add a width on the parent element?

I have same problem ;xx

image

fukemy commented 2 years ago

I just set maxWidth to parentview