Use React Native Core Hooks

Dyte's React Native UI Kit provides multiple Hooks. Hooks let you use different React features from your components.

This provides seamless developer experience when integrating Dyte's UI Kit in your React native project. You can simply import the package from dytesdk/react-native-core.

This page lists all the built-in Hooks in Dyte.

• <DyteProvider />
• <DyteUIProvider />
• useDyteMeeting()
• useDyteSelector()

<DyteProvider />

It is a simple context provider providing the meeting object to child components.

import { useDyteClient } from '@dytesdk/react-native-core';

function App() {
  const [meeting, initMeeting] = useDyteClient();

  useEffect(() => {
    const init = async () => {
      initMeeting({
        authToken: '<auth-token>',
        defaults: {
          audio: true,
          video: true,
        },
      });
    };
    init();
  }, []);

  return (
    <DyteProvider value={meeting}>
      {/* Render your component */}
      <MyComponent />
    </DyteProvider>
  );
}

<DyteUIProvider />

It is a simple context provider providing the dyte design system to child components.

import { useDyteClient } from '@dytesdk/react-native-core';
import { DyteUIProvider, DyteMeeting } from '@dytesdk/react-native-ui-kit';

export default function App() {
  const [meeting, initMeeting] = useDyteClient();

  useEffect(() => {
    const init = async () => {
      initMeeting({
        authToken: '<auth-token>',
        defaults: {
          audio: true,
          video: true,
        },
      });
    };
    init();
  }, []);

  return (
    <DyteProvider value={meeting}>
      <DyteUIProvider>
        <DyteMeeting meeting={meeting} />
      </DyteUIProvider>
    </DyteProvider>
  );
}

And to consume the context value, we provide two more hooks, each serving a specific purpose.

These are:

• useDyteMeeting()
• useDyteSelector()

useDyteMeeting()

This hook essentially returns the meeting object you passed to the DyteProvider.

The value returned doesn't re-render always whenever properties inside the object change.

import { useDyteSelector, useDyteMeeting } from '@dytesdk/react-native-core';

function Meeting() {
  const { meeting } = useDyteMeeting();

  /*
    use joinRoom() method or the setup screen component
    to actually enter the meeting
  */
  useEffect(() => {
    meeting.joinRoom();
  }, [meeting]);

  // show DyteMeeting
  return <DyteMeeting meeting={meeting} />;
}

useDyteSelector()

If you're familiar with Redux's useSelector hook, this hook works in a similar way.

It allows you to extract data from the meeting object using a selector function.

This hook will only cause a re-render when the actual data you returned for changes.

Here is how you can get all the joined participants data:

const joinedParticipants = useDyteSelector(
  (meeting) => meeting.participants.joined
);

Refer to core documentation for reference on the various properties of the meeting object.

Example

import React from 'react';
import { View } from 'react-native';
import { useDyteMeeting, useDyteSelector } from '@dytesdk/react-native-core';
import { DyteButton, DyteGrid, DyteText } from "@dytesdk/react-native-ui-kit";

function Meeting() {
  const { meeting } = useDyteMeeting();
  const roomJoined = useDyteSelector((m) => m.self.roomJoined);

  if (!roomJoined) {
    return (
      <View>
        <DyteText>You haven't joined the room yet.</DyteText>
        <DyteButton onClick={() => meeting.joinRoom()}>Join Room</DyteButton>
      </View>
    );
  }

  return (
    <DyteGrid meeting={meeting} />
  );
}

export default Meeting;