Skip to main content

📬 Single Notification Config


Besides global settings, you can also pass props to the notification instance.
PROPS description IS REQUIRED.
There are two main props you can pass to the notification:

  • params
  • config
    <Text
onPress={() =>
notify('error', {
params: {},
config: {},
},
)}
>

Let's take a look at the params object properties:

NameTypeDefaultDescription
titleString''Props you can use to pass the notification title. Most of the notifications have the title, but this is not required.
descriptionString''Props you can use to pass the notification description. This props is required!
onPressFunction-The onPress props gives you possibility to pass extra function, which will be invoked when you use 'X' to close the notification
styleObject-Object with the style properties. You can pass here style settings which will be applied only to this notification instance. Style properties passed here overwrites style settings from defaultStylesSettings.
    <Text
onPress={() =>
notify('error', {
params: {
title: '',
description: '',
onPress: () => {},
style: {},
},
config: {},
},
)}
>

And in the config object:

NameTypeDefaultDescription
durationNumber3000Use 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 section.
animationConfigObjectSlideInLeftSlideOutRightProperty 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 section.
onCloseFunction-The onClose config option gives you possibility to pass an extra function, which will be invoked upon dismissal of the notification (triggered by swipe gesture, remove method - e.g. close button in default variants or when notification disappears)
gestureConfigObjectiOS: 'y' / android: 'x'Object responsible for setting gesture direction that triggers swipe-dismiss of notification.
    <Text
onPress={() =>
notify('error', {
params: {},
config: {
duration: 100,
notificationPosition: 'top',
animationConfig: {},
onClose: () => {},
gestureConfig: { direction: 'y' }
},
},
)}
>


Gesture config

The library gives the possibility to swipe-dismiss the notication so users don't rely only on pressing close button or duration timeout.

There are 3 types of gesture config: none, one-dimensional and two-dimensional. By choosing none, we switch off the possibility to swipe-dismiss a notification.

We can pass gestureConfig to config object like so:

gestureConfig: {
direction: 'y' | 'x' | 'full' | 'none'
}

Default value for iOS: 'y' Default value for Android: 'x'

By choosing full direction, we allow notifications to be dismissed in both directions. In this case, some additional config is required, like so:

  gestureConfig: {
direction: 'full',
x: { activationDistances: 50, activationVelocities: 200 },
y: { activationDistances: 50, activationVelocities: 200 },
},

✨ Style props

As we said above, in the style we can pass style settings for the notification instance.
In fact style props have the same properties as the globalConfig, successConfig, errorConfig, warningConfig, infoConfig. Check the GLOBAL STYLES SETTINGS

NameTypeDefaultDescription
titleSizeNumber16Set font size for the notification title
titleColorString'#505050' (darkMode - false) / '#FAFAFA' (darkMode - true)Set font color for the notification title
descriptionSizeNumber14Set font size for the notification description
descriptionColorString'#505050' (darkMode - false) / '#FAFAFA' (darkMode - true)Set font color for the notification description
bgColorString'#FFFFFF' (darkMode - false) / '#2D2D2D' (darkMode - true)Set background color for the notification
borderType'border' / 'accent' / 'no-border''border'Set type of border for the notification (EXAMPLES)
accentColorString'#00EA33' (success type) / '#FC6060' (error type) / '#8CACFF' (warning type) / '#FFD37D' (info type)Set accent color for the notification. The color of the border or the left side accent line
borderRadiusNumber14Set border radius for the notification container
borderWidthNumber1Set border width for the notification container
multilineNumber1Set number of visible lines for the notification description
defaultIconType'color' / 'monochromatic' / 'no-icon''color'This props works only with default icons. If you set your own icon it has no effect. (EXAMPLES)
leftIconSourceImageSourcePropType-Set custom left icon for the notification (in png). For example. require(../assets/icon.png)

What is important here is that the style props overwrite the styles passed in defaultStylesSettings.
To understand it perfectly, let's take a look at the few examples below.



🖌️ Style overwriting example

import React from 'react'
import { SafeAreaView, Text } from 'react-native'
import { createNotifications } from 'react-native-notificated'
import { styles } from './styles'

const { useNotifications, NotificationsProvider } = createNotifications({
defaultStylesSettings: {
globalConfig: {
titleSize: 20,
titleColor: '#4B0082',
descriptionSize: 12,
descriptionColor: '#B0E0E6',
bgColor: '#FFFFF0',
borderRadius: 25,
accentColor: '#4B0082',
borderWidth: 3,
multiline: 5,
},
errorConfig: {
descriptionSize: 12,
descriptionColor: '#4B0082',
accentColor: '#B0E0E6',
borderWidth: 2,
multiline: 10,
},
},
})

export const GlobalConfigExamples = () => {
const { notify } = useNotifications()

return (
<SafeAreaView style={styles.container}>
<NotificationsProvider />
<Text
onPress={() =>
notify('error', {
params: {
description: 'This is where the toast text goes. ',
title: 'Error',
style: {
borderRadius: 15,
borderWidth: 1,
},
},
})
}>
Emit error
</Text>
</SafeAreaView>
)
}

In the beginning, we overwrote globalConfig in the default settings:

  • titleSize
  • titleColor
  • descriptionSize
  • descriptionColor
  • bgColor
  • borderRadius
  • accentColor
  • borderWidth
  • multiline

In the errorConfig we have overwritten:

  • descriptionSize
  • descriptionColor
  • accentColor
  • borderWidth
  • multiline

And in style we have overwritten:

  • borderRadius
  • accentColor
  • borderWidth

So the final style setting for this error notification is:

{
titleSize: 20,
titleColor: '#4B0082',
descriptionSize: 12,
descriptionColor: '#4B0082',
bgColor: '#FFFFF0',
borderRadius: 15,
borderWidth: 1,
accentColor: '#B0E0E6',
multiline: 10
}

Remember that title, description and onPress are not the styling props.


And the final effect:

Border



So in conclusion -

  • style object overwrites successConfig / errorConfig / warningConfig / infoConfig(depends on which notification type are you using and styling), globalConfig, and DEFAULT SETTINGS
  • successConfig / errorConfig / warningConfig / infoConfig overwrites globalConfig, and DEFAULT SETTINGS
  • globalConfig overwrites DEFAULT SETTINGS