Skip to main content

Introduction

Dyte's React Native UI Kit is a prebuilt design library of UI components that makes it easy to integrate video and voice calls into any app or website within minutes.

The Anatomy of React Native UI Kit​

The UI Kit is a design library of prebuilt UI components built on top of the core SDKs. Core SDK handles all the low-level media and network handling parts of a meeting and exposes simpler APIs to use. You can create a meeting object using the web-core components and pass it to the UI Kit components.

  • Uses a layered design structure, allowing you to start with one prebuilt component and slowly add further layers as the needs evolve.
  • Includes a number of Hooks. Hooks enable you to use various React features from your components. For more information, see Use React Native Core Hooks.

How to Use React Native UI Kit?​

Dyte's UI Kit offers a couple of ways to get started with your live video and voice calling applications.

  • Use prebuilt components: You can use prebuilt DyteMeeting component to create your meeting quickly. With this component, you don't have to handle all the states, dialogs, and other aspects of managing the application. The UI kit also respect your permissions and theming configuration from the preset.

    For more information, see React Native UI Kit Quickstart.

  • Build your own UI: Dyte also offers the flexibility to build your own UI using various individual components. This offers limitless customization options, ranging from colors and font to spacing, participant tiles, screen share views, logo, height, width and more, you can tailor the UI to fit your exact needs. See Build your own UI section.

Supported Devices​

Here are the device requirements:

  • Android API Level 24 and above
  • iOS 12 and above

Features​

  • Dyte UI Kit is built using React Native components. React Native Components are a built-in components that enables you to develop reusable custom elements without relying on any third-party frameworks.
  • Dyte's React Native UI Kit also 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 project. You can simply import the package from @dytesdk/react-native-core, which is a hooks wrapper on @dytesdk/react-native-core. For more information, see Use React Native Core Hooks.
  • Each component uses design tokens in conjunction with CSS variables for styling. This makes the customization super simple and easy. Other than the design tokens, we've also attempted to improve the customization options, with features like Internationalisation (i18n) and Icon Packs Support.