Search bar toggle functionality

[AmarHadzic]

Fixes #191

What was changed
This pull request modifies the search bar functionality so that it is only available when toggled by clicking the search icon. Once the search icon is clicked, the search bar appears; clicking the icon again hides the search bar.

Why was it changed
Previously, the search bar was permanently fixed in the header, taking up space when it is not needed, which lead to a poor user experience. By making the search bar toggled by a search icon, we keep the interface cleaner and simpler, leading to an improved user experience.

How was it changed
To implement the changes, I made a few code changes. First, I added a state variable for the search bar, isSearchVisible by using the useState hook. I added a TouchableOpacity icon which when pressed would set the isSearchVisible to true or false depending on whether the search bar should be available or not. I then added conditional rendering for the search bar. Lastly, I implemented an "X" icon when the search bar was toggled, and a search icon when it was not toggled.

[rcAsironman]

@AmarHadzic Your work looks good, but I noticed a few issues in the code. I’ve attached media to show these issues:

Issue 1:
When I close the search bar by clicking the cross icon, the search state doesn’t clear. This is preventing me from seeing the notes.

screen-20241028-180244.mp4

Issue 2:
In dark mode, both the search icon and the close icon are white, which doesn’t look very clear. Please change the icons to black for better contrast.

[rcAsironman]

lgtm;