react-native-app-notification - npm Package Compare versions

Comparing version 1.4.3 to 1.5.0

dist/AppNotification.d.ts

@@ -18,2 +18,3 @@ import React, { Component } from 'react';
             reversed?: boolean;
+            children?: JSX.Element;
         }>;
@@ -26,2 +27,3 @@ SlideUpFadeIn: React.FunctionComponent<{
             reversed?: boolean;
+            children?: JSX.Element;
         }>;
@@ -34,2 +36,3 @@ FadeIn: React.FunctionComponent<{
             reversed?: boolean;
+            children?: JSX.Element;
         }>;
@@ -42,2 +45,3 @@ FadeOut: React.FunctionComponent<{
             reversed?: boolean;
+            children?: JSX.Element;
         }>;
@@ -44,0 +48,0 @@ };

dist/AppNotification.js

@@ -6,8 +6,6 @@ "use strict";
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
@@ -44,3 +42,3 @@ function __() { this.constructor = d; }
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
@@ -60,6 +58,8 @@ return result;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
 };
@@ -73,5 +73,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 var AppNotificationUI_1 = __importDefault(require("./AppNotificationUI"));
+var animations_1 = require("./AppNotificationUI/animations");
 var AppNotificationWrapper_1 = __importDefault(require("./AppNotificationWrapper"));
 var styled_1 = require("./styled");
-var animations_1 = require("./AppNotificationUI/animations");
 var AppNotification = /** @class */ (function (_super) {
@@ -88,4 +88,3 @@ __extends(AppNotification, _super);
             var newQueue = notificationQueue.map(function (notification) {
-                return notification.id === id
-                    ? __assign(__assign({}, notification), { animateOut: true }) : notification;
+                return notification.id === id ? __assign(__assign({}, notification), { animateOut: true }) : notification;
             });
@@ -114,3 +113,3 @@ _this.setState({ notificationQueue: newQueue });
         var id = Math.random().toString();
-        var newNotificationQueue = __spreadArray(__spreadArray([], notificationQueue), [
+        var newNotificationQueue = __spreadArrays(notificationQueue, [
             __assign(__assign(__assign({}, notificationOptions), styles), { onPress: typeof notificationOptions.onPress === 'function'
@@ -142,4 +141,3 @@ ? function () { return _this._onPress(id, notificationOptions.onPress); }
     AppNotification.show = function (options) {
-        if (typeof AppNotification.ref === 'undefined' ||
-            !AppNotification.ref.showNotification) {
+        if (typeof AppNotification.ref === 'undefined' || !AppNotification.ref.showNotification) {
             return console.warn('notificationRef is undefined');
@@ -146,0 +144,0 @@ }

dist/AppNotificationUI/animations.d.ts

@@ -8,2 +8,3 @@ import { FunctionComponent } from 'react';
     reversed?: boolean;
+    children?: JSX.Element;
 };
@@ -10,0 +11,0 @@ declare type Props = OwnProps;

dist/AppNotificationUI/animations.js

@@ -17,3 +17,3 @@ "use strict";
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
@@ -24,8 +24,8 @@ return result;
 exports.FadeOut = exports.FadeIn = exports.Shrink = exports.SlideUpFadeIn = exports.DEFAULT_DURATION = void 0;
+var react_hooks_1 = require("@redmindab/react-hooks");
 var react_1 = __importStar(require("react"));
 var react_native_1 = require("react-native");
-var react_hooks_1 = require("@redmindab/react-hooks");
 exports.DEFAULT_DURATION = 200;
 var DEFAULT_Y_OFFSET = -48;
-var SlideUpFadeIn = function (_a) {
+exports.SlideUpFadeIn = function (_a) {
     var children = _a.children, _b = _a.delay, delay = _b === void 0 ? 0 : _b, _c = _a.duration, duration = _c === void 0 ? exports.DEFAULT_DURATION : _c, _d = _a.yOffset, yOffset = _d === void 0 ? DEFAULT_Y_OFFSET : _d, reversed = _a.reversed;
@@ -55,4 +55,3 @@ var opacity = react_hooks_1.useAnimatedValue(0);
 };
-exports.SlideUpFadeIn = SlideUpFadeIn;
-var Shrink = function (_a) {
+exports.Shrink = function (_a) {
     var children = _a.children, _b = _a.delay, delay = _b === void 0 ? 0 : _b, _c = _a.duration, duration = _c === void 0 ? exports.DEFAULT_DURATION : _c, initialHeight = _a.height;
@@ -67,2 +66,3 @@ var scale = react_hooks_1.useAnimatedValue(1);
                 delay: delay,
+                useNativeDriver: true,
             }),
@@ -73,2 +73,3 @@ react_native_1.Animated.timing(height, {
                 delay: delay,
+                useNativeDriver: false,
             }),
@@ -82,4 +83,3 @@ ]).start();
 };
-exports.Shrink = Shrink;
-var FadeIn = function (_a) {
+exports.FadeIn = function (_a) {
     var children = _a.children, _b = _a.delay, delay = _b === void 0 ? 0 : _b, _c = _a.duration, duration = _c === void 0 ? exports.DEFAULT_DURATION : _c;
@@ -100,4 +100,3 @@ var opacity = react_hooks_1.useAnimatedValue(0);
 };
-exports.FadeIn = FadeIn;
-var FadeOut = function (_a) {
+exports.FadeOut = function (_a) {
     var children = _a.children, _b = _a.delay, delay = _b === void 0 ? 0 : _b, _c = _a.duration, duration = _c === void 0 ? exports.DEFAULT_DURATION : _c;
@@ -118,2 +117,1 @@ var opacity = react_hooks_1.useAnimatedValue(1);
 };
-exports.FadeOut = FadeOut;

dist/AppNotificationUI/AppNotificationUI.js

@@ -8,15 +8,15 @@ "use strict";
 var react_1 = __importDefault(require("react"));
-var react_native_1 = require("react-native");
 var styled_native_kit_1 = require("styled-native-kit");
 var styled_1 = require("./styled");
-var AppNotificationUI = function (_a) {
-    var title = _a.title, message = _a.message, imageUrl = _a.imageUrl, onPress = _a.onPress, containerStyle = _a.containerStyle, imageStyle = _a.imageStyle, messageStyle = _a.messageStyle, titleStyle = _a.titleStyle;
+exports.AppNotificationUI = function (_a) {
+    var title = _a.title, message = _a.message, imageUrl = _a.imageUrl, onPress = _a.onPress, containerStyle = _a.containerStyle, imageStyle = _a.imageStyle, messageStyle = _a.messageStyle, titleStyle = _a.titleStyle, left = _a.left, right = _a.right;
     return (react_1.default.createElement(styled_1.Card, { style: containerStyle, activeOpacity: onPress ? 0.7 : 1, onPress: onPress },
-        react_1.default.createElement(styled_native_kit_1.FlexRow, { style: { alignItems: 'flex-start' } },
-            imageUrl && (react_1.default.createElement(styled_1.Circle, { as: react_native_1.Image, source: { uri: imageUrl }, style: imageStyle })),
+        react_1.default.createElement(styled_native_kit_1.FlexRow, { style: { alignItems: 'center', justifyContent: 'center' } },
+            left && react_1.default.createElement(styled_1.LeftContainer, null, left),
+            imageUrl && react_1.default.createElement(styled_1.BaseImage, { source: { uri: imageUrl }, style: imageStyle }),
             react_1.default.createElement(styled_1.TextContainer, null,
-                title && (react_1.default.createElement(styled_1.Title, { style: [{ marginBottom: 4 }, titleStyle] }, title)),
-                react_1.default.createElement(styled_1.Message, { style: messageStyle }, message)))));
+                title && react_1.default.createElement(styled_1.Title, { style: [{ marginBottom: 4 }, titleStyle] }, title),
+                react_1.default.createElement(styled_1.Message, { style: messageStyle }, message)),
+            right && react_1.default.createElement(styled_1.RightContainer, null, right))));
 };
-exports.AppNotificationUI = AppNotificationUI;
 exports.default = exports.AppNotificationUI;

dist/AppNotificationUI/styled.d.ts

@@ -6,2 +6,4 @@ export declare const cardShadow: any;
 export declare const Message: any;
-export declare const Circle: any;
+export declare const BaseImage: any;
+export declare const LeftContainer: any;
+export declare const RightContainer: any;

dist/AppNotificationUI/styled.js

@@ -21,3 +21,3 @@ "use strict";
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
@@ -27,14 +27,13 @@ return result;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Circle = exports.Message = exports.Title = exports.TextContainer = exports.Card = exports.cardShadow = void 0;
+exports.RightContainer = exports.LeftContainer = exports.BaseImage = exports.Message = exports.Title = exports.TextContainer = exports.Card = exports.cardShadow = void 0;
+var react_native_1 = require("react-native");
 var native_1 = __importStar(require("styled-components/native"));
-var react_native_1 = require("react-native");
-var styled_native_kit_1 = require("styled-native-kit");
 exports.cardShadow = native_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  shadow-color: #948aa5;\n  shadow-offset: 0px 4px;\n  shadow-opacity: 0.22;\n  shadow-radius: 6px;\n  elevation: 3;\n"], ["\n  shadow-color: #948aa5;\n  shadow-offset: 0px 4px;\n  shadow-opacity: 0.22;\n  shadow-radius: 6px;\n  elevation: 3;\n"])));
-exports.Card = native_1.default(react_native_1.TouchableOpacity)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: white;\n  ", ";\n  padding: ", "px ", "px;\n  border-radius: 12px;\n  margin: 0 ", "px;\n  margin-bottom: ", "px;\n"], ["\n  background-color: white;\n  ", ";\n  padding: ", "px ", "px;\n  border-radius: 12px;\n  margin: 0 ", "px;\n  margin-bottom: ", "px;\n"])), exports.cardShadow, 8 * 2, 8 * 1.5, 8 * 2, 8 / 2);
-exports.TextContainer = native_1.default.View(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-left: 8px;\n  width: 85%;\n"], ["\n  margin-left: 8px;\n  width: 85%;\n"])));
+exports.Card = native_1.default(react_native_1.TouchableOpacity)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: white;\n  ", ";\n  padding: ", "px ", "px;\n  border-radius: 12px;\n  margin: 0 ", "px;\n  margin-bottom: ", "px;\n"], ["\n  background-color: white;\n  ", ";\n  padding: ", "px ", "px;\n  border-radius: 12px;\n  margin: 0 ", "px;\n  margin-bottom: ", "px;\n"])), exports.cardShadow, 8 * 2, 8 * 2, 8 * 2, 8 / 2);
+exports.TextContainer = native_1.default.View(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n  justify-content: center;\n"], ["\n  flex: 1;\n  justify-content: center;\n"])));
 exports.Title = native_1.default(react_native_1.Text)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 12px;\n  text-transform: uppercase;\n"], ["\n  font-size: 12px;\n  text-transform: uppercase;\n"])));
 exports.Message = native_1.default(react_native_1.Text)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: ", "px;\n"], ["\n  font-size: 14px;\n  line-height: ", "px;\n"])), 14 * 1.3);
-exports.Circle = native_1.default(styled_native_kit_1.CircleView).attrs(function () { return ({
-    size: 33,
-}); })(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+exports.BaseImage = native_1.default.Image(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 34px;\n  width: 34px;\n  border-radius: 2px;\n  margin-right: 8px;\n"], ["\n  height: 34px;\n  width: 34px;\n  border-radius: 2px;\n  margin-right: 8px;\n"])));
+exports.LeftContainer = native_1.default.View(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
+exports.RightContainer = native_1.default.View(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin-left: 8px;\n"], ["\n  margin-left: 8px;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

dist/AppNotificationWrapper/animations.d.ts

 import { FunctionComponent } from 'react';
-declare type OwnProps = {
+declare type Props = {
     duration?: number;
@@ -8,4 +8,4 @@ yOffset?: number;
     reversed?: boolean;
+    children?: JSX.Element;
 };
-declare type Props = OwnProps;
 export declare const DEFAULT_DURATION = 200;
@@ -12,0 +12,0 @@ export declare const SlideUpFadeIn: FunctionComponent<Props>;

dist/AppNotificationWrapper/animations.js

@@ -17,3 +17,3 @@ "use strict";
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
@@ -24,8 +24,8 @@ return result;
 exports.Shrink = exports.SlideUpFadeIn = exports.DEFAULT_DURATION = void 0;
+var react_hooks_1 = require("@redmindab/react-hooks");
 var react_1 = __importStar(require("react"));
 var react_native_1 = require("react-native");
-var react_hooks_1 = require("@redmindab/react-hooks");
 exports.DEFAULT_DURATION = 200;
 var DEFAULT_Y_OFFSET = -48;
-var SlideUpFadeIn = function (_a) {
+exports.SlideUpFadeIn = function (_a) {
     var children = _a.children, _b = _a.delay, delay = _b === void 0 ? 0 : _b, _c = _a.duration, duration = _c === void 0 ? exports.DEFAULT_DURATION : _c, _d = _a.yOffset, yOffset = _d === void 0 ? DEFAULT_Y_OFFSET : _d, reversed = _a.reversed;
@@ -55,4 +55,3 @@ var opacity = react_hooks_1.useAnimatedValue(0);
 };
-exports.SlideUpFadeIn = SlideUpFadeIn;
-var Shrink = function (_a) {
+exports.Shrink = function (_a) {
     var children = _a.children, _b = _a.delay, delay = _b === void 0 ? 0 : _b, _c = _a.duration, duration = _c === void 0 ? exports.DEFAULT_DURATION : _c, initialHeight = _a.height;
@@ -73,2 +72,3 @@ var scale = react_hooks_1.useAnimatedValue(1);
                 delay: delay,
+                useNativeDriver: false,
             }),
@@ -82,2 +82,1 @@ ]).start();
 };
-exports.Shrink = Shrink;

dist/AppNotificationWrapper/AppNotificationWrapper.d.ts

 import { FunctionComponent } from 'react';
 import { AppNotificationComponentProps, AppNotificationStyleProps, NotificationQueueItem } from '../types';
-declare type OwnProps = AppNotificationStyleProps;
+declare type OwnProps = AppNotificationStyleProps & {
+    children?: Element;
+};
 declare type Props = OwnProps & NotificationQueueItem & AppNotificationComponentProps;
 export declare const AppNotificationWrapper: FunctionComponent<Props>;
 export default AppNotificationWrapper;

dist/AppNotificationWrapper/AppNotificationWrapper.js

@@ -28,3 +28,3 @@ "use strict";
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
@@ -40,3 +40,3 @@ return result;
 var animations_1 = require("./animations");
-var AppNotificationWrapper = function (_a) {
+exports.AppNotificationWrapper = function (_a) {
     var animateOut = _a.animateOut, _b = _a.animated, animated = _b === void 0 ? true : _b, _c = _a.panEnabled, panEnabled = _c === void 0 ? true : _c, alignBottom = _a.alignBottom, children = _a.children, _d = _a.animationWrappers, animationWrappers = _d === void 0 ? { in: undefined, out: undefined } : _d;
@@ -71,3 +71,3 @@ var _e = react_1.useState(false), hide = _e[0], setHide = _e[1];
     })).current;
-    var PanWrapper = react_1.Fragment;
+    var PanWrapper = react_native_1.Animated.View;
     var panWrapperProps = {};
@@ -96,3 +96,2 @@ var AnimationWrapper = styled_native_kit_1.View;
 };
-exports.AppNotificationWrapper = AppNotificationWrapper;
 exports.default = exports.AppNotificationWrapper;

dist/types.d.ts

@@ -40,2 +40,4 @@ import { FunctionComponent } from 'react';
     data?: any;
+    left?: JSX.Element;
+    right?: JSX.Element;
 };
@@ -42,0 +44,0 @@ export declare type NotificationQueueItem = NotificationOptions & {

package.json

 {
   "name": "react-native-app-notification",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "description": "In-app custom notifications for React-Native",
@@ -29,7 +29,9 @@ "main": "dist/index.js",
   "dependencies": {
+    "@redmindab/react-hooks": "*",
     "styled-components": "*",
-    "styled-native-kit": "*",
-    "@redmindab/react-hooks": "*"
+    "styled-native-kit": "*"
   },
   "devDependencies": {
+    "@types/react": "^18.0.26",
+    "@types/react-native": "^0.71.0",
     "typescript": "^3.5.3"
@@ -36,0 +38,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

37989

2.06%

Lines of code

690

0.58%

Worsened metrics

Dev dependency count

3

200%

No dependency changes