@tchomb/player

Vertical video player component with overlay slots for React Native.

Built for Tchomb — the video platform for African creators.

Installation

npm install @tchomb/player

Usage

import { PlayerSurface } from '@tchomb/player';

<PlayerSurface
  source={{ uri: videoUrl, type: 'video' }}
  isActive={true}
  isMuted={false}
>
  {/* Your custom overlay content */}
  <View style={styles.overlay}>
    <Text>{caption}</Text>
    <LikeButton />
  </View>
</PlayerSurface>

Features

• Vertical full-screen video playback
• Image support for photo posts
• Play/pause on tap
• Buffering indicator
• Progress bar
• Gradient overlay for text readability
• Slots for custom overlay content (children)
• Handles active/inactive state for feed scrolling

Props

Prop	Type	Description
source	PlayerSource	Media source (uri, type, subtitles, poster)
isActive	boolean	Whether this player is visible/should play
isMuted	boolean	Mute state
children	ReactNode	Custom overlay slot

Part of Tchomb

Package	Description
@tchomb/shared-types	Shared TypeScript types
@tchomb/ui	Design system
@tchomb/api-client	Typed HTTP client
@tchomb/upload	Upload state machine
@tchomb/player	Vertical video player

License

MIT