React Native meeting utility components for Hiyve video conferencing.
Provides Alerts, MeetingSummary, and JoinToken -- presentation-only components for meeting notifications, post-meeting summaries, and token-based room joining.
npm install @hiyve/rn-meeting @hiyve/rn-react @hiyve/rn-core react-native-webrtc
import { Alerts } from '@hiyve/rn-meeting';
const alerts = [
{ id: '1', type: 'info', title: 'Recording started', message: 'The meeting is now being recorded.', timestamp: new Date() },
{ id: '2', type: 'warning', title: 'Unstable connection', message: 'Your network may affect call quality.', timestamp: new Date() },
{ id: '3', type: 'error', title: 'Recording failed', message: 'Could not start recording. Please try again.', timestamp: new Date() },
];
function AlertsPanel() {
return (
<Alerts
alerts={alerts}
onAcknowledge={(id) => console.log('Acknowledged', id)}
onDismiss={(id) => console.log('Dismissed', id)}
/>
);
}
import { MeetingSummary } from '@hiyve/rn-meeting';
const summary = {
title: 'Sprint Planning',
duration: 3600,
participants: ['Alice', 'Bob', 'Carol'],
keyPoints: [
{ id: '1', text: 'Agreed on Q2 roadmap priorities' },
],
actionItems: [
{ id: '1', text: 'Draft RFC for new auth flow', assignee: 'Alice', dueDate: '2025-04-01' },
],
decisions: [
{ id: '1', text: 'Switch to pnpm for all packages' },
],
};
function SummaryScreen() {
return <MeetingSummary summary={summary} />;
}
import { JoinToken } from '@hiyve/rn-meeting';
// Display mode -- show token with copy/share buttons
<JoinToken mode="display" token="abc-123-xyz" roomName="Sprint Planning" onCopyToken={handleCopy} onShare={handleShare} />
// Input mode -- enter token to join a room
<JoinToken mode="input" onJoin={(token, password) => joinRoom(token, password)} onLookup={previewRoom} roomInfo={roomInfo} />
Color-coded alert cards with four severity levels (info, warning, success, error). Each card shows a title, message, relative timestamp, and optional acknowledge/dismiss buttons.
<Alerts
alerts={alerts}
onAcknowledge={(id) => markAcknowledged(id)}
onDismiss={(id) => removeAlert(id)}
/>
| Prop | Type | Default | Description |
|---|---|---|---|
alerts |
AlertItem[] |
-- | Alert items to display |
onAcknowledge |
(alertId: string) => void |
-- | Acknowledge handler |
onDismiss |
(alertId: string) => void |
-- | Dismiss handler |
colors |
Partial<AlertsColors> |
-- | Color overrides |
labels |
Partial<AlertsLabels> |
-- | Label overrides |
AlertItem:
| Field | Type | Description |
|---|---|---|
id |
string |
Unique identifier |
type |
'info' | 'warning' | 'success' | 'error' |
Severity level |
title |
string |
Bold heading text |
message |
string |
Body text |
timestamp |
Date |
When alert was created (shown as relative time) |
acknowledged |
boolean |
Renders with reduced opacity when true |
Post-meeting summary with collapsible sections for key points, action items (with checkbox, assignee, due date), decisions, and participants.
<MeetingSummary summary={summary} showParticipants />
| Prop | Type | Default | Description |
|---|---|---|---|
summary |
MeetingSummaryData |
-- | Structured summary data |
title |
string |
-- | Override the main title |
showParticipants |
boolean |
true |
Show participants section |
colors |
Partial<MeetingSummaryColors> |
-- | Color overrides |
labels |
Partial<MeetingSummaryLabels> |
-- | Label overrides |
MeetingSummaryData:
| Field | Type | Description |
|---|---|---|
keyPoints |
KeyPoint[] |
Key discussion points |
actionItems |
ActionItem[] |
Action items with assignee/due date/completed |
decisions |
Decision[] |
Decisions made |
participants |
string[] |
Participant display names |
duration |
number |
Meeting duration in seconds |
title |
string |
Meeting title |
Two-mode component for sharing and entering room invite tokens.
Display mode -- shows token with copy and share buttons:
<JoinToken
mode="display"
token="abc-123-xyz"
roomName="Sprint Planning"
onCopyToken={() => copyToClipboard(token)}
onShare={() => shareToken(token)}
/>
Input mode -- form to enter token, optional password, preview, and join:
<JoinToken
mode="input"
onJoin={(token, password) => joinRoom(token, password)}
onLookup={(token) => previewRoom(token)}
requirePassword
roomInfo={{ roomName: 'Sprint Planning', isActive: true }}
/>
| Prop | Type | Default | Description |
|---|---|---|---|
mode |
'display' | 'input' |
-- | Display token or enter token |
token |
string |
-- | Token to display (display mode) |
roomName |
string |
-- | Room name context (display mode) |
onCopyToken |
() => void |
-- | Copy handler (display mode) |
onShare |
() => void |
-- | Share handler (display mode) |
onJoin |
(token, password?) => void |
-- | Join handler (input mode) |
onLookup |
(token) => void |
-- | Preview handler (input mode) |
requirePassword |
boolean |
false |
Show password input field |
isLoading |
boolean |
-- | Show loading indicator on buttons |
roomInfo |
{ roomName, isActive } |
-- | Room preview from lookup |
colors |
Partial<JoinTokenColors> |
-- | Color overrides |
labels |
Partial<JoinTokenLabels> |
-- | Label overrides |
All components accept colors and labels props. Pass partial objects to override only what you need:
<Alerts
colors={{
infoBorder: '#3B82F6',
infoBackground: '#EFF6FF',
acknowledgeButton: '#6366F1',
}}
labels={{
acknowledge: 'Got it',
dismiss: 'Hide',
}}
// ... other props
/>
@hiyve/rn-core@hiyve/rn-react@hiyve/rn-react -- Provider, hooks, and core UI components@hiyve/rn-capture -- Recording, Streaming, and Transcription@hiyve/rn-collaboration -- Chat, Polls, and Q&A
@hiyve/rn-meeting-- React Native meeting utility components for Hiyve SDK.Provides Alerts, MeetingSummary, and JoinToken components for meeting notifications, post-meeting summaries, and token-based room joining in React Native applications. All components are presentation-only and receive data via props.