React Native Toast Messages: Complete Guide to react-native-toast-message (2026)

Learn how to add toast notifications to React Native apps with react-native-toast-message, including custom toast types, animations, TypeScript integration, and Redux usage patterns.

Toast notifications are the standard way to give users non-blocking feedback — "Saved successfully", "Network error", "Item added to cart". In React Native, react-native-toast-message is the most widely used library for this, offering customisable toast types, smooth animations, and a simple imperative API that works outside of components.

This guide covers everything from installation to advanced custom toast types, TypeScript integration, and Redux patterns.

Installation

npm install react-native-toast-message
# or
yarn add react-native-toast-message

No native linking required — it's a pure JavaScript library. No pod install or rebuilding needed.

Basic Setup

Add the <Toast /> component at the root of your app, as a sibling to your navigation structure (not nested inside it):

// App.tsx
import Toast from 'react-native-toast-message';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <>
      <NavigationContainer>
        {/* Your navigation stack */}
        <RootNavigator />
      </NavigationContainer>
      {/* Toast must be OUTSIDE and AFTER NavigationContainer */}
      <Toast />
    </>
  );
}

Showing Toasts

Call Toast.show() from anywhere — inside components, service functions, Redux thunks, Axios interceptors, anywhere:

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

// Success toast
Toast.show({
  type: 'success',
  text1: 'Profile saved!',
  text2: 'Your changes have been saved successfully.',
  position: 'top',       // 'top' | 'bottom'
  visibilityTime: 4000,  // ms to show (default 4000)
  autoHide: true,
  topOffset: 30,
  onShow: () => console.log('Toast appeared'),
  onHide: () => console.log('Toast hidden'),
  onPress: () => Toast.hide(),
});

// Error toast
Toast.show({
  type: 'error',
  text1: 'Upload failed',
  text2: 'Check your internet connection and try again.',
});

// Info toast
Toast.show({
  type: 'info',
  text1: 'New update available',
  visibilityTime: 6000,
});

// Hide programmatically
Toast.hide();

Built-in Toast Types

The library ships three types out of the box:

success — green accent, checkmark icon
error — red accent, X icon
info — blue accent, info icon

Custom Toast Types

Create a custom toast by providing a toastConfig to the <Toast /> component:

// toastConfig.tsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { BaseToast, ErrorToast, ToastConfig } from 'react-native-toast-message';

export const toastConfig: ToastConfig = {
  // Override the default success type
  success: (props) => (
    <BaseToast
      {...props}
      style={{ borderLeftColor: '#22c55e', borderRadius: 8 }}
      contentContainerStyle={{ paddingHorizontal: 15 }}
      text1Style={{ fontSize: 15, fontWeight: '600', color: '#111827' }}
      text2Style={{ fontSize: 13, color: '#6b7280' }}
    />
  ),

  // Override error type
  error: (props) => (
    <ErrorToast
      {...props}
      style={{ borderLeftColor: '#ef4444' }}
      text1Style={{ fontSize: 15, fontWeight: '600' }}
      text2NumberOfLines={3}
    />
  ),

  // Add a completely custom type
  warning: ({ text1, text2, ...rest }) => (
    <View style={styles.warningContainer}>
      <View style={styles.warningIcon}>
        <Text style={styles.warningEmoji}>⚠️</Text>
      </View>
      <View style={styles.warningText}>
        <Text style={styles.warningTitle}>{text1}</Text>
        {text2 ? <Text style={styles.warningSubtitle}>{text2}</Text> : null}
      </View>
    </View>
  ),
};

const styles = StyleSheet.create({
  warningContainer: {
    height: 60,
    width: '90%',
    backgroundColor: '#fef3c7',
    borderRadius: 8,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 15,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.08,
    shadowRadius: 4,
    elevation: 4,
  },
  warningIcon: { marginRight: 12 },
  warningEmoji: { fontSize: 22 },
  warningText: { flex: 1 },
  warningTitle: { fontSize: 14, fontWeight: '600', color: '#92400e' },
  warningSubtitle: { fontSize: 12, color: '#b45309' },
});

// App.tsx — pass config to Toast
<Toast config={toastConfig} />

// Usage
Toast.show({ type: 'warning', text1: 'Low battery', text2: 'Connect your charger.' });

TypeScript Integration

The library includes TypeScript types. Extend them for custom toast types:

// types/toast.d.ts
import 'react-native-toast-message';

declare module 'react-native-toast-message' {
  interface ToastShowParams {
    type?: 'success' | 'error' | 'info' | 'warning';
  }
}

// Now TypeScript knows about 'warning'
Toast.show({ type: 'warning', text1: 'Heads up!' });

Using Toasts in Axios Interceptors

One of the most powerful patterns — show error toasts globally for all failed API calls:

// api/axios.ts
import axios from 'axios';
import Toast from 'react-native-toast-message';

const api = axios.create({ baseURL: process.env.API_URL });

api.interceptors.response.use(
  (response) => response,
  (error) => {
    const status = error.response?.status;
    const message = error.response?.data?.message || 'Something went wrong';

    if (status === 401) {
      Toast.show({ type: 'error', text1: 'Session expired', text2: 'Please log in again.' });
    } else if (status === 429) {
      Toast.show({ type: 'warning', text1: 'Too many requests', text2: 'Please slow down.' });
    } else if (status >= 500) {
      Toast.show({ type: 'error', text1: 'Server error', text2: message });
    }

    return Promise.reject(error);
  }
);

export default api;

Using Toasts with Redux Toolkit

// store/slices/authSlice.ts
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import Toast from 'react-native-toast-message';
import api from '../api/axios';

export const login = createAsyncThunk(
  'auth/login',
  async ({ email, password }: { email: string; password: string }, { rejectWithValue }) => {
    try {
      const { data } = await api.post('/auth/login', { email, password });
      Toast.show({ type: 'success', text1: 'Welcome back!', text2: data.user.name });
      return data;
    } catch (error: any) {
      Toast.show({ type: 'error', text1: 'Login failed', text2: error.response?.data?.message });
      return rejectWithValue(error.response?.data);
    }
  }
);

Positioning and Safe Area Handling

import { useSafeAreaInsets } from 'react-native-safe-area-context';

// In App.tsx — adjust Toast offset for safe area
function ToastWrapper() {
  const insets = useSafeAreaInsets();
  return <Toast topOffset={insets.top + 10} />;
}

// Bottom toast — great for cart/save confirmations
Toast.show({
  type: 'success',
  text1: 'Added to cart',
  position: 'bottom',
  bottomOffset: 80, // above tab bar
});

Common Pitfalls

Toast appears behind modals: Move <Toast /> to the very end of the root component's JSX, after all navigation and modal containers
Toast doesn't show during navigation: Ensure <Toast /> is outside and after <NavigationContainer>
Multiple toasts stacking: Call Toast.hide() before Toast.show() if you want to replace an existing toast
Not working in Expo Go: Works fine — no native code required

Conclusion

react-native-toast-message strikes the ideal balance between simplicity and customisability. The imperative Toast.show() API works everywhere — in components, Redux thunks, and Axios interceptors. Start with the three built-in types, add a custom warning type when needed, configure positioning for safe areas, and integrate with your API layer for global error handling. With these patterns, your React Native app will have consistent, elegant user feedback throughout.