@media-sdk/ui-native

Presentational React Native components for Media SDK applications.

This package does not fetch data. It renders UI from props you pass in. Wire data fetching with @media-sdk/native hooks (or direct @media-sdk/core calls) in your application layer.

Expo-agnostic — uses RN primitives (View, Text, FlatList, Modal, Image). No expo imports.

Installation

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

Peer Dependencies

• React 18 or React 19
• react-native >= 0.71.0 (global fetch)

@media-sdk/core is installed automatically. This package does not depend on @media-sdk/native — your app imports both.

Components

• SearchBar
• MediaTabs
• PhotoCard
• PhotoGrid
• PhotoPreview
• VideoCard
• VideoGrid
• VideoPreview
• Pagination
• LoadingState
• ErrorState

Types: MediaTab ("photos" | "videos")

SearchBar

Controlled search input. onSubmit is a plain callback (no FormEvent):

import { SearchBar } from "@media-sdk/ui-native";

<SearchBar
  value={query}
  onChange={setQuery}
  onSubmit={() => setSubmittedQuery(query)}
/>

PhotoGrid / VideoGrid

Virtualized grids via FlatList with numColumns (default 2):

import { PhotoGrid } from "@media-sdk/ui-native";

<PhotoGrid
  photos={data?.items ?? []}
  onPhotoSelect={setSelectedPhoto}
  numColumns={2}
/>

VideoPreview

Modal with poster image. Supply your own player via renderVideo:

import { VideoPreview } from "@media-sdk/ui-native";

<VideoPreview
  video={video}
  onClose={close}
  renderVideo={(_v, src) =>
    src ? <YourPlayer uri={src} /> : null
  }
/>

Architecture

Your RN app (state + orchestration)
        ├── @media-sdk/ui-native   ← UI rendering (props in, JSX out)
        └── @media-sdk/native      ← hooks, provider
               ▼
          @media-sdk/core

Gate tabs and filters with useMediaCapabilities() — not provider name strings.

Public API

import {
  SearchBar,
  MediaTabs,
  PhotoCard,
  PhotoGrid,
  PhotoPreview,
  VideoCard,
  VideoGrid,
  VideoPreview,
  Pagination,
  LoadingState,
  ErrorState,
  type MediaTab,
} from "@media-sdk/ui-native";

Documentation

• Native UI components
• Getting started