⚙️ API Reference
Below you will find a brief description of all the methods and properties that the library exposes. +All entries are sorted alphabetically.
animationConfig
A parameter used to configure the animation. It can be set up for the entire app or selectively for a particular notification. +Below is the global configuration:
import { createNotifications, RotateInRotateOut } from 'react-native-notificated'
const { NotificationsProvider } = createNotifications({
animationConfig: RotateInRotateOut,
})
It can also be overwritten in the local scope when calling the notification:
import { SlideInLeftSlideOutRight } from 'react-native-notificated'
[...]
notify('success', {
params: {
title: 'Success',
description: 'This is where the toast text goes',
},
config: {
animationConfig: SlideInLeftSlideOutRight,
},
})
We've prepared a couple of ready-to-use animations for you (just import them from the library):
RotateZInZoomInDownZoomOutUpZoomInDownZoomOutDownRotateInRotateOutSlideInLeftSlideOutRightZoomInZoomOutMoveUpMoveDownSlideInLeftFadeInFadeOutVeryCustomTransitionDiagonalSlideInLeftSlideOutRight
createNotifications()
API used to initialize the library in the project.
import { createNotifications } from 'react-native-notificated'
const { NotificationsProvider } = createNotifications()
The createNotifications() invoked without any configuration, as in the above example, is fairly enough to use the library on its basic level.
+Here is an example of all available parameters that can be adjusted in createNotifications():
const { NotificationsProvider } = createNotifications({
duration: number // -> default 3000
notificationPosition: NotificationPosition
animationConfig: CustomAnimationConfig
gestureConfig: GestureConfig
isNotch?: boolean
defaultStylesSettings: {
darkMode: false,
globalConfig: StyleProps
successConfig: StyleProps
errorConfig: StyleProps
warningConfig: StyleProps
infoConfig: StyleProps
},
variants: CustomVariants
})
Check out StyleProps
The defaultStylesSettings provides styles for all default notifications. globalConfig is on the top of the hierarchy and distributes styles for all types of build-in notifications: success, error, warning, and info. For example, successConfig (if provided) will overwrite globalConfig styles only for 'success' notifications. successConfig styles can be overwritten on the lowest level when calling a 'success' notification using notify(). Check out Order of settings overwriting for more details.
generateAnimationConfig()
This method allows to set up custom animations.
generateAnimationConfig(config: CustomAnimationConfig)
Check out CustomAnimationConfig and Custom transitions
It takes four properties:
animationConfigIn// -> REQUIREDanimationConfigOuttransitionInStyles// -> REQUIREDtransitionOutStyles
import { generateAnimationConfig } from 'react-native-notificated'
const myCustomAnimation = generateAnimationConfig({
animationConfigIn: {
type: "timing" | "spring",
config: WithSpringConfig | WithTimingConfig // -> Reanimated type declarations
},
animationConfigOut: {
type: "timing" | "spring",
config: WithSpringConfig | WithTimingConfig // -> Reanimated type declarations
},
transitionInStyles: (progress: SharedValue<number>) => AnimatedStylesType // -> must be a worklet / Reanimated type declarations
transitionOutStyles: (progress: SharedValue<number>) => AnimatedStylesType // -> must be a worklet / Reanimated type declarations
})
modify()
Method returned from useNotifications() and useNotificationsController() hooks.
+This method is very similar to notify.
+The main difference is that you have the opportunity to change the existing notifications.
modify(id: string, setup: { params: NotificationParams; config?: NotificationConfigParams }): void
Jump to NotificationParams and NotificationConfigParams
The sample code below shows how the method should be implemented:
import { useNotifications } from 'react-native-notificated'
const SomeFunctionComponent = () => {
const [id, setId] = useState('')
const { modify, notify } = useNotifications()
return (
<View>
<Button
title='launch notification'
onPress={() =>
setId(
notify('success', {
params: {
description: 'This is where the toast text goes',
title: 'Success',
},
}).id
)
}
/>
<Button
title='modify notification'
onPress={() =>
modify(id, {
params: {
title: 'Hello',
description: 'Wow, that was easy',
},
})
}
>
</View>
)
}
NotificationsProvider
A provider, which acts as the notifications root. Depending on where you mount it, this is where the notifications will get rendered in your component tree.
return (
<>
<App />
<NotificationsProvider />
</>
)
notify()
This method is responsible for launching notification (default or custom, if implemented).
+Returned from the useNotifications() hook.
notify(notificationType: string, setup: { params: NotificationParams; config?: NotificationConfigParams }): string
Jump to NotificationParams and NotificationConfigParams
The sample code below shows how it should be implemented:
import { useNotifications } from 'react-native-notificated'
const SomeFunctionComponent = () => {
const { notify } = useNotifications()
const notificationMetadata = notify('success', {
params: {
title: 'Hello',
description: 'Wow, that was easy',
},
})
}
The notify() returns the notification id.
+The ID can be later used to manipulate this particular notification (to remove or update content).
[...]
const notificationID = notify('success', {
params: {
title: 'Hello',
description: 'Wow, that was easy',
},
}).id
[...]
remove()
This method removes the notification. It is returned from the useNotifications() and useNotificationsController() hooks.
remove(id: string): void
The sample code below shows how it works:
import { useNotifications } from 'react-native-notificated'
const SomeFunctionComponent = () => {
const [id, setId] = useState('')
const { remove, notify } = useNotifications()
return (
<View>
<Button
title='launch notification'
onPress={() =>
setId(
notify('success', {
params: {
description: 'This is where the toast text goes',
title: 'Success',
},
}).id
)
}
/>
<Button
title='remove notification'
onPress={() => remove(id)}
>
</View>
)
}
useNotifications()
The hook is imported from 'react-native-notificated' and can be used only inside the function component.
import { useNotifications } from 'react-native-notificated'
const SomeFunctionComponent = () => {
const { notify, modify, remove } = useNotifications()
[...]
}
The useNotifications() provides three methods: notify, modify, and remove - described separately.
useNotificationsController()
The hook is imported from 'react-native-notificated' and can be used only inside the function component.
import { useNotificationsController } from 'react-native-notificated'
const SomeFunctionComponent = () => {
const { modify, remove } = useNotifications()
[...]
}
The useNotificationsController() provides two methods: modify and remove - described separately.