Notification toast animation in React Native with Reanimated 2

Custom top or bottom notification toast

In this tutorial we will build custom notification toast using Reanimated 2 library in React Native. For this project you will need some basic knowledge about React Native API.

Project setup

First we need to install minimum amount of dependencies for this project to work.

• (Node.js) Download and install node.js if you don’t have it installed yet. Otherwise you can skip this step.
• (React Native installation guide) Initialise a new React Native project. We will use TypeScript template. You can use existing project if you want but minimum supported version of React Native must be ≥ v0.62

npx react-native init NotificationToast --template react-native-template-typescript

• (Reanimated installation guide) Install Reanimated 2 library

Designing idea

What we want to achieve is by clicking on the button to show top notification toast.

Also we will have separate button for showing bottom notification toast. In real world app you will have some kind of event that will change component state which will trigger showing notification toast.

By clicking on the buttons again we will hide notification toast.

Coding

Toast component will receive 3 props.

• showToast boolean which will control show/hide of the notification toast
• message custom message that will be shown inside notification toast
• type render top or bottom type of notification toast (default is bottom)

First we need to define sharedValue that we will call positionY and based on ToastType (top/bottom) we will set initial value like this.

const positionY = useSharedValue(type === ToastType.Top ? -100 : 100);

Then we need to define animatedStyle that will animate translation of the notification toast over Y axis. In this case we will use withSpring hook for nice bouncing animation.

const animatedStyle = useAnimatedStyle(() => {    
  return {      
    transform: [{ translateY: withSpring(positionY.value) }],    
  };  
});

Then we need to add some if statement to control positionY.value with showToast and type prop .

Toast component will look like this.

Toast style file contains common style for both notification toasts and styles for individual toasts.

Finally we can then call this component in our main, ToastNotification component, which will contain state, Button and Toast component for each of our top and bottomToast components. You can use any Button component as you wish.

NotificationToast style file will look like this

Final results

By clicking on the button user can see notification toast.

Q&A

If something doesn’t work or you are having any question, just drop a comment below :) Happy coding!

Link to the source code LINK

My LinkedIn account LINK