React Native - Headless Browser Automation?

Question

I have an app that needs to scrape some data from websites which contain JavaScript. With NodeJS, this is easy with puppeteer or playwright. With React Native, I can use fetch or axios to request the html of the page, but the Javascript will not be executed.

I have learned of a npm package which can allow me to use NodeJS with React Native on Android or iOS ( https://github.com/JaneaSystems/nodejs-mobile-react-native ). But since puppeteer or playwright normally automate a desktop version of Chrome, is there any way to achieve similar functionality on mobile devices?

Answer 1

Apologies if this doesn't help directly, just seeding an idea.

Why not use a Webview to render the content, then retrieve the web page data?

You might be able to affect the Webview's /size/visibility/flex-ccs-style to 'hide' it but I'm not sure exactly how much mileage you can get from each of those techniques.

There are articles covering ways of hiding Views (eg containing Webviews) and on-webpage-load events (if you want to get a call back, once the page is rendered). I'm planing on doing something similar, hopefully, here are some useful articles to help:

• How can I hide the React-Native WebView until the website's finished logging in?
• WebView loading state manipulation (includes 'flex: 0' style/size handling)
• Hide a component by un-mounting (not rendering), rather than mounting and mutating the opacity or position (Medium.com)
• Component Refs and the DOM (React-Native @Facebook)
• Accessing refs in a custom component (StackOverflow)

See if any of the above is helpful.