toastify-react-native icon indicating copy to clipboard operation
toastify-react-native copied to clipboard

TypeScript error: Type 'RefObject<ToastRef | null>' is not assignable to type 'RefObject<ToastRef>' in ToastManager.tsx

Open dan-codes1 opened this issue 6 months ago • 1 comments

Environment:

  • Typescript 5.5.4
  • expo 53
  • react-native 0.79
  • react 19.0

Hello, I'm encountering a TypeScript error when using the latest version of toastify-react-native with TypeScript 5.5.4. When I run npx tsc --noEmit, I receive the following error:

node_modules/toastify-react-native/components/ToastManager.tsx:20:10 - error TS2322: Type 'RefObject<ToastRef | null>' is not assignable to type 'RefObject<ToastRef>'.
  Type 'ToastRef | null' is not assignable to type 'ToastRef'.
    Type 'null' is not assignable to type 'ToastRef'.

20   static toastRef: RefObject<ToastRef> = createRef();

Steps to Reproduce:

  • Install toastify-react-native with expo in a TypeScript project (TypeScript 5.5.4).
  • Use tsconfig.json file:
{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
  • Run npx tsc --noEmit.

Temporary Solution I was able to resolve this issue locally using patch-package. My patch updates the type of toastRef to accept null. Here is the diff:

diff --git a/node_modules/toastify-react-native/components/ToastManager.tsx b/node_modules/toastify-react-native/components/ToastManager.tsx
index 8149099..388a287 100644
--- a/node_modules/toastify-react-native/components/ToastManager.tsx
+++ b/node_modules/toastify-react-native/components/ToastManager.tsx
@@ -17,7 +17,7 @@ import styles from "./styles";
 class ToastManagerComponent extends Component<ToastManagerProps, ToastState> {
   timerId: NodeJS.Timeout | null = null;
   animationRef: Animated.CompositeAnimation | null = null;
-  static toastRef: RefObject<ToastRef> = createRef();
+  static toastRef: RefObject<ToastRef | null> = createRef();
   static defaultProps = defaultProps;
 
   constructor(props: ToastManagerProps) {
@@ -423,7 +423,7 @@ interface ToastManagerType extends React.ForwardRefExoticComponent<
   ToastManagerProps & React.RefAttributes<ToastManagerComponent>
 > {
   setRef: (ref: any) => void;
-  getRef: () => RefObject<ToastRef>;
+  getRef: () => RefObject<ToastRef | null>;
   show: (options: ToastShowParams) => void;
   hide: () => void;
   success: (text: string, position?: ToastPosition) => void;

Can you implement a fix for this?

Thanks.

dan-codes1 avatar Jun 03 '25 18:06 dan-codes1

This may to be similar to https://github.com/zahidalidev/toastify-react-native/pull/68

dan-codes1 avatar Jun 03 '25 20:06 dan-codes1