react-native-tm

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.

Installation

expo: expo install react-native-tm
npm: npm i react-native-tm
yarn: yarn add react-native-tm

Basic usage

import Toast from "react-native-tm";

export default function YourComponent() {
   return(
      <YourComponentsHere></YourComponentsHere>
      <Toast
        show={true}
        withClose={true}
        style={{
          toast: {
            width: '100%',
            height: 50,
            backgroundColor: 'red'
          }
        }}
      />
   )
}

// more about customizing below

How customize your toast ?

import Toast from "react-native-tm";

export default function YourComponent() {
   
   return(
      <YourComponentsHere></YourComponentsHere>
      <Toast
        show={true}
        // set the animation type of toast choose the best for you in props
        animationType={'bounce'}
        // add the closing toast function on press
        withClose={true}
        // pass toast styles object to style
        style={{
          toast: {
            width: '100%',
            height: 50,
            backgroundColor: 'red'
          }
        }}
      >
        // and for sure you can add childrens here
        // to customize your toast 
        <View style={{height: 50, width: 50, backgroundColor: 'black', borderRadius: 30}}/>
        <View
          style={{
              marginLeft: 10
          }}
        >
            <Text>
                  Title top
            </Text>
            <Text>
                  Description on the bottom
            </Text>
        </View>
      </Toast>
   )
}

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.

<Toast ... // Add the animation type bounce animationType={'bounce'} ... />

For elastic animation.

<Toast ... // Add the animation type elastic animationType={'elastic'} ... />

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		<Toast><YourComponent/></Toast>	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.