rootstrap/react-native-use-toast

React native hook for integrating an extensible/ultra-customizable toast 📬

react-native-use-toast's Issues

Positioning toast

Description

We need to implement a position property on useToast hook, I think something like this

const { onOpen, onClose } = useToast(<CustomToast />, { position: 'bottom', positionOffset: 30 })

in which:

• position accepts (for now) bottom and top(default value) properties, which positioning the toast on center-bottom/center-top of the screen
• positionOffset accepts offset of the screen position, with a default value of 20

Create useToast Provider/Hook

Description

We need to implement the basic hook to render a component passed as a param on an absolute position.
According to primary research about how to render on the virtual DOM root, we need to provide an app wrapper (Provided) to distinct the absolute position of the screen.

---

The basic API of the hook is the next one:

const {onOpen, onClose} = useToast (<CustomToastComponent />);

In which:

• useToast is a hook invokes in whatever component inside the app
• onOpen is a handler function that when is invoked, shows<CustomToastComponent />in a fixed position (for now)
• onClose is a handler function that when is invoked remove<CustomToastComponent />from the app if it was shown, in another case, it doesn't anything

---

The basic API of the provider is the next one:

<ToastProvider>
  <App />
<ToastProvider />

In which:

• App is the application
• ToastProvider is a provider that allows useToast hook to show the custom component from anywhere in the application.

---

** Additional context **
To implementing the Provider component, is recommended use Context API

Auto-Close feature

Description

It will nice if we can add as a property of the hook the duration in milliseconds or false value to auto-close the toast.

---

const { onOpen } = useToast(<CustomToast />, { autoClose: 500 });

in which:

• autoClose indicates the milliseconds that the toast will open when onOpen function invoked
• To default autoClose is false, this indicates that we need to invoke onClose to close the modal

---

Toasts prop on the Toast provider component

Description

In order to increase the scalability and the dev experience using the library, we need to add a prop calling toasts to the ToastProvider component, this prop allows our users to implement in the provider an easy way of calling different types of Toast components, only calling by their key name assigned in the toasts object which has as a value the custom component.

Expected Behavior

As an example of the expected behavior, we have toastsComponents objects declared in this way

const toastsComponents = {'success': <ToastSuccess />, 'error': <ToastError />};

The ToastsProvider receive the prop according to this

<ToastProvider toasts={toastsComponents}>
  <App />
<ToastProvider />

And when the hook useToast receive on of the keys declared on toastsComponents, then acts the same way it would if you were passing a component param

// Same as useToast(<ToastSuccess />)
const { onClose , onOpen } = useToast('success');

Add Expo QR demo to Readme

Description

In order to improve documentation of the library, we can create an integration with Expo Application for android devices by adding a QR code in our readme. In that way, our potential users can test the demo with the Expo App.

Create a demo project

Description

We need to create a demo project to show to the open-source community how to use this library in a simple react native application.

Checklist 📝

• Add a demo folder on the repository
• Create a basic App using Expo
• Create a screen component that has a button for open a toast
• Create a component with a custom Toast
• Add a preview and description to Readme 🤓

Add CodeClimate integration

Description

It will nicely add the integration with CodeClimate, the maintainability percentage badge to Readme, and the continuous integration task to our flow.

Useful Docs 📚

• https://codeclimate.com/github/codeclimate/codeclimate/badges