Skip to content

Commit

Permalink
docs: fix types, improve lang style (#147)
Browse files Browse the repository at this point in the history
  • Loading branch information
@danielmark0116
danielmark0116 authored Jun 8, 2022
1 parent 744e2d4 commit 0ac6b9c
Show file tree
Hide file tree
Showing 9 changed files with 81 additions and 85 deletions.
22 changes: 12 additions & 10 deletions docs/docs/intro/comprehensive-configuration/global-notifications-settings.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,22 @@ sidebar_position: 1
---

# ⚙️ Global notifications settings

<br/>

React Native Notifications library gives you a lot of possibilities to change the default configuration. <br/>
In the beginning, you can set the configuration for all the notifications used in the app. <br/>
Let's take a look at what exactly can we set globally:
The react-native-notificated library gives you a lot of possibilities to change the default configuration.

In the beginning, you can set the configuration for all the notifications used in the app.

Let's take a look at what exactly can we set globally:

| Name | Type | Default | Description |
| ----------------------------------- | :-------------------------: | :----------------------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| duration | Number | 3000 | Use 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](../default-variants-config/position) section.
| animationConfig | Object | SlideInLeftSlideOutRight | Property 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](../animations/changing-transitions) section.
| isNotch | Boolean | value returned by method 'hasNotch' from react-native-device-info | Property responsible for read if the device has notch. Under the hood uses react-native-device-info, but this can by overwritten by passing value to it.
| defaultStylesSettings | Object | - | Object responsible for setting global styles for the notifications. You can also set here styles, for all the notifications of the specific type. For example for the error notifications. To read more about global style settings please go to the [GLOBAL STYLES SETTINGS](../default-variants-config/global-config) section.
| Name | Type | Default | Description |
| --------------------- | :-------------------------: | :---------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| duration | Number | 3000 | Use 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](../default-variants-config/position) section. |
| animationConfig | Object | SlideInLeftSlideOutRight | Property 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](../animations/changing-transitions) section. |
| isNotch | Boolean | value returned by method 'hasNotch' from react-native-device-info | Property defining whether the device has a notched display. Under the hood uses react-native-device-info, but this can by overwritten by passing value to it. |
| defaultStylesSettings | Object | - | Object responsible for setting global styles for the notifications. You can also set the styles for all the notifications of a specific type. For example for the error notifications. To read more about global style settings please go to the [GLOBAL STYLES SETTINGS](../default-variants-config/global-config) section. |

<br/>

Expand Down
79 changes: 40 additions & 39 deletions docs/docs/intro/comprehensive-configuration/order-of-settings-overwriting.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
sidebar_position: 2
---

# ✏️ Order of settings overwriting
# ✏️ Order of overwriting settings

<br/>

In the React Native Notifications library, we can pass some settings on different levels. <br/>
Expand Down Expand Up @@ -101,7 +102,6 @@ export const Example = () => {
</SafeAreaView>
)
}

```

We can divide them as above for the three depth levels. Let's take a look at what properties can we pass at different levels:
Expand Down Expand Up @@ -135,6 +135,7 @@ const { useNotifications, NotificationsProvider } = createNotifications({
```

All those properties:

- isNotch
- duration
- notificationPosition
Expand Down Expand Up @@ -189,52 +190,53 @@ On the second level we can set only style properties for the different notificat

Properties set in these `configs` will affect all notifications of a given type. All of them have the same properties inside.<br/>
This level overwrites only style properties previously set at the global range. You cannot overwrite here other global properties. <br/>
Please notice that, if you set `globalConfig` styles (for all notifications), and then you set `successConfig`, then all `success` type notifications will take style config from the `successConfig`, but other notification types will take it from the `globalConfig`(unless you set them their notification type style config).<br/>
Please notice that, if you set `globalConfig` styles (for all notifications), and then you set `successConfig`, then all `success` type notifications will take style config from the `successConfig`, but other notification types will take it from the `globalConfig`(unless you set their notification type style config for them).<br/>
As you can see Notification types have a smaller range than global, but they are more important overall.


## Instance range (for the single notification):

```jsx
<SuccessButton
onPress={() =>
notify('success', {
params: {
description: 'This is where the toast text goes',
title: 'Success',
style: {
titleSize: 24,
titleColor: '#4B0082',
descriptionSize: 20,
descriptionColor: '#4B0082',
bgColor: '#FFFFF0',
borderType: 'border',
borderRadius: 15,
accentColor: '#B0E0E6',
borderWidth: 1,
multiline: 3,
defaultIconType: 'monochromatic',
leftIconSource: require('../../assets/custom-icon.png'),
},
},
config: {
notificationPosition: 'center',
animationConfig: SlideInLeftSlideOutRight,
duration: 100,
},
})
}
/>
onPress={() =>
notify('success', {
params: {
description: 'This is where the toast text goes',
title: 'Success',
style: {
titleSize: 24,
titleColor: '#4B0082',
descriptionSize: 20,
descriptionColor: '#4B0082',
bgColor: '#FFFFF0',
borderType: 'border',
borderRadius: 15,
accentColor: '#B0E0E6',
borderWidth: 1,
multiline: 3,
defaultIconType: 'monochromatic',
leftIconSource: require('../../assets/custom-icon.png'),
},
},
config: {
notificationPosition: 'center',
animationConfig: SlideInLeftSlideOutRight,
duration: 100,
},
})
}
/>
```

All those properties:

(params)

- description
- title
- style

(config)

- notificationPosition
- animationConfig
- duration
Expand All @@ -247,15 +249,14 @@ Can be set up for one single notification when we initiate it. Some of them can
What makes sense, because every notification should have its reason. <br/>
If we set some property here, it has the highest level of importance (overwrites the same property in the Global range and Notification type range), but only for this single notification.



## Conclusion

**In other words if the President says something it affects all the people in the country.** <br/>
But seriously, we can listen to him, but the president of our town can easily challenge his opinion, and probably his words will be more valuable for us. <br/>
**If the president of our city will say something, that will affect all the people in the city (smaller range, stronger attention).** <br/>
But if our mother will challenge his opinion, he's just lost, same as the President :) <br/>
**Our mother probably can affect only us, but no one has stronger attention in our opinion (ladies and gents, I HOPE SO!)**.
**In other words, if the President says something, it affects all the people in the country.**

But seriously, we can listen to him, but the president of our town can easily change his opinion and then his words will probably be more valuable for us.

**If the president of our city says something, that will affect all the people in the city (smaller range, stronger attention).**

But then again, if our mother challenges the President’s opinion, then the latter become irrelevant :)

**Truth be told, your mother probably has an impact on nobody else but yourself, but she definitely attracts your greatest attention! **.
2 changes: 1 addition & 1 deletion docs/docs/intro/default-variants-config/default-variants.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ You will get the basic styling with the `borderType` set for the `'border'` valu
#
(TO CHECK `borderType` AND OTHER STYLE PROPS GO TO THE [GLOBAL STYLES SETTINGS](./global-config.md) OR [SINGLE NOTIFICATION CONFIG](./props-config.md)).
#
Below you will find the default styling, for all notification types, with `darkMode` set for a `false` and a `true` variants.
Below you will find the default styling for all notification types with `darkMode` set to false and true for all variants.


| NotificationType | `darkMode` | Visualisation
Expand Down
12 changes: 6 additions & 6 deletions docs/docs/intro/default-variants-config/global-config.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ We divide them into:

| Name | Type | Default | Description |
|---------------|---------|---------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| darkMode | Boolean | false | If set for `true` enables the dark mode for the layout of the notification |
| globalConfig | Object | - | Inside this object, you can pass the configuration for all notifications used in the app (or part wrapped by the `NotificationProvider`) |
| successConfig | Object | - | Inside this object, you can pass the configuration for all success type notifications used in the app (or part wrapped by the `NotificationProvider`). All params set for the success notifications here overwrites the same params set in `globalConfig` |
| errorConfig | Object | - | Inside this object, you can pass the configuration for all error type notifications used in the app (or part wrapped by the `NotificationProvider`). All params set for the error notifications here overwrites the same params set in `globalConfig` |
| warningConfig | Object | - | Inside this object, you can pass the configuration for all warning type notifications used in the app (or part wrapped by the `NotificationProvider`). All params set for the warning notifications here overwrites the same params set in `globalConfig` |
| infoConfig | Object | - | Inside this object, you can pass the configuration for all info type notifications used in the app (or part wrapped by the `NotificationProvider`). All params set for the info notifications here overwrites the same params set in `globalConfig` |
| darkMode | Boolean | false | If set to `true`, it enables the dark mode for the notification layout |
| globalConfig | Object | - | Inside this object, you can pass the configuration for all notifications used in the app (or the parts wrapped with the `NotificationProvider`) |
| successConfig | Object | - | Inside this object, you can pass the configuration for all success type notifications used in the app (or parts wrapped with the `NotificationProvider`). Here, all params set for the success notifications overwrite the same params set in `globalConfig` |
| errorConfig | Object | - | Inside this object, you can pass the configuration for all error type notifications used in the app (or parts wrapped with the `NotificationProvider`). Here, all params set for the error notifications here overwrite the same params set in `globalConfig` |
| warningConfig | Object | - | Inside this object, you can pass the configuration for all warning type notifications used in the app (or parts wrapped with the `NotificationProvider`). Here, all params set for the warning notifications here overwrite the same params set in `globalConfig` |
| infoConfig | Object | - | Inside this object, you can pass the configuration for all info type notifications used in the app (or parts wrapped with the `NotificationProvider`). Here, all params set for the info notifications here overwrites the same params set in `globalConfig` |

#

Expand Down
4 changes: 2 additions & 2 deletions docs/docs/intro/default-variants-config/props-config.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ Let's take a look at the `params` object properties:
>
```

And at the `config` object:
And in the `config` object:

| Name | Type | Default | Description |
| -------------------- | --------------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
Expand Down Expand Up @@ -162,7 +162,7 @@ export const GlobalConfigExamples = () => {
}
```

At the beginning, in the `globalConfig`, we have overwritten default settings:
In the beginning, we overwrote `globalConfig` in the default settings:

- titleSize
- titleColor
Expand Down
13 changes: 6 additions & 7 deletions docs/docs/intro/examples/custom-examples.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,20 @@ sidebar_position: 5
---

# 🪶 Custom examples

<br/>

Code has been already described step by step in the [DEFAULT EXAMPLES](./default-examples.md) section.<br/>
So I think there is no use to do it here again.<br/>
Code has been already described step by step in the [DEFAULT EXAMPLES](./default-examples.md) 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](./default-examples.md) because their usage is limited, and the explanation there is all we need to know. We can remove 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 use `modify()` and `remove()` only in the [DEFAULT EXAMPLES](./default-examples.md) because their usage is limited, and the explanation there is all we need to know. We can remove the notification, or modify it, and therefore we will not be using them here and in the other examples as well. For that same reason, we will not be using `useState` and `useNotificationController` here.
- we filled the `style` object in every notification. To read more about the single notification properties please go to the [SINGLE NOTIFICATION CONFIG](../default-variants-config/props-config.md) section.
<br/>

In fact that's the only differences between Default Examples and Custom Examples.<br/>
Let's take a look at the code and the visualisations then:


## Code

```tsx
Expand Down Expand Up @@ -113,7 +113,6 @@ export const SingleCustomCases = () => {
</SafeAreaView>
)
}

```

<br/>
Expand All @@ -140,12 +139,12 @@ Let's see the notifications we declared above:

![Info](../../../assets/info-custom.png)


<br/>

## Conclusion

Like we can see every notification have its own style, but it's not going above this single notification. <br/>
Like we can see, every notification has its own style, but it doesn’t go beyond the scope of this individual notification

What we should remember is that the single notification style overwrites each of those configs:

- `globalConfig`
Expand Down
Loading

0 comments on commit 0ac6b9c

Please sign in to comment.