Skip to content

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

Description

@dan-codes1

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions