{"id":19920605,"url":"https://github.com/shigebeyond/react-native-sk-navigator","last_synced_at":"2025-10-05T06:43:37.870Z","repository":{"id":57340121,"uuid":"53682361","full_name":"shigebeyond/react-native-sk-navigator","owner":"shigebeyond","description":"Component wraps Navigator, easy to push and easy to render different type of navigation bar","archived":false,"fork":false,"pushed_at":"2016-03-14T10:54:41.000Z","size":384,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-22T19:57:38.870Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/shigebeyond.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}},"created_at":"2016-03-11T16:54:27.000Z","updated_at":"2016-07-05T14:42:50.000Z","dependencies_parsed_at":"2022-08-26T03:42:04.190Z","dependency_job_id":null,"html_url":"https://github.com/shigebeyond/react-native-sk-navigator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shigebeyond%2Freact-native-sk-navigator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shigebeyond%2Freact-native-sk-navigator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shigebeyond%2Freact-native-sk-navigator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shigebeyond%2Freact-native-sk-navigator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shigebeyond","download_url":"https://codeload.github.com/shigebeyond/react-native-sk-navigator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252154737,"owners_count":21702983,"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-12T22:05:10.390Z","updated_at":"2025-10-05T06:43:32.817Z","avatar_url":"https://github.com/shigebeyond.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-sk-navigator\n\n##What is it\n\nreact-native-sk-navigator is a component wraps Navigator, supports:\n\n1 Delegate Navigator\n\nyou can define it just like Navigator, by using Navigator's properties and methods\n\n2 Be compatible with NavigatorIOS's api\n\n```javascript\n\nthis.props.navigator.push({\n  type: 'simple',\n  component: LoginModal,\n  passProps: passProps,\n  leftButtonIcon: require('image!left_button'),\n  onLeftButtonPress: () =\u003e this.props.navigator.pop(),\n  rightButtonIcon: require('image!right_button'),\n  onRightButtonPress: () =\u003e console.log('test')\n  sceneConfig: {\n    ...Navigator.SceneConfigs.VerticalDownSwipeJump,\n    gestures: null,\n    defaultTransitionVelocity: 10,\n  }\n});\n\n```\n\n3 Supports 3 types of navigation bar:\n\n3.1 none: no navigation bar.\n\n3.2 simple: navigation bar has only left button which go back.\n\n3.3 default: navigation bar has title, left button and right button.\n\n3.4 transparent: same with 'default', and its background is transparent.\n\n##How to use it\n\n1. `npm install react-native-sk-navigator@latest --save`\n\n2. Write this in index.ios.js / index.android.js\n\n```javascript\n\n'use strict';\nimport React, {\n  AppRegistry,\n  StyleSheet,\n  Text,\n  View,\n  TouchableHighlight,\n  AlertIOS,\n  Dimensions,\n} from 'react-native';\n\n\nvar {SKNavigator} = require('react-native-sk-navigator');\n\n// descript each type of navigation bar\nvar descriptions = {\n  none: 'no navigation bar',\n  simple: 'navigation bar has only left button which go back',\n  default: 'navigation bar has title, left button and right button',\n  transparent: 'navigation bar has title, left button and right button, \\n and its background is transparent'\n};\n\nvar Page = React.createClass({\n  render() {\n    return (\n      \u003cView style={styles.page}\u003e\n        {/* type */}\n        \u003cText style={styles.title}\u003e{'NavBar type: ' + this.props.type}\u003c/Text\u003e\n        {/* descript type */}\n        \u003cText style={styles.desc}\u003e{descriptions[this.props.type]}\u003c/Text\u003e\n        {/* back button */}\n        \u003cTouchableHighlight\n          style={[styles.button, styles.goback]}\n          underlayColor='#c8c7cc'\n          onPress={() =\u003e this.props.navigator.pop()}\n        \u003e\n          \u003cText\u003ego back\u003c/Text\u003e\n        \u003c/TouchableHighlight\u003e\n      \u003c/View\u003e\n    );\n  }\n});\n\n\nvar Home = React.createClass({\n  // push a new page and show different navigation bar according to type\n  showPage(type){\n    this.props.navigator.push({\n      type: type, // none / simple / default / transparent\n      title: 'NavBar type: ' + type,\n      component: Page,\n      passProps: {\n        navigator: this.props.navigator,\n        type: type\n      },\n      leftButtonIcon:require('./img/nav_left.png'),\n      // leftButtonTitle: 'back',\n      onLeftButtonPress: () =\u003e this.props.navigator.pop(),\n      // rightButtonIcon:require('./img/nav_right.png'),\n      rightButtonTitle: 'submit',\n      onRightButtonPress: () =\u003e AlertIOS.alert('Submit', 'Are you want to submit?', [{text: 'yes'}]),\n    });\n  },\n\n  renderButton(type, i){\n    return (\n      \u003cTouchableHighlight\n        key={i}\n        style={styles.button}\n        underlayColor='#c8c7cc'\n        onPress={() =\u003e this.showPage(type)}\n      \u003e\n        \u003cText\u003e{type}\u003c/Text\u003e\n      \u003c/TouchableHighlight\u003e\n    )\n  },\n\n  render() {\n    var types = ['none', 'simple', 'default', 'transparent'];\n    return (\n      \u003cView style={styles.container}\u003e\n        {types.map(this.renderButton)}\n      \u003c/View\u003e\n    );\n  }\n});\n\nvar test = React.createClass({\n  render() {\n    return (\n      \u003cSKNavigator\n        initialRoute={{\n           component: Home,\n           title: 'Home',\n           type: 'none',\n           passProps: {\n           }\n         }}/\u003e\n    );\n  }\n});\n\nvar styles = {\n  container: {\n    flex: 1,\n    backgroundColor: '#FFF',\n    justifyContent: 'space-around',\n    alignItems: 'center',\n  },\n  page:{\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  button: {\n    width: 100,\n    height: 40,\n    borderRadius: 5,\n    backgroundColor: 'yellow',\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  title: {\n    fontSize: 18,\n    fontWeight: 'bold'\n  },\n  desc: {\n    fontSize: 14,\n    color: 'green',\n  },\n  goback: {\n    marginTop: 10\n  }\n};\n\nAppRegistry.registerComponent('test', () =\u003e test);\n\n```\n![](https://raw.githubusercontent.com/shigebeyond/react-native-sk-navigator/master/demo.gif)\n\n##SKNavigator's properties\n\nAny [Navigator property](http://facebook.github.io/react-native/docs/navigator.html#props)\n\n##SKNavigator's methods\n\nAny [Navigator method](http://facebook.github.io/react-native/docs/navigator.html#navigator-methods)\n\n##Route's properties\n\n| Prop | Description | Default |\n|---|---|---|\n|**`component`**|Component to render in the next scense. |*None*|\n|**`passProps`**|Properties which will be passed to component. |*None*|\n|**`title`**|Title in the middle of navigation bar. |*None*|\n|**`leftButtonTitle`**|Title of left button. |*None*|\n|**`leftButtonIcon`**|Icon of left button. |*None*|\n|**`onLeftButtonPress`**|Callback when left button pressed. |*None*|\n|**`rightButtonTitle`**|Title of right button. |*None*|\n|**`rightButtonIcon`**|Icon of right button. |*None*|\n|**`onRightButtonPress`**|Callback when left button pressed. |*None*|\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshigebeyond%2Freact-native-sk-navigator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshigebeyond%2Freact-native-sk-navigator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshigebeyond%2Freact-native-sk-navigator/lists"}