search

react-native-webview / react-native-webview

React Native Cross-Platform WebView
https://github.com/react-native-community/discussions-and-proposals/pull/3
MIT License
6.31k stars 2.96k forks source link

modal display shrinked in ios with react-native-webview #3413

Open oldschoolstarsman opened 2 months ago

oldschoolstarsman commented 2 months ago

Using react-native-webview library I am encountering different behaviour on android and ios in regards to how a modal that contains input field that opened will be displayed.

The issue occurs when focusing on input field, as expected the keyboard opens but on ios the modal get squashed whereas on android the content is displaying fine.

See screenshot below:
[android ios] webview modal

I wonder if there is a particular trick to adjust ios behaviour in this case?

We have such requirement to display some pages written in React.js (that we control) in the app via web-view and so I have access to source code for this modal on the web which looks something like:

.modal { border-radius: 8px; left: 50%; max-height: 100%; position: fixed; top: 50%; transform: translate(-50%,-50%); width: calc(100% - 40px); z-index: 995; }

Environment: OS: ios, any version "react-native-webview": "13.2.2", "react-native": "0.72.6",

I am a bit clueless where to look honestly. Looked up similar issues on stackoverflow and the library github repo but no luck.

I could inspect the same page on ios simulator on safari web inspector and play with properties but issue is not present view on safari

thinh1991999 commented 4 weeks ago

Do you know how to resolve this issue yet?

oldschoolstarsman commented 4 weeks ago

Do you know how to resolve this issue yet?

Nope 😞