I am working on a ReactJS (not React-Native) android app in which I need to open a webview (or some sort of popup within the app) for payment gateway. If possible, I want to be able to access the html source of the page opened in this webview and also inject javascript.
To do the above, I'm trying to use the React-Native WebView component -
//Removed all other reactj related code in the below simplified example
import { WebView } from 'react-native';
class App extends Component {
render() {return (<div className="App><WebView /></div>);}
}
The above code results in a whole bunch of "Module not found" errors when I run "npm start" -
"ERROR in ./node_modules/react-native/Libraries/react-native/react-native-implementation.js Module not found: Error: Can't resolve 'AccessibilityInfo'"
"ERROR in ./node_modules/react-native/Libraries/react-native/react-native-implementation.js Module not found: Error: Can't resolve 'ActionSheetIOS' "
And many more similar errors. I've tried uninstalling and reinstalling various combinations of versions of react-native and babel-presets etc as listed on stackoverflow, github etc but nothing works.
Also tried to add "babel-preset-react-native" in .babelrc but that resulted in -
"ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): TypeError: Cannot read property 'filename' of undefined at PluginPass.JSXOpeningElement"
My package.json snippet (unrelated stuff removed)-
"devDependencies": {
"@babel/cli": "^7.1.0",
"@babel/core": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-preset-react-native": "^4.0.0",
"babel-loader": "^8.0.2",
},
"dependencies": {
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-native": "^0.55.4"
}
My questions is - Is it even possible to use a React-Native WebView component in a ReactJS class the way I'm trying to? If not, then what would be the ReactJS equivalent of WebView?
