# Overview

Build video calling, audio rooms, and live streams easily with Stream SDK. Use the low-level client, our guides, or pre-built UI components to add calling to your app in under an hour.

## Best Practices

- **Start with built-in components** - Use `CallContent` and `RingingCallContent` for quick implementation
- **Customize incrementally** - Override specific props before building from scratch
- **Use ParticipantView** - Includes label, network indicator, mute state, fallback, and reactions
- **Mix and match** - Combine built-in components with custom ones

### Rendering Participant

Render participant video with label, network indicator, mute state, fallback, and reactions using [ParticipantView](https://getstream.io/video/docs/react-native/v2/ui-components/participants/participant-view/):

```tsx
<ParticipantView participant={participant} />
```

You will see the result as below:

![Participant Camera On](https://getstream.io/docs-assets/images/d508d4f57257.png)

![Participant Camera Off](https://getstream.io/docs-assets/images/cd2c2d251e42.png)

### Video Call UI

Use [`CallContent`](https://getstream.io/video/docs/react-native/v2/ui-components/call/call-content/) for:

- **Call Participants Layout** - Renders all participants
- **Controls** - Actions to control a joined call

```tsx
const App = () => {
  return (
    <View style={styles.container}>
      <CallContent />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});
```

![Preview of Video Call UI](https://getstream.io/docs-assets/images/4959f9f7c3c1.png)

### Ringing (Incoming/Outgoing calls)

Implement incoming/outgoing screens with [`RingingCallContent`](https://getstream.io/video/docs/react-native/v2/ui-components/call/ringing-call/):

- **Incoming/Outgoing** - Displays [`IncomingCall`](https://getstream.io/video/docs/react-native/v2/ui-components/call/incoming-call/) or [`OutgoingCall`](https://getstream.io/video/docs/react-native/v2/ui-components/call/outgoing-call/) based on state
- **After accept** - Shows [`CallContent`](https://getstream.io/video/docs/react-native/v2/ui-components/call/call-content/)
- **Joining state** - Shows `CallPreparingIndicator`

![Incoming Call](https://getstream.io/docs-assets/images/1e65bfbd810e.png)

![Outgoing Call](https://getstream.io/docs-assets/images/4f35de080a2e.png)

```tsx
const App = () => {
  return (
    <View style={styles.container}>
      <RingingCallContent />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});
```

### UI Component Customization

Customize Stream SDK UI components by:

- **Building from scratch** - Use low-level components via UI Cookbook
- **Using built-in components** - Ready-to-use component library
- **Mixing approaches** - Combine custom and built-in components

---

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react-native/v2/ui-components/overview/](https://getstream.io/video/docs/react-native/v2/ui-components/overview/).