Notifications are one of the most important parts of any application. In this article, I want to share the experience of implementing a reliable and good looking notification system leveraging the React Native framework which provides a number of powerful tools and techniques such as higher-order components, hooks, and animations.
This article was written by Akvelon Mobile and Front End Developer Vadim Korobeinikov and was originally published on Medium.
Let’s highlight the advantages of some techniques we will use:
- Hooks are a powerful mechanism allowing to use state and other React features in functional components and were first introduced in React 16.8. Their benefits are:
- Reusing stateful logic between components
- Reducing components complexity
- Better separation of concerns
- Optimizations, e.g. better minification and more reliable hot loading
2. A higher-order component (HOC) is another useful technique that we will use in our example. React documentation says that HOC is a function that takes a component and returns a new component. HOCs can be useful for:
- Injecting dependencies
- Inheritance inversion
- Components factory
3. Animations are very important to create a great user experience. They provide users with feedback when they are interacting with the app.
To build a reliable notification system, we will take the following steps:
- Implement components for different types of notifications
- Add a state management system to store notification objects by implementing a container component where ones will be displayed
- Apply animations for better user experience
- Apply one of the newest features of React, hooks
This is how the final result will look:
1. Notification components
Let’s support a couple of different event types: success, info, warning, error. They will look a little different but share the same core implementation:
makeNotification is a HOC. In our case,
makeNotification works as a class factory and helps us to avoid code duplication. Now using this function we can create components for the aforementioned types. We just need to pass icon name, and two strings representing colors. This is how easy it is to create a success notifications component
…and for info notifications. Functional components for other notification types are created in a similar manner.
In order to use
notificationsStore within a component and make the component testable, we need to apply HOC. Here HOC is used to inject
NotificationControls component is a closure and it’s lexical environment keeps
NotificationControlsInner is a function factory. Store part (that stores app state) is:
2. State management
Now we have all the necessary components implemented: components for different notification types, e.g.
NotificationControls which is a source of notifications.
It’s time to add code for managing the state of notifications. There are many ways to implement state management using Context API or third-party solutions like Redux, Unstated and so on. In this article, we will use MobX. MobX is an easy-to-use library and requires less boilerplate code. MobX based on three concepts: state, derivations, and actions.
observed means that the state needs to be changed through actions. There are more options. As the strict mode is enabled any attempt to modify state directly…