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
• Usage
• Options

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

| Props | Type | default | Description | | --------------- | :-----: | :-----: | :-------------------------------------------------: | | backgroundColor | string | #000000 | Background color for the toast | | textColor | string | #000000 | Color of the text | | duration | number | 2500 | Time until the toast gets closed | | round | boolean | true | Sets the border radius to 14 if true and 5 if false | | customStyles | object | {} | Custom style |

Created by Adib Mohsin . MIT license