Random UI cut off issues

[nwfiam248]

• Accessory section cuts off at the bottom in web views randomly on both android/iOS
• Keyboard is mostly lowered to the bottom showing the Accessory alone in random situations in iOS

The issues are random as in for input fields on the same screen, the accessory keyboard might be fine for one input field focus but not for another.
Issue Preview:

Screen.Recording.2022-06-09.at.10.28.35.mov

Screen.Recording.2022-06-09.at.10.33.38.mov

Code:

`
<WebView
ref={webViewRef}
// injectedJavaScriptBeforeContentLoaded={runFirst}
injectedJavaScriptBeforeContentLoaded={jsCode}
mixedContentMode="compatibility"
onMessage={msg => console.log(msg.nativeEvent.data)}
source={{
uri: webViewUrl,
}}
javaScriptEnabled
/>

  <KeyboardAccessoryView animateOn="all" androidAdjustResize>
    {({isKeyboardVisible}) => (
      <SafeAreaView>
        {isKeyboardVisible && (
          <ScrollView
            horizontal
            keyboardShouldPersistTaps="handled"
            showsHorizontalScrollIndicator={false}
            // contentContainerStyle={styles.scrollContainer}
          >
            {data?.map((item, index) => (
              <Button
                key={`item-${index}-${item}`}
                onPress={() => {
                  webViewRef.current.postMessage(item);
                  // setText(item);
                }}
                title={`  ${item}  `}
              />
            ))}
          </ScrollView>
        )}
      </SafeAreaView>
    )}
  </KeyboardAccessoryView>
</View>`