How to Display Toast Message in React Native

To show a toast message in React Native, you can make use of the ToastAndroid module available natively for Android. You can, however, use a third-party library that supports both Android and iOS.

Using ToastAndroid (Android Only)

React Native provides the ToastAndroid module to display toast messages on Android. Here’s how you can use it:

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

class App extends Component {
  showToast = () => {
    ToastAndroid.show("This is a toast message", ToastAndroid.SHORT);
  };

  render() {
    return (
      <View style={styles.container}>
        <Button title="Show Toast" onPress={this.showToast} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Using a Third-Party Library (Cross-Platform)

For a cross-platform solution that works on both Android and iOS, you can use a third-party library.

Example using react-native-toast-message third-party library.
Install the library:

npm install react-native-toast-message

Or

yarn add react-native-toast-message

Set up the toast provider in your main app component:

import React from 'react';
import { Button, View, StyleSheet } from 'react-native';
import Toast from 'react-native-toast-message';

const App = () => {
  const showToast = () => {
    Toast.show({
      type: 'success',
      text1: 'Hello',
      text2: 'This is a toast message 👋',
    });
  };

  return (
    
      
       Toast.setRef(ref)} />
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Configure the library (typically in the index.js file):

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import Toast from 'react-native-toast-message';

AppRegistry.registerComponent(appName, () => App);

// Register toast
Toast.register();

This way you can show toast in react native applications.