Skip to main content

dialogsHelpers

Content

Used to show dialogs, alerts and action sheets

showActionSheet

Shows action sheet on iOS with defined options, on Android it shows React Native's Alert with title, message and buttons.

Params

NameTypeRequiredDefault valueDescription
optionsActionSheetIOSOptionsTrue-Options which will be used to show ActionSheetIOS or Alert.alert
onOptionSelected(optionIndex: number) => voidTrue-Handler which receives selected index of button

Usage example

  const onShowActionSheetPress = useCallback(() => {
showActionSheet(
{
title: "Action Sheet Title",
options: ["Cancel", "Action 1", "Action 2"],
cancelButtonIndex: 0,
destructiveButtonIndex: 3,
message: "Action Sheet Message",
},
(optionIndex) => {
console.warn(`Option ${optionIndex} was pressed`);
},
);
}, []);

showAlert

Shows React Native's Alert with provided parameters.

Params

NameTypeRequiredDefault valueDescription
titlestringTrue-The dialog's title. Passing empty string will hide the title
messagestringFalseUndefinedAn optional message that appears below the dialog's title
buttonsAlertButton[]FalseUndefinedAn optional array containing buttons configuration
optionsAlertOptionsFalse{cancelable: true}An optional Alert configuration for the Android

Usage example

  const onShowAlertPress = useCallback(() => {
showAlert("Title", "Message", [
{
text: "Action 1",
onPress: () => {
console.warn("Action 1 was pressed");
},
style: "default",
},
{
text: "Action 2",
onPress: () => {
console.warn("Action 2 was pressed");
},
style: "destructive",
},
]);
}, []);

showCommonDialog

Shows common yes-no dialog with title and message and on yes press callback.

Params

NameTypeRequiredDefault valueDescription
titlestringTrue-The dialog's title. Passing empty string will hide the title
messagestringTrue-The message that appears below the dialog's title
onAcceptPress() => voidTrue-The callback from Yes pressed button

Usage example

  const onShowCommonDialogPress = useCallback(() => {
showCommonDialog("Title", "Message", () => {
console.warn("You pressed Yes");
});
}, []);