Learn.Pk Mobile App

A professional mobile wrapper app for Learn.Pk built with React Native and Expo.

Features

• Three Tab Navigation:

  • 🏠 Home: Loads learn.pk homepage
  • 📚 Courses: Browse all courses at learn.pk/course/
  • 👤 Account: Login page that transitions to dashboard when authenticated

• Smart Tab Hiding: Automatically hides tabs when navigating to LMS domain (lms.learn.pk) for seamless learning experience

• Professional Styling:

  • Primary Color: #0d7c66
  • Secondary Color: #f2b544
  • Light mode only
  • Built with NativeWind (Tailwind CSS for React Native)

• WebView Features:

  • Full website functionality
  • Cookie/session management
  • Back/forward navigation gestures
  • Loading indicators

Tech Stack

• React Native
• Expo Router
• React Navigation (Bottom Tabs)
• React Native WebView
• NativeWind (Tailwind CSS)
• TypeScript

Getting Started

Prerequisites

• Node.js 18+ or Bun
• Expo CLI
• iOS Simulator (Mac) or Android Studio

Installation

# Install dependencies
bun install
# or
npm install

# Start the development server
npm start

Running on Devices

# iOS
npm run ios

# Android
npm run android

# Web (limited WebView support)
npm run web

Project Structure

app/
  ├── _layout.tsx          # Root layout with tab navigation
  ├── index.tsx            # Home tab (learn.pk)
  ├── courses.tsx          # Courses tab (learn.pk/course/)
  ├── account.tsx          # Account tab (login/dashboard)
  └── context/
      └── AppContext.tsx   # Global state for tab visibility

Configuration

The app is configured to:

• Only show light mode interface
• Use primary color (#0d7c66) for active tabs and splash screen
• Automatically detect LMS domain and hide tabs
• Maintain authentication across tabs with shared cookies

Build for Production

# Build for Android
eas build --platform android

# Build for iOS
eas build --platform ios

License

Private project for Learn.Pk