fix(webview): prevent keyboard from obscuring inputs in webview (#4869)

### Description Previously inputs in the webview could become obscured by the keyboard display. For inputs above where the keyboard would display such as Staked Celo there is no change. #### Impact Market Android Before https://github.com/valora-inc/wallet/assets/26950305/b3b84c67-1270-4851-92f3-1230622aeedf #### Impact Market Android After https://github.com/valora-inc/wallet/assets/26950305/10c7fa02-c6b5-4a97-b257-009cfde45dc8 #### Wallet DM Android Before https://github.com/valora-inc/wallet/assets/26950305/dfc326a8-837b-42f7-abca-8547bd85e11c #### Wallet DM Android After https://github.com/valora-inc/wallet/assets/26950305/84956572-b90f-4362-b3a5-559bc90f707a ### Test plan - Tested locally on iOS - Tested locally on Android ### Related issues N/A ### Backwards compatibility Yes
valora-inc · Feb 9, 2024 · a4ca203 · a4ca203
1 parent c4cd608
commit a4ca203
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 16 deletions.
diff --git a/src/webview/WebViewScreen.test.tsx b/src/webview/WebViewScreen.test.tsx
@@ -37,6 +37,7 @@ describe('WebViewScreen', () => {
     expect(getByTestId('WebViewScreen/GoBack')).toBeDisabled()
     expect(getByTestId('WebViewScreen/GoForward')).toBeDisabled()
     expect(getByTestId('WebViewScreen/OpenBottomSheet')).toBeTruthy()
+    expect(getByTestId('WebViewScreen/KeyboardAwareView')).toBeTruthy()
   })
 
   it('should set the mediaPlaybackRequiresUserAction prop according to the url', () => {

diff --git a/src/webview/WebViewScreen.tsx b/src/webview/WebViewScreen.tsx
@@ -1,7 +1,15 @@
+import { useHeaderHeight } from '@react-navigation/elements'
 import { NativeStackScreenProps } from '@react-navigation/native-stack'
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ActionSheetIOS, ActivityIndicator, Platform, StyleSheet, View } from 'react-native'
+import {
+  ActionSheetIOS,
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  View,
+} from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { ShouldStartLoadRequest } from 'react-native-webview/lib/WebViewTypes'
 import { useDispatch, useSelector } from 'react-redux'
@@ -41,6 +49,7 @@ function WebViewScreen({ route, navigation }: Props) {
 
   const dispatch = useDispatch()
   const { t } = useTranslation()
+  const headerHeight = useHeaderHeight()
   const activeDapp = useSelector(activeDappSelector)
 
   const disabledMediaPlaybackRequiresUserActionOrigins = getDynamicConfigParams(
@@ -195,21 +204,28 @@ function WebViewScreen({ route, navigation }: Props) {
 
   return (
     <SafeAreaView style={styles.container} edges={['bottom']}>
-      <WebView
-        ref={webViewRef}
-        originWhitelist={['https://*', 'celo://*']}
-        onShouldStartLoadWithRequest={handleLoadRequest}
-        source={{ uri }}
-        startInLoadingState={true}
-        renderLoading={() => <ActivityIndicator style={styles.loading} size="large" />}
-        onNavigationStateChange={(navState) => {
-          setCanGoBack(navState.canGoBack)
-          setCanGoForward(navState.canGoForward)
-          handleSetNavigationTitle(navState.url, navState.title, navState.loading)
-        }}
-        mediaPlaybackRequiresUserAction={mediaPlaybackRequiresUserAction}
-        testID={activeDapp ? `WebViewScreen/${activeDapp.name}` : 'RNWebView'}
-      />
+      <KeyboardAvoidingView
+        style={styles.keyboardView}
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        keyboardVerticalOffset={headerHeight}
+        testID="WebViewScreen/KeyboardAwareView"
+      >
+        <WebView
+          ref={webViewRef}
+          originWhitelist={['https://*', 'celo://*']}
+          onShouldStartLoadWithRequest={handleLoadRequest}
+          source={{ uri }}
+          startInLoadingState={true}
+          renderLoading={() => <ActivityIndicator style={styles.loading} size="large" />}
+          onNavigationStateChange={(navState) => {
+            setCanGoBack(navState.canGoBack)
+            setCanGoForward(navState.canGoForward)
+            handleSetNavigationTitle(navState.url, navState.title, navState.loading)
+          }}
+          mediaPlaybackRequiresUserAction={mediaPlaybackRequiresUserAction}
+          testID={activeDapp ? `WebViewScreen/${activeDapp.name}` : 'RNWebView'}
+        />
+      </KeyboardAvoidingView>
       {Platform.OS === 'android' && (
         <WebViewAndroidBottomSheet
           currentUrl={currentUrl}
@@ -254,6 +270,9 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  keyboardView: {
+    flex: 1,
+  },
   loading: {
     position: 'absolute',
     left: 0,