Akool Native - React Native Streaming Avatar App

A React Native application built with Expo for real-time video streaming with avatar capabilities using Agora SDK.

📋 Prerequisites

Before setting up the project, ensure you have the following installed:

Required Software

1. Node.js (v18 or later)

   • Download from nodejs.org
   • Verify installation: node --version

2. npm (Package Manager)

   • Built in with Node

3. Expo CLI

   • Install globally: npm install -g @expo/cli
   • Verify installation: npx expo --version

Mobile Development Setup

For Android Development

1. Android Studio

   • Download from developer.android.com
   • Install Android SDK (API level 34 or latest)
   • Configure Android SDK path in your environment variables
   • Enable Developer Options and USB Debugging on your Android device

2. Java Development Kit (JDK)

   • JDK 17 or later
   • Set JAVA_HOME environment variable

For iOS Development (macOS only)

1. Xcode (latest version)

   • Download from Mac App Store
   • Install iOS Simulator
   • Install Xcode Command Line Tools: xcode-select --install

2. CocoaPods

   • Install: sudo gem install cocoapods
   • Verify installation: pod --version

Additional Tools

• Git for version control
• VS Code (recommended) with React Native extensions
• Physical device or emulator for testing

🚀 Getting Started

1. Clone and Install Dependencies

# Clone the repository
git clone <repository-url>
cd akool-native

# Install dependencies using pnpm
npm install

# For iOS, install CocoaPods dependencies
cd ios && pod install && cd ..

2. Environment Setup

Create a .env file in the root directory with the following configuration:

# Create .env file
touch .env

Add the following environment variables to your .env file:

# Akool API Configuration
EXPO_PUBLIC_AKOOL_API_BASE_URL=https://openapi.akool.com/api/open/v4
EXPO_PUBLIC_AKOOL_API_TOKEN="your-token"

# Avatar Configuration
EXPO_PUBLIC_AVATAR_ID=dvp_Tristan_cloth2_1080P

# Voice Configuration
EXPO_PUBLIC_VOICE_ID=Xb7hH8MSUJpSbSDYk0k2

# Language and Mode Configuration
EXPO_PUBLIC_LANGUAGE=en
EXPO_PUBLIC_MODE_TYPE=1

# Session Configuration
EXPO_PUBLIC_SESSION_DURATION=2

Important: Replace "your-token" with your actual Akool API token.

3. Start the Development Server

# Start the Expo development server
npm start
# or
npx expo start

4. Run on Devices/Emulators

Android

# Run on Android emulator/device
npm run android
# or
npx expo run:android

iOS (macOS only)

# Run on iOS simulator/device
npm run ios
# or
npx expo run:ios

Web

# Run web version
npm run web
# or
npx expo start --web

🛠️ Available Scripts

Command	Description
npm start	Start the Expo development server
npm run android	Run on Android emulator/device
npm run ios	Run on iOS simulator/device
npm run web	Run web version
npm run lint	Run ESLint for code quality
npm run reset-project	Reset project to clean state

🐛 Common Debugging Commands

Development Server Issues

# Clear Expo cache
npx expo start --clear

# Clear npm cache
npm cache clean --force

# Reset Metro bundler cache
npx expo start --reset-cache

Android Debugging

# List connected Android devices
adb devices

# View Android logs
adb logcat

# Clear app data on device
adb shell pm clear com.anonymous.akoolnative

# Force stop the app
adb shell am force-stop com.anonymous.akoolnative

# Install APK manually
adb install ./android/app/build/outputs/apk/debug/app-debug.apk

iOS Debugging

# List iOS simulators
xcrun simctl list devices

# Reset iOS simulator
xcrun simctl erase all

# View iOS logs
xcrun simctl spawn booted log stream --predicate 'subsystem contains "com.anonymous.akoolnative"'

Build Issues

# Clean and rebuild for Android
cd android && ./gradlew clean && cd ..

# Clean and rebuild for iOS
cd ios && rm -rf build && xcodebuild clean && cd ..

# Reinstall node modules
rm -rf node_modules && npm install

# Reinstall iOS pods
cd ios && rm -rf Pods Podfile.lock && pod install && cd ..

Network & Permissions Debugging

# Check network connectivity
npx expo diagnostics

# Test on physical device with same network
npx expo start --tunnel

# Check camera/microphone permissions
# Android: Settings > Apps > Akool Native > Permissions
# iOS: Settings > Privacy & Security > Camera/Microphone

📱 Features

• Real-time Video Streaming: Powered by Agora SDK
• Cross-platform: Runs on iOS, Android, and Web
• Modern Navigation: Uses Expo Router for file-based routing
• TypeScript: Full TypeScript support for better development experience
• Native Performance: Utilizes React Native's new architecture

🏗️ Project Structure

akool-native/
├── app/                    # App screens (Expo Router)
├── components/             # Reusable UI components
├── constants/              # App constants and configurations
├── contexts/               # React contexts (AgoraContext, etc.)
├── hooks/                  # Custom React hooks
├── assets/                 # Images, fonts, and other assets
├── android/                # Android native code
├── ios/                    # iOS native code
└── scripts/                # Build and utility scripts

🔧 Troubleshooting

Common Issues

1. Metro bundler issues: Clear cache with npx expo start --clear
2. Android build fails: Check Android SDK path and Java version
3. iOS build fails: Ensure Xcode and CocoaPods are up to date
4. Permission errors: Check camera/microphone permissions on device
5. Network issues: Use --tunnel flag for testing on physical devices

Performance Tips

• Use physical devices for testing real streaming performance
• Monitor memory usage during video streaming sessions
• Test on various device specifications and network conditions

📖 Documentation

• Expo Documentation
• React Native Documentation
• Agora SDK Documentation
• Expo Router Documentation

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/new-feature
3. Commit changes: git commit -am 'Add new feature'
4. Push to branch: git push origin feature/new-feature
5. Submit a Pull Request

📄 License

This project is private and proprietary.