feat: add button direction support to Alert component and enhance App with new alert buttons

Author: xxsnakerxx

example/src/App.tsx

@@ -31,6 +31,22 @@ export default function App() {
                   alert.show({
                     title: 'Alert 2',
                     message: 'I am an alert 2',
+                    buttons: [
+                      {
+                        text: 'OK',
+                        onPress: () => {
+                          alert.success({ message: 'You pressed OK button' });
+                        },
+                      },
+                      {
+                        text: 'Cancel',
+                        onPress: () => {
+                          alert.success({
+                            message: 'You pressed Cancel button',
+                          });
+                        },
+                      },
+                    ],
                   });
                 }}
                 text="Show 2 Alerts"

src/components/Alert/index.tsx

@@ -34,6 +34,7 @@ export const Alert: FC<AlertViewProps> = (props) => {
     isHiding,
     testID,
     buttons,
+    buttonsDirection = 'column',
     title,
     renderTitle,
     message,
@@ -75,10 +76,11 @@ export const Alert: FC<AlertViewProps> = (props) => {
 
   const containerStyle = useMemo(
     () =>
-      StyleSheet.compose(
-        StyleSheet.compose(styles.container, containerDimensions),
-        containerAnimation
-      ),
+      StyleSheet.flatten([
+        styles.container,
+        containerDimensions,
+        containerAnimation,
+      ]),
     [containerAnimation, containerDimensions]
   );
 
@@ -149,10 +151,16 @@ export const Alert: FC<AlertViewProps> = (props) => {
     return dismissButton;
   }, [isDismissible, onDismissButtonPress, renderDismissButton]);
 
+  const buttonsContainerStyle = useMemo(() => {
+    return StyleSheet.compose(styles.buttonsContainer, {
+      flexDirection: buttonsDirection,
+    });
+  }, [buttonsDirection]);
+
   const renderButtons = useCallback(() => {
     if (buttons?.length) {
       return (
-        <View style={styles.buttonsContainer}>
+        <View style={buttonsContainerStyle}>
           {buttons.map((button) => (
             <Button
               key={button.text}
@@ -165,7 +173,7 @@ export const Alert: FC<AlertViewProps> = (props) => {
     }
 
     return null;
-  }, [buttons, onButtonPress]);
+  }, [buttons, onButtonPress, buttonsContainerStyle]);
 
   return (
     <Animated.View style={containerStyle} testID={testID || 'Alert'}>

src/components/Alert/types.ts

@@ -42,6 +42,7 @@ export interface Props<R = unknown> {
     onPress: () => void;
   }) => ReactElement<any>;
   buttons?: AlertButton[];
+  buttonsDirection?: 'row' | 'column';
   title?: string;
 }
 

src/components/Button/index.tsx

@@ -18,6 +18,7 @@ export const Button = ({
 
 const styles = StyleSheet.create({
   button: {
+    flexGrow: 1,
     backgroundColor: '#f0f0f0',
     borderRadius: 10,
     paddingVertical: 10,

src/containers/AlertContainer/controller.ts

@@ -174,6 +174,7 @@ export const useController = ({ animationDuration }: Props) => {
       return show({
         ...alert,
         buttons,
+        buttonsDirection: 'row',
         title,
       });
     },