Merge pull request #9 from seniv/dev

Dev to Master

Author: seniv

README.md

@@ -2,6 +2,7 @@
 
 [![npm](https://img.shields.io/npm/v/react-native-notifier)](https://www.npmjs.com/package/react-native-notifier)
 [![npm bundle size](https://img.shields.io/bundlephobia/min/react-native-notifier)](https://bundlephobia.com/result?p=react-native-notifier)
+![platforms: ios, android, web](https://img.shields.io/badge/platform-ios%2C%20android%2C%20web-blue)
 [![license MIT](https://img.shields.io/badge/license-MIT-brightgreen)](https://github.com/seniv/react-native-notifier/blob/master/LICENSE)
 
 Fast and simple in-app notifications for React Native
@@ -162,7 +163,7 @@ Name                              | Type     | Default      | Description
 title                             | String   | null         | Title of notification.
 description                       | String   | null         | Description of notification.
 componentProps.imageSource        | Object   | null         | Passed to `<Image />` as `source` param.
-componentProps.ContainerComponent | Object   | SafeAreaView | A container of the component. Set it in case you use different SafeAreaView than the standard
+componentProps.ContainerComponent | Component| SafeAreaView | A container of the component. Set it in case you use different SafeAreaView than the standard
 
 ### `NotifierComponents.Alert`
 
@@ -190,7 +191,7 @@ description                       | String   | null         | Description of not
 componentProps.alertType          | String   | 'success'    | Background color will be changed depending on the type. Available values: `error`(red), `success`(green), `warn`(orange) and `info`(blue).
 componentProps.backgroundColor    | String   | null         | While the background of the alert depends on `alertType`, you can also set the other color you want.
 componentProps.textColor          | String   | 'white'      | Color of `title` and `description`.
-componentProps.ContainerComponent | Object   | SafeAreaView | A container of the component. Set it in case you use different SafeAreaView than the standard
+componentProps.ContainerComponent | Component| SafeAreaView | A container of the component. Set it in case you use different SafeAreaView than the standard
 
 ## Custom Component
 

src/Notifier.tsx

@@ -19,7 +19,7 @@ import {
 } from './constants';
 import {
   ShowParams,
-  ShowNotification,
+  ShowNotificationParams,
   StateInterface,
   EndCallback,
   NotifierInterface,
@@ -30,17 +30,17 @@ export const Notifier: NotifierInterface = {
   hideNotification: () => {},
 };
 
-export class NotifierRoot extends React.PureComponent<ShowNotification, StateInterface> {
+export class NotifierRoot extends React.PureComponent<ShowNotificationParams, StateInterface> {
   private isShown: boolean;
   private isHiding: boolean;
   private hideTimer: any;
   private showParams: ShowParams | null;
-  private callStack: Array<ShowNotification>;
+  private callStack: Array<ShowNotificationParams>;
   private readonly translateY: Animated.Value;
   private readonly translateYInterpolated: Animated.AnimatedInterpolation;
   private readonly onGestureEvent: (...args: any[]) => void;
 
-  constructor(props: ShowNotification) {
+  constructor(props: ShowNotificationParams) {
     super(props);
 
     this.state = {
@@ -104,8 +104,12 @@ export class NotifierRoot extends React.PureComponent<ShowNotification, StateInt
     this.onStartHiding();
   }
 
-  public showNotification(functionParams: ShowNotification) {
-    const params = { ...this.props, ...functionParams };
+  public showNotification(functionParams: ShowNotificationParams) {
+    const params = {
+      ...this.props,
+      ...functionParams,
+      componentProps: { ...this.props?.componentProps, ...functionParams?.componentProps },
+    };
 
     if (this.isShown) {
       switch (params.queueMode) {
@@ -139,13 +143,13 @@ export class NotifierRoot extends React.PureComponent<ShowNotification, StateInt
       Component,
       componentProps,
       ...restParams
-    } = params ?? {};
+    } = params;
     this.setState({
       title,
       description,
       Component: Component ?? NotificationComponent,
       swipeEnabled: swipeEnabled ?? DEFAULT_SWIPE_ENABLED,
-      componentProps: componentProps ?? {},
+      componentProps: componentProps,
     });
     this.showParams = restParams;
     if (duration && !isNaN(duration)) {
@@ -226,11 +230,7 @@ export class NotifierRoot extends React.PureComponent<ShowNotification, StateInt
           style={[
             s.container,
             {
-              transform: [
-                {
-                  translateY: this.translateYInterpolated,
-                },
-              ],
+              transform: [{ translateY: this.translateYInterpolated }],
             },
           ]}
         >

src/NotifierWrapper.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { NotifierRoot } from './Notifier';
-import { ShowNotification } from './types';
+import { ShowNotificationParams } from './types';
 
-interface NotifierWrapperProps extends ShowNotification {
+interface NotifierWrapperProps extends ShowNotificationParams {
   children: React.ReactNode;
 }
 

src/types.ts

@@ -24,7 +24,7 @@ export type QueueMode = 'immediate' | 'next' | 'standby' | 'reset';
 
 type ComponentProps = NotificationComponentProps | AlertComponentProps | object;
 
-export interface ShowNotification extends ShowParams {
+export interface ShowNotificationParams extends ShowParams {
   title?: string; // null
   description?: string; // null
   swipeEnabled?: boolean; // true
@@ -46,6 +46,6 @@ export type EndResult = { finished: boolean };
 export type EndCallback = (result: EndResult) => void;
 
 export interface NotifierInterface {
-  showNotification: (params: ShowNotification) => void;
+  showNotification: (params: ShowNotificationParams) => void;
   hideNotification: (onHidden?: EndCallback) => void;
 }