> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Call Log Details

> Call Log Details — CometChat documentation.

## Overview

The `CallLogDetails` is a [Component](/ui-kit/react-native/v4/components-overview#components) that displays all the information related to a call. This component displays information like user/group information, participants of the call, recordings of the call (if available) & history of all the previous calls. Also, it has buttons to start a new call.

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Gp90C5sdVtuRR4t7/images/83aea838-call_details_overview_cometchat_screens-94a4ed1b32232dd677f66067238b4148.png?fit=max&auto=format&n=Gp90C5sdVtuRR4t7&q=85&s=2c79e396c0d320b72c3237761833ac56" alt="Image" width="4498" height="3120" data-path="images/83aea838-call_details_overview_cometchat_screens-94a4ed1b32232dd677f66067238b4148.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/ubfBSdV1t6rmjxeA/images/8bca8d91-call_details_overview_cometchat_screens-fa7e5ec48dbb0112dd48384bc017f89c.png?fit=max&auto=format&n=ubfBSdV1t6rmjxeA&q=85&s=0ecf7f3e3e6155281773c5b443e008ca" alt="Image" width="4498" height="3120" data-path="images/8bca8d91-call_details_overview_cometchat_screens-fa7e5ec48dbb0112dd48384bc017f89c.png" />
  </Tab>
</Tabs>

| Components                                                             | Description                                                                                                                                                                                                                            |
| ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Call Log History](/ui-kit/react-native/v4/call-log-history)           | The `Call Log History` component shows a paginated list of all the calls between the logged-in user & another user or group. This allows the user to see all the calls with a specific user/group they have initiated/received/missed. |
| [Call Log Recordings](/ui-kit/react-native/v4/call-log-recording)      | The `Call Log Recordings` component shows a paginated list of recordings of a particular call.                                                                                                                                         |
| [Call Log participants](/ui-kit/react-native/v4/call-log-participants) | The `Call Log Participants` component shows a separate view that displays comprehensive information about Call.                                                                                                                        |

## Usage

### Integration

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChat, CometChatCalls } from "@cometchat/chat-sdk-react-native";
    import { CometChatCallLogDetails } from "@cometchat/chat-uikit-react-native";
    import {
      CallLog,
      CallLogRequestBuilder,
    } from "@cometchat/calls-sdk-react-native";

    function App(): React.JSX.Element {
      const [loggedInUser, setLoggedInUser] = useState<CometChat.User>();
      const [callLog, setCallLog] = useState<CallLog>();
      useEffect(() => {
        //code
        CometChatUIKit.login({ uid: "uid" })
          .then(async (user: CometChat.User) => {
            setLoggedInUser(user);
            const callLogRequest = new CallLogRequestBuilder()
              .setLimit(1)
              .setCallStatus("cancelled")
              .setAuthToken(user!.getAuthToken())
              .build();

            callLogRequest
              .fetchNext()
              .then((callLogs: CallLog[]) => {
                setCallLog(callLogs[0]);
              })
              .catch(() => {
                //handle error
              });
          })
          .catch((error: any) => {
            //handle error
          });
      }, []);

      return <>{callLog && <CometChatCallLogDetails call={callLog} />}</>;
    }
    ```
  </Tab>
</Tabs>

### Actions

[Actions](/ui-kit/react-native/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.

##### 1. onBack

The `onBack` function is built to respond when you press the back button in the AppBar.

By default, this action does not have a predefined behavior. However, you have the flexibility to override this event and tailor it to suit your needs using the following code snippet.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChat } from '@cometchat/chat-sdk-react-native';
    import { CometChatCallLogDetails } from '@cometchat/chat-uikit-react-native';
    import {CallLog, CallLogRequestBuilder} from '@cometchat/calls-sdk-react-native';

    function App(): React.JSX.Element {

       const [loggedInUser, setLoggedInUser] = useState<CometChat.User>();
       const [callLog, setCallLog] = useState<CallLog>();

       useEffect(() => {
    	   //code
         CometChatUIKit.login({uid: 'uid'})
           .then(async (user: CometChat.User) => {

              setLoggedInUser(user);
              const callLogRequest = new CallLogRequestBuilder().setLimit(1).setCallStatus('cancelled').setAuthToken(user!.  getAuthToken()).build();

              callLogRequest.fetchNext()
              .then((callLogs: CallLog[]) => {
                 setCallLog(callLogs[0])
              })
              .catch(() => {
                 //handle error
              });

           })
           .catch((error: any) => {
             //handle error
           });
       }, []);


       const onBackHandler = () => {
          //code
       }

       return (
          { callLog &&
            <CometChatCallLogDetails
                call={callLog}
                onBack={onBackHandler}
            />
          }
       );
     }
    ```
  </Tab>
</Tabs>

##### 2. onError

This action doesn't change the behavior of the component but rather listens for any errors that occur in the Groups component.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChat } from '@cometchat/chat-sdk-react-native';
    import { CometChatCallLogDetails } from '@cometchat/chat-uikit-react-native';
    import {CallLog, CallLogRequestBuilder} from '@cometchat/calls-sdk-react-native';

    function App(): React.JSX.Element {

       const [loggedInUser, setLoggedInUser] = useState<CometChat.User>();
       const [callLog, setCallLog] = useState<CallLog>();

       useEffect(() => {
    	   //code
         CometChatUIKit.login({uid: 'uid'})
           .then(async (user: CometChat.User) => {

              setLoggedInUser(user);
              const callLogRequest = new CallLogRequestBuilder().setLimit(1).setCallStatus('cancelled').setAuthToken(user!.  getAuthToken()).build();

              callLogRequest.fetchNext()
              .then((callLogs: CallLog[]) => {
                 setCallLog(callLogs[0])
              })
              .catch(() => {
                 //handle error
              });

           })
           .catch((error: any) => {
             //handle error
           });
       }, []);


      const onErrorHandler = (error: CometChat.CometChatException) => {
        //code
      }

       return (
          { callLog &&
            <CometChatCallLogDetails
                call={callLog}
                onError={onErrorHandler}
            />
          }
       );
     }
    ```
  </Tab>
</Tabs>

***

### Filters

**Filters** allow you to customize the data displayed in a list within a `Component`. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using `RequestBuilders` of Chat SDK.

The `CallLogDetails` component does not have any exposed filters.

### Events

[Events](/ui-kit/react-native/v4/components-overview#events) are emitted by a Component. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.

The `CallLogDetails` component does not produce any events but its component does.

***

## Customization

To fit your app's design requirements, you can customize the appearance of the Incoming Call component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.

### Style

Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component.

##### 1. CallLogDetails Style

To customize the appearance, you can assign a `CallLogDetailsStyle` object to the `CallLogDetails` component.

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/jpEUuHUk-hvu4tQT/images/aa2750cf-call_details_style_cometchat_screens-4f994e60ad0de0e11d42287e9643a097.png?fit=max&auto=format&n=jpEUuHUk-hvu4tQT&q=85&s=a6a7351265bfdb8900b3805f025af8c1" alt="Image" width="4498" height="3120" data-path="images/aa2750cf-call_details_style_cometchat_screens-4f994e60ad0de0e11d42287e9643a097.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/_MYSdWhXnUkTkjEH/images/4ac241d6-call_details_style_cometchat_screens-5fb921dd1dcaeb0587b1973eb4fc0c1f.png?fit=max&auto=format&n=_MYSdWhXnUkTkjEH&q=85&s=37b57d058264953c0f2fb39ad3c82970" alt="Image" width="4498" height="3120" data-path="images/4ac241d6-call_details_style_cometchat_screens-5fb921dd1dcaeb0587b1973eb4fc0c1f.png" />
  </Tab>
</Tabs>

In this example, we are employing the `CallLogDetailsStyle`.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChat } from '@cometchat/chat-sdk-react-native';
    import { CometChatCallLogDetails, CallLogDetailsStyleInterface } from '@cometchat/chat-uikit-react-native';
    import {CallLog, CallLogRequestBuilder} from '@cometchat/calls-sdk-react-native';

    function App(): React.JSX.Element {

       const [loggedInUser, setLoggedInUser] = useState<CometChat.User>();
       const [callLog, setCallLog] = useState<CallLog>();

       useEffect(() => {
    	   //code
         CometChatUIKit.login({uid: 'uid'})
           .then(async (user: CometChat.User) => {

              setLoggedInUser(user);
              const callLogRequest = new CallLogRequestBuilder().setLimit(1).setCallStatus('cancelled').setAuthToken(user!.  getAuthToken()).build();

              callLogRequest.fetchNext()
              .then((callLogs: CallLog[]) => {
                 setCallLog(callLogs[0])
              })
              .catch(() => {
                 //handle error
              });

           })
           .catch((error: any) => {
             //handle error
           });
       }, []);

       const callLogDetailsStyle : CallLogDetailsStyleInterface = {
         closeIconTint: "red",
         backgroundColor: "#dbd4fa",
       }

       return (
          { callLog &&
            <CometChatCallLogDetails
                call={callLog}
                callLogDetailsStyle={callLogDetailsStyle}
            />
          }
       );
     }
    ```
  </Tab>
</Tabs>

The following properties are exposed by `CallLogDetails` Style:

| Property            | Description                                             | Code                              |
| ------------------- | ------------------------------------------------------- | --------------------------------- |
| **border**          | Used to set border                                      | `border?: BorderStyleInterface,`  |
| **borderRadius**    | Used to set border radius                               | `borderRadius?: number;`          |
| **backgroundColor** | Used to set background colour                           | `background?: string;`            |
| **height**          | Used to set height                                      | `height?: number` \| `string;`    |
| **width**           | Used to set width                                       | `width?: number` \| `string;`     |
| **titleFont**       | Used to customise the font of the title in the app bar  | `titleFont?: FontStyleInterface;` |
| **titleColor**      | Used to customise the color of the title in the app bar | `titleColor?: string;`            |
| **closeIconTint**   | Used to set the close icon tint                         | `closeIconTint?: string`          |

##### 2. Avatar Style

If you want to apply customized styles to the `Avatar` component within the `CallLogDetails` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/react-native/v4/avatar#avatarstyleinterface).

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChat } from '@cometchat/chat-sdk-react-native';
    import { CometChatCallLogDetails, BorderStyleInterface, AvatarStyleInterface } from '@cometchat/chat-uikit-react-native';
    import {CallLog, CallLogRequestBuilder} from '@cometchat/calls-sdk-react-native';

    function App(): React.JSX.Element {

       const [loggedInUser, setLoggedInUser] = useState<CometChat.User>();
       const [callLog, setCallLog] = useState<CallLog>();


       const callLogDetailsStyle : CallLogDetailsStyleInterface = {
         closeIconTint: "red",
         backgroundColor: "#dbd4fa",
       }

       useEffect(() => {
    	   //code
         CometChatUIKit.login({uid: 'uid'})
           .then(async (user: CometChat.User) => {

              setLoggedInUser(user);
              const callLogRequest = new CallLogRequestBuilder().setLimit(1).setCallStatus('cancelled').setAuthToken(user!.  getAuthToken()).build();

              callLogRequest.fetchNext()
              .then((callLogs: CallLog[]) => {
                 setCallLog(callLogs[0])
              })
              .catch(() => {
                 //handle error
              });

           })
           .catch((error: any) => {
             //handle error
           });
       }, []);


       const borderStyle : BorderStyleInterface =  {
          borderWidth: 2,
          borderStyle: 'solid',
          borderColor: '#cc5e95',
       }

       const avatarStyle : AvatarStyleInterface = {
          outerViewSpacing: 5,
          outerView: {
            borderWidth: 2,
            borderStyle: 'dotted',
            borderColor: 'blue',
          },
          border:  borderStyle
       }


       return (
          { callLog &&
            <CometChatCallLogDetails
                call={callLog}
                avatarStyle={avatarStyle}
            />
          }
       );
     }
    ```
  </Tab>
</Tabs>

***

### Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.

Here is a code snippet demonstrating how you can customize the functionality of the `CallLogDetails` component.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChat } from '@cometchat/chat-sdk-react-native';
    import { CometChatCallLogDetails } from '@cometchat/chat-uikit-react-native';
    import {CallLog, CallLogRequestBuilder} from '@cometchat/calls-sdk-react-native';

    function App(): React.JSX.Element {

       const [loggedInUser, setLoggedInUser] = useState<CometChat.User>();
       const [callLog, setCallLog] = useState<CallLog>();


       useEffect(() => {
    	   //code
         CometChatUIKit.login({uid: 'uid'})
           .then(async (user: CometChat.User) => {

              setLoggedInUser(user);
              const callLogRequest = new CallLogRequestBuilder().setLimit(1).setCallStatus('cancelled').setAuthToken(user!.  getAuthToken()).build();

              callLogRequest.fetchNext()
              .then((callLogs: CallLog[]) => {
                 setCallLog(callLogs[0])
              })
              .catch(() => {
                 //handle error
              });

           })
           .catch((error: any) => {
             //handle error
           });
       }, []);



       return (
          { callLog &&
            <CometChatCallLogDetails
                call={callLog}
                title='Custom Title'
                showCloseButton={false}
            />
          }
       );
     }
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/XgQ9DxAoWn0btB5m/images/5f19960a-call_details_func_cometchat_screens-8ee31fca93cf1c3ce4ddad20e28689fb.png?fit=max&auto=format&n=XgQ9DxAoWn0btB5m&q=85&s=e9bd93ff25e5eca62efd761ec87b9211" alt="Image" width="4498" height="3120" data-path="images/5f19960a-call_details_func_cometchat_screens-8ee31fca93cf1c3ce4ddad20e28689fb.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/jpEUuHUk-hvu4tQT/images/a5531770-call_details_func_cometchat_screens-59932d60863b7d13391e75a740a840ab.png?fit=max&auto=format&n=jpEUuHUk-hvu4tQT&q=85&s=4b642082ac5171983a63950d3566ffff" alt="Image" width="4498" height="3120" data-path="images/a5531770-call_details_func_cometchat_screens-59932d60863b7d13391e75a740a840ab.png" />
  </Tab>
</Tabs>

Below is a list of customizations along with corresponding code snippets

| Property                                            | Description                         | Code                                |
| --------------------------------------------------- | ----------------------------------- | ----------------------------------- |
| **title** <Tooltip tip="Not available">🛑</Tooltip> | Used to set title                   | `title?: string`                    |
| **closeButtonIconImage**                            | Used to set close Button Icon Image | `closeButtonIconImage?: ImageType`  |
| **call**                                            | Used to set the call log            | `declcallineButtonText?: CallLog`   |
| **data**                                            | Used to set custom details template | `data?: CometChatDetailsTemplate[]` |
| **showCloseButton**                                 | Used to show/hide the close button  | `showCloseButton?: boolean`         |

***

### Advanced

For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.

#### DetailsTemplate

The `CometChatDetailsTemplate` offers a structure for organizing information in the CometChat details component. It serves as a blueprint, defining how user-related details are presented. This structure allows for customization and organization within the CometChat interface.

This defines the structure of template data for the details component.

| Name                      | Type                       | Description                                                                                  |
| ------------------------- | -------------------------- | -------------------------------------------------------------------------------------------- |
| **id**                    | `string` \| `number`       | Identifier for the template option                                                           |
| **title**                 | `string`                   | Heading text for the template option                                                         |
| **titleColor**            | `string`                   | Sets the foreground color of title text                                                      |
| **titleFont**             | `FontStyleInterface`       | Sets all the different properties of font for the title text                                 |
| **titleStyle**            | `TextStyle`                | Sets the title style                                                                         |
| **sectionSeparatorColor** | `string`                   | Sets the color of the template separator                                                     |
| **itemSeparatorColor**    | `string`                   | Sets the color of the template's option separator text                                       |
| **hideSectionSeparator**  | `boolean`                  | When set to true, hides the separator for the template                                       |
| **hideItemSeparator**     | `boolean`                  | When set to true, hides the separator under each option in a template                        |
| **options**               | `CometChatDetailsOption[]` | Sets the [`CometChatDetailsOption`](/ui-kit/react-native/v4/call-log-details#detailsoption)s |

#### DetailsOption

The `DetailsOption` defines the structure for individual options within the CometChat details component, facilitating customization and functionality for user interactions.

This defines the structure of each option for a template in the details component.

| Property            | Type                                                      | Description                                                  |
| ------------------- | --------------------------------------------------------- | ------------------------------------------------------------ |
| **id**              | `string` \| `number`                                      | Identifier for the template                                  |
| **title**           | `string`                                                  | Heading text for the template                                |
| **titleStyle**      | `TextStyle`                                               | Sets the title style                                         |
| **icon**            | `ImageType`                                               | Sets all the different properties of font for the title text |
| **iconTint**        | `string`                                                  | Sets the icon tint\`                                         |
| **backgroundColor** | `string`                                                  | Sets the background color                                    |
| **CustomView**      | `() => JSX.Element`                                       | Sets custom view for the option                              |
| **Tail**            | `() => JSX.Element`                                       | Sets the tail view for the option                            |
| **height**          | `number`                                                  | Sets the height                                              |
| **onClick**         | `({ user, group }: { user?: any; group?: any }) => void;` | Sets the onClick Handler for the option                      |

Below is an example of using Custom Details templates:

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChat } from '@cometchat/chat-sdk-react-native';
    import { CometChatCallLogDetails, CometChatDetailsTemplate, CometChatDetailsOption, CometChatListItem } from '@cometchat/chat-uikit-react-native';
    import {CallLog, CallLogRequestBuilder} from '@cometchat/calls-sdk-react-native';

    function App(): React.JSX.Element {

       const [loggedInUser, setLoggedInUser] = useState<CometChat.User>();
       const [callLog, setCallLog] = useState<CallLog>();


       const callLogDetailsStyle : CallLogDetailsStyleInterface = {
         closeIconTint: "red",
         backgroundColor: "#dbd4fa",
       }

       useEffect(() => {
    	   //code
         CometChatUIKit.login({uid: 'uid'})
           .then(async (user: CometChat.User) => {

              setLoggedInUser(user);
              const callLogRequest = new CallLogRequestBuilder().setLimit(1).setCallStatus('cancelled').setAuthToken(user!.  getAuthToken()).build();

              callLogRequest.fetchNext()
              .then((callLogs: CallLog[]) => {
                 setCallLog(callLogs[0])
              })
              .catch(() => {
                 //handle error
              });

           })
           .catch((error: any) => {
             //handle error
           });
       }, []);


    const getTemplate = ({message, user, group}: {
      message: CometChat.BaseMessage;
      user?: CometChat.User | undefined;
      group?: CometChat.Group | undefined;
    }) : CometChatDetailsTemplate[] => {
      const blockOption : CometChatDetailsOption = {
        CustomView: () => {
          return (
             <CometChatListItem
                id="report"
                title='Report'
                listItemStyle={{backgroundColor: "#d2cafa", titleColor: "grey"}}
                hideSeparator={false}
             />
          )}
      }

      const reportOption : CometChatDetailsOption = {
         CustomView: () => {
            return (
              <CometChatListItem
                  id="block"
                  title='Block'
                  listItemStyle={{backgroundColor: "#d2cafa", titleColor: "grey"}}
                  hideSeparator={false}
              />
            )}
      }

      let detailsTemplate : CometChatDetailsTemplate = {
        id: "Block",
        title: "Block/Report",
        titleColor: "red",
        sectionSeparatorColor: "grey",
        itemSeparatorColor: "#6851D6",
        hideSectionSeparator: false,
        hideItemSeparator: false,
        titleStyle: {
          fontSize: 20,
          paddingLeft: 140,
          paddingRight: 120
        },
        options: [blockOption, reportOption]

      }
      return [detailsTemplate];
    }

       return (
          { callLog &&
            <CometChatCallLogDetails
                call={callLog}
                data={getTemplate}
            />
          }
       );
     }
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/mkn0UqPQ5BXljCV1/images/96f2e6aa-call_details_template_cometchat_screens-d6bd05ac86282890e4488074d310b4c7.png?fit=max&auto=format&n=mkn0UqPQ5BXljCV1&q=85&s=88efa83f7443304725764473c1389d2a" alt="Image" width="4498" height="3120" data-path="images/96f2e6aa-call_details_template_cometchat_screens-d6bd05ac86282890e4488074d310b4c7.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/7emVxEQ5MCxvzC60/images/1d569c1b-call_details_template_cometchat_screens-0e91963c635b11430fdedae7e5779f95.png?fit=max&auto=format&n=7emVxEQ5MCxvzC60&q=85&s=2f2522859f064912ff20a808dfda998a" alt="Image" width="4498" height="3120" data-path="images/1d569c1b-call_details_template_cometchat_screens-0e91963c635b11430fdedae7e5779f95.png" />
  </Tab>
</Tabs>

***

## Configurations

[Configurations](/ui-kit/react-native/v4/components-overview#configurations) offer the ability to customize the properties of each component within a Composite Component.

CallLogDetails has `CallLogHistory`, `CallLogParticipants` and `CallLogRecordings` component. Hence, each of these components will have its individual \`Configuration\`\`.

* `Configurations` expose properties that are available in its individual components.

#### CallLogHistory

You can customize the properties of the Groups component by making use of the `callLogHistoryConfiguration`. You can accomplish this by employing the `callLogHistoryConfiguration` props as demonstrated below:

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChat } from '@cometchat/chat-sdk-react-native';
    import { CometChatCallLogDetails, CallLogHistoryConfigurationInterface } from '@cometchat/chat-uikit-react-native';
    import {CallLog, CallLogRequestBuilder} from '@cometchat/calls-sdk-react-native';

    function App(): React.JSX.Element {

       const [loggedInUser, setLoggedInUser] = useState<CometChat.User>();
       const [callLog, setCallLog] = useState<CallLog>();


       useEffect(() => {
    	   //code
         CometChatUIKit.login({uid: 'uid'})
           .then(async (user: CometChat.User) => {

              setLoggedInUser(user);
              const callLogRequest = new CallLogRequestBuilder().setLimit(1).setCallStatus('cancelled').setAuthToken(user!.  getAuthToken()).build();

              callLogRequest.fetchNext()
              .then((callLogs: CallLog[]) => {
                 setCallLog(callLogs[0])
              })
              .catch(() => {
                 //handle error
              });

           })
           .catch((error: any) => {
             //handle error
           });
       }, []);

       const callLogsHistoryConfiguration : CallLogHistoryConfigurationInterface = {
          //override properties
       }



       return (
          { callLog &&
            <CometChatCallLogDetails
                call={callLog}
                callLogHistoryConfiguration={callLogsHistoryConfiguration}
            />
          }
       );
     }
    ```
  </Tab>
</Tabs>

All exposed properties of `GroupsConfiguration` can be found under [Groups](/ui-kit/react-native/v4/groups#functionality). Properties marked with the <Tooltip tip="Not available">🛑</Tooltip> symbol are not accessible within the Configuration Object.

**Example**

Let's say you want to change the style of the Groups subcomponent and, in addition, you only want to display the Group List based on only joined groups and setting the limit to 3.

You can modify the `CallLogHistory` list item style using the `ListItemStyle` property.

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/PaxBG9I1yMoeQmt2/images/33a44bc9-call_details_history_cometchat_screens-96ec3ab3e4d9569656fc5751c48ae0f4.png?fit=max&auto=format&n=PaxBG9I1yMoeQmt2&q=85&s=9750282971e8d07a780320c56324fb76" alt="Image" width="4498" height="3120" data-path="images/33a44bc9-call_details_history_cometchat_screens-96ec3ab3e4d9569656fc5751c48ae0f4.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/G6Puyz_3Zlaowa9R/images/c7abc269-call_details_history_cometchat_screens-43b8a33038111780eb777a0f0e38c67c.png?fit=max&auto=format&n=G6Puyz_3Zlaowa9R&q=85&s=57b578ae0271de1190535e3f54682955" alt="Image" width="4498" height="3120" data-path="images/c7abc269-call_details_history_cometchat_screens-43b8a33038111780eb777a0f0e38c67c.png" />
  </Tab>
</Tabs>

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChat } from '@cometchat/chat-sdk-react-native';
    import { CometChatCallLogDetails, CallLogHistoryConfigurationInterface } from '@cometchat/chat-uikit-react-native';
    import {CallLog, CallLogRequestBuilder} from '@cometchat/calls-sdk-react-native';

    function App(): React.JSX.Element {

       const [loggedInUser, setLoggedInUser] = useState<CometChat.User>();
       const [callLog, setCallLog] = useState<CallLog>();


       useEffect(() => {
    	   //code
         CometChatUIKit.login({uid: 'uid'})
           .then(async (user: CometChat.User) => {

              setLoggedInUser(user);
              const callLogRequest = new CallLogRequestBuilder().setLimit(1).setCallStatus('cancelled').setAuthToken(user!.  getAuthToken()).build();

              callLogRequest.fetchNext()
              .then((callLogs: CallLog[]) => {
                 setCallLog(callLogs[0])
              })
              .catch(() => {
                 //handle error
              });

           })
           .catch((error: any) => {
             //handle error
           });
       }, []);

       const callLogsHistoryConfiguration : CallLogHistoryConfigurationInterface = {
         listItemStyle: {
           backgroundColor: "#d2cafa"
         }
       }



       return (
          { callLog &&
            <CometChatCallLogDetails
                call={callLog}
                callLogHistoryConfiguration={callLogsHistoryConfiguration}
            />
          }
       );
     }
    ```
  </Tab>
</Tabs>

***

#### CallLogParticipants

You can customize the properties of the Messages component by making use of the messagesConfiguration. You can accomplish this by employing the `CallLogParticipantsConfiguration` props as demonstrated below:

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChat } from '@cometchat/chat-sdk-react-native';
    import { CometChatCallLogDetails, CallLogParticipantsConfigurationInterface } from '@cometchat/chat-uikit-react-native';
    import {CallLog, CallLogRequestBuilder} from '@cometchat/calls-sdk-react-native';

    function App(): React.JSX.Element {

       const [loggedInUser, setLoggedInUser] = useState<CometChat.User>();
       const [callLog, setCallLog] = useState<CallLog>();


       useEffect(() => {
    	   //code
         CometChatUIKit.login({uid: 'uid'})
           .then(async (user: CometChat.User) => {

              setLoggedInUser(user);
              const callLogRequest = new CallLogRequestBuilder().setLimit(1).setCallStatus('cancelled').setAuthToken(user!.  getAuthToken()).build();

              callLogRequest.fetchNext()
              .then((callLogs: CallLog[]) => {
                 setCallLog(callLogs[0])
              })
              .catch(() => {
                 //handle error
              });

           })
           .catch((error: any) => {
             //handle error
           });
       }, []);

       const callLogParticipantsConfiguration : CallLogParticipantsConfigurationInterface = {
          //override properties
       }



       return (
          { callLog &&
            <CometChatCallLogDetails
                call={callLog}
                callLogParticipantsConfiguration={callLogParticipantsConfiguration}
            />
          }
       );
     }
    ```
  </Tab>
</Tabs>

All exposed properties of `CallLogParticipantsConfiguration` can be found under [Messages](/ui-kit/react-native/v4/messages#functionality). Properties marked with the <Tooltip tip="Not available">🛑</Tooltip> symbol are not accessible within the Configuration Object.

**Example**

Let's say you want to change the style of the Messages subcomponent and, in addition, you only want to hide message header.

You can modify the `CallLogParticipants` list item style using the `ListItemStyle` property.

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/FGBCGWXGo5d9bVxR/images/bfe4b1d5-call_details_participants_cometchat_screens-4bbf19acc82e04330fc1b4dc99e9bbac.png?fit=max&auto=format&n=FGBCGWXGo5d9bVxR&q=85&s=960834591bc9806e35c745144be4be74" alt="Image" width="4498" height="3120" data-path="images/bfe4b1d5-call_details_participants_cometchat_screens-4bbf19acc82e04330fc1b4dc99e9bbac.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/jpEUuHUk-hvu4tQT/images/ab232f87-call_details_participants_cometchat_screens-f6fa61edc528d18e9cd6fa81a7e906fb.png?fit=max&auto=format&n=jpEUuHUk-hvu4tQT&q=85&s=ed6d859426846def4eb11e9e245936d4" alt="Image" width="4498" height="3120" data-path="images/ab232f87-call_details_participants_cometchat_screens-f6fa61edc528d18e9cd6fa81a7e906fb.png" />
  </Tab>
</Tabs>

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChat } from '@cometchat/chat-sdk-react-native';
    import { CometChatCallLogDetails, CallLogParticipantsConfigurationInterface } from '@cometchat/chat-uikit-react-native';
    import {CallLog, CallLogRequestBuilder} from '@cometchat/calls-sdk-react-native';

    function App(): React.JSX.Element {

       const [loggedInUser, setLoggedInUser] = useState<CometChat.User>();
       const [callLog, setCallLog] = useState<CallLog>();


       useEffect(() => {
    	   //code
         CometChatUIKit.login({uid: 'uid'})
           .then(async (user: CometChat.User) => {

              setLoggedInUser(user);
              const callLogRequest = new CallLogRequestBuilder().setLimit(1).setCallStatus('cancelled').setAuthToken(user!.  getAuthToken()).build();

              callLogRequest.fetchNext()
              .then((callLogs: CallLog[]) => {
                 setCallLog(callLogs[0])
              })
              .catch(() => {
                 //handle error
              });

           })
           .catch((error: any) => {
             //handle error
           });
       }, []);

       const callLogParticipantsConfiguration : CallLogParticipantsConfigurationInterface = {
         listItemStyle: {
           backgroundColor: "#d2cafa"
         },
       }


       return (
          { callLog &&
            <CometChatCallLogDetails
                call={callLog}
                callLogParticipantsConfiguration={callLogParticipantsConfiguration}
            />
          }
       );
     }
    ```
  </Tab>
</Tabs>

***