@quoctruongpt/rn-custom-alert

rn-custom-alert

Custom alert

Installation

npm install @quoctruongpt/rn-custom-alert
# or
yarn add @quoctruongpt/rn-custom-alert

Usage

1. Initialize CustomAlertProvider Add CustomAlertProvider to the root component to provider context for ther entire application:

import { CustomAlertProvider } from '@quoctruongpt/rn-custom-alert';

export default function App() {
  return (
    <CustomAlertProvider>
      {/* Child components */}
    </CustomAlertProvider>
  );
}

2. Display an Alert Use useCustomAlert to call alerts from any component:

import { useCustomAlert } from 'rn-custom-alert';

function ExampleComponent() {
  const alert = useCustomAlert();

  const showAlert = () => {
    alert.show({
      title: 'Notice',
      message: 'This is a custom alert.',
      actions: [
        { label: 'OK', onPress: () => console.log('OK selected') },
        { label: 'Cancel', onPress: () => console.log('Cancel selected') },
      ],
    });
  };

  return (
    <TouchableOpacity onPress={showAlert}>
      <Text>Show Alert</Text>
    </TouchableOpacity>
  );
}

Configuration and Options

Here is a list of properties to customize:

1. Props for CustomAlertProvider:

Property	Require	Type	Description
style	false	ViewStyle	Custom styles for the main alert container. You can use this prop to modify the overall appearance of the alert, including padding, margins, and background color.
titleStyle	false	TextStyle	Custom styles for the title text of the alert. Use this prop to adjust font size, color, font weight, and other text properties specific to the title.
messageStyle	false	TextStyle	Custom styles for the message text of the alert. Similar to titleStyle, this allows you to style the message text, including its font characteristics and color.
buttonContainerStyle	false	ViewStyle	Styles for the container that holds the action buttons of the alert. You can customize the layout, spacing, and alignment of the buttons with this prop.
buttonCancelStyle	false	ViewStyle	Styles specifically for the cancel button. Use this to define unique styles such as background color, border radius, and padding for the cancel button.
textButtonCancelStyle	false	TextStyle	Custom styles for the text of the cancel button. This allows you to set specific text properties like font size, color, and weight for the button's label.
buttonConfirmStyle	false	ViewStyle	Styles specifically for the confirm button. Similar to buttonCancelStyle, this prop lets you customize the confirm button's appearance, such as colors and spacing.
textButtonConfirmStyle	false	TextStyle	Custom styles for the text of the confirm button. Use this to adjust font size, color, and weight for the confirm button's label.
AlertComponent	false	(props: ICustomAlertProps) => React.ReactNode	A custom alert component that can be provided to override the default alert UI.

Structure of actions

  id: number;
  onHide: (id: number) => void;
  style?: StyleProp<ViewStyle>;
  titleStyle?: StyleProp<TextStyle>;
  messageStyle?: StyleProp<TextStyle>;
  buttonContainerStyle?: StyleProp<ViewStyle>;
  buttonCancelStyle?: StyleProp<ViewStyle>;
  textButtonCancelStyle?: StyleProp<TextStyle>;
  buttonConfirmStyle?: StyleProp<ViewStyle>;
  textButtonConfirmStyle?: StyleProp<TextStyle>;