StackShare

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 (CocoaPods)

Add the following to your podfile:

pod 'RNToastNative', :path => '../node_modules/react-native-toast-native/ios`

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