# YOUR WAVE — React Native App

A fully functional React Native mobile application converted from the [yourwave-coaching.com](https://www.yourwave-coaching.com) website. Built with **Expo** for easy cross-platform development on Android and iOS.

---

## 📱 Screens

| Screen | Description |
|---|---|
| **Home** | Hero, Meet Manuel, How It Works, Challenges, Outcomes, Process |
| **Approach** | Philosophy, Key Principles, Methods Overview |
| **Methods** | Tabbed: Hypnosis, EMDR, ACT, Yager, Mindfulness, Life Coaching |
| **About** | Bio, Nonprofit work, Full qualifications timeline |
| **Testimonials** | Filterable client testimonials grid |
| **Costs** | Pricing cards, sliding scale, payment methods, location |
| **Blog** | Article reader with sidebar navigation |
| **Contact** | Contact form, practice details, quick actions |
| **More** | Navigation hub + footer |

---

## 🚀 Setup Instructions

### Prerequisites

- [Node.js](https://nodejs.org/) 18+ 
- [Expo CLI](https://docs.expo.dev/get-started/installation/) — `npm install -g expo-cli`
- [Expo Go](https://expo.dev/client) app on your phone (for quick preview)
- OR Android Studio / Xcode for native simulators

---

### 1. Install dependencies

```bash
cd react-native-app
npm install
```

---

### 2. Start the development server

```bash
npx expo start
```

This opens the **Expo DevTools** in your browser. From there:

- **Scan the QR code** with Expo Go on your phone
- Press **`a`** to open Android emulator
- Press **`i`** to open iOS simulator (macOS only)

---

### 3. Run on Android

```bash
npx expo start --android
```

Requires Android Studio with a configured emulator, or a physical Android device with USB debugging enabled.

---

### 4. Run on iOS

```bash
npx expo start --ios
```

Requires macOS with Xcode installed. For physical device, connect via USB and trust the computer.

---

## 📁 Project Structure

```
react-native-app/
├── App.tsx                          # Root component, Navigation + Modal
├── app.json                         # Expo config
├── package.json                     # Dependencies
├── tsconfig.json                    # TypeScript config
├── babel.config.js                  # Babel config
└── src/
    ├── context/
    │   └── BookingContext.tsx        # Global booking modal state
    ├── theme/
    │   └── index.ts                 # Colors, fonts, spacing, radius
    ├── types/
    │   └── index.ts                 # TypeScript types
    ├── data/
    │   ├── testimonials.ts          # Testimonial data
    │   └── blog.ts                  # Blog post data
    ├── navigation/
    │   └── AppNavigator.tsx         # Bottom tabs + stack nav
    ├── components/
    │   └── BookingModal.tsx         # 4-step appointment scheduler
    ├── screens/
    │   ├── HomeScreen.tsx           # Main landing screen
    │   ├── ApproachScreen.tsx       # Healing philosophy
    │   ├── MethodsScreen.tsx        # 6 therapeutic methods
    │   ├── AboutScreen.tsx          # Bio + qualifications
    │   ├── TestimonialsScreen.tsx   # Filterable testimonials
    │   ├── CostsScreen.tsx          # Pricing + location
    │   ├── BlogScreen.tsx           # Blog article reader
    │   ├── ContactScreen.tsx        # Contact form
    │   └── MoreScreen.tsx           # Navigation hub
    └── assets/
        └── images/
            ├── logo.jpg
            ├── manuel_portrait.jpg
            └── ocean_waves.jpg
```

---

## 🎨 Design System

The app faithfully replicates the website's monochromatic design:

| Token | Value | Usage |
|---|---|---|
| `slate900` | `#0f172a` | Dark backgrounds, primary text |
| `slate800` | `#1e293b` | Dark cards |
| `slate600` | `#475569` | Secondary text |
| `slate200` | `#e2e8f0` | Borders |
| `slate50`  | `#f8fafc` | Light section backgrounds |
| `white`    | `#ffffff` | Card surfaces |

**Typography:** Georgia (iOS) / serif (Android) for body · System (iOS) / Roboto (Android) for headings and UI.

> **Optional font upgrade:** Add [DM Sans](https://fonts.google.com/specimen/DM+Sans) (body) and [General Sans](https://www.fontshare.com/fonts/general-sans) (headings) via `expo-font` for pixel-perfect fidelity to the web version.

---

## 🔑 Key Features

- **5-tab bottom navigation** — Home, Approach, Methods, About, More
- **Nested stack** inside More tab for Testimonials, Costs, Blog, Contact
- **Global Booking Modal** — 4-step appointment scheduler accessible from any screen
- **Filterable Testimonials** — by category (Hypnosis, Trauma, Coaching, Mindfulness)
- **Method Tabs** — horizontal scroll selector for 6 therapy methods
- **Contact Form** — with validation and success state
- **Deep links** — WhatsApp, Email, Website via `Linking.openURL`
- **Keyboard-aware layouts** — `KeyboardAvoidingView` on form screens
- **Safe Area** support for notches and home indicators

---

## 📦 Key Dependencies

```json
{
  "@react-navigation/native":      "^6.1",
  "@react-navigation/bottom-tabs": "^6.5",
  "@react-navigation/stack":       "^6.3",
  "react-native-safe-area-context":"4.10",
  "react-native-screens":          "3.31",
  "react-native-gesture-handler":  "~2.16",
  "@expo/vector-icons":            "^14.0",
  "expo":                          "~51.0"
}
```

---

## 🔧 Customisation

### Change WhatsApp Number
Search for `wa.me/250790000000` and replace with the actual number.

### Change Email
Search for `mail@yourwave-coaching.com` and update all instances.

### Add Real Booking Backend
In `BookingModal.tsx`, replace the `setTimeout` in `handleSubmit` with a real API call:
```ts
const res = await fetch('https://your-api.com/bookings', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(formData),
});
```

### Custom Fonts (Recommended)
1. Download DM Sans `.ttf` files
2. Place in `src/assets/fonts/`
3. Load via `expo-font` in `App.tsx`:
```ts
const [fontsLoaded] = useFonts({
  'DMSans-Regular': require('./src/assets/fonts/DMSans-Regular.ttf'),
  'DMSans-Bold':    require('./src/assets/fonts/DMSans-Bold.ttf'),
});
```
4. Update `FONTS.sans` in `src/theme/index.ts` to `'DMSans-Regular'`

---

## 📄 Build for Production

```bash
# Install EAS CLI
npm install -g eas-cli

# Configure EAS
eas build:configure

# Build for Android (.apk / .aab)
eas build --platform android

# Build for iOS (.ipa)
eas build --platform ios
```

See the [Expo EAS Build docs](https://docs.expo.dev/build/introduction/) for full instructions.

---

*Built from the yourwave-coaching.com website · Copyright © 2026 Manuel Haeussler*
