@hiyve/rn-collaboration

React Native collaboration components and hooks for Hiyve video conferencing.

Provides Chat, Polls, and QA components with companion usePolls and useQA hooks for managing real-time collaboration state via data messages. All components are presentation-only and receive data via props.

Installation

npm install @hiyve/rn-collaboration @hiyve/rn-react @hiyve/rn-core react-native-webrtc
Copy

Quick Start

Chat

import { View, Text } from 'react-native';
import { Chat } from '@hiyve/rn-collaboration';
import { useChat, useParticipants, useConnection } from '@hiyve/rn-react';

function ChatPanel() {
  const { messages, unreadCount, sendMessage, clearUnread } = useChat();
  const { localUserId } = useParticipants();
  const { error } = useConnection();

  return (
    <View style={{ flex: 1 }}>
      {error && <Text style={{ color: '#FF3B30', padding: 8 }}>{error}</Text>}
      <Chat
        messages={messages}
        localUserId={localUserId}
        onSend={sendMessage}
        unreadCount={unreadCount}
        onClearUnread={clearUnread}
      />
    </View>
  );
}
Copy

Polls

import { Polls, usePolls } from '@hiyve/rn-collaboration';
import { useRoom, useParticipants } from '@hiyve/rn-react';

function PollsPanel({ onSendDataMessage }) {
  const { localUserId } = useParticipants();
  const { isOwner } = useRoom();

  const { polls, createPoll, vote, closePoll, handleDataMessage } = usePolls({
    localUserId,
    onSendDataMessage,
    isOwner,
  });

  return (
    <Polls
      polls={polls}
      localUserId={localUserId}
      isOwner={isOwner}
      onCreatePoll={createPoll}
      onVote={vote}
      onClosePoll={closePoll}
    />
  );
}
Copy

Q&A

import { QA, useQA } from '@hiyve/rn-collaboration';
import { useRoom, useParticipants } from '@hiyve/rn-react';

function QAPanel({ onSendDataMessage }) {
  const { localUserId } = useParticipants();
  const { isOwner } = useRoom();

  const { questions, askQuestion, upvote, answerQuestion, handleDataMessage } = useQA({
    localUserId,
    onSendDataMessage,
    isOwner,
  });

  return (
    <QA
      questions={questions}
      localUserId={localUserId}
      isOwner={isOwner}
      onAskQuestion={askQuestion}
      onUpvote={upvote}
      onAnswerQuestion={answerQuestion}
    />
  );
}
Copy

Components

Chat

Full-featured chat interface with message bubbles, avatars, timestamps, and an input bar.

<Chat
  messages={messages}
  localUserId={localUserId}
  onSend={sendMessage}
  unreadCount={unreadCount}
  onClearUnread={clearUnread}
/>
Copy

Polls

Poll creation, voting, and results display. Room owners can create and close polls.

<Polls
  polls={polls}
  localUserId={localUserId}
  isOwner={isOwner}
  onCreatePoll={createPoll}
  onVote={vote}
  onClosePoll={closePoll}
/>
Copy

QA

Question submission, upvoting, and answer display. Room owners can answer questions.

<QA
  questions={questions}
  localUserId={localUserId}
  isOwner={isOwner}
  onAskQuestion={askQuestion}
  onUpvote={upvote}
  onAnswerQuestion={answerQuestion}
/>
Copy

Hooks

usePolls

Manages poll state and broadcasts actions via data messages.

const { polls, createPoll, vote, closePoll, handleDataMessage } = usePolls({
  localUserId,
  localUserName,
  onSendDataMessage,
  isOwner,
});
Copy

Options:

Returns (PollState):

useQA

Manages Q&A state and broadcasts actions via data messages.

const { questions, askQuestion, upvote, answerQuestion, handleDataMessage } = useQA({
  localUserId,
  localUserName,
  onSendDataMessage,
  isOwner,
});
Copy

Options:

Returns (QAState):

Customization

All components accept colors and labels props. Pass partial objects to override only what you need:

<Chat
  colors={{
    localBubble: '#6366F1',
    sendButton: '#6366F1',
    headerBackground: '#1e1e3f',
  }}
  labels={{
    title: 'Nachrichten',
    placeholder: 'Nachricht eingeben...',
    send: 'Senden',
  }}
  // ... other props
/>
Copy

Requirements

• React 18+
• React Native 0.70+
• @hiyve/rn-core
• @hiyve/rn-react

Related Packages

• @hiyve/rn-react -- Provider, hooks, and core UI components
• @hiyve/rn-capture -- Recording, Streaming, and Transcription
• @hiyve/rn-meeting -- Alerts, Meeting Summary, and Join Token