toastify-react-native
toastify-react-native copied to clipboard
TypeScript error: Type 'RefObject<ToastRef | null>' is not assignable to type 'RefObject<ToastRef>' in ToastManager.tsx
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.
This may to be similar to https://github.com/zahidalidev/toastify-react-native/pull/68