diff --git a/src/presentation/components/Notification/index.tsx b/src/presentation/components/Notification/index.tsx index 0743e8e..4284362 100644 --- a/src/presentation/components/Notification/index.tsx +++ b/src/presentation/components/Notification/index.tsx @@ -60,6 +60,7 @@ export const Notification = ({ const buttonCloseStyleIndex = `buttonClose${theme}` as 'buttonClosecolored'; const buttonCloseTextStyleIndex = `buttonCloseText${theme}` as 'buttonCloseTextcolored'; + const textStyle = `text${theme}` as 'textlight'; return ( @@ -129,10 +130,7 @@ export const Notification = ({ {title} @@ -140,7 +138,7 @@ export const Notification = ({ {text} diff --git a/src/presentation/components/Notification/styles.ts b/src/presentation/components/Notification/styles.ts index 7f2f8c3..8ab8d93 100644 --- a/src/presentation/components/Notification/styles.ts +++ b/src/presentation/components/Notification/styles.ts @@ -124,6 +124,15 @@ export const styles = StyleSheet.create({ fontSize: 16, lineHeight: 20, }, + textcolored: { + color: Colors.White, + }, + textdark: { + color: Colors.White, + }, + textlight: { + color: Colors.Grey, + }, buttonClose: { width: 16, diff --git a/src/presentation/components/Notification/useController.ts b/src/presentation/components/Notification/useController.ts index 50a6440..eb35d0a 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; @@ -87,6 +88,7 @@ export const useController: UseControllerHook = ({ const transitionDirection = dragDirection.toUpperCase() as 'X' | 'Y'; const positionOnScreen = useSharedValue(0); const [isPaused, toggleIsPaused] = useToggle(false); + const timerRef = useRef(); const onTogglePause = useCallback((): void => { 'worklet'; @@ -192,6 +194,13 @@ export const useController: UseControllerHook = ({ const [animationEnteringFinish, toggleAnimationEnteringFinish] = useToggle(false); + const isMounted = useIsMounted(); + const onToggleAnimationEnteringFinish = useCallback(() => { + if (isMounted) { + toggleAnimationEnteringFinish(); + } + }, [toggleAnimationEnteringFinish, isMounted]); + const animatedStyle = useAnimatedStyle(() => { const translateIndex = `translate${transitionDirection}` as 'translateX'; return animationEnteringFinish @@ -214,12 +223,11 @@ export const useController: UseControllerHook = ({ 'worklet'; if (isFinished) { - runOnJS(toggleAnimationEnteringFinish)(); + runOnJS(onToggleAnimationEnteringFinish)(); } }; const delayDecrement = useRef(delay / DELAY); - const timerRef = useRef(); const onExecuteTimer = useCallback((): void => { timerRef.current = setInterval(() => { diff --git a/src/presentation/hooks/__tests__/useIsMounted.spec.ts b/src/presentation/hooks/__tests__/useIsMounted.spec.ts new file mode 100644 index 0000000..cc0d957 --- /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..7bf27ee --- /dev/null +++ b/src/presentation/hooks/useIsMounted.ts @@ -0,0 +1,15 @@ +import { useEffect, useRef } from 'react'; + +export const useIsMounted = (): boolean => { + const isMount = useRef(false); + + useEffect(() => { + isMount.current = true; + + return () => { + isMount.current = false; + }; + }); + + return isMount.current; +}; diff --git a/storybook/stories/Notification/Notification.stories.tsx b/storybook/stories/Notification/Notification.stories.tsx index 4d9c1a5..fe081cb 100644 --- a/storybook/stories/Notification/Notification.stories.tsx +++ b/storybook/stories/Notification/Notification.stories.tsx @@ -1,7 +1,8 @@ /* eslint-disable import/no-extraneous-dependencies */ -import { storiesOf } from '@storybook/react-native'; import React from 'react'; +import { GestureHandlerRootView } from 'react-native-gesture-handler'; import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import { storiesOf } from '@storybook/react-native'; import { NotificationContainer, useNotification } from '../../../src/main'; @@ -24,7 +25,7 @@ const App = (): JSX.Element => { }; return ( - <> + { - - + + ); };