{"id":28898818,"url":"https://github.com/gabrielgyns/react-native-navigation","last_synced_at":"2026-05-08T05:07:23.431Z","repository":{"id":300085080,"uuid":"1005156689","full_name":"gabrielgyns/react-native-navigation","owner":"gabrielgyns","description":"Just a React Navigation sample of usage!","archived":false,"fork":false,"pushed_at":"2025-06-19T20:09:11.000Z","size":433,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-19T20:25:40.874Z","etag":null,"topics":["react","react-native","react-navigation","rocketseat","studies"],"latest_commit_sha":null,"homepage":"","language":"Ruby","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/gabrielgyns.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,"zenodo":null}},"created_at":"2025-06-19T19:04:11.000Z","updated_at":"2025-06-19T20:09:14.000Z","dependencies_parsed_at":"2025-06-19T20:27:18.060Z","dependency_job_id":"e9a3d7a4-3a72-4e8c-9075-3fc1d70955ce","html_url":"https://github.com/gabrielgyns/react-native-navigation","commit_stats":null,"previous_names":["gabrielgyns/react-native-navigation"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gabrielgyns/react-native-navigation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabrielgyns%2Freact-native-navigation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabrielgyns%2Freact-native-navigation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabrielgyns%2Freact-native-navigation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabrielgyns%2Freact-native-navigation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gabrielgyns","download_url":"https://codeload.github.com/gabrielgyns/react-native-navigation/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabrielgyns%2Freact-native-navigation/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261088330,"owners_count":23107676,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","react-native","react-navigation","rocketseat","studies"],"created_at":"2025-06-21T08:00:27.997Z","updated_at":"2026-05-08T05:07:23.419Z","avatar_url":"https://github.com/gabrielgyns.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Navigation with React Navigation\n\n## Stack Navigation\n\nhttps://github.com/user-attachments/assets/728b025e-dc68-4ba5-826a-dc0e786d532f\n\n[React Navigation - STACK NAVIGATOR - Docs](https://reactnavigation.org/docs/native-stack-navigator/)\n\n### 1. Using Navigation through Global Typing\n\n_No need comments I guess_\n\n### 2. Using Navigation through Props\n\nSince our `Routes` component returns a `StackRoutes` wrapped in a `NavigationContainer` which is a Context that shares a prop routes, meaning, we can access the navigation through the component's props.\n\nWe need to create the `StackRoutesList` type in the `StackRoutes` component to be used as a generic type for the `createNativeStackNavigator` function.\n\nIn our component, we can do something like this:\n\n```tsx\n// src/app/Home.tsx\n\n// We pass to the NativeStackScreenProps the type of the routes we created and the name of the route we are now.\ntype Props = NativeStackScreenProps\u003cStackRoutesList, \"home\"\u003e;\n```\n\nAnd then, we can use the `navigation` prop in our component.\n\n[Check this PR with this approach here](https://github.com/gabrielgyns/react-native-navigation/pull/1).\n\nOBS.: I left the global typing, but we wouldn't need it in this case.\n\n### 3. Making point 2 more Dynamic\n\n[Check this PR with the changes here](https://github.com/gabrielgyns/react-native-navigation/pull/2).\n\n## Bottom Tab Navigation\n\nhttps://github.com/user-attachments/assets/2533b011-5412-4fee-864f-0c5893f46e8b\n\n[PR to the Bottom Tabs here](https://github.com/gabrielgyns/react-native-navigation/pull/3)\n\n[React Navigation - BOTTOM TAB NAVIGATOR - Docs](https://reactnavigation.org/docs/bottom-tab-navigator/)\n\n## Drawer Navigation\n\nhttps://github.com/user-attachments/assets/b24eab93-cefe-4774-b340-e6d82130a618\n\n[PR to the Drawer here](https://github.com/gabrielgyns/react-native-navigation/pull/4)\n\n[React Navigation - DRAWER NAVIGATOR - Docs](https://reactnavigation.org/docs/drawer-navigator/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgabrielgyns%2Freact-native-navigation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgabrielgyns%2Freact-native-navigation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgabrielgyns%2Freact-native-navigation/lists"}