style: update Notification component: add type and other props

Author: seniv

CHANGELOG.md

@@ -1,6 +1,6 @@
 # Changelog
 
-## v3.0.0-rc.0
+## v3.0.0-rc
 
 ### Breaking Changes
 - The library now internally uses `react-native-safe-area-context`. Make sure you have `react-native-safe-area-context` installed, and that `NotifierRoot/Wrapper` is wrapped by `SafeAreaProvider`.
@@ -23,12 +23,17 @@
 - Calling `showNotification` returns `update`, `hide`, `shake`, and `isVisible` functions for manipulating the notification.
 - You can mount multiple instances of `NotifierWrapper`/`NotifierRoot` and still control them using global `Notifier.*` methods. The most recently mounted instance is controlled first; if it unmounts, control reverts to the previously mounted instance.
 - It's possible to broadcast commands to all mounted instances of Notifier via `Notifier.broadcast.*`. This can be used, for example, to hide all notifications or clear the queue and hide them using `Notifier.broadcast.hideNotification()`.
-- Custom handling for safe area insets (based on `react-native-safe-area-context`'s `useSafeAreaInsets` hook) in all built-in components, plus a simple API for using the same insets in custom components. It also handles keyboard offset when a notification is displayed at a bottom `position`. All components receive an `offsets` object and a `ViewWithOffsets` component as props. Related parameters: `ignoreSafeAreaInsets`, `ignoreKeyboard`, `additionalKeyboardOffset`, `additionalOffsets`.
+- Custom handling for safe area insets (based on `react-native-safe-area-context`'s `useSafeAreaInsets` hook) in all built-in components, plus a simple API for using the same insets in custom components. It also handles keyboard offset when a notification is displayed at a bottom `position`. All components receive an `offsets` object and a `ViewWithOffsets` component as props. Related parameters: `ignoreSafeAreaInsets`, `ignoreKeyboard`, `ignoreKeyboardHeight`, `additionalKeyboardOffset`, `additionalOffsets`.
 - Using new `*AnimationConfig` parameters, it is now possible to run **Spring** animations with fully customizable configurations.
 - Additional TypeScript types have been exported, such as `NotifierComponentProps` (for base props in custom components), `AnimationFunction`, `AnimationFunctionParams`, `Position`, `Offsets`, `ViewWithOffsetsComponent`, `Direction`, `DuplicateBehavior`, and `SwipeDirection`.
 - New built-in component: `SimpleToast`.
 - All components receive a `hide` function and an `animationFunctionParams` object as props.
 
+### Changed
+- **Alert component:** Renamed `alertType` prop to `type` for consistency with other components. The `alertType` prop remains available but will be deprecated, so please migrate to `type`.
+- **Notification component:** Changed default `borderRadius` from `5` to `8` and "description" `fontSize` from `14` to `15`.
+- **Notification component:** Introduced a `type` prop. When set to anything other than `'classic'`, an icon and left border will be displayed.
+
 ### Bug Fixes
 - When you mount `NotifierWrapper`/`NotifierRoot` with `omitGlobalMethodsHookup={true}` and then switch it to `false`, global methods now hook up correctly.
 - Fixed a jump in the appearing animation when very large notifications appear.
@@ -43,3 +48,4 @@ rnScreensOverlayViewStyle={{
   bottom: 0,
 }}
 ```
+- When `useRNScreensOverlay` is `true`, `SafeAreaView` might not work correctly. Use `ViewWithOffsets` component that is coming though props into all **Custom Components**.

src/ui-components/Notification.tsx

@@ -11,69 +11,139 @@ import {
   type StyleProp,
 } from 'react-native';
 import type { NotifierComponentProps } from '../types';
-import { commonStyles } from './common';
+import {
+  backgroundColors,
+  commonStyles,
+  iconColors,
+  icons,
+  type Types,
+} from './common';
 
 const s = StyleSheet.create({
   container: {
     backgroundColor: '#ffffff',
-    borderRadius: 5,
+    borderRadius: 8,
     margin: 10,
     paddingVertical: 10,
-    paddingHorizontal: 10,
+    paddingHorizontal: 15,
     flexDirection: 'row',
     alignItems: 'center',
+    gap: 8,
+  },
+  borderWidth: {
+    borderLeftWidth: 4,
+  },
+  containerWithIcon: {
+    paddingLeft: 10,
   },
   image: {
     alignItems: 'center',
-    marginRight: 5,
-    borderRadius: 5,
+    borderRadius: 8,
     height: 45,
     width: 45,
   },
-  content: {
-    flex: 1,
-    marginHorizontal: 5,
+  iconBackground: {
+    borderRadius: 25,
+    width: 50,
+    height: 50,
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'flex-start',
+  },
+  icon: {
+    width: 35,
+    height: 35,
+  },
+  warnIcon: {
+    top: -2,
+  },
+  textContainer: {
+    flexShrink: 1,
   },
   title: {
-    fontWeight: 'bold',
+    fontWeight: '600',
     fontSize: 15,
     lineHeight: 25,
+    color: '#45516F',
+  },
+  classicTitle: {
+    fontWeight: 'bold',
     color: '#007BFF',
   },
   description: {
-    fontSize: 14,
+    fontSize: 15,
     lineHeight: 20,
+    color: '#6D7686',
+  },
+  classicDescription: {
     color: '#444444',
   },
 });
 
 export interface NotificationComponentProps extends NotifierComponentProps {
+  /** If set, the icon, icon background color, and border color will be determined by the provided type.
+   * - classic - uses the same style as it was in v2 and lower
+   * - other value - adds icon, and border on the left side
+   * @default null */
+  type?: Types | 'classic';
+
+  /** When `true`, the title color is automatically derived from the `type` prop.
+   * @default false */
+  useTypeColorForTitle?: boolean;
+
+  /** When `true`, the description color is automatically derived from the `type` prop.
+   * @default false */
+  useTypeColorForDescription?: boolean;
+
   /** Passed to `<Image />` as `source` param.
    * @default null */
   imageSource?: ImageSourcePropType;
 
-  /** The maximum number of lines to use for rendering title.
+  /** The maximum number of lines for rendering the title text.
    * @default null */
   maxTitleLines?: number;
 
-  /** The maximum number of lines to use for rendering description.
+  /** The maximum number of lines for rendering the description text.
    * @default null */
   maxDescriptionLines?: number;
 
-  /** A container of the component. Set it in case you use different SafeAreaView than the custom `ViewWithOffsets`
+  /** A custom container component. If used, it replaces the default `ViewWithOffsets` provided by the library.
    * @default ViewWithOffsets */
   ContainerComponent?: React.ElementType;
 
-  /** The style to use for rendering title
+  /** The icon source passed to the `<Image />` component as the `source` prop.
+   * If not specified, a default icon is used based on the `type`.
+   * @default depends on `type`
+   * @example iconSource: require('./icons/success.png') */
+  iconSource?: ImageSourcePropType;
+
+  /** Style for the outermost container of the toast.
+   * @default null */
+  safeAreaStyle?: StyleProp<ViewStyle>;
+
+  /** Style for the icon container, useful for adjusting background color or size.
+   * @default null */
+  iconContainerStyle?: StyleProp<TextStyle>;
+
+  /** Style for the icon `<Image />` itself, useful for adjusting icon color or size.
+   * @default null
+   * @example { tintColor: 'red' } */
+  iconStyle?: StyleProp<ImageStyle>;
+
+  /** Style for the text container wrapping both title and description.
+   * @default null */
+  textContainerStyle?: StyleProp<TextStyle>;
+
+  /** Style for the title text.
    * @default null */
   titleStyle?: StyleProp<TextStyle>;
 
-  /** The style to use for rendering description
+  /** Style for the description text.
    * @default null */
   descriptionStyle?: StyleProp<TextStyle>;
 
-  /** The style to use for notification container.
-   * Might be useful to change background color, shadows, paddings or margins
+  /** Style for the toast content container, often used to modify background color,
+   * shadows, padding, or margin.
    * @default null */
   containerStyle?: StyleProp<ViewStyle>;
 
@@ -93,24 +163,82 @@ export const NotificationComponent = ({
   maxTitleLines,
   maxDescriptionLines,
   containerStyle,
+  type = 'classic',
+  useTypeColorForTitle,
+  useTypeColorForDescription,
+  iconSource,
+  safeAreaStyle,
+  iconContainerStyle,
+  iconStyle,
+  textContainerStyle,
   ViewWithOffsets,
 }: NotificationComponentProps) => {
   const Container = ContainerComponent ?? ViewWithOffsets;
   return (
-    <Container>
-      <View style={[s.container, commonStyles.shadow, containerStyle]}>
+    <Container style={safeAreaStyle}>
+      <View
+        style={[
+          s.container,
+          commonStyles.shadow,
+          (type !== 'classic' || !!imageSource || !!iconSource) &&
+            s.containerWithIcon,
+          type !== 'classic' && s.borderWidth,
+          type !== 'classic' && { borderColor: iconColors[type] },
+          containerStyle,
+        ]}
+      >
         {!!imageSource && (
           <Image style={[s.image, imageStyle]} source={imageSource} />
         )}
-        <View style={s.content}>
+        {(type !== 'classic' || !!iconSource) && (
+          <View
+            style={[
+              s.iconBackground,
+              type !== 'classic' && {
+                backgroundColor: backgroundColors[type],
+              },
+              iconContainerStyle,
+            ]}
+          >
+            <Image
+              style={[
+                s.icon,
+                type === 'warn' && s.warnIcon,
+                type !== 'classic' && {
+                  tintColor: iconColors[type],
+                },
+                iconStyle,
+              ]}
+              source={
+                iconSource ?? (type !== 'classic' ? icons[type] : undefined)
+              }
+            />
+          </View>
+        )}
+        <View style={[s.textContainer, textContainerStyle]}>
           {!!title && (
-            <Text style={[s.title, titleStyle]} numberOfLines={maxTitleLines}>
+            <Text
+              style={[
+                s.title,
+                titleStyle,
+                type !== 'classic' &&
+                  useTypeColorForTitle && { color: iconColors[type] },
+                type === 'classic' && s.classicTitle,
+              ]}
+              numberOfLines={maxTitleLines}
+            >
               {title}
             </Text>
           )}
           {!!description && (
             <Text
-              style={[s.description, descriptionStyle]}
+              style={[
+                s.description,
+                descriptionStyle,
+                type !== 'classic' &&
+                  useTypeColorForDescription && { color: iconColors[type] },
+                type === 'classic' && s.classicDescription,
+              ]}
               numberOfLines={maxDescriptionLines}
             >
               {description}