diff --git a/package.json b/package.json
index 0cc1a8b..68b1948 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-native-hook-notification",
- "version": "2.2.8",
+ "version": "2.2.9",
"license": "MIT",
"main": "dist/main/index.js",
"typings": "dist/main/index.d.ts",
diff --git a/src/presentation/components/Notification/index.tsx b/src/presentation/components/Notification/index.tsx
index 4284362..597f260 100644
--- a/src/presentation/components/Notification/index.tsx
+++ b/src/presentation/components/Notification/index.tsx
@@ -98,33 +98,6 @@ export const Notification = ({
)}
- {showButtonClose && (
-
-
- ✕
-
-
- )}
-
{!!title && (
>
+
+ {showButtonClose && (
+
+
+ ✕
+
+
+ )}
);
diff --git a/src/presentation/components/Notification/styles.ts b/src/presentation/components/Notification/styles.ts
index 8ab8d93..4d6d675 100644
--- a/src/presentation/components/Notification/styles.ts
+++ b/src/presentation/components/Notification/styles.ts
@@ -161,6 +161,7 @@ export const styles = StyleSheet.create({
buttonCloseText: {
fontSize: 14,
+ lineHeight: 16,
},
buttonCloseTextcolored: { color: Colors.Grey },
diff --git a/src/presentation/components/Notification/useController.ts b/src/presentation/components/Notification/useController.ts
index 50a6440..c150282 100644
--- a/src/presentation/components/Notification/useController.ts
+++ b/src/presentation/components/Notification/useController.ts
@@ -25,6 +25,7 @@ import {
import { getAnimation } from '../../utils/getAnimation';
import { useNotificationWidth } from '../../hooks/useNotificationWidth';
import { useLimitToRemove } from '../../hooks/useLimitToRemove';
+import { useIsMounted } from '../../hooks/useIsMounted';
type UseControllerHookProps = {
dragDirection: NotificationDragDirection;
@@ -88,67 +89,65 @@ export const useController: UseControllerHook = ({
const positionOnScreen = useSharedValue(0);
const [isPaused, toggleIsPaused] = useToggle(false);
- const onTogglePause = useCallback((): void => {
- 'worklet';
+ const isMounted = useIsMounted();
- if (pauseOnPress) {
- runOnJS(toggleIsPaused)();
+ const onVerifyCanExecuteTogglePause = (): void => {
+ const canExecute = pauseOnPress && isMounted();
+ if (canExecute) {
+ toggleIsPaused();
}
- }, [pauseOnPress, toggleIsPaused]);
+ };
+
+ const onTogglePause = (): void => {
+ 'worklet';
+
+ runOnJS(onVerifyCanExecuteTogglePause)();
+ };
const width = useNotificationWidth();
const { limitToRemove, onGetNotificationHeight } = useLimitToRemove({
dragDirection,
width,
});
- const onDirectionXRemover = useCallback(
- (pos: number): void => {
- 'worklet';
+ const onDirectionXRemover = (pos: number): void => {
+ 'worklet';
- if (
- dragDirection === 'x' &&
- (pos > limitToRemove || pos < -limitToRemove)
- ) {
- runOnJS(onRemove)();
- }
- },
- [dragDirection, limitToRemove, onRemove],
- );
+ if (
+ dragDirection === 'x' &&
+ (pos > limitToRemove || pos < -limitToRemove)
+ ) {
+ runOnJS(onRemove)();
+ }
+ };
- const onDirectionYRemover = useCallback(
- (pos: number): void => {
- 'worklet';
+ const onDirectionYRemover = (pos: number): void => {
+ 'worklet';
- if (
- dragDirection === 'y' &&
- (pos > limitToRemove || pos < -limitToRemove)
- ) {
- runOnJS(onRemove)();
- }
- },
- [dragDirection, limitToRemove, onRemove],
- );
+ if (
+ dragDirection === 'y' &&
+ (pos > limitToRemove || pos < -limitToRemove)
+ ) {
+ runOnJS(onRemove)();
+ }
+ };
- const onCanUpdatePosition = useCallback(
- (pos: number): boolean => {
- 'worklet';
+ const onCanUpdatePosition = (pos: number): boolean => {
+ 'worklet';
- if (!draggable) {
- return false;
- }
- if (dragDirection === 'x') {
- return true;
- }
- if (/top/.test(position) && pos > 0) {
- return false;
- }
- if (/bottom/.test(position) && pos < 0) {
- return false;
- }
+ if (!draggable) {
+ return false;
+ }
+ if (dragDirection === 'x') {
return true;
- },
- [dragDirection, position, draggable],
- );
+ }
+ if (/top/.test(position) && pos > 0) {
+ return false;
+ }
+ if (/bottom/.test(position) && pos < 0) {
+ return false;
+ }
+ return true;
+ };
const canTogglePause = pauseOnPress && autoClose;
const contextIndex = `position${transitionDirection}` as 'positionX';
@@ -180,14 +179,7 @@ export const useController: UseControllerHook = ({
positionOnScreen.value = withTiming(0);
},
},
- [
- onDirectionXRemover,
- onCanUpdatePosition,
- onDirectionYRemover,
- onCanUpdatePosition,
- onTogglePause,
- canTogglePause,
- ],
+ [onTogglePause, canTogglePause],
);
const [animationEnteringFinish, toggleAnimationEnteringFinish] =
diff --git a/src/presentation/hooks/__tests__/useIsMounted.spec.ts b/src/presentation/hooks/__tests__/useIsMounted.spec.ts
new file mode 100644
index 0000000..50d3eb3
--- /dev/null
+++ b/src/presentation/hooks/__tests__/useIsMounted.spec.ts
@@ -0,0 +1,19 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useIsMounted } from '../useIsMounted';
+
+describe('useIsMounted hook', () => {
+ it('should be able to return mounted value', async () => {
+ const { result, rerender } = renderHook(useIsMounted);
+ rerender();
+
+ expect(result.current()).toBeTruthy();
+ });
+
+ it('should be able to return unmounted value', async () => {
+ const { result, unmount } = renderHook(useIsMounted);
+ unmount();
+
+ expect(result.current()).toBeFalsy();
+ });
+});
diff --git a/src/presentation/hooks/useIsMounted.ts b/src/presentation/hooks/useIsMounted.ts
new file mode 100644
index 0000000..7bfffb6
--- /dev/null
+++ b/src/presentation/hooks/useIsMounted.ts
@@ -0,0 +1,15 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+export const useIsMounted = (): (() => boolean) => {
+ const isMount = useRef(false);
+
+ useEffect(() => {
+ isMount.current = true;
+
+ return () => {
+ isMount.current = false;
+ };
+ });
+
+ return useCallback((): boolean => isMount.current, []);
+};
diff --git a/storybook/stories/Notification/Notification.stories.tsx b/storybook/stories/Notification/Notification.stories.tsx
index fe081cb..905bb6d 100644
--- a/storybook/stories/Notification/Notification.stories.tsx
+++ b/storybook/stories/Notification/Notification.stories.tsx
@@ -35,7 +35,7 @@ const App = (): JSX.Element => {
-
+
);
};