https://github.com/georgehop/react-native-tm

:triangular_flag_on_post: Fully customizable toast component for your react-native applications supported on IOS and Android. Also you can use it with expo or pure react-native. :triangular_flag_on_post:
https://github.com/georgehop/react-native-tm

android animated customizable expo ios react react-native toast toast-notifications

Last synced: 4 months ago
JSON representation

:triangular_flag_on_post: Fully customizable toast component for your react-native applications supported on IOS and Android. Also you can use it with expo or pure react-native. :triangular_flag_on_post:

• Host: GitHub
• URL: https://github.com/georgehop/react-native-tm
• Owner: GeorgeHop
• License: mit
• Created: 2021-05-28T22:13:00.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2022-03-01T16:00:49.000Z (over 4 years ago)
• Last Synced: 2025-09-23T04:17:20.730Z (10 months ago)
• Topics: android, animated, customizable, expo, ios, react, react-native, toast, toast-notifications
• Language: JavaScript
• Homepage: https://github.com/GeorgeHop/react-native-tm
• Size: 35.2 KB
• Stars: 3
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-native-tm

Fully customizable toast component for your react-native applications supported on IOS and Android. Also you can use it with expo or pure react-native. 

![ezgif com-gif-maker (8)](https://user-images.githubusercontent.com/47904385/120900240-1225d380-c634-11eb-9842-3aadf5902967.gif)

# Installation

expo: `expo install react-native-tm`  

npm: `npm i react-native-tm`  

yarn: `yarn add react-native-tm`

## Basic usage

```JS

import Toast from "react-native-tm";

export default function YourComponent() {

   return(

      

      

   )

}

// more about customizing below

```

## How customize your toast ? 

```JS

import Toast from "react-native-tm";

export default function YourComponent() {

   

   return(

      

      

        // and for sure you can add childrens here

        // to customize your toast 

        

        

            

                  Title top

            

            

                  Description on the bottom

            

        

      

   )

}

```

## How customize your animation ? 

By default toast use the linear animation, just show and hide nothing special. But if you want to change the animation type use description below.

#### For bounce animation.

```JS

     

```



#### For elastic animation.

```JS

     

```



## Props

Below are the props you can pass to the React Component.

| Prop  | Type | Default | Example | Description |

| ------------- | ------------- | ------------- | ------------- | ------------- |

| show  | boolean | | show={true} | Put the toast state |

| animationType | string | | animationType={'bounce'} | If you what different animations on your toast |

| toastOnPress | function | | toastOnPress={() => console.log('check')} | You can add many other functions here or just navigate to other screen |

| withClose | boolean | false | withClose={true} | Added posibility to close toast on press. You can use it with toastOnPress at one time. |

| children | component | | ```  ``` | You can add yout own component for example messages from users in your app or internet connection notifications. |

| style | object | | {toast: {backgroundColor: 'black', height: 50}} | The styles object for styling the toast details. More about styling in Custom styling step.|

| showingDuration | int | 8000 | showingDuration={3000} | How much time toast will show on the screen |

| statusBarHeight | int | 180 | statusBarHeight={150} | If you have a specific status bar on your device you may want to pass this props to aware some UI bugs on the device |

| onHide  | function | | onHide={() => yourFunctionToDoSomething()} | Function which call when toast hiding. |

## ToDos

1. TypeScript support.

2. More animation for customizing.