# Usage

A very common use case during a video call is to apply some effect on our backgrounds. Those backgrounds can vary but the most common ones are blurring and adding a static image. Our SDK offers background blurring and virtual backgrounds with static images out of the box and also has support for injecting your custom filter into the calling experience. In this guide, we will show you how to apply video filters to a video stream.

## Using the background video filters provided by the SDK

### Step 1 - Install the video filters library

To enable background filters in your app. You must first add the `@stream-io/video-filters-react-native` library.

<tabs>

<tabs-item value="expo" label="Expo">

```bash title="Terminal"
npx expo install @stream-io/video-filters-react-native
```

</tabs-item>

<tabs-item value="rncli" label="React Native CLI">

```bash title="Terminal"
yarn add @stream-io/video-filters-react-native
npx pod-install
```

</tabs-item>

</tabs>

This library adds the required native module for processing the video stream and manipulating it with your desired video filter.

### Step 2 - Wrap under Provider component

Background filters are provided through the following APIs and components:

- `<BackgroundFiltersProvider />` - a React context provider that will allow you to use the filters API in your application.
- `useBackgroundFilters()` - a React hook that will allow you to access the filters API in your application

A basic integration looks like this:

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

export default function App() {
  let client: StreamVideoClient; /* = ... */
  let call: Call; /* = ... */
  return (
    <StreamVideo client={client}>
      <StreamCall call={call}>
        <BackgroundFiltersProvider>
          <MyCallContent />
          <MyBackgroundFilterUI />{" "}
          {/* your UI to enable or disable filters, for example a modal dialog */}
        </BackgroundFiltersProvider>
      </StreamCall>
    </StreamVideo>
  );
}
```

The `BackgroundFiltersProvider` holds the state of the background filters in the app. It must be wrapped under the `StreamCall` component so that the media stream of the call can be accessed.

### Step 2 - Use the hook to control the filters

Once you have the `BackgroundFiltersProvider` rendered in your application,
you can use the `useBackgroundFilters()` hook to access the filters API and control the behavior of the filters.

<admonition type="warning">

In iOS, the background video filters are supported only on iOS 15 and above.
However, the iOS platform's minimum level of support for the custom filters that you may add depends on what APIs you would use.

</admonition>

```tsx
import { useBackgroundFilters } from '@stream-io/video-react-native-sdk';

export const MyBackgroundFilterUI = () => {
  const {
    isSupported, // checks if these filters can run on this device
    disableAllFilter // disables all the video filters
    applyBackgroundBlurFilter, // applies the blur filter
    applyBackgroundImageFilter, // applies the image filter
    currentBackgroundFilter, // the currently applied filter
  } = useBackgroundFilters();

  if (!isSupported) {
    return null;
  }

  return (
    <SafeAreaView>
      <Button onPress={disableAllFilter} title="Disable"/>
      <Button onPress={() => applyBackgroundBlurFilter('heavy')} title="Blur Heavy"/>
      <Button onPress={() => applyBackgroundBlurFilter('medium')} title="Blur Medium">
      <Button onPress={() => applyBackgroundBlurFilter('light')} title="Blur Light"/>
      <Button onPress={() => applyBackgroundImageFilter(require('path/to/image/amsterdam.png'))} title="Amsterdam Local Image Background"/>
      <Button onPress={() => applyBackgroundImageFilter({uri: 'https://upload.wikimedia.org/wikipedia/commons/1/18/React_Native_Logo.png'})} title="React Native Remote Image Background"/>
    </SafeAreaView>
  );
};
```

| Preview of background blur filter                                                                                          | Preview of background image replacement filter                                                                                       |
| -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| ![Preview of the background blur filter](@video/react-native/_assets/advanced/apply-video-filters/preview-blur-filter.png) | ![Preview of background image replacement filter](@video/react-native/_assets/advanced/apply-video-filters/preview-image-filter.png) |

## Advanced: adding custom video filters

Suppose you want to add custom video filters in place of or in addition to the built-in video filters. Our SDK makes it easy with helpful utilities. Follow the platform-specific guides below to get started:

- [**Expo**: How to add custom video filters in Expo](/video/docs/react-native/advanced/video-filters/custom-expo/)
- [**React Native CLI**: How to add custom video filters in React Native Community CLI](/video/docs/react-native/advanced/video-filters/custom-rn/)

---

This page was last updated at 2025-08-15T14:16:46.472Z.

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react-native/advanced/video-filters/usage/](https://getstream.io/video/docs/react-native/advanced/video-filters/usage/).