toast-rn

React Native Toast

Installation   |   Functionalities   |   Documentation   |   License   |   Technology   |   Autor   |   Demo

🔧 Installation

# Install React Native Toast

yarn add toast-rn

# or if you prefer

npm install toast-rn



# Install React Native Vector Icons

yarn add react-native-vector-icons

# or if you prefer

npm install react-native-vector-icons

# Any problem with icons, try to link
react-native react-native-vector-icons
# or
npx react-native react-native-vector-icons

✨ Functionalities

✔️ Creating toast messages.

😊 Simple documentation

//By default visibleLine is true
visibleLine?: boolean = Enable duration line

//By default lineAnimation is ['#1f1f1f', '#ccc']
lineAnimation?: string[]; = Add color to visibleLine

//By default isBorder is true
isBorder?: boolean = Add or remove rounded corners

//By default type is 'info'
type?: string = Accepted > 'success' | 'error' | 'info' | 'warning';

//By default direction is 'right'
direction?: string = Accepted > 'left' | 'right' | 'top' | 'bottom';

//By default styleAnimation is 'bounce'
styleAnimation?: string = Accepted > 'bounce' | 'linear' | 'circle' | 'step0' | 'step1';

//Required to submit a title
title: string = The title of the toast;

description?: string = The description of toast;

//When using this field, the description field will not appear
listDescriptions?: String[] = Accepts a 'string' list;

//How long the message will stay on the screen
duration?: number = Accepts Type number;

⭐ Example

  import React from 'react';
  import ToastProvider from 'toast-rn';
  import Home from './home';

  const App = () => {

    return (
      <ToastProvider>
        <Home />
      </ToastProvider>
    )
  };

  export default App;

  //home.tsx
  import React from 'react';
  import { View, Text } from 'react-native';

  import { useToast, IToastMessages } from 'toast-rn';

  //A type is available for use with typescript (IToastMessages)

  const Home = () => {
    const { addToast } = useToast();

    const handleAddNewMessage = () => {
      addToast({
        title: 'Success register',
        description: 'Ready now and to access your profile',
        //If you prefer a message list instead of a description
        // listDescriptions: [
        //   'Empty email field',
        //   'Empty password field',
        //   'Empty name field',
        // ],
        lineAnimation: ['#000', '#fff'],
        direction: 'right',
        styleAnimation: 'bounce',
        duration: 6, // 6 seconds
        type: 'success',
      });
    }
    return (
      <View>
        <Text>
          React Native Toast Message
        </Text>
      </View>
    )
  }

  export default Home;

🚀 Technology

The following tools were used in the construction of the project:

• Node.js
• React Native
• TypeScript
• Vector Icons

📝 License

This project is under MIT license. See the archive LICENSE for more details.

Done with ❤️ per Mateus Conceição

 

Back to the top