{"id":20801139,"url":"https://github.com/pothos-dev/magellan","last_synced_at":"2026-01-28T07:37:54.149Z","repository":{"id":129131182,"uuid":"198490589","full_name":"pothos-dev/magellan","owner":"pothos-dev","description":"Simplified navigation for React Native with improved Typescript support, based on react-navigation","archived":false,"fork":false,"pushed_at":"2024-12-09T23:46:25.000Z","size":90,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-01T21:42:02.129Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/pothos-dev.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":"2019-07-23T18:53:30.000Z","updated_at":"2020-11-23T17:46:25.000Z","dependencies_parsed_at":"2025-01-16T11:04:18.953Z","dependency_job_id":"506c0e27-3eed-489f-8859-d73d70dffff7","html_url":"https://github.com/pothos-dev/magellan","commit_stats":{"total_commits":26,"total_committers":2,"mean_commits":13.0,"dds":0.1923076923076923,"last_synced_commit":"5aa371a8214775fb28f09c69bc72f0acebf9ac6e"},"previous_names":["bearbytes/magellan"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pothos-dev%2Fmagellan","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pothos-dev%2Fmagellan/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pothos-dev%2Fmagellan/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pothos-dev%2Fmagellan/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pothos-dev","download_url":"https://codeload.github.com/pothos-dev/magellan/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248107552,"owners_count":21048954,"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":[],"created_at":"2024-11-17T18:16:51.694Z","updated_at":"2026-01-28T07:37:54.124Z","avatar_url":"https://github.com/pothos-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @bearbytes/magellan\n\nThis is a wrapper around [react-navigation](https://github.com/react-navigation/react-navigation), the popular navigation library for React Native.\n\nIt adds improved Typescript support and a simplified API for basic navigation needs.\n\n# Getting started\n\nInstall the dependency:\n`npm i @bearbytes/magellan`\n\nDefine the available screens and their corresponding navigation parameters:\n\n```typescript\nexport interface AppScreens {\n  Home: {}\n  UserProfile: { userId: string }\n  Chat: { partnerUserId: string; isPrivate?: boolean }\n}\n```\n\nInitialize the navigation system. It will create a StackNavigator which can be pre-configured with the usual [configuration](https://reactnavigation.org/docs/en/stack-navigator.html#stacknavigatorconfig):\n\n```typescript\nimport { createNavigation } from './lib/Magellan/createNavigationRoot'\nimport { AppScreens } from './AppScreens'\n\nexport const {\n  NavigationRoot,\n  navigate,\n  navigateBack,\n  dispatchNavigationAction,\n} = createNavigation\u003cAppScreens\u003e({\n  // Pass configuration for the main StackNavigator here\n  headerMode: 'none',\n  transparentCard: true,\n})\n```\n\nThe `NavigationRoot` is a React Component that will contain the currently visible screen(s). Put it into the root of your app. You will need to pass it a component for each screen in the `AppScreens` interface.\n\n```tsx\nexport default function MyApp() {\n  return (\n    \u003cSomeContextProvider\u003e\n      \u003cMaybeReduxContainerOrSomething\u003e\n        {/* Should be the main component */}\n        \u003cNavigationRoot\n          Home={HomeScreen}\n          UserProfile={UserProfileScreen}\n          Chat={props =\u003e {\n            // You could also create adhoc components in here.\n            // The props passed to the component are equivalent to\n            // navigation parameters in react-navigation.\n            if (props.isPrivate) {\n              return \u003cPrivateChatScreen {...props} /\u003e\n            } else {\n              return \u003cPublicChatScreen {...props} /\u003e\n            }\n          }}\n        /\u003e\n      \u003c/MaybeReduxContainerOrSomething\u003e\n    \u003c/SomeContextProvider\u003e\n  )\n}\n```\n\nTo avoid having to maintain duplicate props definitions, I would advise to use the `AppScreens` interface to define the screen props:\n\n```tsx\nexport function UserProfileScreen(props: AppScreens['UserProfile']) {\n  return \u003cText\u003eProfile of {props.userId}.\u003c/Text\u003e\n}\n```\n\n# Navigating\n\nAs you may have noticed, the [navigation](https://reactnavigation.org/docs/en/navigation-prop.html) prop that is usually used in `react-nativation` is nowhere to be found here. Instead, `magellan` opts to use top level functions to navigate between screens:\n\n```typescript\n// The navigate function knows about which screens exist and\n// what parameters can or must be passed to them. Typescript\n// will enforce that we never forget something here.\n\nnavigate('UserProfile', { userId: 'bob' })\n\n// Navigation params must always be passed, even when empty.\nnavigate('Home', {})\n\n// Go back to the previous screen.\n// Does nothing when there is only one screen on the stack.\nnavigateBack()\n\n// The above actions should be enough for most usecases.\n// If you need to use a more complex action, you can dispatch\n// it directly. Note that unlike the other functions, no\n// typesafeness is guaranteed here.\ndispatchNavigationAction({ type: 'Navigation/OPEN_DRAWER' })\n\ndispatchNavigationAction({\n  type: 'Navigation/POP_TO_TOP',\n  immediate: true,\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpothos-dev%2Fmagellan","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpothos-dev%2Fmagellan","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpothos-dev%2Fmagellan/lists"}