Hooks

In UIKit for React Native, there are various custom hooks that you can use to receive data directly from Sendbird Chat SDK, which are then used to update the UI of the key functions. These hooks are configured on a feature basis in each key function and can be used accordingly.

Note: In order to use the hooks provided by UIKit, you must set them as child components of SendbirdUIKitContainer.

useSendbirdChat()

The useSendbirdChat() hook requests data from the Chat SDK on the current user's information.

import { useSendbirdChat } from '@sendbird/uikit-react-native';

const Component = () => {
    const { sdk, currentUser, updateCurrentUserInfo } = useSendbirdChat();

    const onPress = async () => {
        const updatedUser = await updateCurrentUserInfo('NICKNAME', 'PROFILE_URL');
    }
}

useConnection()

The useConnection() hook allows the Chat SDK to either connect or disconnect a user from the Sendbird server.

import { useConnection, SendbirdUIKitContainer } from '@sendbird/uikit-react-native';

const Component = () => {
    const { connect, disconnect } = useConnection();

    const onPress = async () => {
        await connect('USER_ID', { nickname: 'NICKNAME', accessToken: 'ACCESS_TOKEN' });
        await disconnect();
    }
}

If you set the value of enableAutoPushTokenRegistration to true, the registration of a user's push token registration automatically turns on and off when the user is connected or disconnected from the server. The default value of this method is true.

const App = () => {
    return <SendbirdUIKitContainer chatOptions={{ enableAutoPushTokenRegistration: false }} />;
}

useUIKitTheme()

The useUIKitTheme() hook allows you to use the default UIKItTheme.

import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';

const Component = () => {
    const { colors, palette, colorScheme, typography, select } = useUIKitTheme();

    const backgroundColor = select({ dark: 'black', light: 'white' });
    const textColor = colors.text;
}

usePlatformService()

The usePlatformService() hook lets you use the platform service interfaces that allow you to access all the features of the native module.

import { usePlatformService } from '@sendbird/uikit-react-native';

const Component = () => {
    const { fileService, notificationService, clipboardService } = usePlatformService();

    const onPress = async () => {
        const photo = await fileService.openCamera({
            mediaType: 'photo',
            onOpenFailure: () => console.log("Couldn't open camera"),
        });
    }
}

useLocalization()

The useLocalization() hook allows you to use the default StringSet provided by UIKit for React Native.

import { useLocalization } from '@sendbird/uikit-react-native';

const Component = () => {
    const { STRINGS } = useLocalization();
}

useToast()

The useToast() hook allows you to display all toast messages in UIKit through the Toast component.

import { useToast } from '@sendbird/uikit-react-native-foundation';

const Component = () => {
    const toast = useToast();
    toast.show('Show message', 'success');
}

usePrompt()

The usePrompt() hook allows you to receive a text input from the current user through the Prompt component.

import { usePrompt } from '@sendbird/uikit-react-native-foundation';

const Component = () => {
    const { openPrompt } = usePrompt();
    openPrompt({
        title: 'Prompt',
        submitLabel: 'Submit',
        onSubmit: (text) => console.log(text),
    });
}

useBottomSheet()

The useBottomSheet() hook displays a menu of items from the bottom of the screen through the BottomSheet component.

import { useBottomSheet } from '@sendbird/uikit-react-native-foundation';

const Component = () => {
    const { openSheet } = useBottomSheet();

    openSheet({
        sheetItems: [
            { title: 'Camera', icon: 'camera', onPress: () => console.log('Camera selected') },
            { title: 'Photo', icon: 'photo', onPress: () => console.log('Photo selected') },
            { title: 'Document', icon: 'file-document', onPress: () => console.log('Document selected') },
        ],
    });
}

useActionMenu()

The useActionMenu() hook allows you to display a menu of items on the screen through the ActionMenu component.

import { useActionMenu } from '@sendbird/uikit-react-native-foundation';

const Component = () => {
    const { openMenu } = useActionMenu();

    openMenu({
        title: 'Action Menu',
        menuItems: [
            { title: 'Title', onPress: () => null },
            { title: 'Close', onPress: () => null },
        ],
    });
}

useAlert()

The useAlert() hook allows you to display an alert dialog on the screen through the Alert component.

import { useAlert } from '@sendbird/uikit-react-native-foundation';

const Component = () => {
    const { alert } = useAlert();

    alert({
        title: 'Title',
        message: 'Message',
        buttons: [{ text: 'Edit' }, { text: 'Send' }, { text: 'Cancel', style: 'destructive' }],
    });
}

On this page