Creating A Custom Toast Module for React Native

Looking to learn React Native? Checkout React Native Training.

I recently needed a custom Toast module for our React Native app. While there are some good ones out there, none of them fit our needs. After spending a few minutes building our own, I was happily surprised to see how easy it was to do. Here, we will go step by step, building our own from scratch.

The final repo is located here.

The demo is here on RNPlay.

Let’s go!

For out animations, we will be using the Animated API.

To set up an animated value, you first need to define the value using the Animated.Value method.

If you are using es6 classes, you can do this in the constructor:

constructor(props) {
  super(props)
  this.animatedValue = new Animated.Value(-70)
}

If you are using createClass, you can do it in the componentWillMount:

componentWillMount() {
  this.animatedValue = new Animated.Value(-70)
}

The value ( -70 ) is going to be our distance from the top of where the animation will begin. So, because our first toast will be located at the top of our component, it will be set at -70 on the Y axis from where we place it, which will hide…