Build Custom Animated Toast Messages in React Native

Crafting a Toast Message from Scratch in React Native

What is a Toast Message?

If you’re new to toast messages, take a moment to watch the video below, which showcases a demo of the project we’ll be building together in this tutorial. In essence, a toast message is a notification that appears at the top of your screen for a brief period before disappearing. In this tutorial, we’ll explore how to create such a toast message from scratch in React Native using the React Native Animated library.

Getting Started with React Native

React Native is a JavaScript-based framework that enables you to build cross-platform mobile applications for both iOS and Android. If you’re interested in learning more, feel free to check out the React Native docs. For this project, I used the Expo framework, which you can install using npm: $ npm install --global expo-cli. However, the code provided will also work without Expo, with the exception of the expo/vector-icons, which can be replaced with React Native Vector Icons.

Prerequisites

To follow along, you’ll need basic knowledge of JavaScript and React Native. If you want to explore the complete project, you can find it on my GitHub.

Initializing the Project

Let’s dive into the code! First, navigate to the directory where you want to store your project and run expo init my-project to initialize the Expo project. Then, move into the newly created directory with cd my-project and start the development server with expo start. You can choose the device you want to work with; for this demo, I used an iPhone 12 Pro Max.

Project Structure

I usually add custom directories to the initially generated project directory. In this case, we only need the screens folder, where we’ll store our Home.js file. This is all we need to add to the initial structure because we only have one screen.

Using React Native Animated

The React Native Animated library will help us perform smooth animations. The general idea behind this project follows these steps:

1. Initially, the toast message will not be visible inside the viewport.
2. Once one of the buttons is tapped, a function will be triggered, which will ensure that the toast message will be moved to the top of the screen smoothly.
3. Finally, after a time window we define, the toast message will disappear again.

Implementing the Animation

Below is the first part of the code we’ll write to implement this behavior:
“`jsx
const windowHeight = Dimensions.get(‘window’).height;
const popAnim = useRef(new Animated.Value(windowHeight * -1));

const popIn = () => {
Animated.timing(popAnim, {
toValue: 0,
duration: 300,
useNativeDriver: true,
}).start(() => {
setTimeout(popOut, 2000);
});
};

const popOut = () => {
Animated.timing(popAnim, {
toValue: windowHeight * -1,
duration: 300,
useNativeDriver: true,
}).start();
};
“`
Coding the UI

Next, we’ll code the buttons that will trigger the toast message to appear:
jsx
<View>
<Button title="Success Message" onPress={() => setStatus('Success')} />
<Button title="Fail Message" onPress={() => setStatus('Fail')} />
</View>

Writing the Toast Message

Now, let’s move on to the interesting part of the UI: the actual toast message!
jsx
<Animated.View style={[styles.toastContainer, { transform: [{ translateY: popAnim }] }]}>
<View>
{status === 'Success'? (
<AntDesign name="check" size={24} color={successColor} />
) : (
<AntDesign name="cross" size={24} color={failColor} />
)}
<Text style={styles.header}>{status === 'Success'? 'Success!' : 'Failed!'}</Text>
<Text style={styles.message}>{status === 'Success'? 'Your request was successful!' : 'An error occurred.'}</Text>
<TouchableOpacity onPress={instantPopOut}>
<AntDesign name="close" size={24} color="#fff" />
</TouchableOpacity>
</View>
</Animated.View>

Final Steps

The last thing you’ll need to do is import the Home.js file to the App.js file:
“`jsx
import React from ‘eact’;
import Home from ‘./screens/Home’;

const App = () => {
return ;
};

export default App;
“`
And that’s it! You’ve successfully created a toast message from scratch using React Native Animated. The source code for the whole project can be found on my GitHub. I hope you found this tutorial helpful!