calintamas / react-native-toast-message

Animated toast message component for React Native
MIT License
1.61k stars 254 forks source link

Type safety for Toast.show based on custom toast type #472

Open MetaBenji opened 1 year ago

MetaBenji commented 1 year ago

Is your feature request related to a problem? Please describe.

Is there currently a way to get type safety when calling Toast.show with a custom component. I want to enforce the correct props being passed to my custom toast component

Describe the solution you'd like

Type safety

Describe alternatives you've considered

I haven't thought of any alternatives

Additional context

omeratt commented 11 months ago

same here . need a type safe please.

seyedmostafahasani commented 7 months ago

@calintamas, I think we can close this issue because we added different types of toast.

calintamas commented 7 months ago

@seyedmostafahasani I'd keep it open for now, the issue refers to custom toast types and custom props, for which indeed, there is no type safety.

brunopuzoni commented 2 months ago

This would be nice. In the meantime, what I did was create a class what wrapped the original toast calls and added my default configs and custom methods to it. It ended up pretty nice to use and maintain, similar to the Sonner API.

My Custom Class ```ts import Toast, { ToastShowParams, ToastConfigParams } from 'react-native-toast-message'; export type ToastType = | 'mySuccess' | '...' export type ToastShowOptions = Omit< ToastShowParams, 'text1' | 'type' >; export type MyToastConfig = Record>>; export class MyToast { static readonly defaultOptions: ToastShowParams = { visibilityTime: 3000, ... }; private static show(type: ToastType, options?: ToastShowParams) { Toast.show({ ...MyToast.defaultOptions, ...options, type, }); } static hide() { Toast.hide(); } static success(title: string, options?: ToastShowOptions) { MyToast.show('mySuccess', { text1: title, ...options }); } // other variants } export const TOAST_CONFIG: MyToastConfig = { mySuccess: SuccessToast, other: ... } as const; MyToast.success('Success Title', { onShow: ... }) ```

You still don't have type safety on the private show method, but all the code is right there, and you call your own class where you need it, specifying what you want.