Henry Mobile

A React Native iOS app for the Henry shopping platform, built with Expo. This is a mobile port of the henry-quickstart-demo Next.js web application.

Features

• 🔍 Native Product Search - Fast, native iOS search experience
• 📦 Native Product Details - View products with variants, pricing, and store selection
• 🛒 Native Cart - Manage cart items with native UI
• 🔒 Secure Checkout - PCI-compliant WebView checkout
• 💳 Secure Card Collection - WebView-based payment method entry

Architecture

The app uses a hybrid approach:

Screen	Implementation	Reason
Search	Native	Performance
Product Details	Native	Performance
Cart	Native	Better UX
Checkout	WebView	PCI Compliance
Card Collection	WebView	Security

Getting Started

Prerequisites

• Node.js >= 20.x
• Xcode 15+ (for iOS development)
• Expo CLI

Installation

# Install dependencies
npm install

# Configure environment
cp .env.example .env
# Edit .env with your Henry API key

Environment Variables

Create a .env file with:

EXPO_PUBLIC_HENRY_API_KEY=your_api_key_here
EXPO_PUBLIC_HENRY_ENV=sandbox

Running the App

# Start Expo development server
npx expo start

# Run on iOS simulator
npx expo run:ios

# Run on physical device
npx expo run:ios --device

Project Structure

henry-mobile/
├── app/                    # Expo Router screens
│   ├── _layout.tsx         # Navigation config
│   ├── index.tsx           # Home/Search
│   ├── cart.tsx            # Cart
│   ├── checkout.tsx        # Checkout WebView
│   ├── card-collection.tsx # Card entry WebView
│   └── products/[id].tsx   # Product details
│
├── src/
│   ├── components/         # UI components
│   ├── hooks/              # Custom React hooks
│   ├── services/           # API services
│   ├── types/              # TypeScript types
│   ├── constants/          # App constants
│   └── utils/              # Utilities
│
└── DOCUMENTATION.md        # Full documentation

Key Dependencies

• expo - Development framework
• expo-router - File-based routing
• expo-image - Optimized image loading
• react-native-webview - Secure checkout
• @henrylabs/sdk - Henry API client
• @react-native-async-storage/async-storage - Persistence

Documentation

See DOCUMENTATION.md for:

• Complete architecture overview
• Component documentation
• State management patterns
• API integration details
• Security considerations
• Code walkthrough

Scripts

npm start          # Start Expo dev server
npm run ios        # Run on iOS
npm run android    # Run on Android
npm run web        # Run in browser
npm run lint       # Run ESLint

Building for Production

# Using EAS Build
npx eas build --platform ios

# Or create local build
npx expo run:ios --configuration Release

License

This project is for demonstration purposes. See Henry Labs documentation for API usage terms.