{"id":24358676,"url":"https://github.com/dayitv89/react-navigation-helper","last_synced_at":"2025-04-10T05:45:38.047Z","repository":{"id":55990682,"uuid":"111088962","full_name":"dayitv89/react-navigation-helper","owner":"dayitv89","description":"react-navigation StackNavigator Helper as convert screensProps, params to props as React prefer component props style.","archived":false,"fork":false,"pushed_at":"2019-01-29T10:59:32.000Z","size":16,"stargazers_count":3,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-24T01:21:23.691Z","etag":null,"topics":["presentation-style","react-native","react-native-animatable","react-navigation","react-navigation-helper","transitions"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dayitv89.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-17T10:10:14.000Z","updated_at":"2019-06-26T22:08:03.000Z","dependencies_parsed_at":"2022-08-15T11:00:23.422Z","dependency_job_id":null,"html_url":"https://github.com/dayitv89/react-navigation-helper","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dayitv89%2Freact-navigation-helper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dayitv89%2Freact-navigation-helper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dayitv89%2Freact-navigation-helper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dayitv89%2Freact-navigation-helper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dayitv89","download_url":"https://codeload.github.com/dayitv89/react-navigation-helper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248166881,"owners_count":21058479,"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":["presentation-style","react-native","react-native-animatable","react-navigation","react-navigation-helper","transitions"],"created_at":"2025-01-18T20:21:11.280Z","updated_at":"2025-04-10T05:45:38.027Z","avatar_url":"https://github.com/dayitv89.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-navigation-helper\n\n![version](https://img.shields.io/badge/version-1.0.7-green.svg)\n\nreact-navigation StackNavigator Helper as convert screensProps, params to props as React prefer component props style.\n\n## Why this required?\n\n`StackNavigator` of `react-navigation` has initial some headache about where to pass screenProps, params etc. Where `react` componet does know `props` only. By Implementation of `react-navigation-helper`, you can use your react component with / without `react-navigation` with `props` style.\n\nAs assume your 3 component as `MyComponent1, MyComponent2, MyComponent3` expect a props to work. But while using\n`StackNavigator`, you have to convert as initial component receives `props` as `props.screenProps`, and pushed element will receive props as `props.navigation.state.params`, which ends up your component independence.\n\n`react-navigation-helper` makes your life easier to provide you component as everything as props and as `StackNavigator` way to. And now your component free to worried about only `props` independently.\n\nAdditionally, added some animation types available for screen transition:\n\n1. push(default): right to left,\n1. pop: left to right,\n1. present: bottom to top,\n1. dismiss: top to bottom,\n1. none: without animation just switching\n\n### Implementation\n\n```js\n/// AppNavigation.js\nimport { StackNavigator } from 'react-navigation';\nimport { StackNavigatorHelper } from 'react-navigation-helper';\n\nimport { MyComponent1, MyComponent2, MyComponent3, MyComponent4 } from './src';\n\nexport default StackNavigatorHelper.exportStackNavigator(\n\tStackNavigator(\n\t\t{\n\t\t\tMyComponent1: { screen: StackNavigatorHelper.setInitParamsToProps(MyComponent1) },\n\t\t\tMyComponent2: { screen: StackNavigatorHelper.paramsToProps(MyComponent2) },\n\t\t\tMyComponent3: { screen: StackNavigatorHelper.paramsToProps(MyComponent3) },\n\t\t\tMyComponent4: { screen: StackNavigatorHelper.paramsToProps(MyComponent4) }\n\t\t},\n\t\t{\n\t\t\theaderMode: 'none',\n\t\t\tcardStyle: {\n\t\t\t\tbackgroundColor: 'transparent',\n\t\t\t\tshadowColor: 'transparent'\n\t\t\t},\n\t\t\ttransitionConfig: () =\u003e\n\t\t\t\tStackNavigatorHelper.transitionConfig({\n\t\t\t\t\tMyComponent3: 'present',\n\t\t\t\t\tMyComponent4: 'pop'\n\t\t\t\t})\n\t\t}\n\t)\n);\n```\n\n### Uses\n\n```js\n/// App.js\nimport React from 'react';\nimport { AppRegistry } from 'react-native';\nimport AppNavigation from './AppNavigation';\n\nconst MyApp = props =\u003e \u003cAppNavigation {...props} /\u003e;\nAppRegistry.registerComponent('MyApp', () =\u003e MyApp);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdayitv89%2Freact-navigation-helper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdayitv89%2Freact-navigation-helper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdayitv89%2Freact-navigation-helper/lists"}