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

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

Android

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

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')

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);

React Native Toast For iOS/Android