React-Native Toast

Syntax

React-Native Toast can be used to display a toast message in a simple and configurable way within the React Native app.

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

Toast.show({
  type: 'success',
  text1: 'Success',
  text2: 'Task completed successfully!'
});

Example

import React, { useState } from 'react';
import { Button, Text } from 'react-native';
import Toast from 'react-native-toast-message';

const MyComponent = () => {

  const [isLoading, setIsLoading] = useState(false);

  const handleButtonClick = () => {
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
      Toast.show({
        type: 'success',
        text1: 'Success',
        text2: 'Task completed successfully!'
      });
    }, 3000);
  };

  return (
    <>
      <Button title={isLoading ? 'Loading...' : 'Submit'} disabled={isLoading} onPress={handleButtonClick} />
      <Toast ref={ref => Toast.setRef(ref)} />
    </>
  );
};

export default MyComponent;

Output

When the button is pressed in the above example, a toast message is displayed with the message "Success: Task completed successfully!".

Explanation

React-Native Toast is a plugin used to display messages in the form of a toast. Toast message is like a small notification that appears on the screen for a short time to inform the user about the status of any action.

React-Native Toast is a highly customizable plugin and provides various options to change the color, duration, and position of the toast.

Use

React-Native Toast can be used in any React Native component to display toast messages.

The various options that can be used with Toast.show() method include:

• type: The type of toast (usually success, error, warning, or info)
• text1: The main text displayed in the toast message
• text2: The secondary text displayed in the toast message
• position: The position of the toast (top, center, or bottom)
• visibilityTime: The duration of the toast message (in milliseconds)
• autoHide: Whether the message should hide automatically after a certain duration or not

Important Points

• React-Native Toast is a plugin that needs to be installed separately in the project.
• It is important to specify a reference for the Toast component using Toast.setRef(ref) method. The reference can be set as shown in the example above.
• React-Native Toast is highly customizable and provides various options to customize the appearance and behavior of toast messages.

Summary

React-Native Toast is a powerful plugin used to display toast messages in React Native apps. With its customizable options and highly configurable options, React-Native Toast is a popular choice for developers to give feedback to users about the status of actions in the app.