remove useIsFocused hook from all screens

2025-12-22 22:49:45 +01:00 · 2020-10-03 12:03:15 +05:00
parent 40ca59d18d
commit c9c8b0cf56
10 changed files with 436 additions and 445 deletions
--- a/apps/mobile/src/components/Container/ContainerBottomButton.js
+++ b/apps/mobile/src/components/Container/ContainerBottomButton.js
@@ -7,9 +7,9 @@ import {useTracked} from '../../provider';
 import {DDS, getElevation} from '../../utils/utils';
 import {PressableButton} from '../PressableButton';

-export const ContainerBottomButton = ({root}) => {
+export const ContainerBottomButton = ({title, onPress, color}) => {
  const [state, dispatch] = useTracked();
-  const {colors,containerBottomButton} = state;
+  const {colors} = state;
  const [buttonHide, setButtonHide] = useState(false);
  const insets = useSafeAreaInsets();

@@ -42,7 +42,7 @@ export const ContainerBottomButton = ({root}) => {
    };
  }, []);

-  return !containerBottomButton.visible ? null : (
+  return (
    <View
      style={{
        width: '100%',
@@ -58,21 +58,13 @@ export const ContainerBottomButton = ({root}) => {
        ],
      }}>
      <PressableButton
-        testID={"container_bottom_btn"}
-        color={
-          containerBottomButton.color
-            ? containerBottomButton.color
-            : colors.accent
-        }
-        selectedColor={
-          containerBottomButton.color
-            ? containerBottomButton.color
-            : colors.accent
-        }
+        testID={'container_bottom_btn'}
+        color={color || colors.accent}
+        selectedColor={color || colors.accent}
        customStyle={{
          ...getElevation(5),
        }}
-        onPress={containerBottomButton.bottomButtonOnPress}>
+        onPress={onPress}>
        <View
          style={{
            justifyContent: 'flex-start',
@@ -84,11 +76,7 @@ export const ContainerBottomButton = ({root}) => {
            paddingVertical: pv + 5,
          }}>
          <Icon
-            name={
-              containerBottomButton.bottomButtonText === 'Clear all trash'
-                ? 'delete'
-                : 'plus'
-            }
+            name={title === 'Clear all trash' ? 'delete' : 'plus'}
            color="white"
            size={SIZE.xl}
          />
@@ -100,7 +88,7 @@ export const ContainerBottomButton = ({root}) => {
              fontFamily: WEIGHT.regular,
              textAlignVertical: 'center',
            }}>
-            {'  ' + containerBottomButton.bottomButtonText}
+            {'  ' + title}
          </Text>
        </View>
      </PressableButton>
--- a/apps/mobile/src/components/SimpleList/index.js
+++ b/apps/mobile/src/components/SimpleList/index.js
@@ -50,8 +50,9 @@ const SimpleList = ({
  };

  useEffect(() => {
+    console.log(focused());
    let mainData =
-      searchResults.type === type && focused && searchResults.results.length > 0
+      searchResults.type === type && focused() && searchResults.results.length > 0
        ? searchResults.results
        : listData;

--- a/apps/mobile/src/views/Favorites/index.js
+++ b/apps/mobile/src/views/Favorites/index.js
@@ -1,18 +1,15 @@
-import { useIsFocused } from '@react-navigation/native';
-import React, { useEffect, useState } from 'react';
-import { Placeholder } from '../../components/ListPlaceholders';
+import React, {useEffect, useState} from 'react';
+import {Placeholder} from '../../components/ListPlaceholders';
 import SimpleList from '../../components/SimpleList';
-import { NoteItemWrapper } from '../../components/SimpleList/NoteItemWrapper';
-import { useTracked } from '../../provider';
-import { ACTIONS } from '../../provider/actions';
+import {NoteItemWrapper} from '../../components/SimpleList/NoteItemWrapper';
+import {useTracked} from '../../provider';
+import {ACTIONS} from '../../provider/actions';
 export const Favorites = ({route, navigation}) => {
  const [state, dispatch] = useTracked();
  const {favorites} = state;
  const [refreshing, setRefreshing] = useState(false);
-  const isFocused = useIsFocused();

-  useEffect(() => {
-    if (isFocused) {
+  const onFocus = useCallback(() => {
    dispatch({
      type: ACTIONS.HEADER_STATE,
      state: {
@@ -22,12 +19,6 @@ export const Favorites = ({route, navigation}) => {
        color: null,
      },
    });
-      dispatch({
-        type: ACTIONS.CONTAINER_BOTTOM_BUTTON,
-        state: {
-          visible: false,
-        },
-      });

    dispatch({
      type: ACTIONS.HEADER_TEXT_STATE,
@@ -41,11 +32,17 @@ export const Favorites = ({route, navigation}) => {
      screen: 'favorites',
    });
    dispatch({type: ACTIONS.FAVORITES});
-    }
-  }, [isFocused]);
+  }, []);

  useEffect(() => {
-    if (isFocused) {
+    navigation.addListener('focus', onFocus);
+    return () => {
+      navigation.removeListener('focus', onFocus);
+    };
+  });
+
+  useEffect(() => {
+    if (navigation.isFocused()) {
      dispatch({
        type: ACTIONS.SEARCH_STATE,
        state: {
@@ -57,7 +54,7 @@ export const Favorites = ({route, navigation}) => {
        },
      });
    }
-  }, [favorites, isFocused]);
+  }, [favorites]);

  return (
    <SimpleList
@@ -67,7 +64,7 @@ export const Favorites = ({route, navigation}) => {
        dispatch({type: ACTIONS.FAVORITES});
      }}
      refreshing={refreshing}
-      focused={isFocused}
+      focused={() => navigation.isFocused()}
      RenderItem={NoteItemWrapper}
      placeholder={<Placeholder type="favorites" />}
      placeholderText="Notes you favorite appear here"
--- a/apps/mobile/src/views/Folders/index.js
+++ b/apps/mobile/src/views/Folders/index.js
@@ -1,4 +1,3 @@
-import {useIsFocused} from '@react-navigation/native';
 import React, {useEffect} from 'react';
 import {AddNotebookEvent} from '../../components/DialogManager/recievers';
 import {Placeholder} from '../../components/ListPlaceholders';
@@ -6,13 +5,13 @@ import SimpleList from '../../components/SimpleList';
 import {NotebookItemWrapper} from '../../components/SimpleList/NotebookItemWrapper';
 import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
+import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
 export const Folders = ({route, navigation}) => {
  const [state, dispatch] = useTracked();
  const {notebooks} = state;
-  let isFocused = useIsFocused();
+  const params = route.params;

-  useEffect(() => {
-    if (isFocused) {
+  const onFocus = useCallback(() => {
    dispatch({
      type: ACTIONS.HEADER_STATE,
      state: {
@@ -22,15 +21,7 @@ export const Folders = ({route, navigation}) => {
        color: null,
      },
    });
-      dispatch({
-        type: ACTIONS.CONTAINER_BOTTOM_BUTTON,
-        state: {
-          bottomButtonText: 'Create a new notebook',
-          bottomButtonOnPress: () => AddNotebookEvent(),
-          color: null,
-          visible: true,
-        },
-      });
+
    dispatch({
      type: ACTIONS.HEADER_VERTICAL_MENU,
      state: false,
@@ -47,11 +38,17 @@ export const Folders = ({route, navigation}) => {
      type: ACTIONS.CURRENT_SCREEN,
      screen: 'notebooks',
    });
-    }
-  }, [isFocused]);
+  }, []);

  useEffect(() => {
-    if (isFocused) {
+    navigation.addListener('focus', onFocus);
+    return () => {
+      navigation.removeListener('focus', onFocus);
+    };
+  });
+
+  useEffect(() => {
+    if (navigation.isFocused()) {
      dispatch({
        type: ACTIONS.SEARCH_STATE,
        state: {
@@ -63,20 +60,26 @@ export const Folders = ({route, navigation}) => {
        },
      });
    }
-  }, [notebooks, isFocused]);
+  }, [notebooks]);

-  const params = route.params;
+  const _onPressBottomButton = () => AddNotebookEvent();

  return (
+    <>
      <SimpleList
        data={notebooks}
        type="notebooks"
-      focused={isFocused}
+        focused={() => navigation.isFocused()}
        RenderItem={NotebookItemWrapper}
        placeholder={<Placeholder type="notebooks" />}
        pinned={true}
        placeholderText="Notebooks you add will appear here"
      />
+      <ContainerBottomButton
+        title="Create a new notebook"
+        onPress={_onPressBottomButton}
+      />
+    </>
  );
 };

--- a/apps/mobile/src/views/Home/index.js
+++ b/apps/mobile/src/views/Home/index.js
@@ -1,5 +1,5 @@
-import {useIsFocused} from '@react-navigation/native';
-import React, {useEffect} from 'react';
+import React, {useCallback, useEffect} from 'react';
+import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
 import {Placeholder} from '../../components/ListPlaceholders';
 import SimpleList from '../../components/SimpleList';
 import {NoteItemWrapper} from '../../components/SimpleList/NoteItemWrapper';
@@ -9,13 +9,12 @@ import {eSendEvent} from '../../services/eventManager';
 import {eOnLoadNote, eScrollEvent} from '../../services/events';
 import {openEditorAnimation} from '../../utils/animations';
 import {DDS} from '../../utils/utils';
+
 export const Home = ({route, navigation}) => {
  const [state, dispatch] = useTracked();
  const {notes} = state;
-  const isFocused = useIsFocused();

-  useEffect(() => {
-    if (isFocused) {
+  const onFocus = useCallback(() => {
    dispatch({
      type: ACTIONS.CURRENT_SCREEN,
      screen: 'home',
@@ -39,42 +38,30 @@ export const Home = ({route, navigation}) => {
        heading: 'Home',
      },
    });
-
-      dispatch({
-        type: ACTIONS.CONTAINER_BOTTOM_BUTTON,
-        state: {
-          bottomButtonText: 'Create a new note',
-          bottomButtonOnPress: async () => {
-            if (DDS.isTab) {
-              eSendEvent(eOnLoadNote, {type: 'new'});
-            } else {
-              eSendEvent(eOnLoadNote, {type: 'new'});
-              openEditorAnimation();
-            }
-          },
-          color: null,
-          visible: true,
-        },
-      });
    eSendEvent(eScrollEvent, 0);
    dispatch({type: ACTIONS.COLORS});
    dispatch({type: ACTIONS.NOTES});
-    } else {
+  }, []);
+
+  const onBlur = useCallback(() => {
+    console.log(navigation.isFocused());
    dispatch({
      type: ACTIONS.HEADER_VERTICAL_MENU,
      state: false,
    });
-    }
-    return () => {
-      dispatch({
-        type: ACTIONS.HEADER_VERTICAL_MENU,
-        state: false,
-      });
-    };
-  }, [isFocused]);
+  }, []);

  useEffect(() => {
-    if (isFocused) {
+    navigation.addListener('focus', onFocus);
+    navigation.addListener('blur', onBlur);
+    return () => {
+      navigation.removeListener('focus', onFocus);
+      navigation.removeListener('blur', onBlur);
+    };
+  });
+
+  useEffect(() => {
+    if (navigation.isFocused()) {
      dispatch({
        type: ACTIONS.SEARCH_STATE,
        state: {
@@ -86,7 +73,16 @@ export const Home = ({route, navigation}) => {
        },
      });
    }
-  }, [notes, isFocused]);
+  }, [notes]);
+
+  const _onPressBottomButton = async () => {
+    if (DDS.isTab) {
+      eSendEvent(eOnLoadNote, {type: 'new'});
+    } else {
+      eSendEvent(eOnLoadNote, {type: 'new'});
+      openEditorAnimation();
+    }
+  };

  return (
    <>
@@ -95,11 +91,16 @@ export const Home = ({route, navigation}) => {
        type="notes"
        isHome={true}
        pinned={true}
-        focused={isFocused}
+        focused={() => navigation.isFocused()}
        RenderItem={NoteItemWrapper}
        placeholder={<Placeholder type="notes" />}
        placeholderText={`Notes you write appear here`}
      />
+
+      <ContainerBottomButton
+        title="Create a new note"
+        onPress={_onPressBottomButton}
+      />
    </>
  );
 };
--- a/apps/mobile/src/views/Notebook/index.js
+++ b/apps/mobile/src/views/Notebook/index.js
@@ -1,4 +1,3 @@
-import {useIsFocused} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
 import {AddTopicEvent} from '../../components/DialogManager/recievers';
 import {NotebookItem} from '../../components/NotebookItem';
@@ -6,6 +5,7 @@ import SelectionWrapper from '../../components/SelectionWrapper';
 import SimpleList from '../../components/SimpleList';
 import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
+import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
 import {
  eSendEvent,
  eSubscribeEvent,
@@ -13,15 +13,12 @@ import {
 } from '../../services/eventManager';
 import {eOnNewTopicAdded, eScrollEvent} from '../../services/events';
 import NavigationService from '../../services/NavigationService';
-import {db, ToastEvent} from '../../utils/utils';
+import {db} from '../../utils/utils';

 export const Notebook = ({route, navigation}) => {
  const [, dispatch] = useTracked();
  const [topics, setTopics] = useState([]);
-  const [refreshing, setRefreshing] = useState(false);
-
  let params = route.params;
-  let isFocused = useIsFocused();

  const onLoad = () => {
    let allTopics;
@@ -42,8 +39,7 @@ export const Notebook = ({route, navigation}) => {
    };
  }, []);

-  useEffect(() => {
-    if (isFocused) {
+  const onFocus = useCallback(() => {
    onLoad();
    dispatch({
      type: ACTIONS.HEADER_STATE,
@@ -72,11 +68,17 @@ export const Notebook = ({route, navigation}) => {
      type: ACTIONS.CURRENT_SCREEN,
      screen: 'notebook',
    });
-    }
-  }, [isFocused]);
+  }, []);

  useEffect(() => {
-    if (isFocused) {
+    navigation.addListener('focus', onFocus);
+    return () => {
+      navigation.removeListener('focus', onFocus);
+    };
+  });
+
+  useEffect(() => {
+    if (navigation.isFocused()) {
      dispatch({
        type: ACTIONS.SEARCH_STATE,
        state: {
@@ -87,35 +89,33 @@ export const Notebook = ({route, navigation}) => {
          color: null,
        },
      });
-      dispatch({
-        type: ACTIONS.CONTAINER_BOTTOM_BUTTON,
-        state: {
-          visible: true,
-          bottomButtonOnPress: () => {
+    }
+  }, [topics]);
+
+  const _onPressBottomButton = () => {
    let n = route.params.notebook;
    AddTopicEvent(n);
-          },
-          color: null,
-          bottomButtonText: 'Add new topic',
-        },
-      });
-    }
-  }, [topics, isFocused]);
-
- 
+  };

  return (
+    <>
      <SimpleList
        data={topics}
        type="topics"
        refreshCallback={() => {
          onLoad();
        }}
-      focused={isFocused}
+        focused={() => navigation.isFocused()}
        RenderItem={RenderItem}
        placeholder={<></>}
        placeholderText=""
      />
+
+      <ContainerBottomButton
+        title="Add new topic"
+        onPress={_onPressBottomButton}
+      />
+    </>
  );
 };

--- a/apps/mobile/src/views/Notes/index.js
+++ b/apps/mobile/src/views/Notes/index.js
@@ -1,11 +1,11 @@
-import {useIsFocused} from '@react-navigation/native';
-import React, {useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import {COLORS_NOTE} from '../../common/common';
 import {Placeholder} from '../../components/ListPlaceholders';
 import SimpleList from '../../components/SimpleList';
 import {NoteItemWrapper} from '../../components/SimpleList/NoteItemWrapper';
 import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
+import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
 import {
  eSendEvent,
  eSubscribeEvent,
@@ -25,7 +25,6 @@ export const Notes = ({route, navigation}) => {
  const allNotes = state.notes;
  const [notes, setNotes] = useState([]);
  const [refreshing, setRefreshing] = useState(false);
-  const isFocused = useIsFocused();
  let params = route.params ? route.params : null;

  useEffect(() => {
@@ -75,8 +74,7 @@ export const Notes = ({route, navigation}) => {
    }
  };

-  useEffect(() => {
-    if (isFocused) {
+  const onFocus = useCallback(() => {
    dispatch({
      type: ACTIONS.HEADER_STATE,
      state: {
@@ -84,16 +82,6 @@ export const Notes = ({route, navigation}) => {
        menu: params.type === 'color' ? true : false,
        canGoBack: params.type === 'color' ? false : true,
        color: params.type == 'color' ? COLORS_NOTE[params.title] : null,
-        
-        },
-      });
-      dispatch({
-        type: ACTIONS.CONTAINER_BOTTOM_BUTTON,
-        state: {
-          visible: true,
-          color: params.type == 'color' ? COLORS_NOTE[params.title] : null,
-          bottomButtonOnPress: _bottomBottomOnPress,
-          bottomButtonText: 'Create a new note',
      },
    });
    dispatch({
@@ -114,16 +102,26 @@ export const Notes = ({route, navigation}) => {
      type: ACTIONS.CURRENT_SCREEN,
      screen: params.type === 'color' ? params.color.title : params.type,
    });
-    } else {
+  }, []);
+
+  const onBlur = useCallback(() => {
    setNotes([]);
    editing.actionAfterFirstSave = {
      type: null,
    };
-    }
-  }, [isFocused, allNotes, colorNotes]);
+  }, []);

  useEffect(() => {
-    if (isFocused) {
+    navigation.addListener('focus', onFocus);
+    navigation.addListener('blur', onBlur);
+    return () => {
+      navigation.removeListener('focus', onFocus);
+      navigation.removeListener('blur', onBlur);
+    };
+  });
+
+  useEffect(() => {
+    if (navigation.isFocused()) {
      dispatch({
        type: ACTIONS.SEARCH_STATE,
        state: {
@@ -137,9 +135,9 @@ export const Notes = ({route, navigation}) => {
        },
      });
    }
-  }, [notes, isFocused]);
+  }, [notes]);

-  const _bottomBottomOnPress = () => {
+  const _onPressBottomButton = useCallback(() => {
    if (params.type === 'tag') {
      editing.actionAfterFirstSave = {
        type: 'tag',
@@ -162,22 +160,29 @@ export const Notes = ({route, navigation}) => {
      eSendEvent(eOnLoadNote, {type: 'new'});
    }
    openEditorAnimation();
-  };
+  }, [params.type]);

  return (
+    <>
      <SimpleList
        data={notes}
        type="notes"
        refreshCallback={() => {
          init();
        }}
-      focused={isFocused}
+        focused={() => navigation.isFocused()}
        RenderItem={NoteItemWrapper}
        placeholder={<Placeholder type="notes" />}
        placeholderText={`Add some notes to this" ${
          params.type ? params.type : 'topic.'
        }`}
      />
+      <ContainerBottomButton
+        title="Create a new note"
+        onPress={_onPressBottomButton}
+        color={params.type == 'color' ? COLORS_NOTE[params.title] : null}
+      />
+    </>
  );
 };

--- a/apps/mobile/src/views/Settings/index.js
+++ b/apps/mobile/src/views/Settings/index.js
@@ -1,4 +1,3 @@
-import {useIsFocused} from '@react-navigation/native';
 import React, {useEffect} from 'react';
 import {
  Appearance,
@@ -56,7 +55,6 @@ import {
 export const Settings = ({route, navigation}) => {
  const [state, dispatch] = useTracked();
  const {colors, user, settings} = state;
-  const isFocused = useIsFocused();
  function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
    let newColors = setColorScheme(colors, accent);
    StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
@@ -69,15 +67,7 @@ export const Settings = ({route, navigation}) => {
    changeColorScheme();
  }

-  useEffect(() => {
-    console.log(user);
-    if (isFocused) {
-      dispatch({
-        type: ACTIONS.CONTAINER_BOTTOM_BUTTON,
-        state: {
-          visible: false,
-        },
-      });
+  const onFocus = useCallback(() => {
    dispatch({
      type: ACTIONS.HEADER_STATE,
      state: {
@@ -98,7 +88,6 @@ export const Settings = ({route, navigation}) => {
        heading: 'Settings',
      },
    });
-
    dispatch({
      type: ACTIONS.CURRENT_SCREEN,
      screen: 'settings',
@@ -110,8 +99,14 @@ export const Settings = ({route, navigation}) => {
        noSearch: true,
      },
    });
-    }
-  }, [isFocused]);
+  }, []);
+
+  useEffect(() => {
+    navigation.addListener('focus', onFocus);
+    return () => {
+      navigation.removeListener('focus', onFocus);
+    };
+  });

  const getTimeLeft = (t1, t2) => {
    let d1 = new Date(Date.now());
--- a/apps/mobile/src/views/Tags/index.js
+++ b/apps/mobile/src/views/Tags/index.js
@@ -1,21 +1,20 @@
-import { useIsFocused } from '@react-navigation/native';
-import React, { useEffect } from 'react';
-import { Text } from 'react-native';
-import { SIZE, WEIGHT } from '../../common/common';
-import { Placeholder } from '../../components/ListPlaceholders';
-import { PressableButton } from '../../components/PressableButton';
+import React, {useEffect} from 'react';
+import {Text} from 'react-native';
+import {SIZE, WEIGHT} from '../../common/common';
+import {Placeholder} from '../../components/ListPlaceholders';
+import {PressableButton} from '../../components/PressableButton';
 import SimpleList from '../../components/SimpleList';
-import { useTracked } from '../../provider';
-import { ACTIONS } from '../../provider/actions';
+import {useTracked} from '../../provider';
+import {ACTIONS} from '../../provider/actions';
 import NavigationService from '../../services/NavigationService';

 export const Tags = ({route, navigation}) => {
  const [state, dispatch] = useTracked();
  const {colors, tags} = state;
-  const isFocused = useIsFocused();

-  useEffect(() => {
-    if (isFocused) {
+ 
+
+  const onFocus = useCallback(() => {
    dispatch({
      type: ACTIONS.HEADER_STATE,
      state: {
@@ -25,17 +24,10 @@ export const Tags = ({route, navigation}) => {
        color: null,
      },
    });
-      dispatch({
-        type: ACTIONS.CONTAINER_BOTTOM_BUTTON,
-        state: {
-          visible: false,
-        },
-      });
    dispatch({
      type: ACTIONS.HEADER_VERTICAL_MENU,
      state: false,
    });
-
    dispatch({
      type: ACTIONS.HEADER_TEXT_STATE,
      state: {
@@ -48,11 +40,17 @@ export const Tags = ({route, navigation}) => {
      type: ACTIONS.CURRENT_SCREEN,
      screen: 'tags',
    });
-    }
-  }, [isFocused]);
+  }, []);

  useEffect(() => {
-    if (isFocused) {
+    navigation.addListener('focus', onFocus);
+    return () => {
+      navigation.removeListener('focus', onFocus);
+    };
+  });
+
+  useEffect(() => {
+    if (navigation.isFocused()) {
      dispatch({
        type: ACTIONS.SEARCH_STATE,
        state: {
@@ -64,13 +62,13 @@ export const Tags = ({route, navigation}) => {
        },
      });
    }
-  }, [tags, isFocused]);
+  }, [tags]);

  return (
    <SimpleList
      data={tags}
      type="tags"
-      focused={isFocused}
+      focused={() => navigation.isFocused()}
      RenderItem={RenderItem}
      placeholder={<Placeholder type="tags" />}
      placeholderText="Tags added to notes appear here"
--- a/apps/mobile/src/views/Trash/index.js
+++ b/apps/mobile/src/views/Trash/index.js
@@ -1,5 +1,5 @@
-import {useIsFocused} from '@react-navigation/native';
 import React, {useEffect} from 'react';
+import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
 import {simpleDialogEvent} from '../../components/DialogManager/recievers';
 import {TEMPLATE_EMPTY_TRASH} from '../../components/DialogManager/templates';
 import {Placeholder} from '../../components/ListPlaceholders';
@@ -13,10 +13,7 @@ export const Trash = ({route, navigation}) => {
  const [state, dispatch] = useTracked();
  const {trash} = state;

-  const isFocused = useIsFocused();
-
-  useEffect(() => {
-    if (isFocused) {
+  const onFocus = useCallback(() => {
    dispatch({
      type: ACTIONS.HEADER_STATE,
      state: {
@@ -26,15 +23,6 @@ export const Trash = ({route, navigation}) => {
        color: null,
      },
    });
-      dispatch({
-        type: ACTIONS.CONTAINER_BOTTOM_BUTTON,
-        state: {
-          bottomButtonText: 'Clear all trash',
-          bottomButtonOnPress: () => simpleDialogEvent(TEMPLATE_EMPTY_TRASH),
-          color: null,
-          visible: true,
-        },
-      });
    dispatch({
      type: ACTIONS.HEADER_VERTICAL_MENU,
      state: false,
@@ -55,11 +43,17 @@ export const Trash = ({route, navigation}) => {
      type: ACTIONS.CURRENT_SCREEN,
      screen: 'trash',
    });
-    }
-  }, [isFocused]);
+  }, []);

  useEffect(() => {
-    if (isFocused) {
+    navigation.addListener('focus', onFocus);
+    return () => {
+      navigation.removeListener('focus', onFocus);
+    };
+  });
+
+  useEffect(() => {
+    if (navigation.isFocused()) {
      dispatch({
        type: ACTIONS.SEARCH_STATE,
        state: {
@@ -71,17 +65,26 @@ export const Trash = ({route, navigation}) => {
        },
      });
    }
-  }, [trash, isFocused]);
+  }, [trash]);
+
+  const _onPressBottomButton = () => simpleDialogEvent(TEMPLATE_EMPTY_TRASH);

  return (
+    <>
      <SimpleList
        data={trash}
        type="trash"
-      focused={isFocused}
+        focused={() => navigation.isFocused()}
        RenderItem={RenderItem}
        placeholder={<Placeholder type="trash" />}
        placeholderText="Deleted notes & notebooks appear here."
      />
+
+      <ContainerBottomButton
+        title="Clear all trash"
+        onPress={_onPressBottomButton}
+      />
+    </>
  );
 };