react-native-toastee

A react-native toast notification with features like swipeable, auto dismiss, and toast positioning

Features

• 🛠️ Flexible setup
• ✅ Swipeable (Horizontal and Vertical) and auto dismiss
• 🔝 Toast positioning (top & bottom)
• 💅 Customizable
• 🙈 Toast shows complete message. No hidden text

Installation

npm install react-native-toastee
# or
yarn add react-native-toastee

Peer Dependencies Installation

These library depends on react-native-reanimated, react-native-safe-area-context, and react-native-gesture-handler. Ensure you install these packages and follow their config instructions

yarn add react-native-reanimated react-native-safe-area-context react-native-gesture-handler

Usage

Render the <ToastProvider /> in the root of your app. Then, you can call the toast() function in any part of the app.

// App.js
// ... hidden imports
import { ToastProvider, toast } from 'react-native-toastee';

export const App () => {
  const handleToast = () => {
    toast('Hello from react-native-toastee');
  };

    return (
      <SafeAreaProvider>
        <GestureHandlerRootView style={{ flex: 1 }}>
          <View style={styles.container}>
            <Button title="Default Toast" onPress={handleToast} />

            <ToastProvider />
          </View>
        </GestureHandlerRootView>
      </SafeAreaProvider>
    )
}
//...

API Documentation

<ToastProvider />

The component should be rendered at the root of the application.

Example usage

// ...
<ToastProvider position="top" autoDismiss={5000} />
// ...

| Props | Type | Default | Description | | --------------------- | ---------------- | :-----: | ------------------------------------------------------------- | | position | top / bottom | top | Toast position | | autoDismiss | number | 3000 | The time at which the toast will be dismissed in milliseconds | | style | ViewStyle | - | Toast Container styling | | textStyle | TextStyle | - | Text styling | | zIndex | number | 1500 | The z-index of the toast | | isHorizontalSwipeable | boolean | true | Allow horizontal swipe |

toast()

To show a toast, call the function toast() from anywhere in the app. Ensure the <ToastProvider /> is already added to your app

Example usage

Default

  toast('Hello from react-native-toastee');

Success

  toast('Hello from react-native-toastee', 'success');

Error

  toast('Hello from react-native-toastee', 'error');

<ToastUIView />

To create a custom toast that is specific to a screen, you can use the <ToastUIView />.

Example usage

import React from 'react';
import { StyleSheet, View, Button } from 'react-native';
import { ToastUIView } from 'react-native-toastee';

export const App = () => {
  const [isVisible, setIsVisible] = React.useState(false);

  const toggleCustomToast = () => setIsVisible(!isVisible);

  return (
    <View>
      <Button title="Custom Toast" onPress={toggleCustomToast} />

      <ToastUIView
        position="top"
        autoDismiss={5000}
        message="This is a custom toast"
        onDismiss={toggleCustomToast}
        style={styles.toast}
        preset="success"
        visible={isVisible}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  toast: {
    backgroundColor: 'white',
  },
});

In addition to Props in <Toastprovider /> :

| Props | Type | Default | Description | | --------- | -------------------- | :-------: | ---------------------------------------- | | onDismiss | Function | - | Function is called to dismiss the toast. | | preset | success or error | success | Toast type | | message | string | | The text to render | | visible | boolean | | Toast visibility |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library