# EventBuzz Checkins (mobile)

Bare React Native app for staff to check in event participants via search or badge QR scan. Uses the EventBuzz Dashboard API (`/api/auth/login`, `/api/checkins/events`, attendance endpoints).

## Important: Metro (port 8081) is not the app UI

Opening **http://localhost:8081** in a browser shows React Native’s default Metro landing page (“Welcome to React Native”). That is only the JavaScript bundler status page.

To use **EventBuzz Checkins**, run the app on a **simulator or physical device**:

```sh
source ~/.bashrc
cd eventbuzz-checkins

# Terminal 1 — keep running
npm start

# Terminal 2 — Android emulator or USB device
npm run android

# OR iOS Simulator (after pod install in ios/)
npm run ios
```

You should see the **email login** screen, not the Metro welcome page.

If the simulator still shows the old welcome screen, press **`r`** in the Metro terminal to reload, or run `npm run android` again from `eventbuzz-checkins`.

## Android build note (AsyncStorage 3.x)

If Gradle reports `Could not find org.asyncstorage.shared_storage:storage-android:1.0.0`, the project’s `android/build.gradle` already adds the package’s `local_repo` Maven path. After `npm install`, run `npm run android` again.

## Offline mode

1. While online, open **Events** and tap the cloud icon (or long-press an event) → **Enable Offline**.
2. The app downloads active attendance sessions + participant rosters into local SQLite.
3. While Offline is on, search and QR check-ins always save locally (even with internet). They queue in an outbox.
4. Every minute while online (app in the foreground), pending check-ins are **uploaded**. Reconnect and returning to the app also upload.
5. Header **Sync** is two-way at that page’s scope:
   - **Events** — all Offline-enabled events (upload pending + refresh all sheets)
   - **Attendance sessions** — this event (upload pending + refresh all sheets)
   - **Participants** — this attendance sheet only (upload pending + refresh this roster)
6. **Refresh Offline Data** (long-press an event) is a recovery pull of the snapshot without clearing pending outbox rows.
7. **Assign a Blank** (when enabled on the attendance session in the dashboard) scans a spare badge QR, lets staff edit name/email/phone, then saves — updating that participant and checking them in. It uses the same offline outbox as check-ins.
8. **Undo** on the check-in success sheet reverses the last check-in. For a later mistake, swipe a checked-in row left to reveal **Uncheck-in**. Staff-only; last check-in only; same offline queue. Does not revert Assign a Blank profile.

Native rebuild is required after installing `@op-engineering/op-sqlite` / NetInfo (`npm run android` / `npm run ios`).

## Configuration

Copy `.env.example` to `.env` and set `API_BASE_URL`:

- **Android Emulator:** `http://10.0.2.2:3001/api` — `localhost` in `.env` causes **Network request failed**
- **iOS Simulator:** `http://localhost:3001/api`
- **Physical device:** your Mac’s LAN IP, e.g. `http://192.168.1.10:3001/api`, and set `HOST=0.0.0.0` in `backend/.env`

Start the API: `cd backend && npm run dev` (port **3001**).

After changing `.env`, rebuild the app: `npm run android` (react-native-config embeds `.env` at build time).

## QR format

Badge QRs encode `eventbuzz:participant:{participantId}` (same as dashboard badge PDFs).

---

This is a [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).

# Getting Started

> **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding.

## Step 1: Start Metro

First, you will need to run **Metro**, the JavaScript build tool for React Native.

To start the Metro dev server, run the following command from the root of your React Native project:

```sh
# Using npm
npm start

# OR using Yarn
yarn start
```

## Step 2: Build and run your app

With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app:

### Android

```sh
# Using npm
npm run android

# OR using Yarn
yarn android
```

### iOS

For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps).

The first time you create a new project, run the Ruby bundler to install CocoaPods itself:

```sh
bundle install
```

Then, and every time you update your native dependencies, run:

```sh
bundle exec pod install
```

For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).

```sh
# Using npm
npm run ios

# OR using Yarn
yarn ios
```

If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device.

This is one way to run your app — you can also build it directly from Android Studio or Xcode.

## Step 3: Modify your app

Now that you have successfully run the app, let's make changes!

Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh).

When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload:

- **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Dev Menu**, accessed via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS).
- **iOS**: Press <kbd>R</kbd> in iOS Simulator.

## Congratulations! :tada:

You've successfully run and modified your React Native App. :partying_face:

### Now what?

- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started).

# Troubleshooting

If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.

# Learn More

To learn more about React Native, take a look at the following resources:

- [React Native Website](https://reactnative.dev) - learn more about React Native.
- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.