lachlanroche/react-native-toast-native

A native and easy to use toast plugin for react-native

react-native-toast-native

React Native Toast is a toast component for both Android and iOS. it uses scalessec/Toast for iOS;

Demo:

Getting started

$ npm install react-native-toast-native --save

Mostly automatic installation

$ react-native link react-native-toast-native

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-toast-native and add RNToastNative.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNToastNative.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.toast.RCTToastPackage; to the imports at the top of the file
• Add new RCTToastPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':react-native-toast-native'
   project(':react-native-toast-native').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-toast-native/android')
   

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

       compile project(':react-native-toast-native')
   

Usage

It's just the same as ToastAndroid

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

Toast.show(); // Default toast message is shown.
Toast.show('This is a toast.'); // Specific message is shown with default duration("SHORT") and poistion("TOP") and styles.
Toast.show('This is a long toast.',Toast.LONG); //Specific message and duration are shown with default position and styles.

It is higly customasible. Just provide a style object as a parameter. example:

import Toast from 'react-native-toast-native';
 const styles={
                 width,
                 height,
                 backgroundColor,
                 color,
                 borderWidth,
                 borderColor,
                 borderRadius
 }
 
 Toast.show('This is a long toast.',Toast.SHORT,Toast.TOP,styles); 
 // Customizable toast message is shown with specific message,duration and position.

Options

You can style the toast with below options; Android:

{
              width,
              height,
              backgroundColor,
              color,
              borderWidth,
              paddingLeft,
              paddingRight,
              paddingBottom,
              paddingTop,
              fontSize,
              lineHeight,
              xOffset,
              yOffset,
              letterSpacing,
              fontWeight
}

Ios:

  {
                  width,
                  height,
                  backgroundColor,
                  color,
                  borderWidth,
                  borderColor,
                  borderRadius
  }
  

if you want to make a customizable toast,you add an object like above to show and showGravity

Example usage:

import Toast from 'react-native-toast-native';
import {Platform} from 'react-native';
const style={
                             backgroundColor: "#4ADDFB",
                             width: 300,
                             height: Platform.OS === ("ios") ? 50 : 100,
                             color: "#ffffff",
                             fontSize: 15,
                             lineHeight: 2,
                             lines: 4,
                             borderRadius: 15,
                             fontWeight: "bold",
                             yOffset: 40
                         };
  Toast.show(message, Toast.SHORT, Toast.TOP,style);