{"id":20380508,"url":"https://github.com/tobua/reactigation","last_synced_at":"2025-04-12T08:34:20.076Z","repository":{"id":45675378,"uuid":"175899901","full_name":"tobua/reactigation","owner":"tobua","description":"React-only Navigation for React Native","archived":false,"fork":false,"pushed_at":"2024-12-15T22:58:58.000Z","size":5642,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T03:07:10.302Z","etag":null,"topics":["javascript","navigation","react-native"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/reactigation","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/tobua.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-03-15T22:37:41.000Z","updated_at":"2024-12-15T22:58:29.000Z","dependencies_parsed_at":"2024-12-31T21:35:50.203Z","dependency_job_id":"e03d1cc9-a18c-40e0-bb93-d7b90d59b3ef","html_url":"https://github.com/tobua/reactigation","commit_stats":{"total_commits":53,"total_committers":2,"mean_commits":26.5,"dds":0.1132075471698113,"last_synced_commit":"f31e502aaabcbc000bc556b5f1e38a57b249a80a"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobua%2Freactigation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobua%2Freactigation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobua%2Freactigation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobua%2Freactigation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tobua","download_url":"https://codeload.github.com/tobua/reactigation/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247730068,"owners_count":20986404,"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":["javascript","navigation","react-native"],"created_at":"2024-11-15T02:07:38.332Z","updated_at":"2025-04-12T08:34:20.057Z","avatar_url":"https://github.com/tobua.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/tobua/reactigation/raw/main/video.gif\" alt=\"Reactigation\" width=\"250\"\u003e\n  \u003c!--- Recorded from iOS Simulator using ⌘ ⇧ 5 combination and converted with Gifsky from Mac App Store. --\u003e\n\u003c/p\u003e\n\n# Reactigation\n\n[![npm](https://img.shields.io/npm/v/reactigation)](https://npmjs.com/reactigation)\n[![codesandbox](https://img.shields.io/badge/demo-codesandbox-yellow)](https://codesandbox.io/s/reactigation-c0xeqh)\n\nNavigation for React Native using only JavaScript.\n\n## Installation\n\n```\nnpm i reactigation\n```\n\n## Usage\n\nA minimal setup with two screens looks like this.\n\n```jsx\nimport React from 'react'\nimport { AppRegistry, Text, Button } from 'react-native'\nimport Reactigation, { register, go, back } from 'reactigation'\n\nconst FirstScreen = (props) =\u003e (\n  \u003c\u003e\n    \u003cText\u003e{props.title} Screen\u003c/Text\u003e\n    \u003cButton title=\"go to Second Screen\" onPress={() =\u003e go('Second')} /\u003e\n  \u003c/\u003e\n)\n\nconst SecondScreen = (props) =\u003e (\n  \u003c\u003e\n    \u003cText\u003e{props.title} Screen\u003c/Text\u003e\n    \u003cButton title=\"go back\" onPress={() =\u003e back()} /\u003e\n  \u003c/\u003e\n)\n\nregister(\u003cFirstScreen /\u003e, 'First')\nregister(\u003cSecondScreen /\u003e, 'Second')\n\nAppRegistry.registerComponent('NavigationApp', () =\u003e Reactigation)\n```\n\n## Navigating to a Screen\n\nAt runtime it's possible to navigate to any of the registered screens. A transition is how the switch between two screens looks like. For each navigation the transition can be configured.\n\n`go(screen: string, transition?: Transition, props?: object)`\n\n```jsx\nimport { go, Transition } from 'reactigation'\n\ngo('HelloWorld', 'modal')\ngo('AboutScreen', Transition.fast)\n// Pass props to screen and use default screen transition.\ngo('DetailPage', null, { id: 5 })\n```\n\nAvailable transitions: `regular`, `slow`, `fast`, `none`, `opacity`, `modal` \u0026 `peek` can all be imported as `Transition`.\n\n## Going Back\n\nReturning to the previous screen is simple. Unless defined otherwise the animation defined by `go` will be applied in reverse. On Android when the user clicks the system back button this function is also called.\n\n`back(transition?: Transition)`\n\n```jsx\nimport { back, Transition } from 'reactigation'\n\nback()\nback('fast')\nback(Transition.slow)\n```\n\n## Registering Screens\n\nAt least one screen needs to be registered before `Reactigation` is initialized. The `register` function takes any React Component (preferably resembling a screen) and a title for the screen which is required. Optionally the default transition for this screen can be set during registration. It is also the possible to register screens after `Reactigation` was rendered.\n\n`register(Component: React.ReactNode, title: string, { transition?: Transition, background?: string, initial?: boolean })`\n\n```jsx\nimport { register } from 'reactigation'\n\nconst screen = () =\u003e (\n  \u003cView style={{ flex: 1 }}\u003e\n    \u003cText\u003eHello World\u003c/Text\u003e\n  \u003c/View\u003e\n)\n\nregister(screen, 'HelloWorld')\nregister(screen, 'HelloModal', {\n  transition: 'modal',\n  background: 'transparent',\n})\n```\n\n## Configuring the Initial Screen\n\nBy default the first registered screen will appear initially. To use another screen initially, pass the `initial` option as the third argument to register or call `initial()` with the name of a previously registered screen.\n\n```js\nimport { register, initial } from 'reactigation'\n\nregister(screen, 'FirstScreen')\nregister(screen, 'SecondScreen', { initial: true })\nregister(screen, 'ThirdScreen')\n\ninitial('SecondScreen')\n```\n\n## Accessing the Current Screen\n\nTo conditionally render elements based on the current screen use the following React hook that will rerender the component with the new `currentScreen` each time a navigation occurs.\n\n```jsx\nimport { useCurrentScreen } from 'reactigation'\n\nexport const Footer = () =\u003e {\n  const currentScreen = useCurrentScreen()\n\n  if (currentScreen !== 'Overview') {\n    return null\n  }\n\n  ...\n}\n```\n\nIf you don't need a rerender to be triggered use the variable `import { currentScreen } from 'reactigation'`.\n\n## Static Parts\n\nIn order for some components to always be rendered simply add another view next to the navigation.\n\n```jsx\nexport default () =\u003e (\n  \u003c\u003e\n    \u003cReactigation /\u003e\n    \u003cView style={styles.tabs}\u003e\n      {...}\n    \u003c/View\u003e\n  \u003c/\u003e\n)\n```\n\nWhen you need to wrap `\u003cReactigation /\u003e` in a view make sure to add `\u003cView style={{ flex: 1 }}\u003e` in order for the navigation to be visible.\n\n## Custom Transitions\n\nIt's possible to configure some variables for the base animations.\n\n```tsx\nimport { CustomTransition } from 'reactigation'\n\nconst AlmostFullPeek = CustomTransition.peek(20) // 20% backdrop visible.\nconst SuperSlow = CustomTransition.regular(5000) // 5 seconds duration.\nconst SuperFastOpacity = CustomTransition.opacity(50) // 50 ms duration of opacity blur.\n\nregister(\u003cFirstScreen /\u003e, 'First', { transition: AlmostFullPeek })\ngo('First', SuperSlow)\nback(SuperFastOpacity)\n```\n\n## Headless Mode for Testing\n\nHeadless mode will automatically be enabled in a testing environment `process.env.NODE === 'test'`. It's also possible to control this mode manually on the main component.\n\n```jsx\nimport Reactigation from 'reactigation'\n\nconst App = () =\u003e \u003cReactigation headless={false} /\u003e\nAppRegistry.registerComponent('NavigationApp', () =\u003e App)\n```\n\n## Running the Example App\n\nThe example app shown on top is found in the repository. Run it by cloning this repository and then executing the following commands inside the main directory.\n\n```\nnpm install\nnpm run app --silent\ncd app\nreact-native run-ios\n```\n\n## Development\n\nTo develop the plugin further generate and run the example app. After that `npm run watch` in the main directory will copy over changes made in the `src` folder directly to the app. There are also a few static tests in the `test` folder which can be run with `npm test`.\n\n## Inspiration\n\nThe idea for the plugin came after experiencing some issues with native dependencies for an existing React Native navigation plugin.\n\n\u003ca href=\"https://github.com/kmagiera/react-native-gesture-handler/issues/494#issuecomment-471204581\"\u003e\n  \u003cimg src=\"https://github.com/naminho/reactigation/raw/main/inspiration.png\" alt=\"Inspiration Comment\"\u003e\n\u003c/a\u003e\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/naminho/reactigation/raw/main/logo.png\" alt=\"Reactigation\" width=\"250\"\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftobua%2Freactigation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftobua%2Freactigation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftobua%2Freactigation/lists"}