I’m developing a React Native application where I’m using WebView to display a webpage. However, I’m encountering an issue specifically on devices running Android SDK lower than 30 (API 29 and below).
When I load my website page in the WebView, some buttons and div behaviors (such as collapsible divs and menus) don’t seem to respond at all to user interaction. If I open the same website on the device/emulator browser, the behavior is as expected.
At first I thought it was related to the Expo SDK that I was using (SDK 50), but apparently it was not. I created a react native application without Expo and the behavior persisted. Also changed configs in build.gradle (like targetSdkVersion
) but it didn’t work. After failing to find a solution, I tried to create an app using Flutter to see if the same thing would happen, and it did.
To illustrate the problem I used Slack’s homepage, which also replicates my problem. When I click the menu icon on the upper right corner, nothing happens. If I use Android API 30 or above, the menu appears.
My code:
<WebView
ref={webref}
//androidLayerType={'hardware'}
//mixedContentMode="compatibility"
style={$container}
source={{ uri: "https://www.slack.com" }}
/*source={{
uri: `${getAddress}`,
headers: {
Authorization: `Bearer ${getToken}`,
},
}}*/
onError={(error) => console.error(error)}
onHttpError={(error) => console.error(error)}
onOpenWindow={(event) => console.log(event)}
javaScriptCanOpenWindowsAutomatically={true}
domStorageEnabled={true}
javaScriptEnabled={true}
//userAgent={`webview-${Platform.OS === "ios" ? "ios" : "android"}`}
/*originWhitelist={['http://*']}
contentMode={"mobile"}
sharedCookiesEnabled={true}
allowsLinkPreview={true}
allowFileAccess={true}*/
/>
Behavior: Expected:
Any help or suggestions on how to resolve this issue would be greatly appreciated. Thank you!