Expo example

The examples/basic-react-native app is a minimal Expo + React Native starter that searches photos and videos using published @media-sdk/* packages.

Time to first search: ~10 minutes.

TIP

The example uses Expo for fast onboarding. The SDK itself does not require Expo — bare React Native CLI works with the same packages.

Prerequisites

• Node.js 20+
• pnpm 9+ (or npm/yarn)
• Expo Go on a device, or iOS Simulator / Android Emulator
• A Pexels API key and/or Pixabay API key

Install and run

cd examples/basic-react-native

pnpm install
cp .env.example .env

Edit .env:

EXPO_PUBLIC_PEXELS_API_KEY=your_pexels_key
EXPO_PUBLIC_PIXABAY_API_KEY=your_pixabay_key
EXPO_PUBLIC_MEDIA_PROVIDER=pexels

pnpm start

Scan the QR code with Expo Go, or press i / a for iOS / Android simulator.

What's included

Feature	Implementation
Client setup	createMediaClient.ts — Pexels or Pixabay from env
Provider selector	ProviderSelector.tsx — when both API keys are set
Search	useMediaSearch, useMediaVideos
Capability gating	useMediaCapabilities — Curated tab, filters, Videos tab
UI	@media-sdk/ui-native — SearchBar, grids, previews, Pagination
Curated photos	Local useCuratedPhotos hook (app-level, not in @media-sdk/native)

Architecture

Expo App (examples/basic-react-native)
  ├── @media-sdk/native → @media-sdk/core → Pexels/Pixabay
  └── @media-sdk/ui-native → @media-sdk/core (types only)

Provider configuration

Provider	Env variable	Notable capabilities
Pexels	EXPO_PUBLIC_PEXELS_API_KEY	Curated tab, orientation & size filters
Pixabay	EXPO_PUBLIC_PIXABAY_API_KEY	Category, min dimensions, editor's choice

Set EXPO_PUBLIC_MEDIA_PROVIDER=pixabay to default to Pixabay when both keys exist.

UI adapts via capabilities — presentation code does not use provider === "pexels" for tabs or filters.

Scripts

Command	Description
pnpm start	Start Expo dev server
pnpm android	Start on Android
pnpm ios	Start on iOS
pnpm typecheck	TypeScript only

Monorepo development

Inside the headless-media-sdk monorepo, pnpm-workspace.yaml may include overrides pointing at local packages/*.

Verify tarball consumer install:

pnpm verify:starter-native

Copy outside the monorepo

The folder is self-contained. Copy examples/basic-react-native anywhere, remove workspace overrides if present, and run pnpm install — dependencies resolve from npm.

Bare React Native path

1. Create a project with @react-native-community/cli or your preferred template.
2. Install @media-sdk/core, @media-sdk/native, @media-sdk/ui-native.
3. Wrap the app with MediaProvider (same as the Expo example).
4. Configure API keys via react-native-config or your env solution.

No Expo modules are required in the SDK packages.

Related

• Installation
• Troubleshooting
• Web starter — Vite + React reference