feat: enhance Customizations container with custom button schemes and update Alert types for better button customization

Author: xxsnakerxx

example/src/containers/Customizations.tsx

@@ -1,14 +1,15 @@
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable react/no-unstable-nested-components */
 
-import { alert } from 'react-native-alert-queue';
+import { alert, type AlertButtonCustomProps } from 'react-native-alert-queue';
 import { Button } from '../components/Button';
 import { Section } from '../components/Section';
 import {
   Pressable,
   StyleSheet,
   Text,
   View,
+  type ColorValue,
   type StyleProp,
   type ViewStyle,
 } from 'react-native';
@@ -123,16 +124,22 @@ export const Customizations = () => {
             title: 'Custom buttons',
             buttons: [
               {
-                text: 'Button 1',
+                text: 'Button 1 (default)',
                 onPress: () => alert.success({ message: 'Button 1 pressed' }),
               },
               {
-                text: 'Button 2',
+                text: 'Button 2 (primary)',
                 onPress: () => alert.success({ message: 'Button 2 pressed' }),
+                customProps: {
+                  scheme: 'primary',
+                },
               },
               {
-                text: 'Button 3',
+                text: 'Button 3 (secondary)',
                 onPress: () => alert.success({ message: 'Button 3 pressed' }),
+                customProps: {
+                  scheme: 'secondary',
+                },
               },
             ],
             renderButton: CustomButton,
@@ -163,16 +170,33 @@ const CustomButton = ({
   onPress,
   disabled,
   testID,
+  customProps,
 }: {
   text: string;
   onPress: () => void;
   disabled?: boolean;
   testID?: string;
+  customProps?: AlertButtonCustomProps;
 }) => {
+  const { scheme } = customProps || {};
+
+  let backgroundColor: ColorValue = 'black';
+
+  switch (scheme) {
+    case 'primary':
+      backgroundColor = 'green';
+      break;
+    case 'secondary':
+      backgroundColor = 'blue';
+      break;
+  }
+
   return (
     <Pressable
       onPress={onPress}
-      style={styles.button}
+      style={StyleSheet.compose(styles.button, {
+        backgroundColor,
+      })}
       disabled={disabled}
       testID={testID}
     >

example/src/types/react-native-alert-queue.d.ts

@@ -0,0 +1,7 @@
+import 'react-native-alert-queue';
+
+declare module 'react-native-alert-queue' {
+  export interface AlertButtonCustomProps {
+    scheme?: 'primary' | 'secondary';
+  }
+}

src/components/Alert/index.tsx

@@ -201,6 +201,7 @@ export const Alert: FC<AlertViewProps> = (props) => {
                     onPress: () => onButtonPress(button),
                     disabled: button.disabled,
                     testID: button.testID,
+                    customProps: button.customProps,
                   })}
                 </Fragment>
               );

src/components/Alert/types.ts

@@ -45,20 +45,23 @@ export interface Props<R = unknown> {
   buttons?: AlertButton[];
   buttonsDirection?: 'row' | 'column';
   renderButton?: (
-    props: Pick<AlertButton, 'text' | 'testID' | 'disabled'> & {
+    props: Pick<AlertButton, 'text' | 'testID' | 'disabled' | 'customProps'> & {
       onPress: () => void;
     }
   ) => ReactElement<any>;
   title?: string;
 }
 
+export interface AlertButtonCustomProps {}
+
 export type AlertButton<R = unknown> = {
   text: string;
   onPress?: (() => Promise<R>) | (() => R);
   disabled?: boolean;
   testID?: string;
   hideAlertOnPress?: boolean;
   onAwaitablePress?: (resolve: (value: R) => void) => void;
+  customProps?: AlertButtonCustomProps;
 };
 
 export type ConfirmProps = Omit<Props, 'buttons'> & {

src/index.tsx

@@ -1,3 +1,5 @@
 export { alert } from './containers/AlertContainer/alert.api';
 
 export { AlertContainer } from './containers/AlertContainer';
+
+export type { AlertButtonCustomProps } from './components/Alert/types';