react-native-toast-native

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

Showing:

Popularity

Downloads/wk

352

GitHub Stars

98

Maintenance

Last Commit

2yrs ago

Contributors

5

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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](http://facebook.github.io/react-native/docs/toastandroid.html)
    
    ```javascript
    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:
  
  ```javascript
  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);
  
 

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial