jeanverster / react-native-styled-toast

A theme friendly, easy to use react-native toast component built using styled-components and styled-system.
MIT License
315 stars 33 forks source link

Re-render children when add toast #100

Open ngvcanh opened 1 year ago

ngvcanh commented 1 year ago

This package has issues:

Re-render all app when add new a toast

In ToastProvider, you make state:

const [toasts, setToasts] = React.useState<FullToastConfig[]>([]) // line 49

And when has a new toast, this state will be update, ToastProvider re-render, that mean children also re-render. This is an error of performance.

Should make the component as children of ToastProvider (Ex: ToastContainer) manage toasts state. This component is ForwardRefExoticComponent.

When add toast, let call add function from ref of ToastContainer

Support children for React 18

In Context.tsx, I suggest code:

const ToastProvider: React.FC<Omit<ToastContextType, 'toast'>> = ({

change to:

export type ToastProviderProps = Omit<ToastContextType, 'toast'>;
const ToastProvider: React.FC<PropsWithChildren<ToastProviderProps >> = ({