react-native-reflex-router v0.0.1

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
}