Notification

Styled notification message

Import: import { Notification } from 'react-native-mantine';

Usage

import { Notification } from 'react-native-mantine';

<Notification
  title="Success"
  message="Your changes have been saved successfully"
  color="green"
  withCloseButton
  onClose={() => console.log('Closed')}
/>

Props

Prop	Type	Default	Description
`title`	`React.ReactNode`		Notification title displayed at the top in bold
`message`	`React.ReactNode`		Main notification message content
`children`	`React.ReactNode`		Alternative to message prop for custom notification content
`color`	`MantineColor`	`"blue"`	Notification color from theme, affects the left border color when withBorder is true
`radius`	`number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"sm"`	Key of theme.radius or any valid number to set border-radius
`icon`	`React.ReactNode`		Icon displayed on the left side of the notification
`withCloseButton`	`boolean`	`true`	If true, displays a close button on the right side
`onClose`	`() => void`		Callback fired when close button is clicked. Close button only shows if this prop is provided
`loading`	`boolean`	`false`	If true, displays a loading indicator (currently not implemented in styles)
`withBorder`	`boolean`	`true`	If true, adds a border around notification with colored left border accent
`withTextWrapper`	`boolean`	`true`	Controls whether title and message are automatically wrapped in Text components
`style`	`ViewStyle`		Additional styles to apply to the notification container

Source on GitHub · npm