pressly / scene-router Goto Github PK

1. Allow scene navigation through redux actions.
2. Provide a middleware that takes in configured routes and calls appropriate navigation methods. This allows developers to modify actions before hitting the middleware (e.g. authentication).

Similar to this: https://github.com/rackt/redux-router

Can be a separate project.

Throw Error below:

Bundling index.ios.js [development, non-minified, hmr disabled] 0.0% (0/376), failed.
error: bundling failed: "TransformError: /Applications/projects/routerDemo/index.ios.js: [BABEL] /Applications/projects/routerDemo/index.ios.js: Couldn't resolve extends clause of react-native/packager/react-packager/rn-babelrc.json in /Applications/projects/routerDemo/.babelrc"

https://github.com/pressly/scene-router/blob/master/lib/router.js#L6
I got error because file name is Area.js but router.js using 'area'

import { Area } from './area'

need to expose camera for further implementation such as one side menu and 2 side menus

If I navigate away from say, the Home page, then navigate to the Home page (but without going back), I'm rendering a fresh view of that page. While we have the ability to pass props to the Home page on the second render, its very likely that the component we're navigating away from won't know the Home page's original state/props.

Is the only way around this preserving the Home page's state somewhere else and then passing that state as props to re-populate the Home page on the second render?

if option clearHistory passes, then all previous scenes will be destroyed after animation is done.

At the moment, I'm using Cycle-React with scene-router and while that's introducing a few issues on its own (mainly having to do with passing global state as props to any and all scene-rendered components), this issue is about there not being an ability to add hooks to any transitions.

For example, I wouldn't want a user to go to their profile page if they weren't logged in. Right now, I'm having to write my own wrapper around the getScene function that exposes new goto methods that will intercept those calls and make a decision about where to route based on their authenticated status.

Is there an easier way to do this? Is this what onSceneChange is for?

How can we use this lib without decorator? can you please provide small code example?

can i use goback and goto in children components?

Lets say I have two top level scenes:

• Welcome
• Categories

I want Categories to be a component with a navigator. Sub scenes of Categories should be handled by the Categories component, but should still be understood as scenes by the router.

• Welcome
• Categories
  • Trending
  • Top
  • New

How can I do this? Based on how this router works (it replaces each scene entirely with it's child when navigating through sub scenes) I was thinking I could specify that a scene and it's sub-scenes all use the same component, and I could pass props into each of the children, like so:

<Scene initialPath="/categories/trending" style={styles}>
  <Scene path="welcome" component={Welcome}/>
  <Scene path="categories" component={Categories}>
    <Scene path="trending" component={Categories} initialProps={{ page: Trending }}/>
  </Scene>
</Scene>

Perhaps that's logical, but the Trending component never receives the initial props anyway, so this isn't a solution I can use.

Issues with react-native 0.16.0-rc

• Components with opacity: 0 prevents click throughs. (happens on 0.15.0)
• Cannot touch through <TouchableWithoutFeedback/> (happens on 0.15.0)

  • This is probably because transparent components no longer allow touch throughs

      <View style={{flex: 1}}>
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
          <TouchableOpacity onPress={() => console.log('content pressed')}>
            <Text>You can try to press me but it will not work!</Text>
          </TouchableOpacity>
        </View>
        <TouchableWithoutFeedback onPress={() => console.log('overlay pressed')}>
          <View style={{ backgroundColor: 'transparent', position: 'absolute', top: 0, left: 0, bottom: 0, right: 0 }}/>
        </TouchableWithoutFeedback>
      </View>
    

Issues with Android

• Components always have overflow: 'hidden' and this property cannot be changed. This means that components with position: 'absolute' need their parents to have dimensions or else they will not be shown.

Currently the duration of a slide transition is set to 2 sec. https://github.com/pressly/scene-router/blob/master/lib/camera.js#L222 It would be nice to have an option to change this value.

P.S.: Keep up for your great work of building scene-router!

The component looks very clean and simple.

But how are you guys managing the navbars that are implicit in a mobile app ?

Hello,

This library seems interesting... I was wondering If you could provide and example for an App that uses TabBar where each Tab has it's own navigation stack and have a way to control the navigation stack of each tab.

Is it possible?

Thanks,
Ran.