react-native-webview@11.22.0: "Argument appears to not be a ReactComponent" when using NativeViewGestureHandler

[francois-pasquier]

Description

When wrapping a webview with NativeViewGestureHandler on version 11.22.0, this error pops up:

Error: Argument appears to not be a ReactComponent. Keys:
goForward,goBack,reload,stopLoading,postMessage,injectJavaScript,requestFocus,clearFormData,clearCache,clearHistory

Version 11.21.2 of webview works fine though.

Steps to reproduce

• `yarn add react-native-gesture-handler@2.6.0
• yarn add react-native-webview@11.22.0

import WebView from 'react-native-webview'
import { NativeViewGestureHandler } from 'react-native-gesture-handler'

const App = () => (
  <NativeViewGestureHandler>
    <WebView source={{ uri: 'http://example.com' }} />
  </NativeViewGestureHandler>
)

export default App

Snack or a link to a repository

https://github.com/francois-pasquier/issue-react-native-gesture-handler-webview

Gesture Handler version

2.6.0

React Native version

0.69.5

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Real device

Device model

No response

Acknowledgements

Yes

[j-piasecki]

It looks like react-native-webview uses function components since version 11.22.0, which makes it incompatible with NativeViewGestureHandler. You can try using Gesture.Native() alongside GestureDetector instead of it.