Olifantenpaadjes Path Data Scraper

An Expo React Native app that runs olifantenpaadjes.app in a WebView with network interception to capture and log path data.

Features

• WebView Integration: Loads the Olifantenpaadjes app in an embedded browser
• Network Interception: Captures all fetch and XMLHttpRequest calls
• Real-time Logging: Displays network activity in the bottom panel
• Path Data Detection: Automatically highlights requests containing path/route/geo data
• Console Logging: All intercepted data is logged to the console for export

Setup

Prerequisites

• Node.js >= 20.19.4 (current version has warnings but should work)
• iOS Simulator (Mac) or Android Emulator
• Expo CLI

Installation

npm install

Running the App

iOS Simulator (Mac only)

npx expo start --ios

Android Emulator

npx expo start --android

Web (for testing)

npx expo start --web

How It Works

1. The app loads https://olifantenpaadjes.app/ in a WebView
2. JavaScript is injected to intercept:
   • fetch() API calls
   • XMLHttpRequest calls
3. Intercepted data is sent to React Native via postMessage
4. The app displays logs in real-time and writes to console
5. Path-related data (URLs containing 'path', 'route', 'olifanten', 'geo', 'coordinate') is highlighted with 🛤️ emoji in console

Viewing Scraped Data

In the App

• Bottom panel shows last 50 network requests
• Each entry shows: timestamp, type (fetch/xhr), and URL

In Console

• Open the terminal where npx expo start is running
• Look for entries prefixed with "Network intercept:"
• Path data is highlighted with "🛤️ PATH DATA DETECTED:"
• Use console output for complete JSON data structures

Exporting Data

To save intercepted data:

1. In the terminal, pipe output to a file:

npx expo start --ios 2>&1 | tee network-logs.txt

2. Or use Chrome DevTools (for web version):
   • Run: npx expo start --web
   • Open browser DevTools (F12)
   • Go to Console tab
   • Right-click on logs → "Save as..."

Network Interception Details

The injected JavaScript intercepts:

• Fetch API: Both requests and responses
• XMLHttpRequest: Open calls and response data
• JSON Parsing: Automatically attempts to parse response data
• Error Handling: Falls back to text if JSON parse fails

Troubleshooting

Node Version Warning

The project shows warnings about Node.js version. Update to Node.js 20.19.4+ to eliminate warnings:

nvm install 20.19.4
nvm use 20.19.4

WebView Not Loading

• Check internet connection
• Try restarting the emulator
• Clear cache: npx expo start -c

No Data Intercepted

• The website might use WebSockets (not intercepted)
• Check if the site requires authentication
• Look at the browser console for errors

Project Structure

.
├── App.js              # Main app with WebView and interception
├── package.json        # Dependencies
├── app.json           # Expo configuration
└── assets/            # App assets

Dependencies

• expo - React Native framework
• react-native-webview - WebView component
• axios - HTTP client (available if needed)
• react-native-web - Web support

Notes

• The app keeps only the last 50 log entries in state to prevent memory issues
• All data is also logged to console for complete capture
• Path-related keywords trigger special highlighting in console
• WebView runs with JavaScript and DOM storage enabled

License

MIT

---

Tech Stack

The tools and technologies used in this project:

Support

If you found this project useful or interesting, consider buying me a coffee!