{"id":28579110,"url":"https://github.com/unvalerio/react-native","last_synced_at":"2026-05-08T19:33:11.757Z","repository":{"id":147987280,"uuid":"242564773","full_name":"unValerio/react-native","owner":"unValerio","description":"React Native App that displays dynamic rows dataset of repositories fetched from the GitHub public API","archived":false,"fork":false,"pushed_at":"2020-03-12T15:59:36.000Z","size":476,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-02-08T10:45:59.298Z","etag":null,"topics":["react-native","react-redux","redux","redux-observable","rxjs"],"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/unValerio.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-23T18:00:08.000Z","updated_at":"2023-03-05T05:12:06.000Z","dependencies_parsed_at":"2023-05-28T04:30:24.009Z","dependency_job_id":null,"html_url":"https://github.com/unValerio/react-native","commit_stats":null,"previous_names":["unvalerio/react-native"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/unValerio/react-native","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unValerio%2Freact-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unValerio%2Freact-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unValerio%2Freact-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unValerio%2Freact-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unValerio","download_url":"https://codeload.github.com/unValerio/react-native/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unValerio%2Freact-native/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32794702,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"ssl_error","status_checked_at":"2026-05-08T08:22:45.650Z","response_time":54,"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":["react-native","react-redux","redux","redux-observable","rxjs"],"created_at":"2025-06-11T01:38:08.816Z","updated_at":"2026-05-08T19:33:11.745Z","avatar_url":"https://github.com/unValerio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Example App\n\n_This project consists in the development of a React Native App that displays dynamic rows dataset of repositories fetched from the GitHub public API which can be useful to find the updated overview of a repository easily._\n\n## Finished app available from Expo\n[View app from Expo](https://expo.io/@unvalerio/react-native-example-sergio)\n\n### Features list 📋\n\n* 🍺 List containing ID, Repo title, Owner, Stars, Creation date of every repo found\n* 🍺 Input component to search for a repository by name\n* 🍺 Caching results of every search, (not making an API request if the results are already stored)\n* 🍺 Instead of triggering requests as long as the user is typing I used a debounce function\n* 🍺 Pagination implemented (locally, not by using API queries)\n* 🍺 Material design plus Android and iOS platform patterns\n\n### Some tools and methodologies used ⭐\n\n* 🍺 ESLint as code formatter\n* 🍺 Redux for state management\n* 🍺 RXJS and Redux-Observables\n* 🍺 [Ducks pattern](https://github.com/erikras/ducks-modular-redux)\n\n## Planning 📝\n\n1. To establish the best projet structure for an app of this kind (\"The Ducks Pattern\" in this case)\n2. For the state management Redux will be used because it is an indispensable factor in The Ducks Pattern.\n3. react-redux will be used in order to implement Redux in the app, \n4. rxjs will be used as a reactive programming platform\n5. redux-observable will be used in order to implement rxjs in the app using \"Epics\"\n6. For the main user interface \"Material Design\" will be selected. Android and iOS design patters will be used as a support for special cases.\n7. For pagination of results, data will be loaded as \"LazyLoad\" using the onEndReached prop from the FlatList component.\n8. For cahing results, AsyncStorage from react-native will be implemented because of its simplicity of saving and recovery of local data.\n9. All of the files will be formatted using ESLint using the default plugin for react formatting and the Airbnb formatter plugin for JavaScript.\n\n## Development ⌨️\n\n1. The App.jsx file initialize the Store and loads the Header and Repos components.\n2. Repos.jsx is the main component of the app, this one contains the search input and the list of results\n  * For the top bar and the search input it was used \"material design\" built with the react-native-paper library. For the repositories list the ListItem component from react-native-elements was used, which adjusts desgin patterns for Android and iOS, it is coupled easily to the FlatList component from react-native in order to show results.\n3. The search input (TextInput) executes the \"triggerSearchRepos\" function each time a change in the input is detected.\n4. The repos.js file is a module (based on the Ducks pattern) containing the \"action types\", \"action creators\", \"epics\" and the \"reducer\".\n5. \"repos module\" has two \"epics\" that intercept the \"SEARCH_REPOS\" and \"SEARCH_REPOS_API\" actions.\n6. The Epic that intercepts \"SEARCH_REPOS\" waits for a \"debounce\" and then search for possible results saved localy from cache (using AsyncStorage). If there are saved data, it dispatches the \"SEARCH_REPOS_SUCCESS\" action with the results as payload, otherwise it dispatches the \"SEARCH_REPOS_API\" action.\n7. The Epic that intercept \"SEARCH_REPOS_API\" starts an ajax call to the Github public API requesting a search for repositories. Then, all of the needed information is structured and chunked into pages (array of arrays) with the \"chunk\" function. All of the results are saved in cache and finally, the Epic dispatches the \"SEARCH_REPOS_SUCCESS\" action with all of the results as payload.\n8. When the \"SEARCH_REPOS_SUCCESS\" action is executed, it passes through the \"reducer\" and the results are sent as \"pages\" to the \"Repos.jsx\" using the \"mapStateToProps\" function from Redux to the \"repos\" prop of the component.\n9. Changes are detected from the \"componentDidUpdate\" method from Repos.jsx, if the results belong to the current search, the first page of the \"loadedRepos\" state is loaded, which feeds the FlatList component.\n10. In order to load all of the remaining pages I used the \"onEndReached\" callback from FlatList, but I realized that all the pages were being loaded immediately, so I fixed it using the \"onMomentumScrollEnd\" callback.\n\n---\n⌨️ with ❤️ by [Sergio Enrique Vargas](https://github.com/SergioEnrique) 😊","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funvalerio%2Freact-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funvalerio%2Freact-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funvalerio%2Freact-native/lists"}