Nocturnally Psychologizing Millipede
Wondering what’s next for npm?Check out our public roadmap! »

react-native-reflex-router

0.0.1 • Public • Published

Trying to develop a more easy to develop react-native router:

  • Consistently use terminology throughout API:
    • scene to reference a base scene that houses the router-agnostic components.
    • router to reference object of scene manipulation actions.
  • Contain information within the scene that manipulates the properties of the navbar element's left and right actions.
    • This actions should be either objects, or null to indicate no button to be shown.
  • Do not pass too many props down from the router:
navigatorWrapper(sceneObj, navigatorObj) {
  
  return {
    scene: sceneObj, // reference to scene object
    push: (key, props, transition) => {
      checkSceneKey(key);
      // TODO: set transition from arg
      navigatorObj.push({key: key, ...props});
    },
  }
  
}
 
renderScene={
  (sceneObj, navigatorObj) => {
  
    // get router scene from state
   var routerScene = this.state.scenes[scene.key];
  
   // create router element
    var router = this.navigatorWrapper(sceneObj, navigatorObj);
  
   // render router scene and pass props
    return React.createElement(routerScene.component, {router: router});
    
  }
}
  • The scene properties should be able to be refreshed through a mapping similar to:
    • this.props.scene = this.state.scene with then a this.props.router.refresh,
    • or through a update method this.props.router.update({title: 'Route'});.
  • Limited number of components from react-native-mini-router:
    • Router, base component for controlling navigation
    • Scene, base scene to navigate to by key from router.[action](key)
    • Tab, when developing a scene with a tabbed view, the parent Scene component is passed a prop router.tabs.
      • If additional configuration is required the parent scene's component prop may be defined, otherwise, a generated stateful scene will be generated, with a tab component to tab the parents' tab children.
  • Refrain from setting scene specific information as router parent level:
<Router>
  <Scene key="dashboard" component={DasboardScene} initial>
    <Scene key="dashboard/timetable" component={DashboardTimetableScene} initial/>
    <Scene key="dashboard/events" component={DasboardEventsScene}/>
  </Scene>
  <Scene key="settings" component={SettingsScene}/>
  <Scene key="misc" component={MiscScene}/>
</Router>
  • Contain scene properties within the scene, not at parent level, (exception of route 'key'?)
class DashboardComponent extends React.Component {
  constructor(props) {
    super(props);
    // manipulate the scene of the current route
    this.props.scene = {
      title: 'Dashboard',
      ...
    }
  }
}
  • Optionally/additionally configure method of entry Navigator.SceneConfigs.<TransitionName> from router.<action> such as:
this.props.router.push('dashboard', {}, Navigator.SceneConfigs.FloatFromRight);
  • Scene props that are manipulatable:
this.props.scene = {
  title: 'Dashboard', // navbar title text string or component
  leftButton: {
    button: <Icon name="chevron-left" size={42} color="#FFF"/>,
    action: () => this.props.router.pop(),
  }, // navbar left button object
  rightButton: null, // navbar right button object or null
}

Install

npm i react-native-reflex-router

DownloadsWeekly Downloads

2

Version

0.0.1

License

ISC

Last publish

Collaborators

  • avatar