### Example: Calls Starting Soon

Source: https://getstream.io/video/docs/react/-native/guides/querying-calls

This example demonstrates how to query for 'livestream' type calls that are scheduled to start within the next 30 minutes.

```APIDOC
## Calls that are about to start

### Description
Queries for calls of type 'livestream' that are scheduled to start within the next 30 minutes.

### Method
`client.queryCalls(options)`

### Request Example
```typescript
import { StreamVideoClient } from "@stream-io/video-react-native-sdk";

let client: StreamVideoClient;

const inNext30mins = new Date(Date.now() + 1000 * 60 * 60 * 30);

const { calls } = await client.queryCalls({
  filter_conditions: {
    type: { $eq: "livestream" },
    starts_at: { $gt: inNext30mins.toISOString() },
  },
  sort: [{ field: "starts_at", direction: -1 }],
  limit: 10,
  watch: true,
});
```
```

--------------------------------

### Install Stream Video and Chat SDKs (npm)

Source: https://getstream.io/video/docs/react/advanced/chat-with-video

Installs the necessary Stream Video React SDK and Stream Chat SDK packages using npm for project setup.

```shell
npm install @stream-io/video-react-sdk stream-chat-react stream-chat
```

--------------------------------

### Install Stream Video and Chat SDKs (yarn)

Source: https://getstream.io/video/docs/react/advanced/chat-with-video

Installs the necessary Stream Video React SDK and Stream Chat SDK packages using yarn for project setup.

```shell
yarn add @stream-io/video-react-sdk stream-chat-react stream-chat
```

--------------------------------

### Install Node.js SDK for Stream Video

Source: https://getstream.io/video/docs/react/ui-cookbook/session-timers

Installs the necessary Node.js SDK for interacting with Stream's video services. This is a prerequisite for server-side setup.

```sh
npm install @stream-io/node-sdk
# or using yarn:
yarn add @stream-io/node-sdk
```

--------------------------------

### Get or Create a Call

Source: https://getstream.io/video/docs/react/basics/quickstart

Demonstrates how to retrieve an existing call or create a new one if it doesn't exist on Stream's servers. This is useful for recurring meetings or resuming ongoing calls. It requires an initialized StreamVideoClient.

```typescript
const client = new StreamVideoClient({ apiKey, user, token });
const call = client.call("default", "my-first-call");
await call.getOrCreate();
```

--------------------------------

### Client Setup and Call Joining in React Native

Source: https://getstream.io/video/docs/react/-native/setup/quickstart

Establishes a WebSocket connection by creating a StreamVideoClient instance, then creates a call object and joins the specified call. The `create: true` option ensures the call is created if it doesn't already exist. This snippet requires the `@stream-io/video-react-native-sdk` package.

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

const apiKey = "your-api-key";
const userId = "user-id";
const token = "authentication-token";
const callId = "my-call-id";
const user: User = { id: userId };

const client = new StreamVideoClient({ apiKey, user, token });
const call = client.call("default", callId);
call.join({ create: true });

export default function App() {
  return (
    <StreamVideo client={client}>
      <StreamCall call={call}>{/* Your UI */}</StreamCall>
    </StreamVideo>
  );
}
```

--------------------------------

### Install react-native-permissions

Source: https://getstream.io/video/docs/react/-native/guides/native-permissions

Installs the `react-native-permissions` library, which simplifies requesting permissions across iOS and Android. Ensure you follow platform-specific setup instructions.

```bash
yarn add react-native-permissions
```

--------------------------------

### Video Input Preview Component using Stream Video React SDK

Source: https://getstream.io/video/docs/react/ui-cookbook/lobby-preview

Demonstrates how to assemble a custom video preview component in React using the Stream Video SDK's VideoPreview component. It allows for custom UI rendering based on different video playing states like 'starting', 'playing', or 'unavailable'. The example shows integrating custom components for disabled, no camera, and starting camera states.

```tsx
import {
  useConnectedUser,
  DefaultVideoPlaceholder,
  StreamVideoParticipant,
  VideoPreview,
} from "@stream-io/video-react-sdk";

import { CameraIcon, LoadingIndicator } from "../icons";

export const Lobby = () => {
  return (
    <div>
      {/* ... other components */}
      <VideoPreview
        DisabledVideoPreview={DisabledVideoPreview}
        NoCameraPreview={NoCameraPreview}
        StartingCameraPreview={StartingCameraPreview}
      />
      {/* ... other components */}
    </div>
  );
};

export const DisabledVideoPreview = () => {
  const connectedUser = useConnectedUser();
  if (!connectedUser) return null;

  return (
    <DefaultVideoPlaceholder
      participant={
        {
          image: connectedUser.image,
          name: connectedUser.name,
        } as StreamVideoParticipant
      }
    />
  );
};

const NoCameraPreview = () => (
  <div>
    <CameraIcon />
  </div>
);

const StartingCameraPreview = () => (
  <div>
    <LoadingIndicator />
  </div>
);
```

--------------------------------

### Filters Guide

Source: https://getstream.io/video/docs/react/guides/querying-calls

Details available fields for filtering calls and provides examples for common filtering scenarios.

```APIDOC
## Filters

Filter expressions support multiple match criteria, and it's also possible to combine filters using logical operators (`$and`, `$or`, `$not`). Each filter can use comparison operators like equality (`$eq`), inequality (`$ne`), greater than (`$gt`), greater than or equal to (`$gte`), less than (`$lt`), less than or equal to (`$lte`), and in (`$in`).

### Available Filter Fields

| Field                | Description                                                   |
| -------------------- | ------------------------------------------------------------- |
| `id`                 | The id for this call                                          |
| `cid`                | The cid for this call. IE: `default:123`                      |
| `team`               | The team id for the call.                                     |
| `type`               | The call type. Typically `default`, `livestream` etc...       |
| `created_by_user_id` | The user id who created the call                              |
| `created_at`         | When the call was created                                     |
| `updated_at`         | When the call was updated                                     |
| `ended_at`           | When the call ended                                           |
| `starts_at`          | When the call starts at                                       |
| `backstage`          | If the call is in backstage mode or not                       |
| `members`            | Check if the call has these members listed                    |
| `ongoing`            | Check if the call is ongoing or not                           |
| `custom`             | You can query custom data using the `"custom.myfield"` syntax |

### Example: Calls that are about to start

This snippet queries for calls of type `livestream` that will start in the next 30 minutes.

```typescript
import { StreamVideoClient } from "@stream-io/video-react-sdk";

let client: StreamVideoClient;

const inNext30mins = new Date(Date.now() + 1000 * 60 * 60 * 30);

const { calls } = await client.queryCalls({
  filter_conditions: {
    type: { $eq: "livestream" },
    starts_at: { $gt: inNext30mins.toISOString() },
  },
  sort: [{ field: "starts_at", direction: -1 }],
  limit: 10,
  watch: true,
});
```

### Example: Call filters on a custom property

This snippet shows how to filter calls based on a custom property `color`.

```typescript
import { StreamVideoClient } from "@stream-io/video-react-sdk";

let client: StreamVideoClient;

const { calls } = await client.queryCalls({
  filter_conditions: { "custom.color": "red" },
  limit: 10,
  watch: true,
});
```

### Example: Calls that are ongoing / currently have participants

This snippet filters for calls that are currently ongoing.

```typescript
import { StreamVideoClient } from "@stream-io/video-react-sdk";

let client: StreamVideoClient;

const { calls } = await client.queryCalls({
  filter_conditions: { ongoing: true },
});
```

### Example: Calls the user has created or is a member of

This snippet uses the `$or` operator to find calls created by a specific user or where the user is a member.

```typescript
import { StreamVideoClient } from "@stream-io/video-react-sdk";

let client: StreamVideoClient;

const { calls } = await client.queryCalls({
  filter_conditions: {
    $or: [
      { created_by_user_id: "<user id>" },
      { members: { $in: ["<user id>"] } },
    ],
  },
  limit: 10,
  watch: true,
});
```
```

--------------------------------

### Install Stream Video React SDK with Yarn

Source: https://getstream.io/video/docs/react/basics/installation

This command installs the Stream Video React SDK using the yarn package manager. Ensure you have yarn installed and configured in your project.

```bash
yarn add @stream-io/video-react-sdk
```

--------------------------------

### Install Stream Video React SDK with npm

Source: https://getstream.io/video/docs/react/basics/installation

This command installs the Stream Video React SDK using the npm package manager. Ensure you have npm installed and configured in your project.

```bash
npm install @stream-io/video-react-sdk
```

--------------------------------

### Query Upcoming Livestream Calls

Source: https://getstream.io/video/docs/react/-native/guides/querying-calls

This example shows how to query for livestream calls that are scheduled to start within the next 30 minutes. It utilizes the `starts_at` field with a greater than operator and sorts the results by start time in descending order. The `type` field is filtered to specifically target 'livestream' calls.

```typescript
import { StreamVideoClient } from "@stream-io/video-react-native-sdk";

let client: StreamVideoClient;

const inNext30mins = new Date(Date.now() + 1000 * 60 * 60 * 30);

const { calls } = await client.queryCalls({
  filter_conditions: {
    type: { $eq: "livestream" },
    starts_at: { $gt: inNext30mins.toISOString() },
  },
  sort: [{ field: "starts_at", direction: -1 }],
  limit: 10,
  watch: true,
});
```

--------------------------------

### Toggle Camera Button

Source: https://getstream.io/video/docs/react/basics/quickstart

Provides a button component to toggle the user's camera on or off. It utilizes the `useCameraState` hook from the SDK to get the camera control and mute status. This is a common UI element for video calls.

```tsx
import { useCallStateHooks } from "@stream-io/video-react-sdk";

export const MyVideoButton = () => {
  const { useCameraState } = useCallStateHooks();
  const { camera, isMute } = useCameraState();
  return (
    <button onClick={() => camera.toggle()}>
      {isMute ? "Turn on camera" : "Turn off camera"}
    </button>
  );
};
```

--------------------------------

### Join a Call using join() in TypeScript

Source: https://getstream.io/video/docs/react/advanced/events

This code example shows how to join a specific call using the `join()` method on a call object obtained from the client. Joining a call is another method to start receiving call-related events. It requires an initialized `StreamVideoClient` and the call's type and ID.

```typescript
import { StreamVideoClient } from "@stream-io/video-react-sdk";

let client: StreamVideoClient;

await client.call("default", "test-call").join();
```

--------------------------------

### Disable Firebase iOS Installation in React Native Config

Source: https://getstream.io/video/docs/react/-native/incoming-calls/other-than-ringing-setup/react-native

Configures `react-native.config.js` to prevent automatic installation of Firebase modules on iOS. This is done when Firebase is not needed for iOS-specific notification handling, avoiding potential conflicts.

```javascript
module.exports = {
  dependencies: {
    "@react-native-firebase/app": {
      platforms: {
        ios: null,
      },
    },
    "@react-native-firebase/messaging": {
      platforms: {
        ios: null,
      },
    },
  },
};
```

--------------------------------

### Install Dependencies for React Native Push Notifications

Source: https://getstream.io/video/docs/react/-native/incoming-calls/other-than-ringing-setup/react-native

Installs necessary packages for handling push notifications in React Native. This includes Firebase Cloud Messaging for Android, Notifee for notification customization, and a specific package for iOS.

```bash
yarn add @react-native-firebase/app \n  @react-native-firebase/messaging \n  @notifee/react-native \n  @react-native-community/push-notification-ios

npx pod-install
```

--------------------------------

### Initialize StreamVideoClient and Join Call

Source: https://getstream.io/video/docs/react/basics/quickstart

Sets up the StreamVideoClient with API key, user ID, and token, then creates and joins a call. This is the foundational step for any video call application using the SDK. It requires the @stream-io/video-react-sdk package.

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

const apiKey = "your-api-key";
const userId = "user-id";
const token = "authentication-token";
const user: User = { id: userId };

const client = new StreamVideoClient({ apiKey, user, token });
const call = client.call("default", "my-first-call");
call.join({ create: true });

export const MyApp = () => {
  return (
    <StreamVideo client={client}>
      <StreamCall call={call}>
        /* <MyVideoUI /> */
      </StreamCall>
    </StreamVideo>
  );
};
```

--------------------------------

### Display Call Recordings After Livestream Ends (React)

Source: https://getstream.io/video/docs/react/guides/livestreaming

This component fetches and displays recordings of a finished livestream. It uses `useCall` to get call state and `useEffect` to query for existing recordings and subscribe to new `call.recording_ready` events. It displays a list of recordings with their start and end times, linking to the recording URLs. Dependencies include `@stream-io/video-react-sdk`.

```tsx
import type { CallRecording } from "@stream-io/video-react-sdk";
import { useState, useEffect } from "react";
import { useCall } from "@stream-io/video-react-sdk";

export const CallEnded = () => {
  const call = useCall();
  const [recordings, setRecordings] = useState<CallRecording[]>([]);

  useEffect(() => {
    let cancel = false;

    if (call?.state?.session?.id) {
      call.queryRecordings(call.state.session.id).then(({ recordings }) => {
        if (!cancel) {
          setRecordings((prev) => [...prev, ...recordings]);
        }
      }).catch(error => {
        console.error("Failed to query recordings:", error);
      });
    }

    const unsubscribe = call?.on("call.recording_ready", (event) => {
      if (!cancel) {
        setRecordings((prev) => [...prev, event.call_recording]);
      }
    });

    return () => {
      cancel = true;
      if (unsubscribe) {
        unsubscribe();
      }
      setRecordings([]);
    };
  }, [call]);

  return (
    <div className="call-ended">
      <h2>The livestream has ended</h2>

      {recordings.length > 0 && (
        <>
          <h3>Watch recordings</h3>
          <ul>
            {recordings.map((recording) => (
              <li key={recording.id || recording.url}>
                <a href={recording.url} target="_blank" rel="noopener noreferrer">
                  {new Date(recording.start_time).toLocaleString()} - {new Date(recording.end_time).toLocaleString()}
                </a>
              </li>
            ))}
          </ul>
        </>
      )}
      {recordings.length === 0 && <p>No recordings available.</p>}
    </div>
  );
};

```

--------------------------------

### Install @react-native-firebase for Notifications

Source: https://getstream.io/video/docs/react/-native/incoming-calls/other-than-ringing-setup/expo

Installs the necessary @react-native-firebase libraries for handling push notifications. This is a prerequisite for using the @react-native-firebase messaging service.

```bash
yarn add @react-native-firebase/app
yarn add @react-native-firebase/messaging
```

--------------------------------

### Basic Stream Video Call Setup in React

Source: https://getstream.io/video/docs/react/ui-cookbook/manual-video-quality-selection

This snippet demonstrates the basic setup for a Stream video calling application in React. It initializes the StreamVideoClient, joins a call, and renders the call interface. Ensure you replace placeholder values for API key, user ID, and token.

```jsx
import {
  SpeakerLayout,
  StreamCall,
  StreamTheme,
  StreamVideo,
  StreamVideoClient,
} from "@stream-io/video-react-sdk";
import "@stream-io/video-react-sdk/dist/css/styles.css";

const client = new StreamVideoClient({
  apiKey: "REPLACE_WITH_API_KEY",
  user: {
    id: "REPALCE_WITH_USER_ID",
    name: "Jane Doe",
  },
  token: "REPLACE_WITH_TOKEN",
});

const App = () => {
  const [call, setCall] = useState(null);

  useEffect(() => {
    const newCall = client.call("appointment", callId);
    newCall
      .join({ create: true })
      .then(() => setCall(newCall))
      .catch(() => console.error("Failed to join the call"));

    return () =>
      newCall.leave().catch(() => console.error("Failed to leave the call"));
  }, []);

  if (!call) {
    return <>Loading...</>;
  }

  return (
    <StreamTheme>
      <StreamVideo client={client}>
        <StreamCall call={call}>
          <SpeakerLayout />
        </StreamCall>
      </StreamVideo>
    </StreamTheme>
  );
};

```

--------------------------------

### Set up UI with Built-in Components

Source: https://getstream.io/video/docs/react/basics/quickstart

Configures the video call UI using Stream's built-in components like `SpeakerLayout` and `CallControls`. It involves wrapping the components with `StreamTheme` for styling and `StreamVideo` and `StreamCall` providers. Requires the SDK's CSS styles to be imported.

```tsx
import {
  CallControls,
  SpeakerLayout,
  StreamCall,
  StreamTheme,
  StreamVideo,
} from "@stream-io/video-react-sdk";

import "@stream-io/video-react-sdk/dist/css/styles.css";

export const MyApp = () => {
  // Assuming you have the 'client' and 'call' created
  return (
    <StreamVideo client={client}>
      <StreamCall call={call}>
        <StreamTheme>
          <SpeakerLayout />
          <CallControls />
        </StreamTheme>
      </StreamCall>
    </StreamVideo>
  );
};
```

--------------------------------

### Backstage Setup

Source: https://getstream.io/video/docs/react/guides/joining-and-creating-calls

Configure backstage mode for livestreams, allowing co-hosts to set up before going live.

```APIDOC
## Backstage Setup

### Description
The backstage feature allows co-hosts to set up their camera before going live. Regular users can join before the call is live if `join_ahead_time_seconds` is specified.

### Method
POST

### Endpoint
`/calls/{id}` (This is an illustrative endpoint, actual endpoint may vary based on SDK)

### Parameters
#### Request Body
- **starts_at** (Date) - Required - The time the call will start.
- **settings_override** (Object) - Required - Settings override object.
  - **backstage** (Object) - Required - Backstage settings.
    - **enabled** (boolean) - Required - Enable backstage mode.
    - **join_ahead_time_seconds** (number) - Optional - Time in seconds before the start time that regular users can join.

### Request Example
```typescript
await call.getOrCreate({
  data: {
    starts_at: new Date(Date.now() + 500 * 1000), // 500 seconds from now
    settings_override: {
      backstage: {
        enabled: true,
        join_ahead_time_seconds: 300,
      },
    },
  },
});
```
```

--------------------------------

### Install expo-task-manager for Notifications

Source: https://getstream.io/video/docs/react/-native/incoming-calls/other-than-ringing-setup/expo

Installs the expo-task-manager library, which is used for handling background tasks, including push notifications. This is an alternative to using @react-native-firebase for notification handling.

```bash
npx expo install expo-task-manager
```

--------------------------------

### Run Node.js Configuration Script

Source: https://getstream.io/video/docs/react/-native/ui-cookbook/session-timers

Executes the Node.js script to set up the Stream.io video application. Ensure Node.js and npm/yarn are installed.

```bash
npx ts-node script.ts
```

--------------------------------

### Get Total Participant Count (React)

Source: https://getstream.io/video/docs/react/guides/livestreaming

This code snippet demonstrates how to calculate the total number of participants in a call, including anonymous users. It uses `useParticipants` to get the list of known participants and `useAnonymousParticipantCount` to get the count of anonymous users, then sums them up. This is useful for displaying a live viewer count.

```tsx
import { useCallStateHooks } from "@stream-io/video-react-sdk";

// Inside your component:
const { useParticipants, useAnonymousParticipantCount } = useCallStateHooks();
const participants = useParticipants();
const anonymousParticipantCount = useAnonymousParticipantCount();
const totalParticipantCount = participants.length + anonymousParticipantCount;

// You can now use totalParticipantCount to display the number of viewers.
console.log("Total participants:", totalParticipantCount);

```

--------------------------------

### Install Node.js SDK for Stream.io Video

Source: https://getstream.io/video/docs/react/-native/ui-cookbook/session-timers

Installs the Stream.io Node.js SDK using either Yarn or npm. This SDK is used for server-side configuration of roles, call types, and users.

```bash
yarn add @stream-io/node-sdk
```

```bash
npm install @stream-io/node-sdk
```

--------------------------------

### Enable Media Projection Service in MainActivity for Android (Kotlin)

Source: https://getstream.io/video/docs/react/-native/advanced/screensharing/setup/react-native

Enables the media projection service in the MainActivity.kt file using Kotlin. This configuration is part of the Android setup for screen sharing, allowing the app to capture screen content.

```kotlin
import com.oney.WebRTCModule.WebRTCModuleOptions

override fun onCreate(savedInstanceState: Bundle?) {
    val options: WebRTCModuleOptions = WebRTCModuleOptions.getInstance()
    options.enableMediaProjectionService = true
    // ..the rest
}
```

--------------------------------

### Example: Calls Created By or Member Of User

Source: https://getstream.io/video/docs/react/-native/guides/querying-calls

This example shows how to retrieve calls that were created by a specific user or that the user is a member of.

```APIDOC
## Calls the user has created or is a member of

### Description
Retrieves calls that were created by the specified user ID or calls where the user is listed as a member.

### Method
`client.queryCalls(options)`

### Request Example
```typescript
import { StreamVideoClient } from "@stream-io/video-react-native-sdk";

let client: StreamVideoClient;

const { calls } = await client.queryCalls({
  filter_conditions: {
    $or: [
      { created_by_user_id: "<user id>" },
      { members: { $in: ["<user id>"] } },
    ],
  },
  limit: 10,
  watch: true,
});
```
```

--------------------------------

### Install Expo Push Notification Dependencies

Source: https://getstream.io/video/docs/react/-native/incoming-calls/other-than-ringing-setup/expo

Installs essential Expo packages for handling push notifications and customizing their display. These include `expo-notifications` and `expo-task-manager` for FCM handling on Android and iOS, and `@notifee/react-native` for advanced notification customization.

```bash
npx expo install expo-notifications
npx expo install expo-task-manager
npx expo install @notifee/react-native
```

--------------------------------

### Set Up and Manage Call Instances in React

Source: https://getstream.io/video/docs/react/guides/joining-and-creating-calls

Demonstrates how to initialize a call instance, create it with initial members and their roles, update call members by adding new users, and remove users from a call using the Stream Video SDK for React. It requires an initialized `client` object.

```typescript
const call = client.call("my-call-type", "my-call-id");
await call.getOrCreate({
  data: {
    members: [
      // please note the `role` property
      { user_id: "alice", role: "call_member" },
      { user_id: "bob", role: "call_member" },
    ],
  },
});

// and if necessary, to grant access to more users
await call.updateCallMembers({
  update_members: [{ user_id: "charlie", role: "call_member" }],
});

// or, to remove access from some users
await call.updateCallMembers({
  remove_members: ["charlie"],
});
```

--------------------------------

### Enable Media Projection Service in MainActivity for Android (Java)

Source: https://getstream.io/video/docs/react/-native/advanced/screensharing/setup/react-native

Enables the media projection service in the MainActivity.java file using Java. This is a key step in the Android setup for screen sharing, ensuring the application can capture the device's screen.

```java
import com.oney.WebRTCModule.WebRTCModuleOptions;

@Override
protected void onCreate(Bundle savedInstanceState) {
    WebRTCModuleOptions options = WebRTCModuleOptions.getInstance();
    options.enableMediaProjectionService = true;
    // ..the rest
}
```

--------------------------------

### Install Notifee and Pods for React Native Foreground Services

Source: https://getstream.io/video/docs/react/-native/guides/keeping-call-alive

Installs the Notifee library and its native dependencies for React Native projects. This setup is a prerequisite for enabling the foreground service to maintain calls in the background. Users should run `pod-install` after adding the library.

```bash
yarn add @notifee/react-native
npx pod-install
```

--------------------------------

### Install React Navigation Dependencies

Source: https://getstream.io/video/docs/react/-native/advanced/chat-with-video

Installs the necessary packages for React Navigation, including native stack navigator, screens, and safe area context. This step is crucial for setting up navigation within the application. Ensure to run `npx pod-install` afterwards.

```bash
yarn add @react-navigation/native @react-navigation/elements @react-navigation/native-stack react-native-screens react-native-safe-area-context
npx pod-install
```

--------------------------------

### Initialize Chat and Video Clients in React

Source: https://getstream.io/video/docs/react/advanced/chat-with-video

Sets up the Stream Chat and Stream Video clients within a React component. It uses a custom hook for chat client creation and initializes the video client, managing their lifecycle by disconnecting the user on component unmount. This ensures both chat and video functionalities are available for the user.

```tsx
import type { UserResponse } from "stream-chat";
import { Chat } from "stream-chat-react";
import { StreamVideo, StreamVideoClient } from "@stream-io/video-react-sdk";
import { Channel } from "./components/Channel";
import { Sidebar } from "./components/Sidebar";
import { Video } from "./components/Video";
import { useCreateChatClient } from "./hooks";

import type { StreamChatType } from "./types/chat";
import { useState, useEffect } from "react";

const Root = ({ 
  apiKey, 
  user, 
  userToken,
}: { 
  apiKey: string;
  user: UserResponse<StreamChatType>;
  userToken: string;
}) => {
  const chatClient = useCreateChatClient<StreamChatType>({
    apiKey,
    tokenOrProvider: userToken,
    userData: user,
  });
  const [videoClient, setVideoClient] = useState<StreamVideoClient>();

  useEffect(() => {
    const _client = new StreamVideoClient({
      apiKey,
      user: userData,
      token: userToken,
    });
    setVideoClient(_client);

    return () => {
      _client.disconnectUser();
      setVideoClient(undefined);
    };
  }, []);

  if (!chatClient || !videoClient) return null;

  return (
    <Chat client={chatClient}>
      <StreamVideo client={videoClient}>
        <Sidebar user={user} />
        <Channel />
        <Video />
      </StreamVideo>
    </Chat>
  );
};

```

--------------------------------

### Initialize Client for Guest User

Source: https://getstream.io/video/docs/react/guides/client-auth

Sets up the Stream Video client for a guest user. Guest users are temporary accounts that can be given a name and image when joining a call. This setup does not require a token.

```typescript
import { StreamVideoClient, User } from "@stream-io/video-react-sdk";

const user: User = { id: "jack-guest", type: "guest" };
const apiKey = "my-stream-api-key";
const client = new StreamVideoClient({ apiKey, user });
```

--------------------------------

### Initialize Microphone State in React

Source: https://getstream.io/video/docs/react/guides/camera-and-microphone

Provides examples of how to get the microphone object, either directly from the `call` instance or by using the `useMicrophoneState` hook from `useCallStateHooks`.

```typescript
const call = useCall();
const microphone = call.microphone;

// or using hooks
import { useCallStateHooks } from "@stream-io/video-react-sdk";

const { useMicrophoneState } = useCallStateHooks();
const { microphone } = useMicrophoneState();
```

--------------------------------

### Initialize Push Configuration and Listeners in Entry Point

Source: https://getstream.io/video/docs/react/-native/incoming-calls/other-than-ringing-setup/expo

Calls the necessary Stream Video React Native setup methods, including push configuration, notifee listeners, and push message listeners, from the application's main entry point. This ensures that configurations are applied as soon as the JavaScript bridge is initialized, especially when the app is opened from a dead state via a push notification.

```javascript
import "expo-router/entry";
import { setPushConfig } from "src/utils/setPushConfig";
import { setNotifeeListeners } from "src/utils/setNotifeeListeners";
import { setPushMessageListeners } from "src/utils/setPushMessageListeners";

setPushConfig();
setNotifeeListeners();
setPushMessageListeners();
```

--------------------------------

### Update AppDelegate.h for iOS Push Notifications

Source: https://getstream.io/video/docs/react/-native/incoming-calls/other-than-ringing-setup/react-native

Modifies the `AppDelegate.h` file to include the UserNotifications framework and declare the UNUserNotificationCenterDelegate conformance. This is necessary for handling push notifications on iOS.

```objectivec
#import <UserNotifications/UNUserNotificationCenter.h>
```

```objectivec
@interface AppDelegate : RCTAppDelegate <UNUserNotificationCenterDelegate>
```

```objectivec
@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, UNUserNotificationCen
```

--------------------------------

### Request Notification Permissions (JavaScript)

Source: https://getstream.io/video/docs/react/-native/incoming-calls/other-than-ringing-setup/react-native

Requests notification permissions for alerts and sounds from the user using the 'react-native-permissions' library. This is typically done at an appropriate point in the application's lifecycle.

```javascript
import { requestNotifications } from "react-native-permissions";

await requestNotifications(["alert", "sound"]);
```

--------------------------------

### Import SCSS and CSS for Default Styles

Source: https://getstream.io/video/docs/react/advanced/chat-with-video

This snippet demonstrates how to import the default SCSS for the chat SDK and the default CSS for the video SDK into your main SCSS file. This ensures that the base styling for both SDKs is applied globally.

```scss
@layer default-chat-sdk {
  @import "stream-chat-react/dist/scss/v2/index.scss";
}

@import "@stream-io/video-react-sdk/dist/css/styles.css"
  layer(default-video-sdk);
```

--------------------------------

### Initialize Notification Center Delegate (Objective-C)

Source: https://getstream.io/video/docs/react/-native/incoming-calls/other-than-ringing-setup/react-native

Initializes the UNUserNotificationCenter delegate within the application's launch options. This is crucial for handling foreground notifications and setting up the notification center.

```objc
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
  center.delegate = self;
  // ...rest
}
```

--------------------------------

### Example: Ongoing Calls

Source: https://getstream.io/video/docs/react/-native/guides/querying-calls

This example demonstrates how to query for calls that are currently ongoing or have active participants.

```APIDOC
## Calls that are ongoing / currently have participants

### Description
Queries for calls that are currently live or have participants.

### Method
`client.queryCalls(options)`

### Request Example
```typescript
import { StreamVideoClient } from "@stream-io/video-react-native-sdk";

let client: StreamVideoClient;

const { calls } = await client.queryCalls({
  filter_conditions: { ongoing: true },
});
```
```

--------------------------------

### Setup Expo Module with CLI

Source: https://getstream.io/video/docs/react/-native/advanced/video-filters/custom-expo

Initializes a new local Expo module using the create-expo-module CLI. This command sets up the basic file structure and configuration for a native module within your Expo project. It requires specific inputs for module naming and package identification.

```bash
npx create-expo-module@latest --local
```

--------------------------------

### Configure Firebase Android Build Gradle

Source: https://getstream.io/video/docs/react/-native/incoming-calls/other-than-ringing-setup/react-native

Applies the Google services Gradle plugin to enable Firebase functionality in your Android application. This is a crucial step for integrating Firebase Cloud Messaging.

```groovy
buildscript {
  dependencies {
    // ... other dependencies
    classpath 'com.google.gms:google-services:4.3.15'
  }
}
```

```groovy
apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'
```

--------------------------------

### No-Op Firebase Listeners for Non-Android Platforms (TypeScript)

Source: https://getstream.io/video/docs/react/-native/incoming-calls/other-than-ringing-setup/react-native

A placeholder function for platforms other than Android. This ensures that the `@react-native-firebase/messaging` library is not imported or used on platforms where it's not intended, preventing potential runtime errors.

```ts
export const setFirebaseListeners = () => {
  // do nothing
};

```

--------------------------------

### Using Pre-built Components with Stream Video SDK

Source: https://getstream.io/video/docs/react/ui-components/overview

Demonstrates how to create a functional video calling application using pre-built components from the Stream Video SDK. It requires initializing StreamVideo with a client and StreamCall with a call instance.

```tsx
import "@stream-io/video-react-sdk/dist/css/styles.css";
import {
  CallControls,
  StreamCall,
  StreamTheme,
  StreamVideo,
  SpeakerLayout,
} from "@stream-io/video-react-sdk";

const MyApp = () => {
  // Assuming you have the 'client' and 'call' instance created
  return (
    <StreamVideo client={client}>
      <StreamTheme>
        <StreamCall call={call}>
          <SpeakerLayout />
          <CallControls />
        </StreamCall>
      </StreamTheme>
    </StreamVideo>
  );
};

```