Native installation

Install published packages from npm. Native packages ship at 0.1.0; core is at 0.3.1 (abort error patch for React Native).

Packages

Core (required)

The headless client library. Required for all use cases.

pnpm add @media-sdk/core@^0.3.1

React Native hooks

Adds MediaProvider and search hooks. Requires React as a peer dependency. Does not list react-native as a peer — hooks are React-only.

pnpm add @media-sdk/core@^0.3.1 @media-sdk/native@^0.1.0 react

@media-sdk/core is installed automatically as a runtime dependency of @media-sdk/native.

UI components

Presentational React Native components. Requires react-native ≥ 0.71 (global fetch).

pnpm add @media-sdk/core @media-sdk/native @media-sdk/ui-native

Or with explicit versions:

pnpm add @media-sdk/core@^0.3.1 @media-sdk/native@^0.1.0 @media-sdk/ui-native@^0.1.0 react react-native

@media-sdk/ui-native depends on @media-sdk/core only — not on @media-sdk/native. Your app imports both and wires hooks to components.

Peer dependencies

Package	Peer dependencies
@media-sdk/core	None
@media-sdk/native	react ^18.0.0 or ^19.0.0
@media-sdk/ui-native	react ^18.0.0 or ^19.0.0, react-native >= 0.71.0

Use React 18 or React 19. The SDK does not bundle React or React Native.

TIP

@media-sdk/native works without react-native installed — useful for testing hooks with @testing-library/react. Production RN apps install react-native for @media-sdk/ui-native and your own UI.

API keys

Both providers require a free API key. Env variable names depend on your bundler:

Provider	Sign up	Expo / RN (recommended)	Node
Pexels	pexels.com/api	EXPO_PUBLIC_PEXELS_API_KEY	PEXELS_API_KEY
Pixabay	pixabay.com/api/docs	EXPO_PUBLIC_PIXABAY_API_KEY	PIXABAY_API_KEY

Expo exposes variables prefixed with EXPO_PUBLIC_ to client code. Bare RN projects using Metro can use the same prefix with babel-plugin-inline-dotenv or read from react-native-config.

WARNING

Never commit API keys. Add .env to .gitignore and use .env.example with placeholder values.

TypeScript setup

The SDK ships with TypeScript declarations. Ensure your tsconfig.json includes:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "react-jsx",
    "skipLibCheck": true
  }
}

For Expo projects, extend expo/tsconfig.base. For bare RN, use "moduleResolution": "bundler" or "node16".

Expo env types

Add to src/env.d.ts or similar:

declare namespace NodeJS {
  interface ProcessEnv {
    EXPO_PUBLIC_PEXELS_API_KEY?: string;
    EXPO_PUBLIC_PIXABAY_API_KEY?: string;
    EXPO_PUBLIC_MEDIA_PROVIDER?: "pexels" | "pixabay";
  }
}

Verify installation

pnpm add @media-sdk/core@^0.3.1 @media-sdk/native@^0.1.0
node -e "import('@media-sdk/native').then(m => console.log(Object.keys(m)))"

You should see MediaProvider, useMediaClient, useMediaSearch, useMediaVideos, and useMediaCapabilities.

Next steps

• Getting started — architecture and quick setup
• MediaProvider — wrap your app
• Expo example — runnable starter app