I use React Native 0.63 on Android with TypeScript, no expo and, worth mentionning, react-native-orientation-locker.
I made an Embed component like this:
const Embed: FC<Props> = ({ embed }: Props) => {
const { width, height } = useDimensions().window
console.log(`WIDTH = ${width}`)
// Return 411
const getSource = (embedCodeOrURI: string): (WebViewSourceUri & string) | (WebViewSourceHtml & string) => {
if (embed.startsWith('http')) {
console.log(`DEBUG > Embed > returned { uri: ${embed}}`)
return { uri: embedCodeOrURI } as WebViewSourceUri & string
}
console.log(`DEBUG > Embed > returned { html: ${embed}}`)
// If I use the test content, I still need to specify the height in the style prop but the width adjust correctly
const test =
'<div style="background-color:red"><p style="font-size:32pt">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p></div>'
// Using the wrapper or not has zero impact on the bug
const withWrapper = `
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="baseDiv" style={max-width: 100%;max-height: 100%}>${embedCodeOrURI}</div>
</body>
</html>
`
const html = withWrapper
return { html } as WebViewSourceHtml & string
}
if (!embed) {
console.log(`ERROR > Embed > embed = ${embed}`)
return null
}
return (
<WebView
originWhitelist={['*']}
source={getSource(embed)}
scalesPageToFit={true}
containerStyle={{ backgroundColor: 'blue', height: 800 }}
allowsFullscreenVideo={true}
onError={(syntheticEvent): void => {
const { nativeEvent } = syntheticEvent
console.warn('ERROR > Embed > WebView error: ', nativeEvent)
}}
onHttpError={(syntheticEvent): void => {
const { nativeEvent } = syntheticEvent
console.warn('ERROR > Embed > WebView http error: ', nativeEvent.statusCode)
}}
onRenderProcessGone={(syntheticEvent): void => {
const { nativeEvent } = syntheticEvent
console.warn('WebView Crashed: ', nativeEvent.didCrash)
}}
onContentProcessDidTerminate={(syntheticEvent): void => {
const { nativeEvent } = syntheticEvent
console.warn('ERROR > Embed > Content process terminated: ', nativeEvent)
}}
startInLoadingState={true}
renderLoading={(): ReactElement => <ActivityIndicator />}
/>
)
}
export default Embed
First strange thing, the Twitter or Instagram embeds I tested displays in 411 width:
Second strange thing, If I use useDimensions().window.width (=411) as a the containerStyle width, this does no change.
...But if I add width=600, the view scale.
Third stange thing, the test html does displays full width if I don't specify a width.
...and will scale out of the screen if I specify 600:
Forth strange thing, if I do not add a height in the container view, the html content don't displays at all.
I solved the issue of the different scales by adding this in the head:
I still need to specify a height so I currently adjust this manually for each post in the database.