React Native Toast Notifications: Android and iOS Guide

featured article thumbnail

React Native toast notifications are brief, auto-dismissing messages that provide feedback to users without interrupting their workflow. Android has a built-in Toast API, but iOS does not offer a native equivalent — so cross-platform apps need a library or custom component to show toast notifications on both platforms.

This guide covers three approaches: Android's built-in ToastAndroid API, cross-platform libraries that work on both Android and iOS, and building a custom toast component.

What Is a Toast Notification?

A toast notification is a small message that appears briefly on screen — typically at the bottom — to confirm an action or provide a status update. It auto-dismisses after a few seconds and does not block user interaction.

Common examples:

  • "Settings saved" after updating preferences.
  • "Message sent" after sending an email.
  • "Item added to cart" in an e-commerce app.
  • "No internet connection" as a network status warning.

Toast notifications share these traits:

  • They display one or two lines of text.
  • They auto-dismiss after 2-6 seconds.
  • They overlay the UI without blocking interaction.
  • They optionally include one action button (like "Undo").

ToastAndroid: Built-in Android Toast API

React Native includes ToastAndroid, a JavaScript wrapper around Android's native Toast class. It works only on Android.

Basic usage

import { ToastAndroid } from 'react-native';

ToastAndroid.show('Settings saved', ToastAndroid.SHORT);

ToastAndroid.SHORT displays for about 2 seconds. ToastAndroid.LONG displays for about 3.5 seconds.

Controlling position with showWithGravity

By default, Android toasts appear at the bottom of the screen. Use showWithGravity() to change the position:

ToastAndroid.showWithGravity(
  'Upload complete',
  ToastAndroid.SHORT,
  ToastAndroid.CENTER,
);

Gravity options: ToastAndroid.BOTTOM, ToastAndroid.TOP, ToastAndroid.CENTER.

Fine-tuning with showWithGravityAndOffset

For pixel-level control, add x and y offsets:

ToastAndroid.showWithGravityAndOffset(
  'New message received',
  ToastAndroid.LONG,
  ToastAndroid.BOTTOM,
  0,   // xOffset
  50,  // yOffset
);

Complete example

import React from 'react';
import { View, StyleSheet, ToastAndroid, Button, StatusBar } from 'react-native';

const App = () => {
  const showToast = () => {
    ToastAndroid.show('A simple toast message', ToastAndroid.SHORT);
  };

  const showToastWithGravity = () => {
    ToastAndroid.showWithGravity(
      'Toast at the center',
      ToastAndroid.SHORT,
      ToastAndroid.CENTER,
    );
  };

  const showToastWithOffset = () => {
    ToastAndroid.showWithGravityAndOffset(
      'Toast with custom offset',
      ToastAndroid.LONG,
      ToastAndroid.BOTTOM,
      25,
      50,
    );
  };

  return (
    <View style={styles.container}>
      <Button title="Show Toast" onPress={showToast} />
      <Button title="Toast with Gravity" onPress={showToastWithGravity} />
      <Button title="Toast with Offset" onPress={showToastWithOffset} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: StatusBar.currentHeight,
    backgroundColor: '#f5f5f5',
    padding: 16,
  },
});

export default App;

Limitation: Android only

ToastAndroid does not work on iOS. If you call it on iOS, nothing happens — no error, no toast. For cross-platform apps, you need a library.

Cross-Platform Toast Libraries

Several libraries provide toast notifications on both Android and iOS with a single API.

react-native-toast-message

The most popular cross-platform toast library. It renders a customizable toast component at the top or bottom of the screen on both platforms.

Install:

npm install react-native-toast-message

Set up the toast container at the root of your app:

import Toast from 'react-native-toast-message';

const App = () => {
  return (
    <>
      {/* Your app content */}
      <Toast />
    </>
  );
};

Show a toast from anywhere in your app:

import Toast from 'react-native-toast-message';

Toast.show({
  type: 'success',
  text1: 'Settings saved',
  text2: 'Your preferences have been updated.',
});

Built-in toast types: success, error, info. You can define custom types with your own styling.

Control position:

Toast.show({
  type: 'info',
  text1: 'Syncing...',
  position: 'bottom', // 'top' or 'bottom'
  visibilityTime: 3000,
});

burned (iOS native feel)

burned wraps Apple's native toast-like alerts on iOS and falls back to a custom implementation on Android. Use it when you want your iOS toasts to match the system style.

ting

ting provides lightweight, animated toast notifications with a small API surface. Good for apps that need simple, styleable toasts without a large dependency.

Building a Custom Toast Component

If you want full control over styling and behavior, build your own toast component using React Native's Animated API.

import React, { useEffect, useRef } from 'react';
import { Animated, Text, StyleSheet } from 'react-native';

const CustomToast = ({ message, visible, duration = 3000, onHide }) => {
  const opacity = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    if (visible) {
      Animated.sequence([
        Animated.timing(opacity, {
          toValue: 1,
          duration: 300,
          useNativeDriver: true,
        }),
        Animated.delay(duration),
        Animated.timing(opacity, {
          toValue: 0,
          duration: 300,
          useNativeDriver: true,
        }),
      ]).start(() => onHide?.());
    }
  }, [visible, duration, opacity, onHide]);

  if (!visible) return null;

  return (
    <Animated.View style={[styles.toast, { opacity }]}>
      <Text style={styles.text}>{message}</Text>
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  toast: {
    position: 'absolute',
    bottom: 50,
    alignSelf: 'center',
    backgroundColor: '#333',
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: 8,
  },
  text: {
    color: '#fff',
    fontSize: 14,
  },
});

export default CustomToast;

This approach works on both Android and iOS. You control animation, styling, duration, and placement. For production use, add a queue system to handle multiple toasts and ARIA props for accessibility.

Platform Differences: Android vs iOS

Feature Android iOS
Native toast API Yes (Toast class) No
React Native built-in ToastAndroid module None
Position options Top, center, bottom Library-dependent
Styling Limited (system default) Fully customizable via libraries
Accessibility Auto-announced by TalkBack Requires ARIA setup for VoiceOver

On Android, ToastAndroid uses the system toast UI, which means limited styling but consistent behavior across apps. On iOS, there is no system toast — every implementation is custom, giving you more design freedom but requiring more work.

Accessibility Tips

Set accessibilityRole="alert" on your toast container so VoiceOver and TalkBack announce the message.

Use accessibilityLiveRegion="polite" on Android to ensure screen readers pick up dynamically appearing toasts.

Display toasts for at least 4-5 seconds to give users with cognitive or visual impairments time to read.

Avoid stacking multiple toasts. Queue them so only one displays at a time.

Frequently Asked Questions

Does React Native have a built-in toast?

Only on Android. The ToastAndroid module wraps the native Android Toast API. iOS has no built-in equivalent. For cross-platform support, use a library like react-native-toast-message.

What is the best React Native toast library?

react-native-toast-message is the most widely used. It supports both platforms, provides success/error/info types out of the box, and allows custom toast components. For iOS-native styling, consider burned.

How do I show a toast on iOS in React Native?

Use a cross-platform library. react-native-toast-message works on both Android and iOS with the same API. Alternatively, build a custom component using the Animated API as shown above.

Can I customize the appearance of ToastAndroid?

No. ToastAndroid uses the system default toast style. You cannot change fonts, colors, or add icons. For custom styling on Android, use a library or build a custom component.

Make Toast Notifications Persistent with MagicBell

Toast notifications disappear after a few seconds. If your app needs users to revisit past notifications, MagicBell provides an embeddable notification inbox that stores messages across channels — including in-app, push, email, and Slack. Users can view, mark as read, and act on notifications at any time.

Get started with MagicBell for free — setup takes less than five minutes.