react-native-swipeable-toast-basic

1.2.0 • Public • Published

This is a custom swipeable toast basic. My build versions: 1- react-native-gesture-handler: 2.9.0 2- react-native-reanimated: 2.14.4

Installation

  npm install react-native-swipeable-toast-basic

Doc

react-native-reanimated

react-native-gesture-handler

Usage

    //App.js
    import { GestureHandlerRootView } from "react-native-gesture-handler";

    <GestureHandlerRootView style={{ flex: 1 }}>
        //Your codes in here
    </GestureHandlerRootView>;

    //Usage in screen
    import React, { useRef } from "react";
    import { Button } from "react-native";
    import SwipeableToast from "react-native-swipeable-toast-basic";

    const toastRef = useRef(null);

    <SafeAreaView style={{flex: 1}}>
        <SwipeableToast ref={toastRef} />
    </SafeAreaView>

    <Button
        title="Show Swipeable Toast Basic"
        onPress={() => {
            toastRef.current.showToast({
                type: "success", // success - info - warning - error
                title: "Title",
                text: "Text",
                duration: 3000,
                toastWidth: "90%",
                toastPadding: 16,
                toastBorderRadius: 16,
                toastBorderWidth: 0.5,
                toastSuccessBgColor: "#DEF1D7",
                toastSuccessBorderColor: "#1F8722",
                toastInfoBgColor: "#ECF4FE",
                toastInfoBorderColor: "#1F5F87",
                toastWarningBgColor: "#FEF7EC",
                toastWarningBorderColor: "#F08135",
                toastErrorBgColor: "#FAE1DB",
                toastErrorBorderColor: "#D9100A",
                toastSuccessTitleColor: "#1F8722",
                toastInfoTitleColor: "#1F6587",
                toastWarningTitleColor: "#F08135",
                toastErrorTitleColor: "#D9100A",
                toastSuccessTextColor: "#1F8722",
                toastInfoTextColor: "#1F6587",
                toastWarningTextColor: "#F08135",
                toastErrorTextColor: "#D9100A",
            });
        }}
    />

API

prop type description default
type String Toast type. "success"
title String Toast title. "Non"
text String Toast text. "Non"
duration Number Toast duration. 3000
toastWidth String Toast width. "90%"
toastPadding Number Toast padding. 16
toastBorderRadius Number Toast border radius. 16
toastBorderWidth Number Toast border width. 0.5
toastSuccessBgColor String Toast bg color. "#DEF1D7"
toastSuccessBorderColor String Toast border color. "#1F8722"
toastInfoBgColor String Toast bg color. "#ECF4FE"
toastInfoBorderColor String Toast border color. "#1F5F87"
toastWarningBgColor String Toast bg color. "#FEF7EC"
toastWarningBorderColor String Toast border color. "#F08135"
toastErrorBgColor String Toast bg color. "#FAE1DB"
toastErrorBorderColor String Toast border color. "#D9100A"
toastSuccessTitleColor String Toast title color. "#1F8722"
toastInfoTitleColor String Toast title color. "#1F6587"
toastWarningTitleColor String Toast title color. "#F08135"
toastErrorTitleColor String Toast title color. "#D9100A"
toastSuccessTextColor String Toast text color. "#1F8722"
toastInfoTextColor String Toast text color. "#1F6587"
toastWarningTextColor String Toast text color. "#F08135"
toastErrorTextColor String Toast text color. "#D9100A"

Package Sidebar

Install

npm i react-native-swipeable-toast-basic

Weekly Downloads

0

Version

1.2.0

License

ISC

Unpacked Size

62.3 kB

Total Files

8

Last publish

Collaborators

  • yigithan10