i have the next issue rendering some site using webview:
But this is the result from any chrome product and is what i want:
A tried a lot of things:
- Downgrading and upgrading webview
- headers
- activate/desactivate acceleation password
- activa js, dom
- deleting cache, etc
My screen code:
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';
const Main_Screen = () => {
return (
<WebView
source={{ uri: '' }}
injectedJavaScriptBeforeContentLoaded={`document.documentElement.style.height = "100%";`}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={true}
/>
);
};
export default Main_Screen;
Quetion
- How i can get the same result for any product?
Even, webview is not loading properly accent-color for checkbox selection
This is the code of my site:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modal B Sheet</title>
<link
href="https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./src/styles/bscore_style.css" />
<script src="./src/js/bscore_script.js" type="module"></script>
</head>
<body>
<div class="gc-core-bottom-sheet">
<!-- <div class="sheet-overlay"></div> -->
<div class="gc-core-content-sheet">
<div class="gc-core-sheet-content">
<h2>Bottom Sheet Modal</h2>
<p>Create a bottom sheet modal that functions similarly to Fact</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae ipsum
quidem quam sed nisi autem, ratione repudiandae magnam. Itaque
sapiente doloremque qui quam? Vitae fugiat, unde hic illum labore
architecto.
</p>
</div>
</div>
</div>
<script src="./src/js/bscore_script.js" defer></script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Urbanist", sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #e3f2fd;
}
.gc-core-bottom-sheet {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
opacity: 0;
pointer-events: none;
flex-direction: column;
justify-content: end;
align-items: center;
transition: 0.1s linear;
}
.gc-core-bottom-sheet.show {
opacity: 1;
pointer-events: none;
}
.gc-core-bottom-sheet .gc-core-content-sheet {
background: #fff;
height: 50vh;
max-height: 100vh;
padding: 25px 30px;
width: 100%;
max-width: 1100px;
border-radius: 12px 12px 0 0;
position: relative;
transform: translateY(100%);
transition: 0.3s ease;
}
.gc-core-bottom-sheet.show .gc-core-content-sheet {
transform: translateY(0%);
}
.gc-core-bottom-sheet .gc-core-bottom-sheet-content {
overflow-y: auto;
height: 100%;
padding: 15px 0 40px;
scrollbar-width: none;
}
.gc-core-bottom-sheet .gc-core-bottom-sheet-content::-webkit-scrollbar {
width: 0;
}
.gc-core-bottom-sheet .gc-core-bottom-sheet-content h2 {
font-size: 1.8rem;
}
.gc-core-bottom-sheet .gc-core-bottom-sheet-content p {
font-size: 1.05rem;
margin-top: 20px;
}
const bottomSheet = document.querySelector(".gc-core-bottom-sheet");
const sheetContent = bottomSheet.querySelector(".gc-core-content-sheet");
let isDragging = false,
startY,
startHeight;
const showBottomSheet = () => {
bottomSheet.classList.add("show");
document.body.style.overflowY = "hidden";
updateSheetHeight(140); /* altura inicial */
};
const updateSheetHeight = (height) => {
sheetContent.style.height = `${height}px`;
bottomSheet.classList.toggle(height === 100); /* para redondear bordes en full screen */
};
const hideBottomSheet = () => {
// bottomSheet.classList.remove("show");
document.body.style.overflowY = "auto";
};
const dragStart = (e) => {
isDragging = true;
startY = e.pageY || e.touches?.[0].pageY;
startHeight = parseInt(sheetContent.style.height);
bottomSheet.classList.add("dragging");
};
const dragging = (e) => {
if (!isDragging) return;
const delta = startY - (e.pageY || e.touches?.[0].pageY);
const newHeight =
startHeight + (delta / window.innerHeight) * 100; /* sensibilidad */
updateSheetHeight(newHeight);
};
const dragStop = () => {
isDragging = false;
bottomSheet.classList.remove("dragging");
const sheetHeight = parseInt(sheetContent.style.height);
sheetHeight < 55
? hideBottomSheet()
: sheetHeight > 15
? updateSheetHeight(100) /* al arrastrar hacia arriba */
: updateSheetHeight(20); /* al arrastrar hacia abajo */
};
showBottomSheet();
