I m using a Webview for rendering some content to a view, to calculate the height of the content I m using a script to get the height of the content, the span tag contains the content.
<html id="htmlContent">
<body>
<span>
...
//content
...
</span>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.title = document.getElementById('htmlContent').offsetHeight;
window.location.hash = 1;
});
</script>
</body>
</html>
And here is the webview component :
const commonHtmlStyle= `font-weight:300; font-family:sans-serif; font-size: 18px; color:rgb(136,136,136); backgroundColor:rgba(0,0,0,0);`;
<WebView style={{ height: this.state.height }}
ref={(ref) => { this.webview = ref; }}
automaticallyAdjustContentInsets={true}
scrollEnabled={false}
javaScriptEnabled={true}
source={{ html: voca.sprintf(commonHtml, commonHtmlStyle, this.state.content) }}
onNavigationStateChange={this.setState({
height: parseInt(navState.title)
})}
/>
So results,
i m seeing blank spaces while running in Android (script returns appox double the height)
and clipped content on iOS (returns height less than the content height).
I tried using other autoHeight webview components like (react-native-webview-autoheight) but still shows nearly same results for both iOS and Android.
I m trying wrap my head around this issue but but not able to solve this any how. Any help would be appreciated.
Related
It's a really complex situation. I have a parent div which contains video tag wrapped in another div.
Parent div can keep on changing is aspect ratio. Like it can sometime act as portrait div and sometimes as landscape div.
Now I have to find out what styling (height:100% or width: 100%} i can apply to the video tag (which will be wrapped around another div for a specific reason) so that it work as the video is contained in the parent div (do not get cropped)
(I know object-fit. property exists that can do that) but i there is a catch, If i use that than i don't get the actual box of the video that is playing. I also get the black stripes. I want to keep a label inside the video that is playing (which is why im wrapping video tag in another div which contains that label and that label is positioned as absolute)
Now this is working and i run this on every layout change (there are multiple boxes) but it glitches and is not that good. So i was looking if anyone else has a better idea.
** Basically what i want to do is show a video inside a varying container and i want to show a label inside the video that is playing and also keeps the video from getting cropped. **
const handleCrop = (_crop, _index, _data) => {
if (!videoContainerRef?.current) return;
if (!stream?.getTracks()[data.streamType === 'screen' ? 0 : 1]?.getSettings()) return;
let videoRatio = stream
.getTracks()
[data.streamType === 'screen' ? 0 : 1].getSettings().aspectRatio;
videoRatio = parseFloat(videoRatio).toFixed(2);
const { height: containerHeight, width: containerWidth } =
videoContainerRef.current.getBoundingClientRect();
const containerRatio = parseFloat(containerWidth / containerHeight).toFixed(2);
if (_crop >= 0.5) {
if (containerRatio > videoRatio) setCroppingStyle({ width: '100%' });
else setCroppingStyle({ height: '100%' });
} else {
if (containerRatio >= videoRatio) {
setCroppingStyle({ height: '100%' });
} else setCroppingStyle({ width: '100%' });
}
};
<div
ref={videoContainerRef}
className={
'position-relative full-width full-height d-flex align-item-center justify-content-center participant-video-wrapper'
}
style={{ backgroundColor: borderColor }}>
<div
id={`participant-${index}-video-container-id`}
className={`position-absolute d-flex align-item-center justify-content-center ${
!data?.video || data?.selfMute?.video ? 'full-height full-width' : ''
}`}
style={croppingStyle}
>
<ParticipantLabel
index={index}
data={data}
label={label}
labelStyle={labelStyle}
layout={layout}
participant={participant}
ratio={ratio}
showLabel={showLabel}
handleSpotlight={handleSpotlight}
/>
<video
id={`participant-video-${index}`}
ref={videoRef}
className={` ${
userId === data.id && data.streamType === 'camera' && setting?.video?.mirrored
? 'invert-x'
: ''
}`}
style={{ ...croppingStyle, objectFit: 'cover' }}
muted={true}
controls={false}
autoPlay={true}
>
Your browser does not support HTML video.
<audio
id={`participant-audio-${index}`}
className={'invisible'}
ref={audioRef}
autoPlay={true}
/>
</video>
{noImage}
</div>
</div>
I have html file with scripts, I need to display it in React native screen so I used react-native-webview, it is working fine in ios debug build but not working in ios production build getting blank screen
This is my html page
<html >
<meta name="viewport" content="width=device-width, initial-scale=1" />
<body onload="loader();">
<script>
window.fwSettings = {
'widget_id': 7300********
};
!function () {
if ("function" != typeof window.FreshworksWidget)
{
var n = function () {
n.q.push(arguments)
};
n.q = [],
window.FreshworksWidget = n } }()
</script>
<script type='text/javascript'
src='https://widget.freshworks.com/widgets/7*********.js' async defer></script>
<script>
function loader() {
FreshworksWidget('hide', 'launcher');
FreshworksWidget('open');
};
</script>
</body>
</html>
I placed this html page in Webview like this
<WebView
source={kbHTML}
javaScriptEnabled={true}
domStorageEnabled={true}
originWhitelist={['*']}
scalesPageToFit={false}
startInLoadingState={true}
automaticallyAdjustContentInsets={false}
containerStyle={{
flex: 1,
width: '100%',
height: '100%'
}}
style={{
flex: 1,
height: height,
width: width,
resizeMode: 'cover',
}}
/>
its working fine in ios debug mode but not working in ios production build.getting blank screen.
react-native-webview: "^11.18.1",
react-native: "0.64.2"
I am currently rendering the HTML content in Webview. That HTML content hosted in cloud and loading in Webview using the html link. Here, I need to add the below checkbox tags in that content while dynamically rendering or I need to show the checkbox on bottom of the page.
<div>
<input type="checkbox" id="agreement_id" name="agreement" value="agreement">
<label for="other">I have read and accept the Electronic Communications Agreement consenting to the use of Electronic Records in connection with opening my new deposit credit accounts requested through the Swell mobile app.</label>
</div>
Is any possible to add programmatically in react native Webview?
I have figured out the answer here: Used injectedJavaScript.
const scripts1 = document.write(
'<div> <input type="checkbox" id="agreement_id" name="agreement" value="agreement"> <label for="other">content</label> </div>',
);
const webviewContent = () => {
return (
<View
style={{
height: windowHeight - heightBottom * 1.5,
marginLeft: 10,
marginRight: 10,
}}>
<WebView
style={{backgroundColor: colors.primaryBackgroundColor}}
originWhitelist={['*']}
source={{
uri: 'https://www.google.com',
}}
injectedJavaScript={scripts1}
/>
</View>
);
};
Using react-particles-js
as a background on a React project, I discover that disables the anchor tag, don't know if its my implementation
const App = () => {
return (
<div className="App" style={{ position: "relative", overflow: "hidden" }}>
<div style={{ position: "absolute" }}>
<Particles height="330vh" width="100vw" params={particlesConfig} />
</div>
<Home /> {/*this is the content */}
</div>
);
};
What it happens its that in this component with link like this
<a
href="https://tienda-de-garage.herokuapp.com/"
style={{ textDecoration: "none", color: "black" }}
>
<p>Tienda de Garage</p>
</a>
Don't work.
I wonder if its the implementation, maybe the use of the view port the increase the size of the area to encompass the background but i'm not sure.
here its a live version, with the 1 link not working to show the issue
You need to set interactivity.detectsOn to window (InteractivityDetect.window or "window")
You can see a working sample here
This sample uses react-tsparticles but it's the same as react-particles-js since they share the same core library tsparticles
I have used a contentEditable div inside a webview for some editor functionality in one of my app. The html code seams to work fine and responding to keyboard show and hide action in my android chrome browser but when i tried the same html code with the webview in react-native it won't responds to the keyboard and content hide behind the keyboard.
I have tried scrolling it to the end of the div and auto increase it's height according to content but nothing works.
import React, { Component } from 'react';
import { View, WebView } from 'react-native';
class webviewEditor extends Component{
render() {
return (
<View style={{flex:1}}>
<WebView
source={{
html: `
< head >
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
<style type="text/css">
html, body {height: 100%;}
body {
margin: 0;
}
#wrap {
height: 100%;
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
#editor {
padding: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="editor" contenteditable="true">
</div>
</div></body>
`}}
ref={web => { this.webview = web }}
style={{ flex: 1 }}
scalesPageToFit={false}
scrollEnabled={false}
javaScriptEnabled={true}
automaticallyAdjustContentInsets={false}
/>
</View>
);
}
}
I expect the result to be the webview will scroll to the above of the keyboard just like in the browser but it won't in the app inside webview.