feat: implement Alert component with customizable styles, dismiss, and animation support

Author: xxsnakerxx

src/components/Alert/controller.ts

@@ -0,0 +1,28 @@
+import { useCallback } from 'react';
+
+import type { ViewProps } from './types';
+import { alert } from '../../alert.api';
+
+export const useController = <R = unknown>({
+  onAwaitableDismiss,
+  onDismiss,
+  resolve,
+}: ViewProps<R>) => {
+  const onDismissButtonPress = useCallback(() => {
+    const resolveWrapper = (value: R) => {
+      resolve(value);
+
+      alert.hide();
+    };
+
+    if (onAwaitableDismiss) {
+      onAwaitableDismiss(resolveWrapper);
+    } else {
+      onDismiss?.();
+
+      resolveWrapper(undefined as R);
+    }
+  }, [onAwaitableDismiss, onDismiss, resolve]);
+
+  return { onDismissButtonPress };
+};

src/components/Alert/index.tsx

@@ -0,0 +1,138 @@
+import { type FC, useCallback, useMemo } from 'react';
+import {
+  Animated,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+
+import type { ViewProps } from './types';
+
+// @ts-ignore: TODO: fix this
+import CloseIcon from '../../assets/close.svg';
+
+import { useAnimation } from '../../hooks/useAnimation';
+import { useController } from './controller';
+import { styles, useContainerDimensions } from './styles';
+
+export const Alert: FC<ViewProps> = (props) => {
+  const {
+    afterButtonsSlot,
+    animationDuration,
+    beforeButtonsSlot,
+    beforeMessageSlot,
+    beforeTitleSlot,
+    icon,
+    iconColor = 'black',
+    iconSize,
+    isDismissible,
+    isHiding,
+    testID,
+    titleAlign = 'center',
+  } = props;
+
+  const { animation } = useAnimation({
+    animationDuration,
+    isHiding,
+  });
+
+  const { onDismissButtonPress } = useController(props);
+
+  const containerDimensions = useContainerDimensions();
+
+  const containerAnimation = useMemo(
+    () => ({
+      opacity: animation.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 1],
+      }),
+      transform: [
+        {
+          scaleX: animation.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0.8, 1],
+          }),
+        },
+        {
+          scaleY: animation.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0.8, 1],
+          }),
+        },
+      ],
+    }),
+    [animation]
+  );
+
+  const containerStyle = useMemo(
+    () =>
+      StyleSheet.compose(
+        StyleSheet.compose(styles.container, containerDimensions),
+        containerAnimation
+      ),
+    [containerAnimation, containerDimensions]
+  );
+
+  const titleStyle = useMemo(
+    () => StyleSheet.compose(styles.title, { textAlign: titleAlign }),
+    [titleAlign]
+  );
+
+  const renderTitleCb = useCallback(() => {
+    const title = props.title ? (
+      <Text numberOfLines={4} style={titleStyle}>
+        {props.title}
+      </Text>
+    ) : (
+      props.renderTitle?.() || null
+    );
+
+    return title ? <View style={styles.titleContainer}>{title}</View> : null;
+  }, [props, titleStyle]);
+
+  const renderMessageCb = useCallback(() => {
+    const message = props.message ? (
+      <Text>{props.message}</Text>
+    ) : (
+      props.renderMessage?.() || null
+    );
+
+    return message ? (
+      <ScrollView bounces={false} style={styles.messageContainer}>
+        {message}
+      </ScrollView>
+    ) : null;
+  }, [props]);
+
+  const renderIconCb = useCallback(() => {
+    const Svg = icon;
+
+    return Svg ? (
+      <Svg fill={iconColor} width={iconSize} height={iconSize} />
+    ) : null;
+  }, [icon, iconColor, iconSize]);
+
+  const renderCloseButtonCb = useCallback(() => {
+    return isDismissible ? (
+      <Pressable onPress={onDismissButtonPress}>
+        <CloseIcon width={24} height={24} fill="gray" />
+      </Pressable>
+    ) : null;
+  }, [isDismissible, onDismissButtonPress]);
+
+  return (
+    <Animated.View style={containerStyle} testID={testID || 'Alert'}>
+      {renderIconCb()}
+      {beforeTitleSlot?.() || null}
+      {renderTitleCb()}
+      {beforeMessageSlot?.() || null}
+      {renderMessageCb()}
+      {beforeButtonsSlot?.() || null}
+      {renderCloseButtonCb()}
+      {/* ADD BUTTONS HERE  */}
+      {afterButtonsSlot?.() || null}
+    </Animated.View>
+  );
+};

src/components/Alert/styles.ts

@@ -0,0 +1,68 @@
+import {
+  StyleSheet,
+  useWindowDimensions,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+export const useContainerDimensions = (): StyleProp<ViewStyle> => {
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+
+  const maxWidth = 340;
+  const maxHeight = Math.round(windowHeight * 0.85);
+
+  return {
+    width: windowWidth - 10 * 2,
+    maxWidth,
+    maxHeight,
+  };
+};
+
+export const styles = StyleSheet.create({
+  container: {
+    borderRadius: 15,
+    paddingTop: 17,
+    backgroundColor: '#fff',
+    zIndex: 7,
+    overflow: 'hidden',
+    marginHorizontal: 20,
+  },
+  titleContainer: {
+    paddingTop: 0,
+    paddingBottom: 15,
+    paddingHorizontal: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 20,
+    lineHeight: 28,
+    textAlign: 'center',
+    fontWeight: 'bold',
+    color: '#000',
+    flex: 1,
+  },
+  closeButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    position: 'absolute',
+    right: 20,
+    top: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  messageContainer: {
+    paddingHorizontal: 20,
+    marginBottom: 20,
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 0,
+  },
+  message: {
+    fontSize: 15,
+    lineHeight: 20,
+    textAlign: 'center',
+    color: '#000',
+  },
+});

src/components/Alert/types.ts

@@ -0,0 +1,34 @@
+import type { ReactElement } from 'react';
+import type { ColorValue } from 'react-native';
+
+type IconProps = {
+  fill?: ColorValue;
+  width?: number;
+  height?: number;
+};
+
+export interface Props<R = unknown> {
+  id?: string;
+  testID?: string;
+  afterButtonsSlot?: () => ReactElement<any>;
+  beforeButtonsSlot?: () => ReactElement<any>;
+  beforeMessageSlot?: () => ReactElement<any>;
+  beforeTitleSlot?: () => ReactElement<any>;
+  icon?: React.FC<IconProps>;
+  iconColor?: ColorValue;
+  iconSize?: number;
+  isDismissible?: boolean;
+  message?: string;
+  onAwaitableDismiss?: (resolve: (value: R) => void) => void;
+  onDismiss?: (() => Promise<R>) | (() => R);
+  renderMessage?: () => ReactElement<any>;
+  renderTitle?: () => ReactElement<any>;
+  title?: string;
+  titleAlign?: 'center' | 'left' | 'right';
+}
+
+export type ViewProps<R = unknown> = Props<R> & {
+  animationDuration: number;
+  isHiding: boolean;
+  resolve: (value?: R) => void;
+};