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.