# Video Renderer

The video renderer is the core UI component for displaying participant video in real-time during calls.

## Best Practices

- **Optimize performance** - Use `objectFit="cover"` for consistent video scaling
- **Handle video unavailability** - Display fallback content when video streams are missing
- **Consider aspect ratios** - Account for different camera orientations and resolutions
- **Test on devices** - Verify rendering performance on both iOS and Android

![Preview of the Default Video Renderer component](https://getstream.io/docs-assets/images/456ed8ec5a91.png)

The default component may not meet all design requirements. This guide covers customization options.

## Custom Video Renderer

Customize the video renderer by passing your own component to [`CallContent`](https://getstream.io/video/docs/react-native/v2/ui-components/call/call-content/).

![Preview of the Custom VideoRenderer component](https://getstream.io/docs-assets/images/2a031db9a38f.png)

Example:

```tsx
import { View, StyleSheet } from "react-native";
import { RTCView } from "@stream-io/react-native-webrtc";

const CustomVideoRenderer = ({ participant }: VideoRendererProps) => {
  const { videoStream } = participant;
  return (
    <View style={styles.background}>
      <RTCView
        streamURL={videoStream?.toURL()}
        style={styles.stream}
        objectFit="cover"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  background: {
    ...StyleSheet.absoluteFillObject,
    alignItems: "center",
    justifyContent: "center",
  },
  stream: {
    height: 250,
    width: 250,
    borderRadius: 125,
  },
});
```

## Final Steps

Pass the custom component to the [`VideoRenderer`](https://getstream.io/video/docs/react-native/v2/ui-components/call/call-content/#videorenderer) prop of [`CallContent`](https://getstream.io/video/docs/react-native/v2/ui-components/call/call-content/):

```tsx {13}
import {
  Call,
  CallContent,
  StreamCall,
} from "@stream-io/video-react-native-sdk";

const VideoCallUI = () => {
  let call: Call;
  // your logic to create a new call or get an existing call

  return (
    <StreamCall call={call}>
      <CallContent VideoRenderer={CustomVideoRenderer} />
    </StreamCall>
  );
};
```

>
> **Note:** Access participant data using hooks from `useCallStateHooks`:
>
> - **useParticipants** - Returns details for all participants
> - **useRemoteParticipants** - Returns details for remote participants only
> - **useLocalParticipant** - Returns the local participant's details
>
> `useConnectedUser` is a standalone hook (not part of `useCallStateHooks`) that returns the connected `User` object.
>

---

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