feat: integrate Customizations container into App and enhance Alert component to support icon customization via config

Author: xxsnakerxx

example/src/App.tsx

@@ -4,6 +4,7 @@ import { AlertContainer } from 'react-native-alert-queue';
 
 import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
 import { Basics } from './containers/Basics';
+import { Customizations } from './containers/Customizations';
 
 export default function App() {
   return (
@@ -13,6 +14,7 @@ export default function App() {
           <Text style={styles.title}>React Native Alert Queue</Text>
           <ScrollView style={styles.scrollView}>
             <Basics />
+            <Customizations />
           </ScrollView>
         </SafeAreaView>
         <AlertContainer />

example/src/components/icons/Danger.tsx

@@ -0,0 +1,15 @@
+import Svg, { type SvgProps, Path } from 'react-native-svg';
+
+export const DangerIcon = (props: SvgProps) => (
+  <Svg viewBox="0 0 24 24" {...props}>
+    <Path
+      d="M4.723 21.167h-.04a2.833 2.833 0 0 1-2.476-3.89L9.53 4.45a2.833 2.833 0 0 1 4.946.009l7.273 12.728c.162.381.23.691.248 1.007a2.8 2.8 0 0 1-.725 2.042 2.8 2.8 0 0 1-1.956.93l-14.52.001z"
+      opacity={0.4}
+    />
+    <Path
+      fillRule="evenodd"
+      d="M11.124 10.02c0-.481.393-.874.875-.874s.875.393.875.875v2.828a.876.876 0 0 1-1.75 0zm0 6.25c0-.485.393-.88.875-.88s.875.39.875.869a.88.88 0 0 1-.875.886.877.877 0 0 1-.875-.875"
+      clipRule="evenodd"
+    />
+  </Svg>
+);

example/src/containers/Customizations.tsx

@@ -0,0 +1,82 @@
+/* eslint-disable react-native/no-inline-styles */
+/* eslint-disable react/no-unstable-nested-components */
+
+import { alert } from 'react-native-alert-queue';
+import { Button } from '../components/Button';
+import { Section } from '../components/Section';
+import {
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { DangerIcon } from '../components/icons/Danger';
+
+export const Customizations = () => {
+  return (
+    <Section title="Customizations">
+      <Button
+        onPress={() =>
+          alert.show({
+            title: 'Hello',
+            message: 'Message',
+            icon: DangerIcon,
+            beforeTitleSlot: () => (
+              <Slot
+                text="Before title slot"
+                style={{
+                  marginBottom: 10,
+                }}
+              />
+            ),
+            beforeMessageSlot: () => (
+              <Slot
+                text="Before message slot"
+                style={{
+                  marginBottom: 20,
+                }}
+              />
+            ),
+            beforeButtonsSlot: () => (
+              <Slot
+                text="Before buttons slot"
+                style={{
+                  marginBottom: 20,
+                }}
+              />
+            ),
+            afterButtonsSlot: () => <Slot text="After buttons slot" />,
+          })
+        }
+        text="Slots"
+      />
+    </Section>
+  );
+};
+
+const Slot = ({
+  text,
+  style,
+}: {
+  text: string;
+  style?: StyleProp<ViewStyle>;
+}) => {
+  return (
+    <View style={StyleSheet.compose(styles.slot, style)}>
+      <Text style={styles.slotText}>{text}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  slot: {
+    backgroundColor: 'black',
+    padding: 10,
+  },
+  slotText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+});

src/components/Alert/index.tsx

@@ -28,7 +28,7 @@ export const Alert: FC<AlertViewProps> = (props) => {
     beforeTitleSlot,
     renderDismissButton,
     icon,
-    iconColor = 'black',
+    iconColor,
     iconSize,
     isDismissible,
     isHiding,
@@ -39,6 +39,7 @@ export const Alert: FC<AlertViewProps> = (props) => {
     renderTitle,
     message,
     renderMessage,
+    config,
   } = props;
 
   const { animation } = useAnimation({
@@ -129,12 +130,21 @@ export const Alert: FC<AlertViewProps> = (props) => {
   const renderIconCb = useCallback(() => {
     const Svg = icon;
 
+    const iconConfig = config?.icon;
+
+    const defaultIconSize = iconSize || iconConfig?.size || 72;
+    const defaultIconColor = iconColor || iconConfig?.color || 'black';
+
     return Svg ? (
       <View style={styles.iconContainer}>
-        <Svg fill={iconColor} width={iconSize} height={iconSize} />
+        <Svg
+          fill={defaultIconColor}
+          width={defaultIconSize}
+          height={defaultIconSize}
+        />
       </View>
     ) : null;
-  }, [icon, iconColor, iconSize]);
+  }, [icon, iconColor, iconSize, config]);
 
   const renderDismissButtonCb = useCallback(() => {
     const defaultDismissButton = (

src/components/Alert/types.ts

@@ -1,5 +1,6 @@
 import type { ReactElement, FC } from 'react';
 import type { ColorValue, StyleProp, TextStyle } from 'react-native';
+import type { AlertConfig } from '../../containers/AlertContainer/types';
 
 type IconProps = {
   fill?: ColorValue;
@@ -62,4 +63,5 @@ export type AlertViewProps<R = unknown> = Props<R> & {
   animationDuration: number;
   isHiding: boolean;
   resolve: (value?: R) => void;
+  config?: AlertConfig;
 };

src/containers/AlertContainer/controller.ts

@@ -156,6 +156,7 @@ export const useController = ({ animationDuration, config }: Props) => {
       ];
 
       if (passedButtons?.length !== 2) {
+        // eslint-disable-next-line no-console
         console.warn(
           `[React Native Alert Queue] Confirm props must have 2 buttons, got ${passedButtons?.length}`,
           alert

src/containers/AlertContainer/types.ts

@@ -44,4 +44,8 @@ export type AlertConfig = {
     text: string;
     testID?: string;
   };
+  icon?: {
+    size?: number;
+    color?: ColorValue;
+  };
 };