{"id":22669183,"url":"https://github.com/programmersteve/reactnativesearchbar","last_synced_at":"2026-02-17T08:31:02.580Z","repository":{"id":64996818,"uuid":"579513712","full_name":"ProgrammerSteve/reactNativeSearchBar","owner":"ProgrammerSteve","description":"A react native app that connects to a supabase database about smoothie flavors. Has a search bar that throttles API calls.","archived":false,"fork":false,"pushed_at":"2022-12-21T21:57:31.000Z","size":33968,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-11T22:39:12.274Z","etag":null,"topics":["expo","postgresql","react","react-native","supabase"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ProgrammerSteve.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-12-17T23:49:07.000Z","updated_at":"2023-12-01T05:52:29.000Z","dependencies_parsed_at":"2023-01-13T15:10:05.284Z","dependency_job_id":null,"html_url":"https://github.com/ProgrammerSteve/reactNativeSearchBar","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ProgrammerSteve/reactNativeSearchBar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProgrammerSteve%2FreactNativeSearchBar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProgrammerSteve%2FreactNativeSearchBar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProgrammerSteve%2FreactNativeSearchBar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProgrammerSteve%2FreactNativeSearchBar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ProgrammerSteve","download_url":"https://codeload.github.com/ProgrammerSteve/reactNativeSearchBar/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProgrammerSteve%2FreactNativeSearchBar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29537837,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-17T08:11:05.436Z","status":"ssl_error","status_checked_at":"2026-02-17T08:09:38.860Z","response_time":100,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["expo","postgresql","react","react-native","supabase"],"created_at":"2024-12-09T15:19:13.476Z","updated_at":"2026-02-17T08:31:02.562Z","avatar_url":"https://github.com/ProgrammerSteve.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Smoothie Search React Native App\n* The purpose of the app is to use throttling when typing on the searchbar and pulling up relevant data with api calls\n* You will need a supabase database with environment variables set up in an .env file for the app to work\n* You will also need to make a supabase function to help with querying. The code snippet is found within the README file.\n\n### Will Look like the following:\n:::\n  :::\n    \u003cimg src=\"./assets/pic1.jpg\" alt=\"pic1\" width=\"200\" height=\"auto\"/\u003e\n  :::\n  :::\n    \u003cimg src=\"./assets/pic2.jpg\" alt=\"pic2\" width=\"200\" height=\"auto\"/\u003e\n  :::\n:::\n\n\n:::\n  :::\n    \u003cimg src=\"./assets/pic3.jpg\" alt=\"pic3\" width=\"200\" height=\"auto\"/\u003e\n  :::\n  :::\n    \u003cimg src=\"./assets/pic4.jpg\" alt=\"pic4\" width=\"200\" height=\"auto\"/\u003e\n  :::\n:::\n\n## Supabase database\n* Can be found the in supabase folder of the project\n* App searchbar will not run without the supabase Connection\n* The _import \"react-native-url-polyfill/auto\";_ in App.js is needed due to an error that appears\n* environment variables are pulled using _import { REACT_APP_SUPABASE_URL, REACT_APP_ANON_KEY } from \"@env\";_\n* the .babelrc file was created to account for the environment variable in the .env file\n```\n{\n  plugins: [\n    [\n      \"module:react-native-dotenv\",\n      {\n        envName: \"APP_ENV\",\n        moduleName: \"@env\",\n        path: \".env\"\n      }\n    ]\n  ]\n};\n```\n\n* info on environment variables can be found here: https://blog.logrocket.com/understanding-react-native-env-variables/\n* the supabase.js file is where I create the client and export it to other files\n```\nimport { createClient } from \"@supabase/supabase-js\";\nimport { REACT_APP_SUPABASE_URL, REACT_APP_ANON_KEY } from \"@env\";\nconst supabase = createClient(REACT_APP_SUPABASE_URL, REACT_APP_ANON_KEY);\nexport default supabase;\n```\n* The table on supabase has the following columns: \n    * id(int8)\n    * created_at(timestamptx)\n    * title(text)\n    * method(text)\n    * rating(int8)\n\n![alt text](https://github.com/ProgrammerSteve/reactNativeSearchBar/blob/main/assets/supabaseTable.jpg?raw=true \"Supabase Table\")\n\n\n## Custom Hooks can be found in the utils folder\n\n### useIsSearchBarActive\n* Uses a listener for the Keyboard object from the \"react-native\" library. This is to address the issue of the focus on the Textinput element. \n* The issue can be found here: https://github.com/facebook/react-native/issues/33532\n* The listener is placed in a useEffect so it can be removed when not in use on the return.\n* The custom hook also returns the active state and the handler to change it and the ref and the actual ref itself.\n\n### useDebounce and useThrottle\n* In the app I use the throttle instead of the debounce\n* I followed the format from this link: https://www.codingdeft.com/posts/react-debounce-throttle/\n* I rearranged the code so that it works with the supabase database\n* The searching is done with a custom supabase function that used the pg_trgm extension\n\nThe timing for the throttle or debounce is found at the end of the setTimeout and is set to 600 miliseconds\n\n```\n    setTimeout(() =\u003e {\n      throttling.current = false;\n      const fetchSmoothies = async () =\u003e {\n        [CODE...]\n      };\n      fetchSmoothies();\n    }, 600);\n```\n\n* To search the terms from the database, a role procedure call with a supabase database function is made\n* The custom function made is called search_smoothie\n* the parameter of the custom function is called smoothie_name\n\n```\n  const { data, error } = await supabase.rpc(\"search_smoothie\", {\n    smoothie_name: textAdj,\n  });\n```\n* In order to use this custom function you need to create it on the SQL editor on the Supabase website\n* Go to the SQL editor and create a new query, then paste this code snippet in\n```\ncreate or replace function search_smoothie(smoothie_name varchar) returns setof smoothies as $$\n  select *\n  from smoothies\n  WHERE smoothie_name % ANY(STRING_TO_ARRAY(smoothies.title, ' '));\n$$ language sql;\n```\n* The code isn't in this repo, but on my supabase account\n* The code requires that the pg_trgm extension be turned on for trigram search\n* Information can be found here: \n  * https://github.com/supabase/supabase/discussions/5435?sort=new \n  * https://www.youtube.com/watch?v=MJZCCpCYEqk\n\n\n###  useLog\n* It uses a useEffect to console.log the data whenever there's a change. Not needed in production.\n\n\n###  useGetSmoothies\n* used in the menu screen without filtering the query\n\n## React Native Navigation\n* uses \"@react-navigation/native\": \"^6.1.1\" and \"@react-navigation/native-stack\": \"^6.9.7\",\n* Info can be found: https://reactnavigation.org/\n* navigation object is sent to each page and is passed to components\n```\nconst Home = ({ navigation }) =\u003e {\n  ...\n```\n* The set up is done in App.js\n ```\nimport { NavigationContainer } from \"@react-navigation/native\";\nimport { createNativeStackNavigator } from \"@react-navigation/native-stack\";\n\nconst Stack = createNativeStackNavigator();\n\nexport default function App() {\n  return (\n    \u003cNavigationContainer\u003e\n      \u003cStack.Navigator initialRouteName=\"Home\"\u003e\n        \u003cStack.Screen\n          name=\"Home\"\n          component={Home}\n          options={{\n            headerShown: false,\n          }}\n        /\u003e\n        \u003cStack.Screen\n          name=\"Menu\"\n          component={Menu}\n          options={{\n            title: \"Smoothie Menu\",\n            headerStyle: {\n              backgroundColor: \"#b95e5e\",\n            },\n            headerTintColor: \"#fff\",\n            headerTitleStyle: {\n              fontWeight: \"bold\",\n            },\n          }}\n        /\u003e\n        \u003cStack.Screen\n          name=\"Details\"\n          component={Details}\n          options={({ route }) =\u003e ({\n            title: route.params.title,\n            headerStyle: {\n              backgroundColor: \"#b95e5e\",\n            },\n            headerTintColor: \"#fff\",\n            headerTitleStyle: {\n              fontWeight: \"bold\",\n            },\n          })}\n        /\u003e\n      \u003c/Stack.Navigator\u003e\n    \u003c/NavigationContainer\u003e\n  );\n}\n ```\n\n## Home page\n\n### TitlePic component goes away when there are search Results\n```\n{smoothies.length === 0 \u0026\u0026 \u003cTitlePic /\u003e}\n```\n\n### The main View changes style from justifyContents:*\"center\"* to *\"flex-start\"* when there are results\n```\n    \u003cView\n      style={\n        smoothies.length === 0 ? styles.container : styles.containerAltered\n      }\n    \u003e\n        [code]...\n    \u003c/View\u003e\n```\n\n### Search Bar\n* The most complex component in the app. In the future, I may make a searchBarContainer component to simplify the code and handles the useIsSearchBarActive hook there\n* takes in the inputRef, active, handleActive returned from the custom hook useIsSearchBarActive\n* takes in state and handlers for text, smoothies\n* takes in the searchHandler which can either be the debounce or throttle returned from the useDebounce and useThrottle, respectively.\n\n\n\n```\n      \u003cSearchBar\n        smoothies={smoothies}\n        text={text}\n        active={active}\n        inputRef={inputRef}\n        handleText={handleText}\n        handleActive={handleActive}\n        handleSmoothies={handleSmoothies}\n        handleSearch={handleThrottleSearch}\n      /\u003e\n```\n\n### SmoothieList component appears when there are search Results\n```\n      {smoothies.length \u003e 0 \u0026\u0026 (\n        \u003cSmoothieList smoothies={smoothies} text={text} /\u003e\n      )}\n```\n\n### BottomText component goes away when there are search Results\n```\n{smoothies.length === 0 \u0026\u0026 \u003cBottomTextHome /\u003e}\n```\n\n\n## Menu\n\n### SmoothieList component appears when useGetSmoothies returns data\n* gets data from useGetSmoothies and lists all the smoothies on the menu\n* The list is ordered alphabetically\n```\n      {smoothies.length \u003e 0 \u0026\u0026 (\n        \u003cSmoothieList smoothies={smoothies} text={text} /\u003e\n      )}\n```\n\n## Details\n* Returns the full details of the smoothie without truncating the steps","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprogrammersteve%2Freactnativesearchbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprogrammersteve%2Freactnativesearchbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprogrammersteve%2Freactnativesearchbar/lists"}