Huddle01 React Native Embed

The Huddle01 React Native Embed package allows you to embed fully-functional Huddle01 video meetings and audio spaces into your own React Native mobile apps through a single React component. It also offers theming customizablity to suit your branding needs.

Installing the packages:

To install the package in your React Native application, you can use npm or pnpm or yarn:

npm install @huddle01/react-native-embed

Other required packages

Embedding audio/video meetings in your application is a fairly complex task, hence we need a few extra libraries for the component to work. You need to install the following packages.

npm install react-native-webrtc react-native-video react-native-sound-player react-native-screens react-native-fast-image react-native-gesture-handler react-native-linear-gradient react-native-reanimated react-native-safe-area-context react-native-share react-native-svg @react-native-masked-view/masked-view

Config steps

Make sure to add camera and mic permissions to your AndroidManifest.xml file (for Android) and Info.plist file (for iOS).

If you are building for iOS, don’t forget to run pod install inside the ios directory to install the iOS native dependencies.

As a final step, inside your top-level index.js file, import the react-native-get-random-values package, and call the registerGlobals method imported from react-native-webrtc.

import { AppRegistry } from 'react-native';
import 'react-native-get-random-values';
import { registerGlobals } from 'react-native-webrtc';
import App from './App';
import { name as appName } from './app.json';
 
registerGlobals();
 
AppRegistry.registerComponent(appName, () => App);

You're all set to use the package now.

Generating secrets

Before you can embed calls in your app, you need to generate your projectId, API Key, and create a Huddle01 room.

Head over to the API Keys Page and connect your wallet to get your project credentials: an API Key and a projectId.

After that, to create a Huddle01 room, use the Create Room API. It will return a unique roomId.

You should now have a projectId, an API Key, and a roomId.

Rendering the component

Import the <Huddle01 /> component from the package.

import { Huddle01 } from '@huddle01/react-native-embed';

export default function MeetingScreen() {
    return (
        <View className="flex-1">
            <Huddle01 {...huddleProps} />
        </View>
    )
}

Component Props

The <Huddle01 /> component accepts props of the type HuddleProps. It has fields for the 3 secrets that you generated above. You also need to pass a displayName and avatarUrl to represent yourself in the meeting. This can be changed later on when you are in the meeting.

Additionally, there are two optional props onJoinRoom and onLeaveRoom to execute any kind of custom logic when you join/leave the meeting, like redirecting to a different screen in your app.

import { Huddle01, HuddleProps } from '@huddle01/react-native-embed';

export default function MeetingScreen() {

    const huddleProps: HuddleProps = {
        projectId: "<PROJECT_ID>",
        roomId: "<ROOM_ID>",
        apiKey: "<API_KEY>",
        displayName: "Steph Curry",
        avatarUrl: "https://cdn.simplehash.com/assets/86b1a12bf4844ba9004ba711c1efa67c1ded4f176f7290bf1048c9ea34cbeb2e.png",
        onJoinRoom: () => {
            //custom logic to execute on room join
        },
        onLeaveRoom: () => {
            //custom logic to execute on room leave
        },
    }

    return (
        <View className="flex-1">
            <Huddle01 {...huddleProps} />
        </View>
    )
}

Custom Themes

The <Huddle01 /> component also accepts an optional theme prop to customize colors used inside the component. The package exports two pre-defined themes DarkTheme and LightTheme. The component defaults to the DarkTheme when you do not pass the theme prop. You can either create the whole theme object yourself or extend one of the two pre-defined theme objects.

import { Huddle01, HuddleProps, DarkTheme, LightTheme } from '@huddle01/react-native-embed';

const huddleProps: HuddleProps = {
    projectId: "<PROJECT_ID>",
    roomId: "<ROOM_ID>",
    apiKey: "<API_KEY>",
    displayName: "Steph Curry",
    avatarUrl: "https://cdn.simplehash.com/assets/86b1a12bf4844ba9004ba711c1efa67c1ded4f176f7290bf1048c9ea34cbeb2e.png",
    onJoinRoom: () => {
        //custom logic to execute on room join
    },
    onLeaveRoom: () => {
        //custom logic to execute on room leave
    },
    theme: {
        brandColor: '#246BFD',
        interfaceColor: '#181A20',
        onBrandColor: '#ffffff',
        textColor: '#CBD5E1',
        iconColor: '#94A3B8',
        borderColor: '#1C1E24',
    },
    //or just
    // theme: DarkTheme,
    // theme: LightTheme,
}

💡 For any help reach out to us on Discord