remove useIsFocused hook from all screens

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"}
+        testID={'container_bottom_btn'}
-        color={
+        color={color || colors.accent}
-          containerBottomButton.color
+        selectedColor={color || colors.accent}
-            ? containerBottomButton.color
-            : colors.accent
-        }
-        selectedColor={
-          containerBottomButton.color
-            ? containerBottomButton.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={
+            name={title === 'Clear all trash' ? 'delete' : 'plus'}
-              containerBottomButton.bottomButtonText === '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>

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;
 

apps/mobile/src/views/Favorites/index.js

@@ -1,4 +1,3 @@
-import { useIsFocused } from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
 import {Placeholder} from '../../components/ListPlaceholders';
 import SimpleList from '../../components/SimpleList';
@@ -9,10 +8,8 @@ export const Favorites = ({route, navigation}) => {
   const [state, dispatch] = useTracked();
   const {favorites} = state;
   const [refreshing, setRefreshing] = useState(false);
-  const isFocused = useIsFocused();
 
-  useEffect(() => {
+  const onFocus = useCallback(() => {
-    if (isFocused) {
     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"

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(() => {
+  const onFocus = useCallback(() => {
-    if (isFocused) {
     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}
+      />
+    </>
   );
 };
 

apps/mobile/src/views/Home/index.js

@@ -1,5 +1,5 @@
-import {useIsFocused} from '@react-navigation/native';
+import React, {useCallback, useEffect} from 'react';
-import React, {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(() => {
+  const onFocus = useCallback(() => {
-    if (isFocused) {
     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}
+      />
     </>
   );
 };

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(() => {
+  const onFocus = useCallback(() => {
-    if (isFocused) {
     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,
+  }, [topics]);
-        state: {
+
-          visible: true,
+  const _onPressBottomButton = () => {
-          bottomButtonOnPress: () => {
     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}
+      />
+    </>
   );
 };
 

apps/mobile/src/views/Notes/index.js

@@ -1,11 +1,11 @@
-import {useIsFocused} from '@react-navigation/native';
+import React, {useCallback, useEffect, useState} from 'react';
-import React, {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(() => {
+  const onFocus = useCallback(() => {
-    if (isFocused) {
     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}
+      />
+    </>
   );
 };
 

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(() => {
+  const onFocus = useCallback(() => {
-    console.log(user);
-    if (isFocused) {
-      dispatch({
-        type: ACTIONS.CONTAINER_BOTTOM_BUTTON,
-        state: {
-          visible: false,
-        },
-      });
     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());

apps/mobile/src/views/Tags/index.js

@@ -1,4 +1,3 @@
-import { useIsFocused } from '@react-navigation/native';
 import React, {useEffect} from 'react';
 import {Text} from 'react-native';
 import {SIZE, WEIGHT} from '../../common/common';
@@ -12,10 +11,10 @@ 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"

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();
+  const onFocus = useCallback(() => {
-
-  useEffect(() => {
-    if (isFocused) {
     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}
+      />
+    </>
   );
 };