ACEquity - React Native WebView Wrapper

A bare React Native CLI application that wraps a website in a WebView, with planned video downloading functionality.

Prerequisites

• Node.js >= 18
• JDK 17 (recommended for React Native)
• Android Studio with:
  • Android SDK
  • Android SDK Platform-Tools
  • Android Emulator (optional)
• Watchman (recommended for macOS)

Environment Setup

1. Install Homebrew Dependencies (macOS)

brew install node watchman
brew install --cask zulu@17  # OpenJDK 17

2. Set Environment Variables

Add to your ~/.zshrc or ~/.bash_profile:

# Java Home (Zulu JDK 17)
export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home

# Android SDK
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin

Then reload:

source ~/.zshrc

3. Verify Setup

# Check Java version (should be 17.x)
java -version

# Check Android SDK
echo $ANDROID_HOME
adb --version

Installation

# Install dependencies
npm install

# iOS only: Install CocoaPods (if building for iOS later)
# cd ios && pod install && cd ..

Running the App

Quick Start with Emulator (Recommended for Development)

First time? Start here:

1. Create an Android Virtual Device (AVD):

   • Open Android Studio → Device Manager → Create Device
   • Select Pixel 5 → API 34 → Name it Pixel_5_API_34
   • See ANDROID_EMULATOR_SETUP.md for details

2. Use the helper script:

   ./dev-helper.sh
   

   This interactive script will guide you through starting the emulator and app.

Or manually:

# Terminal 1: Start Metro bundler
npm start

# Terminal 2: Start emulator
npm run emulator:start

# Terminal 3: Build and run app
npm run android:emulator

For complete emulator setup and troubleshooting, see RUNNING_ON_EMULATOR.md.

Run on Physical Android Device

1. Enable USB debugging on your device
2. Connect via USB
3. Verify connection: adb devices
4. Run:

   npm start  # Terminal 1
   npm run android:device  # Terminal 2
   

Available Scripts

npm start                # Start Metro bundler
npm run android          # Run on any connected device/emulator
npm run android:emulator # Run specifically on emulator
npm run android:device   # Run specifically on physical device
npm run emulator:list    # List available AVDs
npm run emulator:start   # Start emulator
npm run emulator:check   # Check connected devices
npm run clean            # Clean build
npm run start:reset      # Start with cleared cache

Build Debug APK

cd android
./gradlew assembleDebug

The APK will be at: android/app/build/outputs/apk/debug/app-debug.apk

Install APK via ADB

adb install -r android/app/build/outputs/apk/debug/app-debug.apk

Project Structure

ACEquity/
├── App.tsx                 # Main WebView component
├── android/
│   ├── app/
│   │   └── src/main/
│   │       └── AndroidManifest.xml  # Permissions config
│   ├── gradle.properties   # Gradle settings
│   └── local.properties    # SDK path (git-ignored)
├── package.json
└── README.md

Configuration

Change Target URL

Edit App.tsx and modify:

const TARGET_URL = 'https://your-website.com';

Permissions

The AndroidManifest.xml includes:

• INTERNET - Required for WebView
• ACCESS_NETWORK_STATE - Check connectivity
• READ/WRITE_EXTERNAL_STORAGE - For future downloads
• READ_MEDIA_VIDEO - Android 13+ media access

Troubleshooting

See the Troubleshooting section in the setup guide or check:

• React Native Environment Setup
• React Native WebView Docs

Future Features

• Video detection in WebView
• Download manager integration
• Background download service
• Download progress notifications

License

MIT