feat: update backdrop configuration in Alert component to support custom children

Author: xxsnakerxx

README.md

@@ -412,7 +412,9 @@ You can customize the default appearance and behavior of alerts using the `confi
 <AlertContainer
   config={{
     testID: 'alert_test_id',
-    backdropBackgroundColor: 'rgba(255, 255, 255, 0.5)',
+    backdrop: {
+      backgroundColor: 'rgba(255, 255, 255, 0.5)',
+    },
     alertStyle: {
       borderRadius: 20,
       padding: 20,
@@ -491,8 +493,12 @@ type AlertConfig = {
   // Test identifier for the alert
   testID?: string;
 
-  // Background color of the backdrop
-  backdropBackgroundColor?: ColorValue;
+  backdrop?: {
+    // Background color of the backdrop
+    backgroundColor?: ColorValue;
+    // Custom content to render inside the backdrop
+    children?: React.ReactNode;
+  };
 
   // Custom alert style
   alertStyle?: StyleProp<ViewStyle>;

src/components/Backdrop/index.tsx

@@ -1,14 +1,15 @@
-import { type FC, useMemo } from "react";
+import { type FC, type PropsWithChildren, useMemo } from "react";
 import { StyleSheet } from "react-native";
 import Animated, { useAnimatedStyle } from "react-native-reanimated";
 
 import { useAnimation } from "../../hooks/useAnimation";
 import type { Props } from "./types";
 
-export const Backdrop: FC<Props> = ({
+export const Backdrop: FC<PropsWithChildren<Props>> = ({
 	animationDuration,
 	isHiding,
 	backgroundColor = "rgba(0, 0, 0, 0.5)",
+	children,
 }) => {
 	const { animation } = useAnimation({ animationDuration, isHiding });
 
@@ -25,5 +26,5 @@ export const Backdrop: FC<Props> = ({
 		[animatedStyle, backgroundColor],
 	);
 
-	return <Animated.View style={style} />;
+	return <Animated.View style={style}>{children}</Animated.View>;
 };

src/containers/AlertContainer/index.tsx

@@ -89,8 +89,10 @@ export const AlertContainer: FC<Props> = ({
 			<Backdrop
 				animationDuration={animationDuration}
 				isHiding={isHiding}
-				backgroundColor={config?.backdropBackgroundColor}
-			/>
+				backgroundColor={config?.backdrop?.backgroundColor}
+			>
+				{config?.backdrop?.children}
+			</Backdrop>
 			{renderConfetti()}
 			<Alert
 				{...currentAlert}

src/containers/AlertContainer/types.ts

@@ -32,7 +32,10 @@ export type Props = {
 
 export type AlertConfig = {
 	testID?: string;
-	backdropBackgroundColor?: ColorValue;
+	backdrop?: {
+		backgroundColor?: ColorValue;
+		children?: React.ReactNode;
+	};
 	success?: Partial<
 		Pick<AlertProps, "icon" | "iconColor" | "iconSize" | "title">
 	>;