mikaelcarpenter / gb-native-router Goto Github PK

I think it's related to opacity animation. When I using left button component to route next page, in the beginning of the opacity transition animation, it seems like to re-render previous component like in a milisecs.

I digged deep into NavBarContent and I find out it's related to code block below. I commented out the block and it seems to work fine but I don't know if any complications are going to happen ^^
this.setState({ opacity: this.props.willDisappear ? 1 : 0 });

Unfortunately this module has fallen into unmaintainance.
As having a single author seems to be a bad single point of failure, I propose to move this to a new repository altogether, resubmit it to react.parts and NPM.

I propose we should update the description as well to denote that this is community maintained rather than individual maintained.

Naming wise, here is my suggestion:
react-native-universal-router

Votes?
Alternatives?

Also, we should define priorities about what to do in the new repository:

In order of importance, from my point of view:
!!!) Elect maintainers, I volunteer, who else?

1. Coding styles
2. Merge all pull requests/solve current issues
3. Future plans? Android support? Configuration of routes from within a route rather than from config from a parent only?

Is there any real reason why index.js contains a custom handler for when a user pan / drags / swipes a view in the Navigator?

The following is found in index.js line 110 and on.

    var didStartDrag = function(evt) {
      var x = evt.nativeEvent.pageX;
      if (x < 28) {
        this.setState({
          dragStartX: x,
          didSwitchView: false
        });
        return true;
      }
    }.bind(this);

    // Recognize swipe back gesture for navigation
    var didMoveFinger = function(evt) {
      var draggedAway = ((evt.nativeEvent.pageX - this.state.dragStartX) > 30);
      if (!this.state.didSwitchView && draggedAway) {
        this.onBack(navigator);
        this.setState({ didSwitchView: true });
      }
    }.bind(this);

The above code is completely unnecessary, since the Navigator itself handles the gestures through it's scene configurator. Is there a real reason to why the code is present or should I post a pull request to get rid of it?

To prove my hypotheses I've tried to disable the code without breaking any function. Please test more cases to check to see that I'm not mistaking.

Any support planned for this?

Hi there.

I was trying to install this module but I've received this errors:

I don't know what it is or how to solve it. I hope you guys can help me.

Thanks.

Can I change the NavigationBar from the actual component? I can't the NavigationBar being sent in the properties of the Component.

Awesome Router by the way

Thanks for maintaining this router, I find it much easier to use than Navigator. Is there a way to disable swiping to go back? Navigator did it by disabling gestures. Is that possible here? Thanks :)

...

If I import this module I get a white screen... i don't notice any errors... on the latest react native version. Broken?

Hi there.

I'd like to add to my app a button to go to the previous screen.

I'd like the same behavior as when I swipe right from the left side of the screen, which go back to the previous screen.

I don't know if that is possible. I hope I have explained it well.

Thanks :)

I followed the example code, and I get this:

Am I forgetting something?

I'm seeing a weird problem where if you try to toRoute to route that already exists in the route stack, route.component is just an empty object in the renderScene function, and the app crashes. Let me know if you want to see code example. Thanks.

Dear @MikaelCarpenter,

First of all thanks for this fork!

@t4t5's last commit to t4t5/react-native-router was June 11th. It is incompatible with the newer versions of react-native (as you're aware).

He's also incommunicado in general.

Don't you think it's time to publish this in the NPM registry for easier installation?

Hi, I already have my own topbar and I was wondering if it is possible to disable it in the router component, because my app looks like this:

http://puu.sh/k7qGI/8aabf3e6bf.png

Thanks.

Can we please release this to NPM?

Hi, I am not sure how to handle long titles, would be great to default to a maxNumberOfLines of 1 where possible.

What's the best way to deal with this?

Hello,

First thing, sorry if this question is a bit stupid, i'm really new to react.

I'm using this router inside a side-menu and i've some trouble to access the toRoute() props. after a post on stack-overflow (http://stackoverflow.com/questions/34156981/how-to-implement-routes-inside-side-menu-with-react-native) i was able to route with this.refs.router.refs.navigator.push (wow). but I've no back-button on router. I think i'm doing wrong and it should have a better way to do this. Any tips ?

More informations just here :

So, on the screenshot, imagine i've this function inside my menu component :

  nextPage: function(page) {
    this.props.NextPageClick(page);
    this.context.menuActions.toggle();
    if (this.props.onPress) {
      this.props.onPress(e);
    }
  },

I am using customAction to pull open a menu. That menu has buttons taht should open routes. There appears to be no method of calling a new route from the same area that the actual "Router" is called. This is a problem as it specifically states to use customAction={this.action} for side menus, etc.

How would I go about doing this?

@MikaelCarpenter , can you please merge the code and make a new release?
Thanks

I followed the example code, and I get this:

Am I forgetting something?

Currently - in the Navigator (located in the index.js of this component), the event that triggers the title change is onDidFocus, which means that the opacity transition (for the title & buttons to change) happens when the page has finished changing. In all iOS apps, this is not an expected behavior : The title and buttons must change when the page transition begins - thus changing onDidFocus by onWillFocus will allow for something that will appear more coherent.

PS: I'm also trying to figure our how to fade title and buttons according to the "swipe back" position and state, could you also look into it?

Cheers!

Hi there,

Since @MikaelCarpenter does not maintain this repo, please refer to the most updated version : https://github.com/react-native-simple-router-community/react-native-simple-router

Hi there,

I've been trying to do a login page, after user logged in, I push view to home screen but user can go back with backswipe or back button. Is there any way to block this ?

@MikaelCarpenter, really great additions to the original repository. QQ: is it possible to hide the navigation bar on a per-route basis?

It's really convenient and easy for me to use gb-native-router, compared with NavigatorIOS I used before. But the animation seems slow and not that native. See below:

Is it the normal speed of transition? Or just because of my code is slow?
Is there any way to speed up the animation?

This awesome component requires react-native 0.11.0, but 0.12.0 is already released and 0.13.0-rc is published.

Hi,

I'd like to inject a search bar in the navBar, is there a way to pass it components?
It would be great to be able to pass it onChange as a prop so that something can happen in the parent component.

Also is there a way to customise how much space it takes on the navbar?

I have 2 screens where the backgrounds are both black, but in the transition there's a flash of white where the initial scene gets replaced. Is there a way to either pass in a background color to the router?

Hi everybody.

I'm trying to do a Logout in my app, but when I try to back my first route I get this error:

index.ios.js:

<Router 
    headerStyle={ styles.header } 
    backButtonComponent={BackButton} 
    rightCorner={Search}
    firstRoute={ {
        name: 'Login',
        component: Login
    } } />

logout.js

this.props.nav.resetToRoute({
    name: 'Login',
    component: Login
});

Someone know why I get this error?

Thnks

Hello,

I am trying to use the router with redux, but I am stuck on a problem.
I have containers (top level components) that are passed on the component prop to the route.
On redux you have a component named Provider. This component exposes the application store to it's direct children via props.
The issue is that the Router is the children, and I can't find a way to make it expose this prop to it's children.
I could use passProp, but then I would need the store every time I trigger navigation.

Is there a way to do that and I am missing it?

render: function () {//how to pass store down?
    return (
      <Provider store={store}>
        {() => <Router
                firstRoute  = {mainRoute}
                headerStyle = {styles.header}
                rightCorner = {New}
               />
        }
      </Provider>
    );
  }

At https://github.com/MikaelCarpenter/gb-native-router/blob/master/index.js#L4 'events' module is required, but it is not listed among dependencies.

Should we need to add it or switch to 'EventEmitter' (facebook/react-native#1058)?

What are your opinions on having a blurred header?
Right now it seems like the only way to implement blur in React Native is to use the React Native Blur package. This would be really easy to implement in the router, with the downside being that it would require linking a binary to the Xcode project. There could be a possibility of doing this automatically via the Xcode CLI, which would only require the user to run a script after the installation.

Are you of the opinion that the positives overweigh the negatives and that a blurred NavBar would be a welcomed addition?

Please leave any opinions. I could implement it as well if it would to be appreciated.

Forgive me if this is quite simple, but I'm new to React.

I was trying this router, since it'll enable me to put a logo in the top bar. But the buttons for navigating to another page are rendered in an element called from a tabbar, and there's no this.props.toRoute or anything in there. console.log(this.props) or console.log(this) doesn't return anything referencing the Router.

So it works like this:

Router renders component TabBar
TabBar renders component ListView with buttons.

Router > TabBar > ListView

this.props... is available in TabBar, but not in ListView (child of child).

I've tried several ways, but wasn't able to access the Router from the ListView. While the same thing was possible with the default router (NavigatorIOS) via this.props.navigator from the ListView.

Hope this makes sense. Basically the problem is it's a child element of a child element.