feat: add dismissible alert functionality and improve Alert component with title rendering and styles

Author: xxsnakerxx

example/src/App.tsx

@@ -35,6 +35,31 @@ export default function App() {
                 }}
                 text="Show 2 Alerts"
               />
+              <Button
+                onPress={async () => {
+                  await alert.show({
+                    title: 'Lorem ipsum dolor sit amet',
+                    message: 'I am a dismissible alert',
+                    isDismissible: true,
+                    onDismiss: () => {
+                      alert.success({
+                        message: 'You dismissed the alert',
+                      });
+                    },
+                    buttons: [
+                      {
+                        text: 'OK',
+                        onPress: () => {
+                          alert.success({
+                            message: 'You pressed OK button',
+                          });
+                        },
+                      },
+                    ],
+                  });
+                }}
+                text="Show Dismissible Alert"
+              />
               <Button
                 onPress={() => {
                   alert.success({

src/components/Alert/controller.ts

@@ -21,7 +21,7 @@ export const useController = <R = unknown>({
       if (button.onAwaitablePress) {
         button.onAwaitablePress(resolveWrapper);
       } else {
-        button.onClick?.();
+        button.onPress?.();
 
         resolveWrapper(undefined as R);
       }

src/components/Alert/index.tsx

@@ -6,6 +6,8 @@ import {
   StyleSheet,
   Text,
   View,
+  type StyleProp,
+  type ViewStyle,
 } from 'react-native';
 
 import type { AlertViewProps } from './types';
@@ -32,7 +34,9 @@ export const Alert: FC<AlertViewProps> = (props) => {
     isHiding,
     testID,
     buttons,
+    title,
     titleAlign = 'center',
+    renderTitle,
   } = props;
 
   const { animation } = useAnimation({
@@ -77,22 +81,38 @@ export const Alert: FC<AlertViewProps> = (props) => {
     [containerAnimation, containerDimensions]
   );
 
+  const beforeTitleSlotElement = useMemo(() => {
+    return beforeTitleSlot?.() || null;
+  }, [beforeTitleSlot]);
+
   const titleStyle = useMemo(
     () => StyleSheet.compose(styles.title, { textAlign: titleAlign }),
     [titleAlign]
   );
 
+  const titleContainerStyle = useMemo(() => {
+    const style: StyleProp<ViewStyle>[] = [styles.titleContainer];
+
+    if (isDismissible && !(icon || beforeTitleSlotElement)) {
+      style.push(styles.dismissibleTitleContainer);
+    }
+
+    return StyleSheet.flatten(style);
+  }, [isDismissible, icon, beforeTitleSlotElement]);
+
   const renderTitleCb = useCallback(() => {
-    const title = props.title ? (
+    const titleElement = title ? (
       <Text numberOfLines={4} style={titleStyle}>
-        {props.title}
+        {title}
       </Text>
     ) : (
-      props.renderTitle?.() || null
+      renderTitle?.() || null
     );
 
-    return title ? <View style={styles.titleContainer}>{title}</View> : null;
-  }, [props, titleStyle]);
+    return titleElement ? (
+      <View style={titleContainerStyle}>{titleElement}</View>
+    ) : null;
+  }, [title, titleStyle, renderTitle, titleContainerStyle]);
 
   const renderMessageCb = useCallback(() => {
     const message = props.message ? (
@@ -154,7 +174,7 @@ export const Alert: FC<AlertViewProps> = (props) => {
   return (
     <Animated.View style={containerStyle} testID={testID || 'Alert'}>
       {renderIconCb()}
-      {beforeTitleSlot?.() || null}
+      {beforeTitleSlotElement}
       {renderTitleCb()}
       {beforeMessageSlot?.() || null}
       {renderMessageCb()}

src/components/Alert/styles.ts

@@ -39,6 +39,9 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  dismissibleTitleContainer: {
+    paddingHorizontal: 60,
+  },
   title: {
     fontSize: 20,
     lineHeight: 28,

src/components/Alert/types.ts

@@ -36,7 +36,7 @@ export interface Props<R = unknown> {
 
 export type AlertButton<R = unknown> = {
   text: string;
-  onClick?: (() => Promise<R>) | (() => R);
+  onPress?: (() => Promise<R>) | (() => R);
   testID?: string;
   hideAlertOnPress?: boolean;
   onAwaitablePress?: (resolve: (value: R) => void) => void;