UIKit React Native v3
UIKit React Native
UIKit
React Native
Home
/
UIKit
/
React Native

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.

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

const updatedUser = await updateCurrentUserInfo('NICKNAME', 'PROFILE_URL');

useConnection()

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

const { connect, disconnect } = useConnection();

connect('USER_ID', { nickname: 'NICKNAME', accessToken: 'ACCESS_TOKEN' });
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.

<SendbirdUIKitContainer chatOptions={{ enableAutoPushTokenRegistration: false }} />

useUIKitTheme()

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

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 allows you to access all the features of the native module.

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

const photo = await fileService.openCamera({
    mediaType: 'photo',
    onOpenFailureWithToastMessage: () => Alert.alert("Couldn't open camera"),
});

useLocalization()

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

const { STRINGS } = useLocalization();

useToast()

The useToast() hook allows you to display all toast messages in UIKit through the Toast 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.

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.

const { openSheet } = useBottomSheet();

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

useActionMenu()

The useActionMenu() hook allows you to display a menu of items on the screen through the ActionMenu 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.

const { alert } = useAlert();

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