Last week I finally got to use React Native properly for the first time in a good few months. I was working on something where I wanted to copy some text to the clipboard(more on this later) and then show something to the user to tell them that the text had been copied. The app I was working on was Android only so I wasn’t too concerned about iOS, naturally I thought “well I’ll just show it in a Toast” but then realized I was using React Native…Anyway to get to the point, it’s possible to show Toasts in React Native without any extra libraries. It’s actually surprisingly easy to implement – with ToastAndroid.

How to show a Toast in React Native(ToastAndroid)

A quick Google search lead me to the React Native documentation, and there’s a Component included in the React Native package called ToastAndroid. I was surprised to find that the usage is really straight forward. First of all you have to import ToastAndroid from ‘react-native’. Then all you have to do is call the show method:

ToastAndroid.show('Show a toast', ToastAndroid.SHORT);

Customization

To make the Toast longer you can substitute ToastAndroid.SHORT for ToastAndroid.LONG. I was presently surprised to find that you can also actually change the gravity of the Toast message quite easily with something like this:

ToastAndroid.showWithGravity(
  'Gravity release me',
  ToastAndroid.LONG,
  ToastAndroid.CENTER
);

And that’s about all for today. Happy toasting! Oh and last week I wrote a post about getRunningAppProcesses on Android – you can check it out here.