From f92f5a5e88081ce0accbd2ce22f91b6e594cd1e3 Mon Sep 17 00:00:00 2001 From: tyBrave Date: Thu, 27 Nov 2025 19:41:00 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[Issues:=20#ID963N]=20=E6=9B=B4?= =?UTF-8?q?=E6=96=B0react-native-notifier=E6=8C=87=E5=AF=BC=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: tyBrave docs: [Issues: #ID963N] 更新react-native-notifier指导文档 Signed-off-by: tyBrave docs: [Issues: #ID963N] 更新react-native-notifier指导文档 Signed-off-by: tyBrave docs: [Issues: #ID963N] 更新react-native-notifier指导文档 Signed-off-by: tyBrave docs: [Issues: #ID963N] 更新react-native-notifier指导文档 Signed-off-by: tyBrave docs: [Issues: #ID963N] 更新react-native-notifier指导文档 Signed-off-by: tyBrave --- en/react-native-notifier.md | 312 ++++++++++++++++++++++++++------- zh-cn/react-native-notifier.md | 210 +++++++++++++++++++++- 2 files changed, 456 insertions(+), 66 deletions(-) diff --git a/en/react-native-notifier.md b/en/react-native-notifier.md index f92b1b0ac..c493da2ff 100644 --- a/en/react-native-notifier.md +++ b/en/react-native-notifier.md @@ -15,6 +15,14 @@ > [!TIP] [GitHub address](https://github.com/seniv/react-native-notifier) +The repository of this third-party library is on Github and supports direct download from npm. The specific version ownership relationship is as follows: + + +| Version | Package Name | Repository | Release | Support RN version | +| ---------- | ------------------------------------------------------------ | ---------- | ---------- | ---------- | +| 2.0.0 | react-native-notifier | [Github](https://github.com/seniv/react-native-notifier)|[Github Releases](https://github.com/seniv/react-native-notifier/releases)|0.72 | +| 3.0.0| react-native-notifier | [Github](https://github.com/seniv/react-native-notifier) |[Github Releases](https://github.com/seniv/react-native-notifier/releases) | 0.77 | + ## Installation and Usage Go to the project directory and execute the following instruction: @@ -22,13 +30,21 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +#0.72 npm install react-native-notifier@2.0.0 + +#0.77 +npm install react-native-notifier@3.0.0-rc.5 ``` #### **yarn** ```bash +#0.72 yarn add react-native-notifier@2.0.0 + +#0.77 +yarn add react-native-notifier@3.0.0-rc.5 ``` The following code shows the basic use scenario of the repository: @@ -76,9 +92,9 @@ export const Notifier = () => { ## Link -The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-gesture-handler. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly. +The HarmonyOS implementation of this library depends on the native code from react-native-gesture-handler. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly. -If it is not included, follow the guide provided in [@react-native-oh-tpl/react-native-gesture-handler](/en/react-native-gesture-handler.md) to add it to your project. +If it is not included, follow the guide provided in [react-native-gesture-handler](/en/react-native-gesture-handler.md) to add it to your project. ## Constraints @@ -87,6 +103,7 @@ If it is not included, follow the guide provided in [@react-native-oh-tpl/react- This document is verified based on the following versions: 1. RNOH: 0.72.28; SDK: HarmonyOS-NEXT-DB1 5.0.0.31; IDE: DevEco Studio 5.0.3.500; ROM: 3.0.0.25; +2. RNOH: 0.77.18; SDK: HarmonyOS-5.1.1.208(API19); IDE: DevEco Studio 5.1.1.830; ROM: 6.0.0.112 SP12; ## Properties @@ -110,11 +127,18 @@ Both `NotifierWrapper` and `NotifierRoot` receive the same props. > [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | -| showNotification | Show notification with params. | Function | yes | All | yes | -| hideNotification | Hide notification and run callback function when notification completely hidden. | Function | yes | All | yes | -| clearQueue | Clear [notifications queue](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#queue-mode) and optionally hide currently displayed notification. Might be useful to run after logout, after which queued notifications should not be displayed. | Function | yes | All | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| showNotification | Show notification with params.
2.0.0: showNotification(params: ShowNotificationParams): void;
3.0.0-rc.5: showNotification(params: ShowNotificationParams): ShowNotificationReturnType; | Function | yes | All | yes | +| updateNotification3.0.0-rc.5+ | Update currently visible notification. | Function | yes | All | yes | +| shakeNotification3.0.0-rc.5+ | Shakes currently visible notification to attract the user's attention. | Function | yes | All | yes | +| isNotificationVisible3.0.0-rc.5+ | Is any notification currently visible. | Function | yes | All | yes | +| hideNotification |Hide notification and run callback function when notification completely hidden. | Function | yes | All | yes | +| clearQueue |Clear [notifications queue](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#queue-mode) and optionally hide currently displayed notification. Might be useful to run after logout, after which queued notifications should not be displayed.| Function | yes | All | yes | +| updateById3.0.0-rc.5+ |Update notification by ID, if visible - will be updated immediately,if it waits in the queue - it will be updated in the queue and will be displayed with updated parameters.| Function | yes | All | yes | +| shakeById3.0.0-rc.5+ |Shakes notification by ID to attract the user's attention.| Function | yes | All | yes | +| isVisibleById3.0.0-rc.5+ |Is notification with provided ID currently visible.| Function | yes | All | yes | +| hideById3.0.0-rc.5+ |Hide notification by ID.| Function | yes | All | yes | ### `showNotification` @@ -124,32 +148,143 @@ Notifier.showNotification(params: object); `params` -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | -------- | -------- | ----------------- | -| title | Title of notification. Passed to Component. | String | Yes | All | Yes | -| description | Description of notification. Passed to Component. | String | Yes | All | Yes | -| duration | Time after notification will disappear. Set to 0 to not hide notification automatically | Number | No | All | Yes | -| Component | Component of the notification body. You can use one of the [bin components](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#components), or your [custom component](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#custom-component). | Component | No | All | Yes | -| componentProps | Additional props that are passed to Component. See all available props of built-in components in the [components section](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#components). | Object | No | All | No | -| containerStyle | tyles Object or a Function that will receive translateY: Animated.Value as first parameter and should return Styles that will be used in container. Using this parameter it is possible to create[ your own animations of the notification](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#custom-animations). | bool | No | All | Yes | -| containerProps | Props of Animated Container | Object | No | All | Yes | -| queueMode | Determines the order in which notifications are shown. Read more in the [Queue Mode](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#queue-mode) section. | String | No | All | Yes | -| swipeEnabled | Can notification be hidden by swiping it out | bool | No | All | Yes | -| animationDuration | How fast notification will appear/disappear | Number | No | All | Yes | -| showAnimationDuration | How fast notification will appear. | Number | No | All | Yes | -| hideAnimationDuration | How fast notification will disappear. | Number | No | All | Yes | -| easing | Animation easing. Details:[easing](https://reactnative.dev/docs/easing) | Easing | No | All | Yes | -| showEasing | Show Animation easing. | Easing | No | All | Yes | -| hideEasing | Hide Animation easing. | Easing | No | All | Yes | -| onShown | Function called when entering animation is finished | () => void | No | All | Yes | -| onStartHiding | Function called when notification started hiding | () => void | No | All | Yes | -| onHidden | Function called when notification completely hidden | () => void | No | All | Yes | -| onPress | Function called when user press on notification | () => void | No | All | Yes | -| hideOnPress | Should notification hide when user press on it | Boolean | No | All | Yes | -| swipePixelsToClose | How many pixels user should swipe-up notification to dismiss it | Number | No | All | Yes | -| swipeEasing | Animation easing after user finished swiping | Easing | No | All | Yes | -| swipeAnimationDuration | How fast should be animation after user finished swiping | Number | No | All | Yes | -| translucentStatusBar | Add additional top padding that equals to StatusBar.currentHeight. Android Only. | Number | No | Android | No | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------- | ------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- | +| title | Title of notification. Passed to Component. | String| Yes | All |Yes | +| description |Description of notification. Passed to Component. | String | Yes | All | Yes | +| duration |Time after notification will disappear. Set to 0 to not hide notification automatically | Number | No |All | Yes +| Component |Component of the notification body. You can use one of the [bin components](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#components), or your [custom component](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#custom-component). | Component | No |All | Yes +| componentProps | Additional props that are passed to Component. See all available props of built-in components in the [components section](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Fseniv%2Freact-native-notifier%2Ftree%2Fmain%3Ftab%3Dreadme-ov-file%23components).
2.0.0: componentProps?: Omit, 'title' \| 'description'>;
3.0.0-rc.5: componentProps?: Omit, keyof NotifierComponentProps>; | Object | No | All | Yes | +| containerStyle | Styles Object that will be used in container.
2.0.0: containerStyle?: ContainerStyleParam;
3.0.0-rc.5: containerStyle?: AnimatedViewProps['style']; | bool | No | All | Yes | +| containerStyle |tyles Object or a Function that will receive translateY: Animated.Value as first parameter and should return Styles that will be used in container. Using this parameter it is possible to create[ your own animations of the notification](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#custom-animations). | bool |No | All | Yes +| containerProps | Props of Animated Container | Object |No | All | Yes +| queueMode | Determines the order in which notifications are shown. Read more in the [Queue Mode](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#queue-mode) section. | String |No | All | Yes +| swipeEnableddeprecated from 3.0.0-rc.5+ | Can notification be hidden by swiping it out | bool | No | All | Yes | +| animationDuration | How fast notification will appear/disappear | Number |No | All | Yes +| showAnimationDuration | How fast notification will appear. | Number |No | All | Yes +| hideAnimationDuration | How fast notification will disappear.| Number |No | All | Yes +| easing | Animation easing. Details:[easing](https://reactnative.dev/docs/easing) | Easing |No | All | Yes +| showEasing | Show Animation easing.| Easing |No | All | Yes +| hideEasing |Hide Animation easing. | Easing |No | All | Yes +| onShown | Function called when entering animation is finished | () => void |No | All | Yes +| onStartHiding | Function called when notification started hiding | () => void |No | All | Yes +| onHidden |Function called when notification completely hidden | () => void |No | All | Yes +| onPress | Function called when user press on notification | () => void |No | All | Yes +| hideOnPress | Should notification hide when user press on it| Boolean |No | All | Yes +| swipePixelsToClose | How many pixels user should swipe-up notification to dismiss it | Number |No | All | Yes +| swipeEasing | Animation easing after user finished swiping | Easing |No | All | Yes +| swipeAnimationDuration | How fast should be animation after user finished swiping | Number |No | All | Yes +| translucentStatusBardeprecated from 3.0.0-rc.5+ | Add additional top padding that equals to StatusBar.currentHeight. Android Only. | Number | No | Android | No | +| duplicateBehavior3.0.0-rc.5+ | What to do if notification with the same ID(!) already shown. | String | No | All | Yes | +| id3.0.0-rc.5+ | A manually provided ID. If supplied, it overrides any generation strategy. If notification with the same ID already shown, result of the `showNotification` will depend on `duplicateBehavior` parameter. | String \| Number | No | All | Yes | +| idStrategy3.0.0-rc.5+ | Specifies how the ID should be generated if none is manually provided. | String | No | All | Yes | +| animationFunction3.0.0-rc.5+ | Function that receives object with various `Animated.Value` and should return Styles that will be used to animate the notification. When set, result of the function will replace default animation. This function will be called only once. | Function | No | All | Yes | +| ignoreSafeAreaInsets3.0.0-rc.5+ | Ignores offsets from `useSafeAreaInsets` hook | Boolean | No | All | Yes | +| ignoreKeyboard3.0.0-rc.5+ | Ignores the keyboard completely. Treats the keyboard as if it is always closed. | Boolean | No | All | Yes | +| ignoreKeyboardHeight3.0.0-rc.5+ | Ignores keyboard height offset (when use bottom positions) | Boolean | No | All | Yes | +| additionalKeyboardOffset3.0.0-rc.5+ | Additional bottom offset when keyboard is visible. | Number | No | All | Yes | +| additionalOffsets3.0.0-rc.5+ | Offsets in addition to the safeAreaInsets. When keyboard is open and `ignoreKeyboard != true`, `bottom` offset will be ignored and `additionalKeyboardOffset` will be used instead. | Object | No | All | Yes | +| position3.0.0-rc.5+ | Position of the notification | String | No | All | Yes | +| enterFrom3.0.0-rc.5+ | Direction from which notification will appear | String | No | All | Yes | +| exitTo3.0.0-rc.5+ | Direction to which notification will slide to hide | String | No | All | Yes | +| shakingConfig3.0.0-rc.5+ | Config of the shaking animation. Moves the notification from `minValue` to `maxValue` `numberOfRepeats` times in horizontal or vertical direction. `useNativeDriver` is `true` by default, but it can be disabled. | Object | No | All | Yes | +| useRNScreensOverlay3.0.0-rc.5+ | use FullWindowOverlay component from react-native-screens library | Boolean | No | iOS | Yes | +| rnScreensOverlayViewStyle3.0.0-rc.5+ | Style that will be used for RN View that is inside of FullWindowOverlay | Object | No | iOS | Yes | + +### `updateNotification`3.0.0-rc.5+ +``` +Notifier.updateNotification(params: object); +``` + +`params` + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------- | ------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- | +| title | Title of notification. Passed to Component. | String| No | All |Yes | +| description |Description of notification. Passed to Component. | String | No | All | Yes | +| Component |Component of the notification body. You can use one of the [bin components](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#components), or your [custom component](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#custom-component). | ComponentType | No |All | Yes | +| componentProps | Additional props that are passed to Component. See all available props of built-in components in the [components section](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#components). | Object | No |All | No | +| idStrategy | Specifies how the ID should be generated if none is manually provided. | String | No |All | Yes | +| containerStyle |Styles Object that will be used in container. | Object |No | All | Yes | +| animationFunction |Function that receives object with various `Animated.Value` and should return Styles that will be used to animate the notification. When set, result of the function will replace default animation. This function will be called only once. | Function |No | All | Yes | +| containerProps | Props of Animated Container | Object |No | All | Yes | +| showAnimationConfig | Config of the function that runs the "showing" animation. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| hideAnimationConfig | Config of the function that runs the "hiding" animation. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| swipeOutAnimationConfig | Config of the function that runs animation that hides notification after it was swiped-out. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| resetSwipeAnimationConfig | Config of the function that runs animation that returns the notification back to "shown" position after it was moved/swiped by the user. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| onShown | Function called when entering animation is finished | () => void |No | All | Yes | +| onStartHiding | Function called when notification started hiding | () => void |No | All | Yes | +| onHidden |Function called when notification completely hidden | () => void |No | All | Yes | +| onPress | Function called when user press on notification | () => void |No | All | Yes | +| hideOnPress | Should notification hide when user press on it| Boolean |No | All | Yes | +| swipePixelsToClose | How many pixels user should swipe-up notification to dismiss it | Number |No | All | Yes | +| duration | Time after notification will disappear. Set to `0` to not hide notification automatically | Number |No | All | Yes | +| ignoreSafeAreaInsets | Ignores offsets from `useSafeAreaInsets` hook | Boolean |No | All | Yes | +| ignoreKeyboard | Ignores the keyboard completely. Treats the keyboard as if it is always closed. | Boolean |No | All | Yes | +| ignoreKeyboardHeight | Ignores keyboard height offset (when use bottom positions) | Boolean |No | All | Yes | +| additionalKeyboardOffset | Additional bottom offset when keyboard is visible. | Number |No | All | Yes | +| additionalOffsets | Offsets in addition to the safeAreaInsets. When keyboard is open and `ignoreKeyboard != true`, `bottom` offset will be ignored and `additionalKeyboardOffset` will be used instead. | Object |No | All | Yes | +| position | Position of the notification | String |No | All | Yes | +| enterFrom | Direction from which notification will appear | String |No | All | Yes | +| exitTo | Direction to which notification will slide to hide | String |No | All | Yes | +| swipeDirection | Direction in which notification can be swiped out | String |No | All | Yes | +| shakingConfig | Config of the shaking animation. Moves the notification from `minValue` to `maxValue` `numberOfRepeats` times in horizontal or vertical direction. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| useRNScreensOverlay | use FullWindowOverlay component from react-native-screens library | Boolean |No | iOS | Yes | +| rnScreensOverlayViewStyle | Style that will be used for RN View that is inside of FullWindowOverlay | Object |No | iOS | Yes | + + +### `updateById`3.0.0-rc.5+ +``` +Notifier.updateById(id: string | number, params: object); +``` + +`params` + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------- | ------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- | +| title | Title of notification. Passed to Component. | String| No | All |Yes | +| description |Description of notification. Passed to Component. | String | No | All | Yes | +| Component |Component of the notification body. You can use one of the [bin components](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#components), or your [custom component](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#custom-component). | ComponentType | No |All | Yes | +| componentProps | Additional props that are passed to Component. See all available props of built-in components in the [components section](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#components). | Object | No |All | No | +| idStrategy | Specifies how the ID should be generated if none is manually provided. | String | No |All | Yes | +| containerStyle |Styles Object that will be used in container. | Object |No | All | Yes | +| animationFunction |Function that receives object with various `Animated.Value` and should return Styles that will be used to animate the notification. When set, result of the function will replace default animation. This function will be called only once. | Function |No | All | Yes | +| containerProps | Props of Animated Container | Object |No | All | Yes | +| showAnimationConfig | Config of the function that runs the "showing" animation. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| hideAnimationConfig | Config of the function that runs the "hiding" animation. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| swipeOutAnimationConfig | Config of the function that runs animation that hides notification after it was swiped-out. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| resetSwipeAnimationConfig | Config of the function that runs animation that returns the notification back to "shown" position after it was moved/swiped by the user. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| onShown | Function called when entering animation is finished | () => void |No | All | Yes | +| onStartHiding | Function called when notification started hiding | () => void |No | All | Yes | +| onHidden |Function called when notification completely hidden | () => void |No | All | Yes | +| onPress | Function called when user press on notification | () => void |No | All | Yes | +| hideOnPress | Should notification hide when user press on it| Boolean |No | All | Yes | +| swipePixelsToClose | How many pixels user should swipe-up notification to dismiss it | Number |No | All | Yes | +| duration | Time after notification will disappear. Set to `0` to not hide notification automatically | Number |No | All | Yes | +| ignoreSafeAreaInsets | Ignores offsets from `useSafeAreaInsets` hook | Boolean |No | All | Yes | +| ignoreKeyboard | Ignores the keyboard completely. Treats the keyboard as if it is always closed. | Boolean |No | All | Yes | +| ignoreKeyboardHeight | Ignores keyboard height offset (when use bottom positions) | Boolean |No | All | Yes | +| additionalKeyboardOffset | Additional bottom offset when keyboard is visible. | Number |No | All | Yes | +| additionalOffsets | Offsets in addition to the safeAreaInsets. When keyboard is open and `ignoreKeyboard != true`, `bottom` offset will be ignored and `additionalKeyboardOffset` will be used instead. | Object |No | All | Yes | +| position | Position of the notification | String |No | All | Yes | +| enterFrom | Direction from which notification will appear | String |No | All | Yes | +| exitTo | Direction to which notification will slide to hide | String |No | All | Yes | +| swipeDirection | Direction in which notification can be swiped out | String |No | All | Yes | +| shakingConfig | Config of the shaking animation. Moves the notification from `minValue` to `maxValue` `numberOfRepeats` times in horizontal or vertical direction. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| useRNScreensOverlay | use FullWindowOverlay component from react-native-screens library | Boolean |No | iOS | Yes | +| rnScreensOverlayViewStyle | Style that will be used for RN View that is inside of FullWindowOverlay | Object |No | iOS | Yes | + + +### `shakeNotification`3.0.0-rc.5+ +``` +Notifier.shakeNotification(resetTimer?: boolean); +``` + +### `isNotificationVisible`3.0.0-rc.5+ +``` +Notifier.isNotificationVisible(); +``` + ### `hideNotification` @@ -163,6 +298,20 @@ Notifier.hideNotification(onHiddenCallback?: (result: Animated.EndResult) => voi Notifier.clearQueue(hideDisplayedNotification?: boolean); ``` +### `shakeById`3.0.0-rc.5+ +``` +Notifier.shakeById(id: string | number, resetTimer?: boolean); +``` + +### `isVisibleById`3.0.0-rc.5+ +``` +Notifier.isVisibleById(id: string | number); +``` +### `hideById`3.0.0-rc.5+ +``` +Notifier.hideById(id: string | number, onHidden?: Animated.EndCallback); +``` + ## Queue Mode Queue mode is used to define the order in which the notification appears in case other notifications are being displayed at the moment. @@ -191,38 +340,83 @@ All possible modes: Currently, there are 2 components out of the box. If none of them fits your needs, then you can easily create your [Custom Component]. -| Name | Type | Default | Description | Platform | HarmonyOS Support | -| ---------------------------------- | ---------- | ------------ | --------------------------------------------------------------------------------------------- | -------- | ----------------- | -| title | String | null | Title of notification. | All | Yes | -| description | String | null | Description of notification. | All | Yes | -| componentProps.titleStyle | TextStyle | null | The style to use for rendering title. | All | Yes | -| componentProps.descriptionStyle | TextStyle | null | The style to use for rendering description. | All | Yes | -| componentProps.imageSource | Object | null | Passed to as source param. | All | Yes | -| componentProps.imageStyle | ImageStyle | null | The style to use for rendering image. | All | Yes | -| componentProps.containerStyle | ViewStyle | null | The style to use for notification container. | All | Yes | -| componentProps.ContainerComponent | Component | SafeAreaView | A container of the component. Set it in case you use different SafeAreaView than the standard | All | Yes | -| componentProps.maxTitleLines | number | null | The maximum number of lines to use for rendering title. | All | Yes | -| componentProps.maxDescriptionLines | number | null | The maximum number of lines to use for rendering description. | All | Yes | +| Name | Type | Default | Description | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | ---- | -------- | +| title | String | null | Title of notification. | All | Yes +| description | String | null | Description of notification. | All | Yes +| ViewWithOffsets3.0.0-rc.5+ | Function | null | Provides a container view with safe area boundaries | All | Yes | +| componentProps.type3.0.0-rc.5+ | String | null | If set, the icon, icon background color, and border color will be determined by the provided type. | All | Yes | +| componentProps.useTypeColorForTitle3.0.0-rc.5+ | Boolean | false | When `true`, the title color is automatically derived from the `type` prop. | All | Yes | +| componentProps.useTypeColorForDescription3.0.0-rc.5+ | Boolean | false | When `true`, the description color is automatically derived from the `type` prop. | All | Yes | +| componentProps.iconSource3.0.0-rc.5+ | ImageSourcePropType | depends on `type` | The icon source passed to the `` component as the `source` prop.If not specified, a default icon is used based on the `type`. | All | Yes | +| componentProps.safeAreaStyle3.0.0-rc.5+ | ViewStyle | null | Style for the outermost container of the toast. | All | Yes | +| componentProps.iconContainerStyle3.0.0-rc.5+ | TextStyle | null | Style for the icon container, useful for adjusting background color or size. | All | Yes | +| componentProps.iconStyle3.0.0-rc.5+ | ImageStyle | null | Style for the icon `` itself, useful for adjusting icon color or size. | All | Yes | +| componentProps.textContainerStyle3.0.0-rc.5+ | TextStyle | null | Style for the text container wrapping both title and description. | All | Yes | +| componentProps.titleStyle | TextStyle | null | The style to use for rendering title. | All | Yes +| componentProps.descriptionStyle | TextStyle | null |The style to use for rendering description. | All | Yes +| componentProps.imageSource | Object | null | Passed to as source param. | All | Yes +| componentProps.imageStyle | ImageStyle | null | The style to use for rendering image. | All | Yes +| componentProps.containerStyle | ViewStyle | null | The style to use for notification container. | All | Yes +| componentProps.ContainerComponent | Component | SafeAreaView | A container of the component. Set it in case you use different SafeAreaView than the standard | All | Yes +| componentProps.maxTitleLines | number | null | The maximum number of lines to use for rendering title. | All | Yes +| componentProps.maxDescriptionLines | number | null | The maximum number of lines to use for rendering description. | All | Yes ### `NotifierComponents.Alert` -| Name | Type | Default | Description | Platform | HarmonyOS Support | -| ---------------------------------- | --------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------------- | -| title | String | null | Title of notification. | All | Yes | -| description | String | null | Description of notification. | All | Yes | -| componentProps.titleStyle | TextStyle | null | The style to use for rendering title. | All | Yes | -| componentProps.descriptionStyle | TextStyle | null | The style to use for rendering description. | All | Yes | -| componentProps.alertType | String | 'success' | Background color will be changed depending on the type. Available values: error(red), success(green), warn(orange) and info(blue). | All | Yes | -| componentProps.backgroundColor | String | null | While the background of the alert depends on alertType, you can also set the other color you want. | All | Yes | -| componentProps.textColor | String | 'white' | Color of title and description. | All | Yes | -| componentProps.ContainerComponent | Component | SafeAreaView | A container of the component. Set it in case you use different SafeAreaView than the standard | All | Yes | -| componentProps.maxTitleLines | number | null | The maximum number of lines to use for rendering title. | All | Yes | -| componentProps.maxDescriptionLines | number | null | The maximum number of lines to use for rendering description. | All | Yes | +| Name | Type | Default | Description | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | ---- | -------- | +| title | String | null | Title of notification. | All | Yes +| description | String | null | Description of notification. | All | Yes +| componentProps.titleStyle | TextStyle | null | The style to use for rendering title. | All | Yes +| ViewWithOffsets3.0.0-rc.5+ | Function | null | Provides a container view with safe area boundaries | All | Yes | +| componentProps.type3.0.0-rc.5+ | String | 'success' | Background color will be changed depending on the type. Available values: `error`(red), `success`(green), `warn`(orange) and `info`(blue). | All | Yes | +| componentProps.descriptionStyle | TextStyle | null |The style to use for rendering description. | All | Yes +|componentProps.alertType | String | 'success' |Background color will be changed depending on the type. Available values: error(red), success(green), warn(orange) and info(blue). | All | Yes +| componentProps.backgroundColor | String | null | While the background of the alert depends on alertType, you can also set the other color you want. | All | Yes +| componentProps.textColor | String | 'white' | Color of title and description. | All | Yes +| componentProps.ContainerComponent | Component | SafeAreaView | A container of the component. Set it in case you use different SafeAreaView than the standard | All | Yes +| componentProps.maxTitleLines | number | null | The maximum number of lines to use for rendering title. | All | Yes +| componentProps.maxDescriptionLines | number | null | The maximum number of lines to use for rendering description. | All | Yes + +### `NotifierComponents.SimpleToast`3.0.0-rc.5+ + +| Name | Type | Default | Description | HarmonyOS Support | Platform | +| --------------------------------- | ----------------- | --------------- | ------------------------------------------------------------ | ----------------- | -------- | +| title | String | null | Title of notification. | Yes | All | +| ViewWithOffsets | Function | null | Provides a container view with safe area boundaries | Yes | All | +| componentProps.titleStyle | TextStyle | null | The style to use for rendering title | Yes | All | +| componentProps.safeAreaStyle | ViewStyle | null | The style to use for safe area container. | Yes | All | +| componentProps.containerStyle | ViewStyle | null | The style to use for toast content container. | Yes | All | +| componentProps.maxTitleLines | Number | null | The maximum number of lines to use for rendering title. | Yes | All | +| componentProps.ContainerComponent | React.ElementType | ViewWithOffsets | A container of the component. Set it in case you use different SafeAreaView than the custom `ViewWithOffsets` | Yes | All | + +### `NotifierComponents.Toast`3.0.0-rc.5+ + +| Name | Type | Default | Description | Platform | HarmonyOS Support | +| ----------------------------------------- | ------------------- | ----------------- | ------------------------------------------------------------ | -------- | ----------------- | +| title | String | null | Title of notification. | All | Yes | +| description | String | null | Description of notification. | All | Yes | +| ViewWithOffsets | Function | null | Provides a container view with safe area boundaries | All | Yes | +| componentProps.type | String | null | If set, the icon and icon background color will be determined by the provided type. | All | Yes | +| componentProps.useTypeColorForTitle | Boolean | false | When `true`, the title color is automatically derived from the `type` prop. | All | Yes | +| componentProps.useTypeColorForDescription | Boolean | false | When `true`, the description color is automatically derived from the `type` prop. | All | Yes | +| componentProps.maxTitleLines | Number | null | The maximum number of lines for rendering the title text. | All | Yes | +| componentProps.maxDescriptionLinesYes | Number | null | The maximum number of lines for rendering the description text. | All | Yes | +| componentProps.iconSource | ImageSourcePropType | depends on `type` | The icon source passed to the `` component as the `source` prop.If not specified, a default icon is used based on the `type`. | All | Yes | +| componentProps.safeAreaStyle | ViewStyle | null | Style for the safe area container of the toast. | All | Yes | +| componentProps.containerStyle | ViewStyle | null | Style for the toast content container, often used to modify background color,shadows, padding, or margin. | All | Yes | +| componentProps.iconContainerStyle | TextStyle | null | Style for the icon container, useful for adjusting background color or size. | All | Yes | +| componentProps.iconStyle | ImageStyle | null | Style for the icon `` itself, useful for adjusting icon color or size. | All | Yes | +| componentProps.textContainerStyle | TextStyle | null | Style for the text container wrapping both title and description. | All | Yes | +| componentProps.titleStyle | TextStyle | null | Style for the title text. | All | Yes | +| componentProps.descriptionStyle | TextStyle | null | Style for the description text. | All | Yes | +| componentProps.ContainerComponent | React.ElementType | ViewWithOffsets | A custom container component. If used, it replaces the default `ViewWithOffsets` provided by the library. | All | Yes | ## Known Issues -- [ ] translucentStatusBar 状态栏透明在 HarmonyOS 不支持,useRNScreensOverlay,rnScreensOverlayViewStyle 两个 Properties 依赖于 react-native-screens，暂未适配 harmonyOS -- [ ] componentProps{needsOffscreenAlphaCompositing}, 在harmonyOS不支持 +- [ ] useRNScreensOverlay,rnScreensOverlayViewStyle ,It relies on react-native-screens and is not yet compatible with harmonyOS +- [ ] componentProps{needsOffscreenAlphaCompositing}, Not supported on harmonyOS ## Others - omitGlobalMethodsHookup 源库 Properties 未生效 问题：[issues#102](https://github.com/seniv/react-native-notifier/issues/102) diff --git a/zh-cn/react-native-notifier.md b/zh-cn/react-native-notifier.md index ef01e40aa..18ca81698 100644 --- a/zh-cn/react-native-notifier.md +++ b/zh-cn/react-native-notifier.md @@ -15,6 +15,15 @@ >[!TIP] [Github 地址](https://github.com/seniv/react-native-notifier) + +该第三方库的仓库在Github上，支持直接从 npm 下载，其具体版本所属关系如下： + + +| 三方库版本 | 包名 | 仓库地址 | 发布(Release) | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | ---------- | ---------- | +| 2.0.0 | react-native-notifier | [Github](https://github.com/seniv/react-native-notifier)|[Github Releases](https://github.com/seniv/react-native-notifier/releases)|0.72 | +| 3.0.0| react-native-notifier | [Github](https://github.com/seniv/react-native-notifier) |[Github Releases](https://github.com/seniv/react-native-notifier/releases) | 0.77 | + ## 安装与使用 进入到工程目录并输入以下命令： @@ -22,13 +31,21 @@ #### **npm** ```bash +#0.72 npm install react-native-notifier@2.0.0 + +#0.77 +npm install react-native-notifier@3.0.0-rc.5 ``` #### **yarn** ```bash +#0.72 yarn add react-native-notifier@2.0.0 + +#0.77 +yarn add react-native-notifier@3.0.0-rc.5 ``` @@ -77,15 +94,16 @@ export const Notifier = () => { ``` ## Link -本库 HarmonyOS 侧实现依赖 @react-native-oh-tpl/react-native-gesture-handler 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 +本库 HarmonyOS 侧实现依赖 react-native-gesture-handler 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 -如未引入请参照[@react-native-oh-tpl/react-native-gesture-handler 文档](/zh-cn/react-native-gesture-handler.md)进行引入 +如未引入请参照[react-native-gesture-handler 文档](/zh-cn/react-native-gesture-handler.md)进行引入 ## 约束与限制 ### 兼容性 本文档内容基于以下版本验证通过: 1. RNOH: 0.72.28; SDK: HarmonyOS-NEXT-DB1 5.0.0.31; IDE: DevEco Studio 5.0.3.500; ROM: 3.0.0.25; +2. RNOH: 0.77.18; SDK: HarmonyOS-5.1.1.208(API19); IDE: DevEco Studio 5.1.1.830; ROM: 6.0.0.112 SP12; ## 属性 @@ -111,9 +129,16 @@ Both `NotifierWrapper` and `NotifierRoot` receive the same props. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| showNotification | Show notification with params. | Function | yes | All | yes | +| showNotification | Show notification with params.
2.0.0: showNotification(params: ShowNotificationParams): void;
3.0.0-rc.5: showNotification(params: ShowNotificationParams): ShowNotificationReturnType; | Function | yes | All | yes | +| updateNotification3.0.0-rc.5+ | Update currently visible notification. | Function | yes | All | yes | +| shakeNotification3.0.0-rc.5+ | Shakes currently visible notification to attract the user's attention. | Function | yes | All | yes | +| isNotificationVisible3.0.0-rc.5+ | Is any notification currently visible. | Function | yes | All | yes | | hideNotification |Hide notification and run callback function when notification completely hidden. | Function | yes | All | yes | | clearQueue |Clear [notifications queue](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#queue-mode) and optionally hide currently displayed notification. Might be useful to run after logout, after which queued notifications should not be displayed.| Function | yes | All | yes | +| updateById3.0.0-rc.5+ |Update notification by ID, if visible - will be updated immediately,if it waits in the queue - it will be updated in the queue and will be displayed with updated parameters.| Function | yes | All | yes | +| shakeById3.0.0-rc.5+ |Shakes notification by ID to attract the user's attention.| Function | yes | All | yes | +| isVisibleById3.0.0-rc.5+ |Is notification with provided ID currently visible.| Function | yes | All | yes | +| hideById3.0.0-rc.5+ |Hide notification by ID.| Function | yes | All | yes | ### `showNotification` ``` @@ -128,11 +153,12 @@ Notifier.showNotification(params: object); | description |Description of notification. Passed to Component. | String | Yes | All | Yes | | duration |Time after notification will disappear. Set to 0 to not hide notification automatically | Number | No |All | Yes | Component |Component of the notification body. You can use one of the [bin components](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#components), or your [custom component](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#custom-component). | Component | No |All | Yes -| componentProps | Additional props that are passed to Component. See all available props of built-in components in the [components section](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#components). | Object | No |All | No +| componentProps | Additional props that are passed to Component. See all available props of built-in components in the [components section](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Fseniv%2Freact-native-notifier%2Ftree%2Fmain%3Ftab%3Dreadme-ov-file%23components).
2.0.0: componentProps?: Omit, 'title' \| 'description'>;
3.0.0-rc.5: componentProps?: Omit, keyof NotifierComponentProps>; | Object | No | All | Yes | +| containerStyle | Styles Object that will be used in container.
2.0.0: containerStyle?: ContainerStyleParam;
3.0.0-rc.5: containerStyle?: AnimatedViewProps['style']; | bool | No | All | Yes | | containerStyle |tyles Object or a Function that will receive translateY: Animated.Value as first parameter and should return Styles that will be used in container. Using this parameter it is possible to create[ your own animations of the notification](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#custom-animations). | bool |No | All | Yes | containerProps | Props of Animated Container | Object |No | All | Yes | queueMode | Determines the order in which notifications are shown. Read more in the [Queue Mode](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#queue-mode) section. | String |No | All | Yes -| swipeEnabled |Can notification be hidden by swiping it out | bool |No | All | Yes +| swipeEnableddeprecated from 3.0.0-rc.5+ | Can notification be hidden by swiping it out | bool | No | All | Yes | | animationDuration | How fast notification will appear/disappear | Number |No | All | Yes | showAnimationDuration | How fast notification will appear. | Number |No | All | Yes | hideAnimationDuration | How fast notification will disappear.| Number |No | All | Yes @@ -147,7 +173,117 @@ Notifier.showNotification(params: object); | swipePixelsToClose | How many pixels user should swipe-up notification to dismiss it | Number |No | All | Yes | swipeEasing | Animation easing after user finished swiping | Easing |No | All | Yes | swipeAnimationDuration | How fast should be animation after user finished swiping | Number |No | All | Yes -| translucentStatusBar | Add additional top padding that equals to StatusBar.currentHeight. Android Only. | Number |No | Android | No +| translucentStatusBardeprecated from 3.0.0-rc.5+ | Add additional top padding that equals to StatusBar.currentHeight. Android Only. | Number | No | Android | No | +| duplicateBehavior3.0.0-rc.5+ | What to do if notification with the same ID(!) already shown. | String | No | All | Yes | +| id3.0.0-rc.5+ | A manually provided ID. If supplied, it overrides any generation strategy. If notification with the same ID already shown, result of the `showNotification` will depend on `duplicateBehavior` parameter. | String \| Number | No | All | Yes | +| idStrategy3.0.0-rc.5+ | Specifies how the ID should be generated if none is manually provided. | String | No | All | Yes | +| animationFunction3.0.0-rc.5+ | Function that receives object with various `Animated.Value` and should return Styles that will be used to animate the notification. When set, result of the function will replace default animation. This function will be called only once. | Function | No | All | Yes | +| ignoreSafeAreaInsets3.0.0-rc.5+ | Ignores offsets from `useSafeAreaInsets` hook | Boolean | No | All | Yes | +| ignoreKeyboard3.0.0-rc.5+ | Ignores the keyboard completely. Treats the keyboard as if it is always closed. | Boolean | No | All | Yes | +| ignoreKeyboardHeight3.0.0-rc.5+ | Ignores keyboard height offset (when use bottom positions) | Boolean | No | All | Yes | +| additionalKeyboardOffset3.0.0-rc.5+ | Additional bottom offset when keyboard is visible. | Number | No | All | Yes | +| additionalOffsets3.0.0-rc.5+ | Offsets in addition to the safeAreaInsets. When keyboard is open and `ignoreKeyboard != true`, `bottom` offset will be ignored and `additionalKeyboardOffset` will be used instead. | Object | No | All | Yes | +| position3.0.0-rc.5+ | Position of the notification | String | No | All | Yes | +| enterFrom3.0.0-rc.5+ | Direction from which notification will appear | String | No | All | Yes | +| exitTo3.0.0-rc.5+ | Direction to which notification will slide to hide | String | No | All | Yes | +| shakingConfig3.0.0-rc.5+ | Config of the shaking animation. Moves the notification from `minValue` to `maxValue` `numberOfRepeats` times in horizontal or vertical direction. `useNativeDriver` is `true` by default, but it can be disabled. | Object | No | All | Yes | +| useRNScreensOverlay3.0.0-rc.5+ | use FullWindowOverlay component from react-native-screens library | Boolean | No | iOS | Yes | +| rnScreensOverlayViewStyle3.0.0-rc.5+ | Style that will be used for RN View that is inside of FullWindowOverlay | Object | No | iOS | Yes | + +### `updateNotification`3.0.0-rc.5+ +``` +Notifier.updateNotification(params: object); +``` + +`params` + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------- | ------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- | +| title | Title of notification. Passed to Component. | String| No | All |Yes | +| description |Description of notification. Passed to Component. | String | No | All | Yes | +| Component |Component of the notification body. You can use one of the [bin components](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#components), or your [custom component](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#custom-component). | ComponentType | No |All | Yes | +| componentProps | Additional props that are passed to Component. See all available props of built-in components in the [components section](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#components). | Object | No |All | No | +| idStrategy | Specifies how the ID should be generated if none is manually provided. | String | No |All | Yes | +| containerStyle |Styles Object that will be used in container. | Object |No | All | Yes | +| animationFunction |Function that receives object with various `Animated.Value` and should return Styles that will be used to animate the notification. When set, result of the function will replace default animation. This function will be called only once. | Function |No | All | Yes | +| containerProps | Props of Animated Container | Object |No | All | Yes | +| showAnimationConfig | Config of the function that runs the "showing" animation. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| hideAnimationConfig | Config of the function that runs the "hiding" animation. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| swipeOutAnimationConfig | Config of the function that runs animation that hides notification after it was swiped-out. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| resetSwipeAnimationConfig | Config of the function that runs animation that returns the notification back to "shown" position after it was moved/swiped by the user. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| onShown | Function called when entering animation is finished | () => void |No | All | Yes | +| onStartHiding | Function called when notification started hiding | () => void |No | All | Yes | +| onHidden |Function called when notification completely hidden | () => void |No | All | Yes | +| onPress | Function called when user press on notification | () => void |No | All | Yes | +| hideOnPress | Should notification hide when user press on it| Boolean |No | All | Yes | +| swipePixelsToClose | How many pixels user should swipe-up notification to dismiss it | Number |No | All | Yes | +| duration | Time after notification will disappear. Set to `0` to not hide notification automatically | Number |No | All | Yes | +| ignoreSafeAreaInsets | Ignores offsets from `useSafeAreaInsets` hook | Boolean |No | All | Yes | +| ignoreKeyboard | Ignores the keyboard completely. Treats the keyboard as if it is always closed. | Boolean |No | All | Yes | +| ignoreKeyboardHeight | Ignores keyboard height offset (when use bottom positions) | Boolean |No | All | Yes | +| additionalKeyboardOffset | Additional bottom offset when keyboard is visible. | Number |No | All | Yes | +| additionalOffsets | Offsets in addition to the safeAreaInsets. When keyboard is open and `ignoreKeyboard != true`, `bottom` offset will be ignored and `additionalKeyboardOffset` will be used instead. | Object |No | All | Yes | +| position | Position of the notification | String |No | All | Yes | +| enterFrom | Direction from which notification will appear | String |No | All | Yes | +| exitTo | Direction to which notification will slide to hide | String |No | All | Yes | +| swipeDirection | Direction in which notification can be swiped out | String |No | All | Yes | +| shakingConfig | Config of the shaking animation. Moves the notification from `minValue` to `maxValue` `numberOfRepeats` times in horizontal or vertical direction. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| useRNScreensOverlay | use FullWindowOverlay component from react-native-screens library | Boolean |No | iOS | Yes | +| rnScreensOverlayViewStyle | Style that will be used for RN View that is inside of FullWindowOverlay | Object |No | iOS | Yes | + + +### `updateById`3.0.0-rc.5+ +``` +Notifier.updateById(id: string | number, params: object); +``` + +`params` + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------- | ------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- | +| title | Title of notification. Passed to Component. | String| No | All |Yes | +| description |Description of notification. Passed to Component. | String | No | All | Yes | +| Component |Component of the notification body. You can use one of the [bin components](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#components), or your [custom component](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#custom-component). | ComponentType | No |All | Yes | +| componentProps | Additional props that are passed to Component. See all available props of built-in components in the [components section](https://github.com/seniv/react-native-notifier/tree/main?tab=readme-ov-file#components). | Object | No |All | No | +| idStrategy | Specifies how the ID should be generated if none is manually provided. | String | No |All | Yes | +| containerStyle |Styles Object that will be used in container. | Object |No | All | Yes | +| animationFunction |Function that receives object with various `Animated.Value` and should return Styles that will be used to animate the notification. When set, result of the function will replace default animation. This function will be called only once. | Function |No | All | Yes | +| containerProps | Props of Animated Container | Object |No | All | Yes | +| showAnimationConfig | Config of the function that runs the "showing" animation. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| hideAnimationConfig | Config of the function that runs the "hiding" animation. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| swipeOutAnimationConfig | Config of the function that runs animation that hides notification after it was swiped-out. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| resetSwipeAnimationConfig | Config of the function that runs animation that returns the notification back to "shown" position after it was moved/swiped by the user. `timing` or `spring` method can be used. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| onShown | Function called when entering animation is finished | () => void |No | All | Yes | +| onStartHiding | Function called when notification started hiding | () => void |No | All | Yes | +| onHidden |Function called when notification completely hidden | () => void |No | All | Yes | +| onPress | Function called when user press on notification | () => void |No | All | Yes | +| hideOnPress | Should notification hide when user press on it| Boolean |No | All | Yes | +| swipePixelsToClose | How many pixels user should swipe-up notification to dismiss it | Number |No | All | Yes | +| duration | Time after notification will disappear. Set to `0` to not hide notification automatically | Number |No | All | Yes | +| ignoreSafeAreaInsets | Ignores offsets from `useSafeAreaInsets` hook | Boolean |No | All | Yes | +| ignoreKeyboard | Ignores the keyboard completely. Treats the keyboard as if it is always closed. | Boolean |No | All | Yes | +| ignoreKeyboardHeight | Ignores keyboard height offset (when use bottom positions) | Boolean |No | All | Yes | +| additionalKeyboardOffset | Additional bottom offset when keyboard is visible. | Number |No | All | Yes | +| additionalOffsets | Offsets in addition to the safeAreaInsets. When keyboard is open and `ignoreKeyboard != true`, `bottom` offset will be ignored and `additionalKeyboardOffset` will be used instead. | Object |No | All | Yes | +| position | Position of the notification | String |No | All | Yes | +| enterFrom | Direction from which notification will appear | String |No | All | Yes | +| exitTo | Direction to which notification will slide to hide | String |No | All | Yes | +| swipeDirection | Direction in which notification can be swiped out | String |No | All | Yes | +| shakingConfig | Config of the shaking animation. Moves the notification from `minValue` to `maxValue` `numberOfRepeats` times in horizontal or vertical direction. `useNativeDriver` is `true` by default, but it can be disabled. | Object |No | All | Yes | +| useRNScreensOverlay | use FullWindowOverlay component from react-native-screens library | Boolean |No | iOS | Yes | +| rnScreensOverlayViewStyle | Style that will be used for RN View that is inside of FullWindowOverlay | Object |No | iOS | Yes | + + +### `shakeNotification`3.0.0-rc.5+ +``` +Notifier.shakeNotification(resetTimer?: boolean); +``` + +### `isNotificationVisible`3.0.0-rc.5+ +``` +Notifier.isNotificationVisible(); +``` + ### `hideNotification` ``` @@ -159,6 +295,20 @@ Notifier.hideNotification(onHiddenCallback?: (result: Animated.EndResult) => voi Notifier.clearQueue(hideDisplayedNotification?: boolean); ``` +### `shakeById`3.0.0-rc.5+ +``` +Notifier.shakeById(id: string | number, resetTimer?: boolean); +``` + +### `isVisibleById`3.0.0-rc.5+ +``` +Notifier.isVisibleById(id: string | number); +``` +### `hideById`3.0.0-rc.5+ +``` +Notifier.hideById(id: string | number, onHidden?: Animated.EndCallback); +``` + ## Queue Mode Queue mode is used to define the order in which the notification appears in case other notifications are being displayed at the moment. @@ -189,6 +339,15 @@ Currently, there are 2 components out of the box. If none of them fits your need | ---- | ----------- | ---- | -------- | ---- | -------- | | title | String | null | Title of notification. | All | Yes | description | String | null | Description of notification. | All | Yes +| ViewWithOffsets3.0.0-rc.5+ | Function | null | Provides a container view with safe area boundaries | All | Yes | +| componentProps.type3.0.0-rc.5+ | String | null | If set, the icon, icon background color, and border color will be determined by the provided type. | All | Yes | +| componentProps.useTypeColorForTitle3.0.0-rc.5+ | Boolean | false | When `true`, the title color is automatically derived from the `type` prop. | All | Yes | +| componentProps.useTypeColorForDescription3.0.0-rc.5+ | Boolean | false | When `true`, the description color is automatically derived from the `type` prop. | All | Yes | +| componentProps.iconSource3.0.0-rc.5+ | ImageSourcePropType | depends on `type` | The icon source passed to the `` component as the `source` prop.If not specified, a default icon is used based on the `type`. | All | Yes | +| componentProps.safeAreaStyle3.0.0-rc.5+ | ViewStyle | null | Style for the outermost container of the toast. | All | Yes | +| componentProps.iconContainerStyle3.0.0-rc.5+ | TextStyle | null | Style for the icon container, useful for adjusting background color or size. | All | Yes | +| componentProps.iconStyle3.0.0-rc.5+ | ImageStyle | null | Style for the icon `` itself, useful for adjusting icon color or size. | All | Yes | +| componentProps.textContainerStyle3.0.0-rc.5+ | TextStyle | null | Style for the text container wrapping both title and description. | All | Yes | | componentProps.titleStyle | TextStyle | null | The style to use for rendering title. | All | Yes | componentProps.descriptionStyle | TextStyle | null |The style to use for rendering description. | All | Yes | componentProps.imageSource | Object | null | Passed to as source param. | All | Yes @@ -205,6 +364,8 @@ Currently, there are 2 components out of the box. If none of them fits your need | title | String | null | Title of notification. | All | Yes | description | String | null | Description of notification. | All | Yes | componentProps.titleStyle | TextStyle | null | The style to use for rendering title. | All | Yes +| ViewWithOffsets3.0.0-rc.5+ | Function | null | Provides a container view with safe area boundaries | All | Yes | +| componentProps.type3.0.0-rc.5+ | String | 'success' | Background color will be changed depending on the type. Available values: `error`(red), `success`(green), `warn`(orange) and `info`(blue). | All | Yes | | componentProps.descriptionStyle | TextStyle | null |The style to use for rendering description. | All | Yes |componentProps.alertType | String | 'success' |Background color will be changed depending on the type. Available values: error(red), success(green), warn(orange) and info(blue). | All | Yes | componentProps.backgroundColor | String | null | While the background of the alert depends on alertType, you can also set the other color you want. | All | Yes @@ -213,9 +374,44 @@ Currently, there are 2 components out of the box. If none of them fits your need | componentProps.maxTitleLines | number | null | The maximum number of lines to use for rendering title. | All | Yes | componentProps.maxDescriptionLines | number | null | The maximum number of lines to use for rendering description. | All | Yes +### `NotifierComponents.SimpleToast`3.0.0-rc.5+ + +| Name | Type | Default | Description | HarmonyOS Support | Platform | +| --------------------------------- | ----------------- | --------------- | ------------------------------------------------------------ | ----------------- | -------- | +| title | String | null | Title of notification. | Yes | All | +| ViewWithOffsets | Function | null | Provides a container view with safe area boundaries | Yes | All | +| componentProps.titleStyle | TextStyle | null | The style to use for rendering title | Yes | All | +| componentProps.safeAreaStyle | ViewStyle | null | The style to use for safe area container. | Yes | All | +| componentProps.containerStyle | ViewStyle | null | The style to use for toast content container. | Yes | All | +| componentProps.maxTitleLines | Number | null | The maximum number of lines to use for rendering title. | Yes | All | +| componentProps.ContainerComponent | React.ElementType | ViewWithOffsets | A container of the component. Set it in case you use different SafeAreaView than the custom `ViewWithOffsets` | Yes | All | + +### `NotifierComponents.Toast`3.0.0-rc.5+ + +| Name | Type | Default | Description | Platform | HarmonyOS Support | +| ----------------------------------------- | ------------------- | ----------------- | ------------------------------------------------------------ | -------- | ----------------- | +| title | String | null | Title of notification. | All | Yes | +| description | String | null | Description of notification. | All | Yes | +| ViewWithOffsets | Function | null | Provides a container view with safe area boundaries | All | Yes | +| componentProps.type | String | null | If set, the icon and icon background color will be determined by the provided type. | All | Yes | +| componentProps.useTypeColorForTitle | Boolean | false | When `true`, the title color is automatically derived from the `type` prop. | All | Yes | +| componentProps.useTypeColorForDescription | Boolean | false | When `true`, the description color is automatically derived from the `type` prop. | All | Yes | +| componentProps.maxTitleLines | Number | null | The maximum number of lines for rendering the title text. | All | Yes | +| componentProps.maxDescriptionLinesYes | Number | null | The maximum number of lines for rendering the description text. | All | Yes | +| componentProps.iconSource | ImageSourcePropType | depends on `type` | The icon source passed to the `` component as the `source` prop.If not specified, a default icon is used based on the `type`. | All | Yes | +| componentProps.safeAreaStyle | ViewStyle | null | Style for the safe area container of the toast. | All | Yes | +| componentProps.containerStyle | ViewStyle | null | Style for the toast content container, often used to modify background color,shadows, padding, or margin. | All | Yes | +| componentProps.iconContainerStyle | TextStyle | null | Style for the icon container, useful for adjusting background color or size. | All | Yes | +| componentProps.iconStyle | ImageStyle | null | Style for the icon `` itself, useful for adjusting icon color or size. | All | Yes | +| componentProps.textContainerStyle | TextStyle | null | Style for the text container wrapping both title and description. | All | Yes | +| componentProps.titleStyle | TextStyle | null | Style for the title text. | All | Yes | +| componentProps.descriptionStyle | TextStyle | null | Style for the description text. | All | Yes | +| componentProps.ContainerComponent | React.ElementType | ViewWithOffsets | A custom container component. If used, it replaces the default `ViewWithOffsets` provided by the library. | All | Yes | + + ## 遗留问题 -- [ ] translucentStatusBar状态栏透明在HarmonyOS不支持,useRNScreensOverlay,rnScreensOverlayViewStyle两个属性依赖于react-native-screens，暂未适配harmonyOS +- [ ] useRNScreensOverlay,rnScreensOverlayViewStyle两个属性依赖于react-native-screens，暂未适配harmonyOS - [ ] componentProps{needsOffscreenAlphaCompositing}, 在harmonyOS不支持 ## 其他 -- Gitee