# How can I change the time and date format in sendbird ui kit (react native)

**URL:** <https://community.sendbird.com/t/how-can-i-change-the-time-and-date-format-in-sendbird-ui-kit-react-native/8834>\
**Category:** React Native\
**Tags:** react-native\
**Created:** [January 4, 2024, 7:46am UTC](https://community.sendbird.com/t/how-can-i-change-the-time-and-date-format-in-sendbird-ui-kit-react-native/8834 "2024-01-04T07:46:43Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sumit\_Dey](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/sumit_dey/32/4819_2.png) [@Sumit\_Dey](https://community.sendbird.com/u/Sumit_Dey)\
**Post date:** [January 4, 2024, 7:46am UTC](https://community.sendbird.com/t/how-can-i-change-the-time-and-date-format-in-sendbird-ui-kit-react-native/8834/1 "2024-01-04T07:46:43Z")

</div>

I am using sendbird ui kit for react native. Is there any way to change the date format to something like this :

- in channel list , the last message should be rendered as 2 days ago or 10 mnts/seconds ago. As of now, it shows the time of the last message eg. 12.12 pm or 3/1/24.
- in group channel message list, instead of showing the today’s date , can we show the date label as today, yesterday and then the dates. As of now, it always shows the date.  
I have attached a few ss for the use-cases. Please do have a look.  
Thanks

 ![Screenshot 2024-01-04 at 1.09.48 PM](https://us1.discourse-cdn.com/flex020/uploads/sendbird/original/2X/5/5fdaec06f1958606dd055339c0e8d6e9eeef9054.jpeg)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/sendbird/original/2X/4/45e6480ccce0b6ef2a3d23974ecdeb16c7d8465e.png)

---

<div class="post-metadata">

**Author:** ![Airen\_Kang](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/airen_kang/32/1831_2.png) [@Airen\_Kang](https://community.sendbird.com/u/Airen_Kang)\
**Post date:** [January 4, 2024, 8:30am UTC](https://community.sendbird.com/t/how-can-i-change-the-time-and-date-format-in-sendbird-ui-kit-react-native/8834/2 "2024-01-04T08:30:51Z")

</div>

Hello @Sumit_Dey  
you can customize date format using StringSet.

```tsx
import { SendbirdUIKitContainer, createBaseStringSet } from '@sendbird/uikit-react-native';
import { formatDistance } from 'date-fns';
import dateLocale from 'date-fns/locale/en-US';

const myStringSet = createBaseStringSet({
  dateLocale,
  overrides: {
    GROUP_CHANNEL_LIST: {
      CHANNEL_PREVIEW_TITLE_CAPTION: (channel) => {
        if (!channel.lastMessage) return '';
        return formatDistance(channel.lastMessage.createdAt, Date.now(), { addSuffix: true, locale: dateLocale });
      },
    },
  },
});

const App = () => {
  return <SendbirdUIKitContainer localization={{ stringSet: myStringSet }} />
}

```

![image](https://us1.discourse-cdn.com/flex020/uploads/sendbird/original/2X/3/3f5e19da2878454ce935be80b59af0ff38b96985.png)