1.0.0 • Published 5 years ago

rn-toast-alert v1.0.0

Weekly downloads
2
License
MIT
Repository
github
Last release
5 years ago

React native toasting

A simple react native component for creating toasts / alerts . Something similar named react-native-easy-toast does exist but it does not respond to touches meaning that the only difference between rn-toast-alert and react-native-easy-toast is that rn-toast-alert is using pan responder and the other one is not . It looks something like this after installing

Table of contents

Installation

npm install --save rn-toast-alert
OR
yarn add rn-toast-alert

Usage

import React from "react";
import { View, Text, Image } from "react-native";
import Toast from "rn-toast-alert";

class App extends React.Component {
  render() {
    return (
      <View>
        <Toast ref="toast" />
        <Button
          title="Toggle toast"
          onPress={() => {
            this.refs.toast.showToast("Toasting", {
              backgroundColor: "#000000",
              textColor: "#ffffff",
              duration: 1500,
              round: false,
              position: "top"
            });
          }}
        />
      </View>
    );
  }
}

export default App;

Options

All of them are not required :)

PropsTypedefaultDescription
backgroundColorstring#000000Background color for the toast
textColorstring#000000Color of the text
durationnumber2500Time until the toast gets closed
roundbooleantrueSets the border radius to 14 if true and 5 if false
customStylesobject{}Custom style

Created by Adib Mohsin . MIT license