Skip to main content

✒️ Global config examples


Code has been already described step by step in the DEFAULT EXAMPLES section.
So I think there is no use to do it here again.
Here we have only a few differences I need to mention, and they are minimal:

  • we use modify() and remove() only if the DEFAULT EXAMPLES because their usage is limited, and the explanation there is all we need to know. We can remove the notification, or modify it. So, we will not use them here and in the other examples. Because of the same reason, we will not use useState and useNotificationController here.
  • we filled the globalConfig object in the defaultStylesSettings. This object is responsible for setting properties for all notifications. To read more please go back to the GLOBAL CONFIG section.

That's the only difference between Default Examples and Global Config Examples.
Let's take a look at the code and the visualizations then:

Code​

import React from 'react'
import { SafeAreaView } from 'react-native'
import { createNotifications } from 'react-native-notificated'
import { SuccessButton } from '../components/basicExamples/SuccessButton'
import { ErrorButton } from '../components/basicExamples/ErrorButton'
import { WarningButton } from '../components/basicExamples/WarningButton'
import { InfoButton } from '../components/basicExamples/InfoButton'
import { styles } from './styles'

const { useNotifications, NotificationsProvider } = createNotifications({
isNotch: true,
defaultStylesSettings: {
darkMode: true,
},
})

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

return (
<SafeAreaView style={styles.container}>
<NotificationsProvider />
<SuccessButton
onPress={() =>
notify('success', {
params: {
description: 'This is where the toast text goes',
title: 'Success',
},
})
}
/>
<ErrorButton
onPress={() =>
notify('error', {
params: {
description: 'This is where the toast text goes. ',
title: 'Error',
},
})
}
/>
<WarningButton
onPress={() =>
notify('warning', {
params: {
description: 'This is where the toast text goes',
title: 'Warning',
},
})
}
/>
<InfoButton
onPress={() =>
notify('info', {
params: {
description: 'This is where the toast text goes.',
title: 'Info',
},
})
}
/>
</SafeAreaView>
)
}


Visualization of examples​

Let's see the notifications we declared above:


Success notification​

Success

Error notification​

Error

Warning notification​

Warning

Info notification​

Info


Conclusion​

If we exclude titles and icons, we can see that all those notifications are the same.
It's because globalConfig affects all the notifications. Doesn't matter what the type of notification is.
To read more please go back to the GLOBAL CONFIG section.