Skip to content

onemolegames/react-native-toast-native

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
ios
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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 LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-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 PhasesLink 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
  1. 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')
    
  2. 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);

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published