i’ve the subsequent concern rendering some website utilizing webview:
However that is the end result from any chrome product and is what i would like:
A tried a whole lot of issues:
- Downgrading and upgrading webview
- headers
- activate/desactivate acceleation password
- activa js, dom
- deleting cache, and many others
My display code:
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';
const Main_Screen = () => {
return (
);
};
export default Main_Screen;
- How i can get the identical end result for any product?
Even, webview will not be loading correctly accent-color for checkbox choice
That is the code of my website:
Modal B Sheet
Backside Sheet Modal
Create a backside sheet modal that features equally to Truth
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.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Urbanist", sans-serif;
}
physique {
show: flex;
align-items: heart;
justify-content: heart;
min-height: 100vh;
background: #e3f2fd;
}
.gc-core-bottom-sheet {
place: fastened;
high: 0;
left: 0;
width: 100%;
top: 100%;
show: flex;
opacity: 0;
pointer-events: none;
flex-direction: column;
justify-content: finish;
align-items: heart;
transition: 0.1s linear;
}
.gc-core-bottom-sheet.present {
opacity: 1;
pointer-events: none;
}
.gc-core-bottom-sheet .gc-core-content-sheet {
background: #fff;
top: 50vh;
max-height: 100vh;
padding: 25px 30px;
width: 100%;
max-width: 1100px;
border-radius: 12px 12px 0 0;
place: relative;
rework: translateY(100%);
transition: 0.3s ease;
}
.gc-core-bottom-sheet.present .gc-core-content-sheet {
rework: translateY(0%);
}
.gc-core-bottom-sheet .gc-core-bottom-sheet-content {
overflow-y: auto;
top: 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 = doc.querySelector(".gc-core-bottom-sheet");
const sheetContent = bottomSheet.querySelector(".gc-core-content-sheet");
let isDragging = false,
startY,
startHeight;
const showBottomSheet = () => {
bottomSheet.classList.add("present");
doc.physique.model.overflowY = "hidden";
updateSheetHeight(140); /* altura inicial */
};
const updateSheetHeight = (top) => {
sheetContent.model.top = `${top}px`;
bottomSheet.classList.toggle(top === 100); /* para redondear bordes en full display */
};
const hideBottomSheet = () => {
// bottomSheet.classList.take away("present");
doc.physique.model.overflowY = "auto";
};
const dragStart = (e) => e.touches?.[0].pageY;
startHeight = parseInt(sheetContent.model.top);
bottomSheet.classList.add("dragging");
;
const dragging = (e) => e.touches?.[0].pageY);
const newHeight =
startHeight + (delta / window.innerHeight) * 100; /* sensibilidad */
updateSheetHeight(newHeight);
;
const dragStop = () => {
isDragging = false;
bottomSheet.classList.take away("dragging");
const sheetHeight = parseInt(sheetContent.model.top);
sheetHeight < 55
? hideBottomSheet()
: sheetHeight > 15
? updateSheetHeight(100) /* al arrastrar hacia arriba */
: updateSheetHeight(20); /* al arrastrar hacia abajo */
};
showBottomSheet();