jmurzy / react-router-native Goto Github PK

I'm trying to understand what is the difference between these components and what cases are suitable for each of them.
I have seen examples, but it's still not clear for me.

I've been attempting to write a custom Header Component on top of NavigationExperimental.Header, using a lot of this project's Header source as inspiration, but I've run into some trouble. I need a custom one because I need to be to include arbitrary elements and RRN's Header only appears to support text content.

In order to support arbitrary elements with a back button, I've written a BackButton component which wraps Pop:

export const BackButton = withRouter((props) => {
  // if (props.scene.index === 0) return null;

  return (
    <Pop underlayColor="transparent">
       <Text>back</Text>
    </Pop>
  );
});

The button works, but I can't hide it when there's nowhere to go back to because I don't have access to the scene unless HeaderBack (or its parent) gets it through NavigationExperimental's renderLeftComponent (or I add it to context in my Header component). This is doable, but feels hacky and makes the API for my custom header component a bit grosser. It also means that I wouldn't be able have a back button living in some arbitrary place in my app.

Having spent some time looking into it, I can see that scene and scenes are derived from navigationState. And unless I'm misunderstanding something, RRN's navigationState is stored within the component state of the NativeRouter component but is not accessible through the router object passed from withRouter. It also doesn't seem to be getting passed to the redux store for me, which I set up based on the docs.

It seems to me that the react-router-native should expose its navigationState in order to support use cases like this. Am I simply not seeing how to get at it, or was it a conscious choice to keep it hidden?

If you think it's a good idea and it hasn't already been done I'd be happy to make a pull request, though I'm not sure exactly how best to approach this. My thinking is to pass parts of navigationState to the redux store for users who choose to use an external store, and/or make it available through a getter on the router (along the lines of getCurrentLocation). I'm not sure I understand the relationship between router and NavigationState well enough to know if the latter makes sense.

Thanks!

edit: rewritten for clarity

This project contains components that are currently under active development and considered experimental. If it is something you can debug and fix, please consider submitting a pull request instead!

Version

Expected Behavior

To install with:

npm install --save react-router-native react-router

Actual Behavior

Installed but I had to also install the follow modules in local directory:

fbjs
query-string
deep-equal

npm install --save fbjs query-string deep-equal

After installing these extra modules react-router-native is working as expected.

Thanks!

What do you think about https://github.com/exponentjs/ex-navigation? Isn't it the better approach?Also, I'm not sure whether it makes sense to rely on RR3 when RR4 should be universal and entirely different.

React Native 0.32 changes the behaviour of NavigationHeader: it's not positioned absolutely anymore. We need to change the layout of styles.wrapper, similar to how its done in this UIExplorer example diff (just needs flexDirection: 'column-reverse').

This will break layout compatibility with RN < 0.32. Also existing layouts need to remove their padding/margin on their "Page" components which was used to pull them below the Header.

I have an app which has a dashboard that needs login and some other screens before enter.

The dashboard has a tabbed layout so I went and use the TabsRoute for the dashboard and children and a StackRoute for the other routes.

It works, but not that very well, This is the structure of the routes I have to make:

• Frontpage screens (StackedRoute, all with the same style)
  • Frontpage
  • Login
  • Terms and coditions
  • ... some other static screens
• Main content (tabbed, and some screens with a header)
  • Dashboard
  • Statistics and other tabs
• Settings (StacedRoute but different styles and headers than the frontpage one)
  • Settings
  • Options and some forms
• Others to define

Here is the code I'm working on:

export class Router extends Component {
    render() {
        return (
            <NativeRouter history={this.props.history} addressBar>
                <StackRoute path="fullscreen" component={Master} >
                    <Route path="/" component={PageOne} />
                    <Route path="/terms" component={Terms} overlayComponent={Header({title: 'Terms of Service'})} />
                    <Route path="/login" component={Login} overlayComponent={Header()} />
                    <Route path="/reset-password" component={ResetPassword} overlayComponent={LeftCancelHeader()} />
                    <Route path="/register" component={Register} overlayComponent={Header()} />
                    <Route path="/verify-mobile" component={VerifyPhone} overlayComponent={CancelHeader({title: 'Verify Mobile', cancelText: 'Close'})} />
                </StackRoute>
                <TabsRoute path='mainApp' component={TabsWrapper}>
                    <Route path="/dashboard" component={Dashboard} />
                    <Route path="/profile" component={Profile} overlayComponent={Header({title: 'My account', back: false})}/>
                </TabsRoute>
            </NativeRouter>
        )
    }
}

Now, the problem I'm having is that there is no way to navigate back to /terms from /dashboard and viceversa. The error says it Cannot pop(-1), the stack cannot be emptied, so it seems to be clearing the complete history before changing between Routes.

By the Aviato example it seems to be possible to do this without loosing history, but as my app has a variety of navigation schemas and styles, I splited it instead of making all of them inside a single route

Any recomendation on how to archieve what I want?

Thanks in advance.

react-native 0.27.0-rc breaks NavigationalExperimental API where NavigationCard removes PanResponder and StyleInterpolators from its public API.

See facebook/react-native/14eb427#commitcomment-17574628

🍺

where are the available functions on the router? Documentation?

How do I clear history? pop all?

Version

Expected Behavior

Navigating through tabs, then using the android back button to navigate to previous visited tabs

Actual Behavior

The app closes, as if we reach the last screen in the history, with the warning: Warning: Cannot pop scene

Steps to Reproduce

Inside a Tabsroute navigate some times between tabs, then try to go to the last tab by using the android back button

This project contains components that are currently under active development and considered experimental. If it is something you can debug and fix, please consider submitting a pull request instead!

Version

Expected Behavior

First of all, thank you for creating this library and sharing with the community.

We are migrating from the react-router-native-flux library. I have an IndexRoute in a TabsRoute that sets the initial active route, similar to an IndexRedirect from react-router.

const to = (value) => (nextState, replace) => replace(value);

...

<TabsRoute path={routes.default} component={TabBarNavigation} >
   <IndexRoute onEnter={to(routes.cart)} />
   <Route path={routes.cart} component={CartContainer} />
   <Route path={routes.shop} component={Shop} />
   <Route path={routes.account} component={Account} />
</TabsRoute>

The IndexRoute definition is working just fine, except I am seeing a warning:

Warning: An <IndexRoute> is not allowed for <TabsRoute>

Actual Behavior

I believe an IndexRoute should continue to work in this configuration, but with no warning.

Steps to Reproduce

See router configuration above.

Is this possible to mimic this screen transition (the fadein one) ?

Material design video

For of all, thank you for creating this library and experimenting with it. I really like the stated goals.
I've been dreaming of having easy deep linking in a native app for a long time ;)

Now, I'm trying to see how to handle modal screens (fullscreen or popups).

So far I've tried the following:

<Router history={nativeHistory}>
  <StackRoute path="master" component={Master}>
    <StackRoute path="master2" component={Master}>
      <Route path="/" component={Home} overlayComponent={HomeHeader} />
      <Route path="/detail/:themeColor" component={Detail} overlayComponent={DetailHeader} />
    </StackRoute>
    <Route
      path="/modal"
      component={Modal}
      transition="vertical-card-stack"
    />
  </StackRoute>
</Router>

It works partially:

• when I navigate to /modal, I get the correct behavior the first time
• if I go back and navigate again, the modal gets displayed twice quickly
• navigating to /detail/:themeColor animates the nav bar incorrectly

Also there's a warning displayed that says <TabsRoute> and <StackRoute> cannot be nested within <StackRoute>. So I know this wasn't intended to be done like this ;)

Is there another way to handle this?

I just saw this https://medium.com/@jschloer/react-router-v4-with-react-native-5f2005ab2a72#.u7xdfdcie

It seems that this project won't be useful with v4, not sure if that's already the case with v3 (I don't know RN yet, but I plan to port my RN-web app to RN, so I am investigating).

The Aviato example and the actual flow types defined for the Link component are pretty different. Currently when using the Link component the state, and onPress props are required, even though the values for them are optional. Leading to errors like this.

The source code for Link has a guard clause for onPress that doesn't try to call the function if it isn't provided, but it's a pain to have to provide the prop, even if it's null.

I think the flow type should have a question mark appended to the key in order to make passing that actual prop optional. Something like onPress?: ?Function. Is it intentional to have the the onPress and state marked as non-optional?

Side question: What exactly can go into state?

Hi, I am facing an issue with a fairly simple usage of this module. I am finding that after calling goBack() on the router it does not trigger a componentWillUnmount(). Here is my route configuration:

<Router history={nativeHistory}>
        <StackRoute path="master" component={App}>
            <Route
                path="/" component={ChatPage} overlayComponent={(props)=><DefaultHeader {...props} title="Home"/>}/>
            <Route
                path="/chat/:name/:id" component={RoomPage} overlayComponent={(props)=><DefaultHeader {...props} title={props.params.name}/>}/>
            <Route
                path="/other" component={OtherPage} overlayComponent={(props)=><DefaultHeader {...props} title="Other Page"/>}/>
        </StackRoute>
</Router>

What seems to happen is, if I use router.push() to go from path "/" to "/chat/:name/:id" I get a call to componentDidMount() and componentWillReceiveProps(). On calling router.goBack(), componentWillUnmount() is not triggered. If I go back to the exact same chat link then it will call componentDidMount() and componentWillReceiveProps() again.

Version

Moved question to facebook/react-native#8350

In our web project with React Router we use the following route config for our route /orders:

// ordersRoute.js

export default {
  path: 'orders',
  onEnter: ListController.onEnter,
  indexRoute: {
    component: ListController,
  },
  childRoutes: [
    {
      path: ':orderId',
      indexRoute: {
        component: SingleController,
      },
      childRoutes: [
        images,
        chat,
      ],
    },
  ],
};

/orders/ renders ListController, /orders/:orderId renders SingleController.
This pattern does not work when using this lib, failing with 'Failed propTypes: Required prop component was not specified in RouteView.' and rendering nothing.
I'd expect this library to match react router's behaviour of just rendering the indexRoute. Otherwise i'm forced to write it as follows:

// ordersRoute.native.js

const Wrapper = (props) => <View style={{flex: 1}}>{props.children}</View>;

export default <Route
  path='orders'
  component={Wrapper}
  onEnter={ListController.onEnter}>
  <IndexRoute component={ListController} />

  <Route path=':orderId' component={Wrapper} />
</Route>;

Where Wrapper just adds boilerplate.

Is this complaint reasonable? Or was our web route config "bad" to begin with? RR IndexRoutes documentation also supplies component plus an indexRoute component, which makes me thing we have it wrong anyways. But why would it work then without supplying a component?

I want to supply createElement to the <Router> to merge in props as documented here under createElement.
The behaviour is not as intended: RouteUtils::createNavigationTree calls createElement with RouteView, which passes the additional props to the RouteView component. This component in turn does not pass these additional props to the NavigationComponent it creates. I'm not totally sure how to implement this which is why i created an issue first.
I would assume that createElement should be called on NavigationComponent, not on RouteView. What do you think?

Requiring unknown module "history/lib/LocationUtils

error is coming. Kindly suggest

Reagrds
GM

This project contains components that are currently under active development and considered experimental. If it is something you can debug and fix, please consider submitting a pull request instead!

Version

Expected Behavior

Actual Behavior

Steps to Reproduce

A common UI pattern in iOS consists in putting the submit button of a form into the right navbar corner. I wonder how to implement this with this library. The submit button handler would need the local state of the form component in order to submit the form. This is not feasible when using overlayComponent and component.
The only -- awkward -- way I can imagine doing this is storing the local form state in a flux store, making it visible across components. Any ideas?

This tripped me up right now. I'd expect HORIZONTAL_CARD__STACK_, as the name implies. This also means that users of StackRoute won't get swipe back behaviour. Is this intended?

Hi!
Thanks for this awesome library!

I have image on background in my app.

const style = {
    image: {
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover',
    },
}

const Root = (props) => (
    <Image source={require('../assets/img/background.jpg')} style={style.image}>
        {props.children}
    </Image>
);

So, if I'm try to using <TabsRoute path="/" component={Root} transition="horizontal-pager">, then i have gray background instead image. I found in styles.js

navigationCard: {
    ...absoluteFillObject,
    overflow: 'hidden',
  },

Making this

navigationCard: {
    ...absoluteFillObject,
    backgroundColor: 'transparent',
    overflow: 'hidden',
  },

solve my issue.

Is there a way to override those styles?

Version

Version

Expected Behavior

I want to use redirecting behaviour like so:

const redirect = (from_, to, query = {}) => (nextState, replace) => {
  if (nextState.location.pathname.match(from_)) {
    replace({pathname: to, query});
  }
};

export default <Route
  path='/'
  onEnter={redirect(/^\/$/, '/orders/')}
  component={AppController} />;

This should redirect to /orders/ when visiting /.

Actual Behavior

Instead this fails with the following error:

When logging history at https://github.com/reactjs/react-router/blob/next/modules/createTransitionManager.js#L229 (this is where the error occurs) it shows that history has the following methods:

I'm not sure if this is an error of react-router or the interaction between this lib and react-router.

Steps to Reproduce

I can write a failing test when we have tests. :)

I wonder if it's possible to get stack traces for errors thrown via invariant.

I had to grep the source to see whats going on.

This project contains components that are currently under active development and considered experimental. If it is something you can debug and fix, please consider submitting a pull request instead!

Version

Expected Behavior

import { Route, StackRoute, TabsRoute, Router, nativeHistory } from 'react-router-native';
import { syncHistoryWithStore } from 'react-router-redux';
const store = configureStore();
const history = syncHistoryWithStore(nativeHistory, store);

Actual Behavior

It makes Error ~ Not Callable Module..

Without -- const history = syncHistoryWithStore(nativeHistory, store); --
<Router history={nativeHistory } addressBar>
It is working~~

Steps to Reproduce

I wonder if this is possible? While i am able to drag the left screen edge to the right i don't know how to hook into it so that i can pop(). Can't find any info on this.

Seeing a huge degradation in performance compared to AnimatedView. The performance hit seems to be greater in nested NavigationTransitioner.

See facebook/react-native@7db7f78#commitcomment-17602162, facebook/react-native@7db7f78#commitcomment-17590033, facebook/react-native@7db7f78#commitcomment-17575647

Update

Also see facebook/react-native#6466, facebook/react-native@65ccdff, facebook/react-native#8189#issuecomment-226902500

🍺

I have a regular Tabs interface, and I want to slide between tabs (this one works).
But when I click for example on a Topic in Topics Tab, I want to go in topics/:topicId with a horizontal-card-stack (this one is not working).

Am I doing something wrong ?

    <Router
      history={nativeHistory}
      addressBar
    >
      <TabsRoute
        path="/home"
        component={Master}
        onEnter={userIsLogged}
        transition="horizontal-pager"
      >
        <Route
          path="/"
          component={Topics}
        />
        <Route
          path="/favorites"
          component={Favorites}
        />
        <Route
          path="/profile"
          component={Profile}
        />
        <Route
          path="/more"
          component={More}
        />
      </TabsRoute>
      <Route
        path="/topics/:topicId"
        component={Topic}
        transition="horizontal-card-stack"
      />
      <Route
        path="/questions/:questionId"
        component={Question}
        transition="horizontal-card-stack"
      />
      <Route
        path="/login"
        component={Login}
        onEnter={userIsNotLogged}
      />
    </Router>

In both the usage example and the code example you have a top-level TabsRoute component having a path that doesn't appear to be part of the route, but is needed. In the code example I found that I could change the value to anything other than empty string and the code still worked.

What's going on here?

TabsRoute should implement two behaviours:

• it should save the state for each child route and restore it when switching tabs
• it should reset a child's state if that child is being navigated to twice

Given the following route config:

<Router>
  <TabsRoute path="/" ...>
    <StackRoute path="/foo" ...>
      <Route path="a" ... />
      <Route path="b" ... />
    </StackRoute>
    <Route path="/bar" .../>
  </TabsRoute>
</Router>

Visiting routes should lead to the following results respectively:

1. /foo --> show /foo
2. /foo/a --> show /foo/a
3. /foo/b --> show /foo/b
4. /bar --> show /bar
5. /foo --> show /foo/b (a tab route saves and restores its children's state)
6. /foo --> should reset stack of the child stack route and show /foo

Is integration with redux, in a sense of react-router-redux, on then table?

I'm currently using Navigator but the lack of HMR really slows down development.

Dependencies

Tested on iOS simulator

Problem

With alpha.4 the following route definitions animated correctly:

export default <TabsRoute
  path='/'
  onEnter={AppController.onEnter}
  component={AppController}>

  <StackRoute
    path='orders'
    overlayComponent={Header}
    component={Page}
    transition='horizontal-card-stack'>

    <IndexRoute
      onEnter={ListController.onEnter}
      component={ListController} />

    <Route path=':orderId' component={SingleController} onEnter={SingleController.onEnter} />
    {images}

  </StackRoute>

</TabsRoute>;

I redirect to /orders in the onEnter hook of the outermost route, so i start at /orders. With alpha.4 the page transition from /orders/ to /orders/:orderId animated correctly with an horizontal-card-stack transition. Updating to alpha.5 changes this behaviour: the transition is abrupt.
I suspect this has something to do with the changes in transitionRegistry? Any pointers or explanations? :/

Version

Expected Behavior

transitionTo should work.

Actual Behavior

It throws because routerState is an empty object. This makes the code routes.length - 2 in getActiveParentRouteType fail, because routes is undefined (destructured from routerState).

I suspect this has something to do with the recent refactorings?

By putting in some console.logs i've found out that syncRouterState is called after transitionTo, which explains why the routerState is still set to its initial value of {}.

Version

      'react-router-native': '2.0.0-alpha.4',
      'react-router': '3.0.0-alpha.3',
      'history': '3.2.1',
      'react-native': '0.32',

The invariant at ReducerUtils.js:333 throws a false positive for IndexRoutes (i think).
It wants a reducer and a transition for IndexRoutes, which is not the indended behaviour (i think ;)).

I fixed it like so:

    invariant(
+      key && path && type && (reducer || type === 'index') && (transition || type === ROUTE || type === 'index'),
-      key && path && type && reducer && (transition || type === ROUTE),

      'Incompatible route definition. Make sure peer dependecy requirements are met. If you are ' +
      'using plain objects to define your routes, in addition to the options required by React ' +
      'Router, each route has to specify the following: `routeType`, `reducer`, `transition`.'
    );

Is my reasoning correct?

I like how this project reuses react-router, and I think this is the right direction for true code sharing between native apps and web.
I want to open an issue for integration with react-router-relay as well.
I'm not sure if it would work out of box as is now, but I will play with it soon to see whether it needs some modifications.

We should add a new example that shows how to use the router with react-router-redux.

Update—

See react-router-native/docs#redux-support

🍺

One of the the primary goals of this project is to keep its API as close to react-router as makes sense. However, navigation on native platforms is a broader topic and we will probably have to introduce new concepts and options to accommodate for richer animations, the lack of hyperlinks, et al.

So far we've only introduced two additional router configuration components, <StackRoute> and <TabsRoute>. Also, two new props, overlayComponent and transition, have been added to ``` and its siblings.

We should also document how to create custom transition animations using the transitionRegistry. ⚠️

🍺

Coming from heavy react-router web usage, and being fairly new to react-native development, it's not entirely clear to me what the difference between the three types of <Route> objects are?

Hi everyone, what is the best way to change the icon in tabbar when the tabbar is active? With active style we can only change styles but cant change the icon

Hi, I'm using your package for an hybrid app working on both browser and mobile and I've discovered that this.props.router is undefined when on mobile when calling console.log(this.props) in the render method of a Route :
Using ReactRouter

Using ReactRouterNative

I've fixed the problem temporarily by using withRouter.

I'm using nativeHistory on mobile and browserHistory on browser

Think of typical social user relationships.
A user can follow other users.

URL for John: /user/john
URL for Mike: /user/mike

URL change sequence:
/user/john
(push to)
/user/john/followers
(push to)
/user/mike
(push to)
/user/mike/followers
(push to)
/user/john (CYCLIC)
(pop back to)
/user/mike/followers
(pop back to)
/user/mike
(pop back to)
/user/john/followers
(pop back to)
/user/john

Is this scenario possible with current implementation?

Hi, I'm having some issues with redux.

Version

Problems

By the current example:

import React from 'react'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import { Router, nativeHistory } from 'react-router-native';
import { syncHistoryWithStore, routerReducer } from 'react-router-redux'

import reducers from '<project-path>/reducers'

// Add the reducer to your store on the `routing` key
const store = createStore(
  combineReducers({
    ...reducers,
    routing: routerReducer
  })
)

// Create an enhanced history that syncs navigation events with the store
const history = syncHistoryWithStore(nativeHistory, store)

const routes = (
  <Provider store={store}>
    /* Tell the Router to use our enhanced history */
    <Router history={nativeHistory}>
      /* ... */
    </Router>
  </Provider>
);

AppRegistry.registerComponent('YourApp', () => () => routes);

It seems to work, but extraneously the Hot Reloading stops working (tho I'm not sure if it is related), anyways, that doesn't seems to be the correct code, the router line should be:

<Router history={history}>

Notice the use of the synced history instead of the native one, thats the correct usage, as copied from react-router-redux README

However, using it this way gives the error:
Cannot read property 'action' of undefined

from the line 115 in Router.js:

    if (nextLocation.action === HISTORY_POP) { 

please advice.

I think you forgot to include some files in your push. RN complains that It cannot find the app/routes folder. I took a quick look and I couldn't even find the app folder for the example!

This router looks nice!

Could you please provide some information about the differences compared to react-native-router-flux? Because router-flux is about the most used router until now I would say.

Is it only the API / Interface or does it have some other advantages or disadvantages?

From what I can tell:

• makes deep linking possible
• ???

EDIT: Also how do you see the status of this project? Is it production ready (because of 1.0 version)? Maybe you could specify a Roadmap with features that are about to come?

Thanks for working on this 👍

How would one go on about disabling the header right button?
The purpose is so one can enable the button when the form is valid and filled out and disabled when it isn't.

When changing routes and no animation is set, both the transitionFrom component and the transitionTo component are briefly rendered together.

This results in a UI that looks something like this:

Device:

| -- transitionFromComponent -- |
| |
| |
| |
| |
| |
| |
++++++++++++++++++++++++++
| -- transitionToComponent -- |
| |
| |
| |
| |
| |
| |

Currently there is no way to alter the default behavior of mergeState used by the default reducer. I'd like to explore ways to split mergeState into its modular blocks to make it configurable via a prop on route config. This will allow greater customizations on how <Link> behaves for a particular route. This would be especially useful for nested <StackRoute>'s where default action doesn't always produce the intended behavior.

const reducer = (
  state: EnhancedNavigationState, 
  action: NavigationAction
): EnhancedNavigationState => ({});

<Route reducer={reducer}>

🍺

Hi there !

I was noticing this behaviour in my TabsRoute ... Every time I switch between tabs (with <Link to="..."/>) a new view is pushed into the hierarchy and, of course, it's being kept in memory.

Am I doing something wrong ?

Thanks !

Added via this PR facebook/react-native#8471

Allows overriding things like the default card backgroundColor.

I have a use case where there are many routes that are shared across multiple tab stacks.

Example:

<TabsRoute>
  <StackRoute>
    <IndexRoute path="/friends">
    <Route path="/user/:userId">
    <Route path="/user/:userId/followers">
  </StackRoute>
  <StackRoute>
    <IndexRoute path="/me">
    <Route path="/user/:userId">
    <Route path="/user/:userId/followers">
  </StackRoute>
</TabsRoute>

/friends shows list of friends.
/me shows my account.
/user/:userId shows a profile of a user.
/user/:userId/followers shows a list of followers for a user.

Note that user can navigate to user profile and user followers from both friends and me tab.
They also share the same url pattern.
Since all routes are pretty much somehow connected to each other (think of Facebook app), almost all routes can be accessed from any tab stacks.

Desired behavior would be not to jump around between tabs, but stay in the current one if there is a matching route under the current tab, then push the matching route to the current tab stack.
Also, it would be nice if it can be done without copying common routes to each tab stack.