From 770c30855353a3f2d90fecc85c4aa328aa7980ee Mon Sep 17 00:00:00 2001 From: Dominik Danielewicz Date: Thu, 19 Oct 2023 13:21:12 +0200 Subject: [PATCH 1/7] feature: notification width and position --- example/package.json | 5 +-- example/src/screens/DefaultExamples.tsx | 25 +++++++++++--- example/yarn.lock | 8 ++--- src/core/hooks/useNotificationsStates.ts | 6 ++-- src/core/renderers/GestureHandler.tsx | 43 +++++++++++++++++++++--- src/core/utils/pickers.ts | 38 +++++++++++++++++---- src/types.ts | 1 + src/types/config.ts | 9 ++++- yarn.lock | 8 ++--- 9 files changed, 113 insertions(+), 30 deletions(-) diff --git a/example/package.json b/example/package.json index 7f3b405d..ea8bf532 100644 --- a/example/package.json +++ b/example/package.json @@ -8,7 +8,8 @@ "start": "react-native start", "test": "jest", "lint": "eslint . --ext .js,.jsx,.ts,.tsx", - "postinstall": "patch-package" + "postinstall": "patch-package", + "clear": "yarn --clearCache" }, "dependencies": { "@react-native-masked-view/masked-view": "^0.2.6", @@ -19,7 +20,7 @@ "@reduxjs/toolkit": "^1.7.1", "react": "17.0.2", "react-native": "0.68.5", - "react-native-gesture-handler": "^2.9.0", + "react-native-gesture-handler": "2.9.0", "react-native-modal": "^13.0.1", "react-native-reanimated": "^2.14.4", "react-native-safe-area-context": "^3.3.2", diff --git a/example/src/screens/DefaultExamples.tsx b/example/src/screens/DefaultExamples.tsx index 47a71082..6370f81c 100644 --- a/example/src/screens/DefaultExamples.tsx +++ b/example/src/screens/DefaultExamples.tsx @@ -10,10 +10,18 @@ import { RemoveButton } from '../components/basicExamples/RemoveButton' import { styles } from './styles' const { useNotifications, NotificationsProvider } = createNotifications({ - notificationPosition: 'top', + notificationWidth: 300, defaultStylesSettings: { - errorConfig: { + globalConfig: { notificationPosition: 'bottom', + titleSize: 40, + }, + errorConfig: { + notificationPosition: 'top', + }, + successConfig: { + notificationPosition: 'top', + titleSize: 20, }, }, }) @@ -31,8 +39,11 @@ export const DefaultExamples = () => { setId( notify('success', { params: { - description: 'This is where the toast text goes', + description: 'This is where the toast text goes.', title: 'Success', + style: { + titleSize: 10, + }, }, }).id ) @@ -43,11 +54,16 @@ export const DefaultExamples = () => { onPress={() => notify('error', { params: { - description: 'This is where the toast text goes. ', + description: 'This is where the toast text goes.', title: 'Error', + style: { + titleSize: 10, + }, }, config: { duration: 2000, + notificationPosition: 'bottom', + notificationWidth: 100, }, }) } @@ -60,6 +76,7 @@ export const DefaultExamples = () => { description: 'This is where the toast text goes', title: 'Warning', }, + config: {}, }) } /> diff --git a/example/yarn.lock b/example/yarn.lock index 09b3c55d..385909ba 100644 --- a/example/yarn.lock +++ b/example/yarn.lock @@ -6016,10 +6016,10 @@ react-native-codegen@^0.0.18: jscodeshift "^0.13.1" nullthrows "^1.1.1" -react-native-gesture-handler@^2.9.0: - version "2.12.0" - resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.12.0.tgz#59ca9d97e4c71f70b9c258f14a1a081f4c689976" - integrity sha512-rr+XwVzXAVpY8co25ukvyI38fKCxTQjz7WajeZktl8qUPdh1twnSExgpT47DqDi4n+m+OiJPAnHfZOkqqAQMOg== +react-native-gesture-handler@2.9.0: + version "2.9.0" + resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.9.0.tgz#2f63812e523c646f25b9ad660fc6f75948e51241" + integrity sha512-a0BcH3Qb1tgVqUutc6d3VuWQkI1AM3+fJx8dkxzZs9t06qA27QgURYFoklpabuWpsUTzuKRpxleykp25E8m7tg== dependencies: "@egjs/hammerjs" "^2.0.17" hoist-non-react-statics "^3.3.0" diff --git a/src/core/hooks/useNotificationsStates.ts b/src/core/hooks/useNotificationsStates.ts index 3d3fa2de..a2858bf9 100644 --- a/src/core/hooks/useNotificationsStates.ts +++ b/src/core/hooks/useNotificationsStates.ts @@ -1,7 +1,7 @@ import { useReducer, useRef, useState } from 'react' import { useWindowDimensions } from 'react-native' import { useNotificationConfig } from './useNotificationConfig' -import { getTopOffset, mergeConfigs } from '../utils/pickers' +import { getNotificationOffset, mergeConfigs } from '../utils/pickers' import { queueReducer } from '../utils/queueReducer' import { useStatusBarHeightDetector } from './useStatusBarHeightDetector' @@ -18,7 +18,7 @@ export const useNotificationsStates = () => { const notificationEvent = notificationsQueue[0] const config = mergeConfigs(globalConfig, notificationEvent) - const topOffset = getTopOffset({ + const notificationOffset = getNotificationOffset({ globalConfig: config, notificationHeight, isPortraitMode, @@ -29,7 +29,7 @@ export const useNotificationsStates = () => { return { config, dispatch, - topOffset, + notificationOffset, panHandlerRef, notificationEvent, notificationsQueue, diff --git a/src/core/renderers/GestureHandler.tsx b/src/core/renderers/GestureHandler.tsx index cf977955..48e1d5cb 100644 --- a/src/core/renderers/GestureHandler.tsx +++ b/src/core/renderers/GestureHandler.tsx @@ -6,6 +6,7 @@ import type { NotificationState } from '../hooks/useNotificationsStates' import Animated from 'react-native-reanimated' import { styles } from '../utils/styles' import { Constants } from '../config' +import { useNotificationsStates } from '../hooks/useNotificationsStates' type Props = { children: ReactNode @@ -14,7 +15,7 @@ type Props = { | 'longPressHandlerRef' | 'panHandlerRef' | 'setNotificationHeight' - | 'topOffset' + | 'notificationOffset' | 'isPortaitMode' > animationAPI: Pick @@ -28,14 +29,44 @@ export const GestureHandler = ({ notificationTopPosition, }: Props) => { const { width } = useWindowDimensions() - const notificationWidth = state.isPortaitMode - ? width - Constants.notificationSideMargin * 2 - : Constants.maxNotificationWidth + const { config } = useNotificationsStates() + + //Jeżeli ktoś poda za dużą szerokość to czy ma zostać zastosowana cała szerokość ekranu czy może defaultowa szerokość? + + //Kiedy komunikat ma zajmować całą szerokość? + + /*Jak ma się zachowywać komunikat przy: + 1) portrait: cała szerokość domyślnie, chyba że notificationWith (jest różny od undefined) + 2) landscape: maxNotificationWidth domyślnie chyba że notificationWith (jest różny od undefined) + +*/ + + const hasNotificationWidth = config?.notificationWidth + const isWidthProvided = hasNotificationWidth && config.notificationWidth <= width + + const getDefaultWidth = () => width - Constants.notificationSideMargin * 2 + + const getMaxWidth = () => { + if (hasNotificationWidth && config.notificationWidth > width) { + return width - Constants.notificationSideMargin * 2 + } + return hasNotificationWidth ? config.notificationWidth : Constants.maxNotificationWidth + } + + const notificationWidth = state.isPortraitMode + ? isWidthProvided + ? config.notificationWidth + : getDefaultWidth() + : getMaxWidth() const top = notificationTopPosition || notificationTopPosition === 0 ? notificationTopPosition - : state.topOffset + : state.notificationOffset.top + + const left = state.notificationOffset.left + + const right = state.notificationOffset.right return ( diff --git a/src/core/utils/pickers.ts b/src/core/utils/pickers.ts index a8baad41..8d606a45 100644 --- a/src/core/utils/pickers.ts +++ b/src/core/utils/pickers.ts @@ -4,7 +4,7 @@ import type { DefaultKeys, DefaultStylesConfigs } from '../../defaultConfig/type import type { KeyType } from '../../types/misc' import { Constants } from '../config' -type GetOffsetTopProps = { +type GetNotificationOffsetProps = { globalConfig: NotificationsConfig notificationHeight: number isPortraitMode: boolean @@ -12,13 +12,13 @@ type GetOffsetTopProps = { statusBarHeight: number } -export const getTopOffset = ({ +export const getNotificationOffset = ({ globalConfig, notificationHeight, isPortraitMode, windowHeight, statusBarHeight, -}: GetOffsetTopProps) => { +}: GetNotificationOffsetProps) => { const isNotch = globalConfig.isNotch const extraSpace = statusBarHeight + 10 @@ -26,16 +26,40 @@ export const getTopOffset = ({ const topPosition = shouldRenderExtraSpace ? extraSpace : 10 const notificationPosition = globalConfig.notificationPosition + let topOffset, leftOffset, rightOffset + switch (notificationPosition) { case 'top': - return topPosition + topOffset = topPosition + break + case 'top-left': + topOffset = topPosition + leftOffset = 10 + break + case 'top-right': + topOffset = topPosition + rightOffset = 10 + break case 'center': - return windowHeight / 2 - (notificationHeight ? notificationHeight / 2 : 75) + topOffset = windowHeight / 2 - (notificationHeight ? notificationHeight / 2 + 10 : 75) + break case 'bottom': - return windowHeight - (notificationHeight ? notificationHeight + extraSpace : 150) + topOffset = windowHeight - (notificationHeight ? notificationHeight + extraSpace : 150) + break + case 'bottom-left': + topOffset = windowHeight - (notificationHeight ? notificationHeight + extraSpace : 150) + leftOffset = 10 + break + case 'bottom-right': + topOffset = windowHeight - (notificationHeight ? notificationHeight + extraSpace : 150) + rightOffset = 10 + break default: - return topPosition + topOffset = topPosition + break } + + return { top: topOffset, left: leftOffset, right: rightOffset } } export const pickVariant = ( diff --git a/src/types.ts b/src/types.ts index 172264b2..c0e1243f 100644 --- a/src/types.ts +++ b/src/types.ts @@ -33,6 +33,7 @@ export type NotificationConfigBase = { animationConfig: AnimationBuilder | CustomAnimationConfig gestureConfig: GestureConfig isNotch?: boolean + notificationWidth?: number onClose?: () => void } diff --git a/src/types/config.ts b/src/types/config.ts index 3c6dbd21..b0e82e1e 100644 --- a/src/types/config.ts +++ b/src/types/config.ts @@ -1,5 +1,12 @@ export type NotificationsType = 'default' | 'success' | 'warning' | 'error' -export type NotificationPosition = 'top' | 'center' | 'bottom' +export type NotificationPosition = + | 'top' + | 'center' + | 'bottom' + | 'top-left' + | 'top-right' + | 'bottom-left' + | 'bottom-right' export type NotificationConfig = { type: NotificationsType diff --git a/yarn.lock b/yarn.lock index 4f790635..7d8c75dd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8503,10 +8503,10 @@ react-native-codegen@^0.0.18: jscodeshift "^0.13.1" nullthrows "^1.1.1" -react-native-gesture-handler@2.9.0: - version "2.9.0" - resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.9.0.tgz#2f63812e523c646f25b9ad660fc6f75948e51241" - integrity sha512-a0BcH3Qb1tgVqUutc6d3VuWQkI1AM3+fJx8dkxzZs9t06qA27QgURYFoklpabuWpsUTzuKRpxleykp25E8m7tg== +react-native-gesture-handler@^2.9.0: + version "2.13.2" + resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.13.2.tgz#06813c250922db258ce4ee255f757e7ef32a3ae0" + integrity sha512-EADHg1cFunvu47lyzlqCJQluQxUIGZwDpdq2GEBXxFmH8AWTI2ofurio5doWnFR+dLVEjaLAzI/dU2xQjP0/pA== dependencies: "@egjs/hammerjs" "^2.0.17" hoist-non-react-statics "^3.3.0" From ad87b168ee472a9f9e5dae4d1f289908997cb3ef Mon Sep 17 00:00:00 2001 From: PdoubleU Date: Thu, 19 Oct 2023 14:31:04 +0200 Subject: [PATCH 2/7] * remove buggy use of useNorificationStates * still wip --- src/core/hooks/useNotificationsStates.ts | 3 ++- src/core/renderers/GestureHandler.tsx | 18 +++++++++--------- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/core/hooks/useNotificationsStates.ts b/src/core/hooks/useNotificationsStates.ts index a2858bf9..bfed2487 100644 --- a/src/core/hooks/useNotificationsStates.ts +++ b/src/core/hooks/useNotificationsStates.ts @@ -35,7 +35,8 @@ export const useNotificationsStates = () => { notificationsQueue, longPressHandlerRef, setNotificationHeight, - isPortaitMode: isPortraitMode, + isPortrait: isPortraitMode, + notificationWidth: config.notificationWidth, } } diff --git a/src/core/renderers/GestureHandler.tsx b/src/core/renderers/GestureHandler.tsx index 48e1d5cb..7ae1918d 100644 --- a/src/core/renderers/GestureHandler.tsx +++ b/src/core/renderers/GestureHandler.tsx @@ -6,7 +6,6 @@ import type { NotificationState } from '../hooks/useNotificationsStates' import Animated from 'react-native-reanimated' import { styles } from '../utils/styles' import { Constants } from '../config' -import { useNotificationsStates } from '../hooks/useNotificationsStates' type Props = { children: ReactNode @@ -16,7 +15,8 @@ type Props = { | 'panHandlerRef' | 'setNotificationHeight' | 'notificationOffset' - | 'isPortaitMode' + | 'isPortrait' + | 'notificationWidth' > animationAPI: Pick notificationTopPosition?: number @@ -29,7 +29,6 @@ export const GestureHandler = ({ notificationTopPosition, }: Props) => { const { width } = useWindowDimensions() - const { config } = useNotificationsStates() //Jeżeli ktoś poda za dużą szerokość to czy ma zostać zastosowana cała szerokość ekranu czy może defaultowa szerokość? @@ -41,21 +40,22 @@ export const GestureHandler = ({ */ - const hasNotificationWidth = config?.notificationWidth - const isWidthProvided = hasNotificationWidth && config.notificationWidth <= width + // fixme: TS krzyczy jak uzywa sie hasNotificationWidth, trzeba to jakos ograc sensownie + const hasNotificationWidth = !!state?.notificationWidth + const isWidthProvided = !!state?.notificationWidth && state.notificationWidth <= width const getDefaultWidth = () => width - Constants.notificationSideMargin * 2 const getMaxWidth = () => { - if (hasNotificationWidth && config.notificationWidth > width) { + if (!!state?.notificationWidth && state.notificationWidth > width) { return width - Constants.notificationSideMargin * 2 } - return hasNotificationWidth ? config.notificationWidth : Constants.maxNotificationWidth + return hasNotificationWidth ? state.notificationWidth : Constants.maxNotificationWidth } - const notificationWidth = state.isPortraitMode + const notificationWidth = state.isPortrait ? isWidthProvided - ? config.notificationWidth + ? state.notificationWidth : getDefaultWidth() : getMaxWidth() From 39644b0c59578c999bc3bd7f12364f4a32b7837a Mon Sep 17 00:00:00 2001 From: Dominik Danielewicz Date: Thu, 19 Oct 2023 16:35:06 +0200 Subject: [PATCH 3/7] fix: ts undefined warning --- example/src/screens/DefaultExamples.tsx | 29 +++++++++++++++---------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/example/src/screens/DefaultExamples.tsx b/example/src/screens/DefaultExamples.tsx index 6370f81c..311d0d54 100644 --- a/example/src/screens/DefaultExamples.tsx +++ b/example/src/screens/DefaultExamples.tsx @@ -13,16 +13,16 @@ const { useNotifications, NotificationsProvider } = createNotifications({ notificationWidth: 300, defaultStylesSettings: { globalConfig: { - notificationPosition: 'bottom', - titleSize: 40, - }, - errorConfig: { - notificationPosition: 'top', + titleSize: 30, }, successConfig: { - notificationPosition: 'top', + notificationPosition: 'center', titleSize: 20, }, + errorConfig: { + notificationPosition: 'bottom', + titleSize: 10, + }, }, }) @@ -45,6 +45,11 @@ export const DefaultExamples = () => { titleSize: 10, }, }, + config: { + duration: 2000, + notificationPosition: 'top-right', + notificationWidth: 200, + }, }).id ) } @@ -57,13 +62,13 @@ export const DefaultExamples = () => { description: 'This is where the toast text goes.', title: 'Error', style: { - titleSize: 10, + titleSize: 20, }, }, config: { duration: 2000, - notificationPosition: 'bottom', - notificationWidth: 100, + notificationPosition: 'top', + notificationWidth: 2000, }, }) } @@ -76,7 +81,9 @@ export const DefaultExamples = () => { description: 'This is where the toast text goes', title: 'Warning', }, - config: {}, + config: { + notificationPosition: 'bottom-left', + }, }) } /> @@ -89,7 +96,7 @@ export const DefaultExamples = () => { title: 'Info', }, config: { - notificationPosition: 'bottom', + notificationPosition: 'bottom-right', }, }) } From dcb0473059a5b9df5cdfd9c3531dc3dd7cc82df2 Mon Sep 17 00:00:00 2001 From: Dominik Danielewicz Date: Thu, 19 Oct 2023 16:54:25 +0200 Subject: [PATCH 4/7] fix: tidying up GestureHandler --- src/core/renderers/GestureHandler.tsx | 36 +++++++++++---------------- 1 file changed, 14 insertions(+), 22 deletions(-) diff --git a/src/core/renderers/GestureHandler.tsx b/src/core/renderers/GestureHandler.tsx index 7ae1918d..7b5bb7d1 100644 --- a/src/core/renderers/GestureHandler.tsx +++ b/src/core/renderers/GestureHandler.tsx @@ -30,34 +30,26 @@ export const GestureHandler = ({ }: Props) => { const { width } = useWindowDimensions() - //Jeżeli ktoś poda za dużą szerokość to czy ma zostać zastosowana cała szerokość ekranu czy może defaultowa szerokość? - - //Kiedy komunikat ma zajmować całą szerokość? - - /*Jak ma się zachowywać komunikat przy: - 1) portrait: cała szerokość domyślnie, chyba że notificationWith (jest różny od undefined) - 2) landscape: maxNotificationWidth domyślnie chyba że notificationWith (jest różny od undefined) - -*/ + const getDefaultWidth = () => width - Constants.notificationSideMargin * 2 - // fixme: TS krzyczy jak uzywa sie hasNotificationWidth, trzeba to jakos ograc sensownie - const hasNotificationWidth = !!state?.notificationWidth - const isWidthProvided = !!state?.notificationWidth && state.notificationWidth <= width + const notificationWidthFromState = state?.notificationWidth + const hasNotificationWidth = !!notificationWidthFromState - const getDefaultWidth = () => width - Constants.notificationSideMargin * 2 + const isWidthWithinBounds = hasNotificationWidth && notificationWidthFromState <= width - const getMaxWidth = () => { - if (!!state?.notificationWidth && state.notificationWidth > width) { - return width - Constants.notificationSideMargin * 2 + const getMaxWidth = (): number => { + if (hasNotificationWidth && notificationWidthFromState > width) { + return getDefaultWidth() } - return hasNotificationWidth ? state.notificationWidth : Constants.maxNotificationWidth + return hasNotificationWidth ? notificationWidthFromState : Constants.maxNotificationWidth } - const notificationWidth = state.isPortrait - ? isWidthProvided - ? state.notificationWidth - : getDefaultWidth() - : getMaxWidth() + let notificationWidth: number + if (state.isPortrait) { + notificationWidth = isWidthWithinBounds ? notificationWidthFromState : getDefaultWidth() + } else { + notificationWidth = getMaxWidth() + } const top = notificationTopPosition || notificationTopPosition === 0 From 5327f559ae95bb28027cca39530ca591dbb71255 Mon Sep 17 00:00:00 2001 From: Dominik Danielewicz Date: Mon, 23 Oct 2023 15:09:53 +0200 Subject: [PATCH 5/7] fix: cleaning code and documentation --- .../intro/animations/changing-transitions.md | 2 +- docs/docs/intro/basics/basic-configuration.md | 2 +- .../global-notifications-settings.md | 17 +-- .../order-of-settings-overwriting.md | 3 + .../intro/default-variants-config/position.md | 11 +- .../intro/default-variants-config/width.md | 113 ++++++++++++++++++ docs/docs/intro/examples/custom-examples.md | 2 +- .../examples/notification-in-modal-example.md | 2 +- .../intro/types/custom-components-examples.md | 2 +- example/package.json | 5 +- example/src/screens/DefaultExamples.tsx | 32 +---- src/core/renderers/GestureHandler.tsx | 21 +--- src/core/utils/pickers.ts | 8 +- 13 files changed, 151 insertions(+), 69 deletions(-) create mode 100644 docs/docs/intro/default-variants-config/width.md diff --git a/docs/docs/intro/animations/changing-transitions.md b/docs/docs/intro/animations/changing-transitions.md index 0b4ef903..407a42c2 100644 --- a/docs/docs/intro/animations/changing-transitions.md +++ b/docs/docs/intro/animations/changing-transitions.md @@ -2,7 +2,7 @@ sidebar_position: 1 --- -# 🪄 Transitions +# 🔄 Transitions ### 🎛 Changing transitions diff --git a/docs/docs/intro/basics/basic-configuration.md b/docs/docs/intro/basics/basic-configuration.md index 36bfc297..72f302d4 100644 --- a/docs/docs/intro/basics/basic-configuration.md +++ b/docs/docs/intro/basics/basic-configuration.md @@ -2,7 +2,7 @@ sidebar_position: 2 --- -# 🪛 Basic configuration +# 🛠 Basic configuration ### Create Notifications diff --git a/docs/docs/intro/comprehensive-configuration/global-notifications-settings.md b/docs/docs/intro/comprehensive-configuration/global-notifications-settings.md index 0901af85..dd0886c0 100644 --- a/docs/docs/intro/comprehensive-configuration/global-notifications-settings.md +++ b/docs/docs/intro/comprehensive-configuration/global-notifications-settings.md @@ -12,14 +12,15 @@ In the beginning, you can set the configuration for all the notifications used i Let's take a look at what exactly can we set globally: -| Name | Type | Default | Description | -| --------------------- | :-------------------------: | :----------------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| duration | Number | 3000 | Use this property to set how long the notifications should be displayed on the screen. Value expressed in milliseconds | -| notificationPosition | 'top' / 'center' / 'bottom' | 'top' | Set where the notifications should appear on the screen. You can choose one of three default options: top / center / bottom. To read more about the notification position please go to the [NOTIFICATION POSITION](../default-variants-config/position) section. | -| animationConfig | Object | SlideInLeftSlideOutRight | Property responsible for the notification animation. You can set one of the animations prepared by us, or make your own config. To read more about the animation settings please go to the [ANIMATIONS SETTINGS](../animations/changing-transitions) section. | -| isNotch | Boolean | false | Property responsible for read if the device has notch. You can use one of the libraries (for example 'react-native-device-info') to read if the specific device has Notch and pass the value here. | -| gestureConfig | Object | iOS: 'y' / android: 'x' | Object responsible for setting gesture direction that triggers swipe-dismiss of notification. To read more about gesture config, please go to the [GESTURE CONFIG](../default-variants-config/props-config) section. | -| defaultStylesSettings | Object | - | Object responsible for setting global styles for the notifications. You can also set here styles, for all the notifications of the specific type. For example for the error notifications. To read more about global style settings please go to the [GLOBAL STYLES SETTINGS](../default-variants-config/global-config) section. | +| Name | Type | Default | Description | +| --------------------- | :-------------------------------------------------------------------------------------: | :----------------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| duration | Number | 3000 | Use this property to set how long the notifications should be displayed on the screen. Value expressed in milliseconds. | +| notificationPosition | 'top' / 'top-right' / 'top-left' / 'center' / 'bottom' / 'bottom-right' / 'bottom-left' | 'top' | Set where the notifications should appear on the screen. You can choose one of seven default options: top / top-right / top-left / center / bottom / bottom-right / bottom-left. To read more about the notification position please go to the [NOTIFICATION POSITION](../default-variants-config/position) section. | +| notificationWidth | Number | 343 | Use this property to set the width, in pixels, of the notifications that will be displayed on the screen. | +| animationConfig | Object | SlideInLeftSlideOutRight | Property responsible for the notification animation. You can set one of the animations prepared by us, or make your own config. To read more about the animation settings please go to the [ANIMATIONS SETTINGS](../animations/changing-transitions) section. | +| isNotch | Boolean | false | Property responsible for read if the device has notch. You can use one of the libraries (for example 'react-native-device-info') to read if the specific device has Notch and pass the value here. | +| gestureConfig | Object | iOS: 'y' / android: 'x' | Object responsible for setting gesture direction that triggers swipe-dismiss of notification. To read more about gesture config, please go to the [GESTURE CONFIG](../default-variants-config/props-config) section. | +| defaultStylesSettings | Object | - | Object responsible for setting global styles for the notifications. You can also set here styles, for all the notifications of the specific type. For example for the error notifications. To read more about global style settings please go to the [GLOBAL STYLES SETTINGS](../default-variants-config/global-config) section. |
diff --git a/docs/docs/intro/comprehensive-configuration/order-of-settings-overwriting.md b/docs/docs/intro/comprehensive-configuration/order-of-settings-overwriting.md index 077bea7c..5c818987 100644 --- a/docs/docs/intro/comprehensive-configuration/order-of-settings-overwriting.md +++ b/docs/docs/intro/comprehensive-configuration/order-of-settings-overwriting.md @@ -113,6 +113,7 @@ const { useNotifications, NotificationsProvider } = createNotifications({ isNotch: true, duration: 30, notificationPosition: 'top', + notificationWidth: 400, animationConfig: SlideInLeftSlideOutRight, defaultStylesSettings: { darkMode: false, @@ -139,6 +140,7 @@ All those properties: - isNotch - duration - notificationPosition +- notificationWidth - animationConfig (defaultStylesSettings) @@ -238,6 +240,7 @@ All those properties: (config) - notificationPosition +- notificationWidth - animationConfig - duration diff --git a/docs/docs/intro/default-variants-config/position.md b/docs/docs/intro/default-variants-config/position.md index 6ae1e0fc..4cc721c9 100644 --- a/docs/docs/intro/default-variants-config/position.md +++ b/docs/docs/intro/default-variants-config/position.md @@ -2,17 +2,22 @@ sidebar_position: 2 --- -# 🪄 Notification position +# 📌 Notification position + #### ## 🎛 Changing position You can change the position of the notifications displayed on the screen.
-There are three possible options to choose from: +There are seven possible options to choose from: - `top` - at the top of the screen +- `top-right` - at the top right of the screen +- `top-left` - at the top left of the screen - `center` - at the middle of the screen (y-axis) - `bottom`- at the bottom of the screen +- `bottom-right` - at the bottom right of the screen +- `bottom-left` - at the bottom left of the screen The default setting for the `notificationPosition` is the `top` value. @@ -52,7 +57,6 @@ export const ExampleNotification = () => { ) } - ``` Now all the notifications in the app will be displayed in the middle of the screen (y-axis) because we have set the `notificationPosition` value for the `center`. @@ -60,7 +64,6 @@ Now all the notifications in the app will be displayed in the middle of the scre

- ### Set the position locally inside config object in a single notification instance: ```jsx diff --git a/docs/docs/intro/default-variants-config/width.md b/docs/docs/intro/default-variants-config/width.md new file mode 100644 index 00000000..23b9163e --- /dev/null +++ b/docs/docs/intro/default-variants-config/width.md @@ -0,0 +1,113 @@ +--- +sidebar_position: 2 +--- + +# 📏 Notification width + +#### + +## 🎛 Changing width + +You can change the width of the notifications displayed on the screen.
+ +By default, the `notificationWidth` is set to 343 pixels. If you don't specify a value for `notificationWidth`, notifications will default to this width. + +If the value you provide for `notificationWidth` exceeds the device's width, the notification's width will be adjusted to the device width minus the margin value. + +Depending on whether you want to change the notification width for the whole app or only change it for a certain notification, you can either: + +
+ +### Set the width for all notifications in the global config object: + +```jsx +import React from 'react' +import { SafeAreaView, Text } from 'react-native' +import { createNotifications } from 'react-native-notificated' +import { styles } from './styles' + +const { NotificationsProvider, useNotifications } = createNotifications({ + notificationWidth: 400, +}) + +export const ExampleNotification = () => { + const { notify } = useNotifications() + + return ( + + + + notify('error', { + params: { + description: 'This is where the toast text goes. ', + title: 'Error', + }, + }) + }> + Emit error + + + ) +} +``` + +"Now, all notifications in the application will be 400 pixels wide because we've set the `notificationWidth` value to 400." + +
+
+ +### Set the position locally inside config object in a single notification instance: + +```jsx +import React from 'react' +import { SafeAreaView, Text } from 'react-native' +import { createNotifications } from 'react-native-notificated' +import { styles } from './styles' + +const { NotificationsProvider, useNotifications } = createNotifications({ + notificationWidth: 400, +}) + +export const ExampleNotification = () => { + const { notify } = useNotifications() + + return ( + + + + notify('error', { + params: { + description: 'This is where the toast text goes', + title: 'Error', + }, + config: { + notificationWidth: 500, + }, + }) + }> + Emit error + + + ) +} +``` + +Now, all notifications in the app will be displayed with a width of 400 pixels, except for the `error` notification mentioned in the previous example.
+That `error` notification will have a width of 500 pixels because local configuration overrides the global setting.
+Of course, if you prefer, you can set the width locally without adjusting the global setting.
+(You can read more about props overwriting in the [ORDER OF SETTINGS OVERWRITING](../comprehensive-configuration/order-of-settings-overwriting) section) + +
+
+ +## 🔦 Position config priority + +For each subsequent notification, the library looks for a notification width in the following order: + +1. First, it looks for a config defined in `notify` payload +2. Secondly, it looks for a global config from `createNotification` +3. At last, when no config is found, it uses the default behavior, which is 343 pixels + +
diff --git a/docs/docs/intro/examples/custom-examples.md b/docs/docs/intro/examples/custom-examples.md index ea45a5d8..6c2d67f5 100644 --- a/docs/docs/intro/examples/custom-examples.md +++ b/docs/docs/intro/examples/custom-examples.md @@ -2,7 +2,7 @@ sidebar_position: 5 --- -# 🪶 Custom examples +# 🧭 Custom examples
diff --git a/docs/docs/intro/examples/notification-in-modal-example.md b/docs/docs/intro/examples/notification-in-modal-example.md index 5e13375d..f8c7b13c 100644 --- a/docs/docs/intro/examples/notification-in-modal-example.md +++ b/docs/docs/intro/examples/notification-in-modal-example.md @@ -2,7 +2,7 @@ sidebar_position: 8 --- -# 🪶 Notifcation In Modal Example +# 🔔 Notifcation In Modal Example
diff --git a/docs/docs/intro/types/custom-components-examples.md b/docs/docs/intro/types/custom-components-examples.md index eb333c02..14c61892 100644 --- a/docs/docs/intro/types/custom-components-examples.md +++ b/docs/docs/intro/types/custom-components-examples.md @@ -2,7 +2,7 @@ sidebar_position: 1 --- -# 🪬 Specifying default types +# 🔧 Specifying default types
diff --git a/example/package.json b/example/package.json index ea8bf532..7f3b405d 100644 --- a/example/package.json +++ b/example/package.json @@ -8,8 +8,7 @@ "start": "react-native start", "test": "jest", "lint": "eslint . --ext .js,.jsx,.ts,.tsx", - "postinstall": "patch-package", - "clear": "yarn --clearCache" + "postinstall": "patch-package" }, "dependencies": { "@react-native-masked-view/masked-view": "^0.2.6", @@ -20,7 +19,7 @@ "@reduxjs/toolkit": "^1.7.1", "react": "17.0.2", "react-native": "0.68.5", - "react-native-gesture-handler": "2.9.0", + "react-native-gesture-handler": "^2.9.0", "react-native-modal": "^13.0.1", "react-native-reanimated": "^2.14.4", "react-native-safe-area-context": "^3.3.2", diff --git a/example/src/screens/DefaultExamples.tsx b/example/src/screens/DefaultExamples.tsx index 311d0d54..47a71082 100644 --- a/example/src/screens/DefaultExamples.tsx +++ b/example/src/screens/DefaultExamples.tsx @@ -10,18 +10,10 @@ import { RemoveButton } from '../components/basicExamples/RemoveButton' import { styles } from './styles' const { useNotifications, NotificationsProvider } = createNotifications({ - notificationWidth: 300, + notificationPosition: 'top', defaultStylesSettings: { - globalConfig: { - titleSize: 30, - }, - successConfig: { - notificationPosition: 'center', - titleSize: 20, - }, errorConfig: { notificationPosition: 'bottom', - titleSize: 10, }, }, }) @@ -39,16 +31,8 @@ export const DefaultExamples = () => { setId( notify('success', { params: { - description: 'This is where the toast text goes.', + description: 'This is where the toast text goes', title: 'Success', - style: { - titleSize: 10, - }, - }, - config: { - duration: 2000, - notificationPosition: 'top-right', - notificationWidth: 200, }, }).id ) @@ -59,16 +43,11 @@ export const DefaultExamples = () => { onPress={() => notify('error', { params: { - description: 'This is where the toast text goes.', + description: 'This is where the toast text goes. ', title: 'Error', - style: { - titleSize: 20, - }, }, config: { duration: 2000, - notificationPosition: 'top', - notificationWidth: 2000, }, }) } @@ -81,9 +60,6 @@ export const DefaultExamples = () => { description: 'This is where the toast text goes', title: 'Warning', }, - config: { - notificationPosition: 'bottom-left', - }, }) } /> @@ -96,7 +72,7 @@ export const DefaultExamples = () => { title: 'Info', }, config: { - notificationPosition: 'bottom-right', + notificationPosition: 'bottom', }, }) } diff --git a/src/core/renderers/GestureHandler.tsx b/src/core/renderers/GestureHandler.tsx index 7b5bb7d1..ce376b1c 100644 --- a/src/core/renderers/GestureHandler.tsx +++ b/src/core/renderers/GestureHandler.tsx @@ -30,26 +30,13 @@ export const GestureHandler = ({ }: Props) => { const { width } = useWindowDimensions() - const getDefaultWidth = () => width - Constants.notificationSideMargin * 2 + const fullWidth = width - Constants.notificationSideMargin * 2 - const notificationWidthFromState = state?.notificationWidth - const hasNotificationWidth = !!notificationWidthFromState + const initialNotificationWidth = state?.notificationWidth || Constants.maxNotificationWidth - const isWidthWithinBounds = hasNotificationWidth && notificationWidthFromState <= width + const isWidthWithinBounds = initialNotificationWidth <= width - const getMaxWidth = (): number => { - if (hasNotificationWidth && notificationWidthFromState > width) { - return getDefaultWidth() - } - return hasNotificationWidth ? notificationWidthFromState : Constants.maxNotificationWidth - } - - let notificationWidth: number - if (state.isPortrait) { - notificationWidth = isWidthWithinBounds ? notificationWidthFromState : getDefaultWidth() - } else { - notificationWidth = getMaxWidth() - } + const notificationWidth = isWidthWithinBounds ? initialNotificationWidth : fullWidth const top = notificationTopPosition || notificationTopPosition === 0 diff --git a/src/core/utils/pickers.ts b/src/core/utils/pickers.ts index 8d606a45..cfee4d15 100644 --- a/src/core/utils/pickers.ts +++ b/src/core/utils/pickers.ts @@ -34,11 +34,11 @@ export const getNotificationOffset = ({ break case 'top-left': topOffset = topPosition - leftOffset = 10 + leftOffset = Constants.notificationSideMargin break case 'top-right': topOffset = topPosition - rightOffset = 10 + rightOffset = Constants.notificationSideMargin break case 'center': topOffset = windowHeight / 2 - (notificationHeight ? notificationHeight / 2 + 10 : 75) @@ -48,11 +48,11 @@ export const getNotificationOffset = ({ break case 'bottom-left': topOffset = windowHeight - (notificationHeight ? notificationHeight + extraSpace : 150) - leftOffset = 10 + leftOffset = Constants.notificationSideMargin break case 'bottom-right': topOffset = windowHeight - (notificationHeight ? notificationHeight + extraSpace : 150) - rightOffset = 10 + rightOffset = Constants.notificationSideMargin break default: topOffset = topPosition From 395c740575644111fe6fbb32918ef13395295cb3 Mon Sep 17 00:00:00 2001 From: Dominik Danielewicz Date: Tue, 24 Oct 2023 08:04:37 +0200 Subject: [PATCH 6/7] fix: isWidthWithinBounds change --- src/core/renderers/GestureHandler.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/renderers/GestureHandler.tsx b/src/core/renderers/GestureHandler.tsx index ce376b1c..00e36199 100644 --- a/src/core/renderers/GestureHandler.tsx +++ b/src/core/renderers/GestureHandler.tsx @@ -34,7 +34,7 @@ export const GestureHandler = ({ const initialNotificationWidth = state?.notificationWidth || Constants.maxNotificationWidth - const isWidthWithinBounds = initialNotificationWidth <= width + const isWidthWithinBounds = initialNotificationWidth <= fullWidth const notificationWidth = isWidthWithinBounds ? initialNotificationWidth : fullWidth From 29264ed344b2cec2c6b43e7efc16c666842f44f8 Mon Sep 17 00:00:00 2001 From: Dominik Danielewicz Date: Tue, 24 Oct 2023 16:59:16 +0200 Subject: [PATCH 7/7] fix: cleaning code and dependencies --- docs/docs/intro/default-variants-config/width.md | 2 +- example/yarn.lock | 10 +++++----- yarn.lock | 10 +++++----- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/docs/intro/default-variants-config/width.md b/docs/docs/intro/default-variants-config/width.md index 23b9163e..ecc7baca 100644 --- a/docs/docs/intro/default-variants-config/width.md +++ b/docs/docs/intro/default-variants-config/width.md @@ -102,7 +102,7 @@ Of course, if you prefer, you can set the width locally without adjusting the gl

-## 🔦 Position config priority +## 🔦 Width config priority For each subsequent notification, the library looks for a notification width in the following order: diff --git a/example/yarn.lock b/example/yarn.lock index 385909ba..449e4ee7 100644 --- a/example/yarn.lock +++ b/example/yarn.lock @@ -6016,10 +6016,10 @@ react-native-codegen@^0.0.18: jscodeshift "^0.13.1" nullthrows "^1.1.1" -react-native-gesture-handler@2.9.0: - version "2.9.0" - resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.9.0.tgz#2f63812e523c646f25b9ad660fc6f75948e51241" - integrity sha512-a0BcH3Qb1tgVqUutc6d3VuWQkI1AM3+fJx8dkxzZs9t06qA27QgURYFoklpabuWpsUTzuKRpxleykp25E8m7tg== +react-native-gesture-handler@^2.9.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.12.0.tgz#59ca9d97e4c71f70b9c258f14a1a081f4c689976" + integrity sha512-rr+XwVzXAVpY8co25ukvyI38fKCxTQjz7WajeZktl8qUPdh1twnSExgpT47DqDi4n+m+OiJPAnHfZOkqqAQMOg== dependencies: "@egjs/hammerjs" "^2.0.17" hoist-non-react-statics "^3.3.0" @@ -7651,4 +7651,4 @@ yargs@^15.1.0, yargs@^15.3.1, yargs@^15.4.1: string-width "^4.2.0" which-module "^2.0.0" y18n "^4.0.0" - yargs-parser "^18.1.2" + yargs-parser "^18.1.2" \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 7d8c75dd..0d92dac0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8503,10 +8503,10 @@ react-native-codegen@^0.0.18: jscodeshift "^0.13.1" nullthrows "^1.1.1" -react-native-gesture-handler@^2.9.0: - version "2.13.2" - resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.13.2.tgz#06813c250922db258ce4ee255f757e7ef32a3ae0" - integrity sha512-EADHg1cFunvu47lyzlqCJQluQxUIGZwDpdq2GEBXxFmH8AWTI2ofurio5doWnFR+dLVEjaLAzI/dU2xQjP0/pA== +react-native-gesture-handler@2.9.0: + version "2.9.0" + resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.9.0.tgz#2f63812e523c646f25b9ad660fc6f75948e51241" + integrity sha512-a0BcH3Qb1tgVqUutc6d3VuWQkI1AM3+fJx8dkxzZs9t06qA27QgURYFoklpabuWpsUTzuKRpxleykp25E8m7tg== dependencies: "@egjs/hammerjs" "^2.0.17" hoist-non-react-statics "^3.3.0" @@ -10498,4 +10498,4 @@ yargs@^16.2.0: yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" - integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== + integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== \ No newline at end of file